Fruity Schools Africa - Develop for Good

DURATION

January 2024 - February 2024
6 weeks

TOOLS

Figma

TEAM

Shraavasti Bhat
Emily Gao
Jiani Huang
Vivian Lee

Umika Mathur
Rachel Tan
Laura Wu
Julius Nguyen

CONTEXT

Throughout the Winter 2024 project season, Develop for Good partnered me and my team with Fruity Schools Africa to redesign their user interface. Fruity Schools Africa is a registered non-governmental organization based in Kenya. They cultivate export-grade quality fruit trees in various public spaces—such as primary and secondary schools, health centers, and public parks. However, their website lacked crucial features and information, undermining the organization’s mission: making it simple for anyone and everyone to help the environment by planting and growing fruit trees in selected public spaces.

How do we redesign the website to be more responsive and intuitive, providing a hassle-free experience to match the client’s and visitors’ needs?

ADAPTING

Since I joined my Develop for Good team in the middle of the project timeline, I utilized our project documentation and communicated with our Project Manager to ensure I fully understood where our team was in terms of scope and tasks needed to complete.

COMPLETED

TO-DO

✔ User research
✔ User personas
✔ Task flow

✘ Site map
✘ Wireframing
✘ Prototyping

I was initially nervous, especially since I was entering an already established team and had to quickly familiarize myself with the project. However, reaching out to the Project Manager helped me to be more comfortable with my team and have a better sense of what to expect with the rest of the project timeline.

FEATURE IMPLEMENTATION

Our client requested the implementation of three new features to increase user engagement:

CARBON CALCULATOR

CHAT FUNCTIONALITY

BLOG/EVENT POSTS

-Communicate the impact carbon usage has on the world
‍
- Encourage users to donate and combat against carbon emissions

- Allow users to ask questions about donating, partnerships, and general information

- Communicate with users interested in organization

- Enable users to view community events and educational resources

- Foster community and collaboration

With these features in mind, we created a new sitemap to optimize website navigation with an emphasis on a flat structure and options in each level. With users having a natural incline to scroll—as opposed to selecting from a large array of options—we chose this structure for easier understandability and navigation of content.

Of the three features, I focused on helping to implement the carbon calculator and chat features. With the carbon calculator, we initially struggled with ideating how the calculator would function in the website. Our team lacked prior knowledge of carbon calculators, leading us to formulate questions to aid in our research to help create a functioning system.

QUESTIONS WE HAD

How would carbon consumption be calculated?
‍
How do we allow users to interact with the calculator/what will users input?
‍
How will users be encouraged to donate/be more wary of carbon emissions?

We referred to the original requirements—and nonprofit goals—which emphasized the importance of planting trees to offset carbon emissions. Connecting this idea with the carbon calculator, we decided to calculate the amount of carbon saved based on user-specified donation amounts. This allows users to truly grasp and quantify how much of an impact they make when donating, which also acts as an incentive to donate.

High-fidelity mock-up of carbon calculator

With the implementation of the chat feature, we know we wanted the feature to be accessible from any page of the website. This allows the user to easily have any question answered if they are scrolling and come upon a section they want more information about. However, we quickly ran into a problem: the location of the feature.

Conducting our own competitive analysis with chat features of various websites, we observed a majority of websites made their feature accessible from the bottom right corner. This clashes with Fruity Schools Africa's initial design: consisting of a "To the Top" button in the same corner. This button was implemented for easy accessibility to the website's navigation bar—which is not fixed to the top of the screen like a traditional navigation bar.

Comparison between "floating" (original) and traditional navigation bar

We considered adding the chat feature to the navigation bar, but reminded ourselves of our original site map—in which we opted for less pages on the navigation bar for easier understandability. Thus, we compared our options of a chat button with a fixed navigation bar and chat feature embedded in floating navigation bar.

CHAT BUTTON

CHAT IN NAV BAR

✔ Accessible from any page

✔ More user-oriented/easier to find

✔ Fixed nav bar = Easier to navigate through site
‍
✘ Users need to scroll to top

✔ "To the Top" button allows user to immediately go back to nav bar

✔ All page options and chat available in same place

✘ More options in nav bar = cluttered, harder to find

✘ More steps to access live chat

After deliberation, we were able to come to the consensus of replacing the "To the Top" button and floating navigation bar with a chat button and fixed navigation bar in order to make the site easier to use. We realized a fixed navigation bar would also better the site, since the user would need less steps to navigate to a new page.

We then continued into our high fidelity prototype, compiled a case study presentation for Develop for Good’s Demo Day, and prepared our project to be handed off at the end of our project batch.

REFLECTION

Throughout my 6 weeks with my first industry-level team, my biggest takeaway was the importance of communication—no matter how big or small. With members of my team being from all over the world, I quickly realized how crucial it was to take the initiative when reaching out to others while also ensuring all necessary information is being communicated. With response times being difficult to coordinate, I learned to include necessary context in my messages and to always make sure to communicate what my responsibilities were—and complete them on time—so others constantly knew what I was working on.

Overall, this opportunity really gave me a bigger insight as to what industry-level work is like and I am glad to have experienced it with my team. Thank you to Develop for Good for accepting me for the Winter 2024 Project Batch and to my team for providing me such a good learning experience.

Check out the full prototype:

Fruity Schools Africa Redesign