top of page

City Sprouts

​To increase awareness about food sustainability
through a revamped website.
Mockup 1.png

Project Overview

City Sprouts is a social enterprise started in April 2019, inspiring communities to connect to food and their community and build a more sustainable society through sprouting green spaces and programs.
 

For our first student group project at General Assembly, we were tasked to redesign the website of City Sprouts.

Duration

October 2022

(5 Weeks)

People

Team project: Rachel (me),

Xiu Hui, and Chloe

Skills

User Research, Prototyping, User Testing

Tools

Pencil and paper and Figma

Problem

Singapore imports more than 90 per cent of our food. The aim is to increase local production to achieve a "30 by 30" goal: to build up our agri-food industry's capability and capacity to produce 30% of our nutritional needs locally and sustainably by 2030, up from less than 10% today.

​

Insights from our User research revealed a lack of awareness of food sustainability in Singapore, and most users could not tell that City Sprouts is a social enterprise.

Solution

Our team has decided to redesign the City Sprouts website to increase awareness of the benefits of locally produced food and the social/environmental impact of food sustainability.

​

Critical features of City Sprouts include:

Green BG.jpg

Revamped Home Page

The new home page has summary information about City Sprouts and the services provided.

Revamped Homepage.png

Engaging Storytelling

A short animation slideshow will help to spread awareness about the impact of the food situation in Singapore.

Engaging Storytelling.png
Green BG.jpg

Interactive Information about benefits of food sustainability in Singapore

An interactive scroll effect will help to keep the users' attention.

​

The information is given in a short summary for better memory retention and less chance of users skipping text.

Benefits of Food sustainability.png

Mascot Element

A 'baby face' mascot helped to gain users' trust and increase user engagement when the text is 'spoken' to them instead of just written as a chunk of text.

Mascot Element.png

Process

Our team has decided to do market research on food sustainability in Singapore.

We discovered that Singapore imports more than 90 per cent of our food. The aim is to increase local production to achieve a "30 by 30" goal: to build up our agri-food industry's capability and capacity to produce 30% of our nutritional needs locally and sustainably by 2030, up from less than 10% today. 

 

We also conducted user interviews to understand better their perception of food sustainability and usability testing for the existing City Sprouts website.

 

​Insights from our User research revealed a lack of awareness of food sustainability in Singapore, and most users could not tell that City Sprouts is a social enterprise.

​

Source

Competitive Analysis

Our team has conducted a competitive analysis of NGOs in Singapore and globally to understand how the storytelling has been structured on the platform.

Competitive Analysis Findings

OPPORTUNITY #1

Implementing interactive storytelling elements for "About Us"

The competitors of City Sprouts have a storytelling element. This feature is essential because it is crucial to let the users know how City Sprouts has started. This is an opportunity for us to implement this feature for our users.

OPPORTUNITY #2

Showing the impact of why advocating the cause is important 

We realised that City Sprouts is currently lacking in spreading awareness of the impact of food sustainability in Singapore.

User Research

To revamp the web page better, we first need to understand users’ attitudes toward food sustainability and Social Enterprise in Singapore. We also conducted usability testing of the existing web page for the users. Each of us has conducted three user interviews.

Findings from the User Interviews

INTERVIEW INSIGHT #1

Users think that a social enterprise website should be educational

Users expect Social Enterprise websites to provide educational content that helps them to understand why they should support the cause.

INTERVIEW INSIGHT #2

Users think that a social enterprise website should promote its branding and products effectively to consumers

Users expect Social Enterprise websites to effectively promote their branding, product and services provided for them because they are interested in learning what's in it and the story and values behind the brand. 

INTERVIEW INSIGHT #3

Users feel that a specific targeted group is interested in food sustainability/growing their food

A few users are interested in food sustainability and growing their own food. They are motivated by a desire to adopt more sustainable and healthy lifestyles and see growing their own food as a way to achieve these goals.

INTERVIEW INSIGHT #4

Users think there must be more awareness of the benefits

of locally produced food

Users believe there must be more awareness of the benefits of locally produced food. They are interested in supporting local farmers and businesses, believing that locally produced food is fresher, healthier, and more sustainable than food shipped from other countries.

Refining Our Users

With our findings, we defined two target group profiles, Anderson—a 25-year-old Software Engineer and Joanne—a 27-year-old Graphic Designer, to better empathise with our main user groups and prioritise goals according to their needs and pain points. 

Joanne.jpg
Anderson.jpg

Ideation

In this process, we went through several rounds of rapid sketches creating ideas on paper quickly to ideate solutions using the "crazy 8" method.

​

The "Crazy 8" method

Crazy 8.jpg

Userflow

Next, we drew a user flow for Joanne and Anderson on the FigJam to ensure that it aligns with their needs and goals.

​

User flow diagram

User Flow Diagram - Joanne.jpg
User Flow Diagram - Joanne part 2.jpg
User Flow Diagram - Anderson.jpg

Wireframe

Afterwards, we proceed to do lo-fi wireframing on Figma.

​

Wireframe (PDF)

High-fidelity Prototyping

Once we finalised the wireframes, we produced a high-fidelity prototype. We used Figma to create its flow and the interaction 

Prototype-before iteration.jpg

User Testing

With the high-fidelity prototype, we conducted usability testing on six participants. The objective is to test the following:

  • If the participants can take away some knowledge about food sustainability after visiting the website​

  • If the participants are keen to take action to support food sustainability
    efforts in Singapore

  • If the participants understand the goals and motivations of City Sprouts
    as a social enterprise

  • If the participants can book City Sprout's workshops easily without any errors

User Testing Results

The participants can complete most tasks and feel they are well aware of the food sustainability situation in Singapore. They can play a part just by supporting the local farmers.

USER TESTING RESULT #1

Participants can identify that City Sprouts is a website promoting food sustainability by conducting workshops and renting green spaces/plots

They recognised that the website offers workshops and rents green spaces/plots and saw these services as promoting sustainable and healthy food practices.

USER TESTING RESULT #2

Participants can locate the “Education” page and learn more about Singapore’s food sustainability efforts

Participants can locate the "Education" page on the website and learn more about Singapore's food sustainability efforts. They recognised the importance of education in promoting the efforts made by the Singapore government and appreciated the information on the website.

USER TESTING RESULT #3

Participants can book the workshops easily without any errors

However, some participants expressed that they did not know the buddy system, there was no back button on the workshop information page, and they were unsure if they had reached the end of the main workshop page. I also noticed that none of them has utilised the calendar function.

Iterations

Based on the user testing results, we made a few adjustments to improve the final prototype for City Sprouts.

ITERATION #1

Usability Issue 1.1

The design for the animated slide show was iterated by adding the "Next" and the close button so that users would not miss out on the information about food sustainability.

Before

education impact before.jpg

After

education impact after.jpg

ITERATION #2

Usability Issue 1.2

The style of the button was changed to make it more obvious that it was clickable.

Before

Education before.jpg

After

Education after.jpg

ITERATION #3

Revamped UI of the Events & Workshop

The page number is added inside so the user will know if they have reached the end of the main workshop page. The calendar function was removed as most users never used the feature. It was replaced with a breadcrumbs feature so users could go back and forth on the page.

Before

Event & Workshops before.jpg

After

Event & Workshops.jpg

ITERATION #4

Additional information for the buddy system

The information about the buddy system is added to the workshop information page. So that users will be able to access the information easily in case they do not know how the buddy system works.

Before

buddy system before.jpg

After

buddy system after.jpg

Reflection

I love this project because I get to work with my classmates. The topic of the project is interesting because we get to learn what food sustainability is. All of us had zero knowledge about food sustainability. One of the main challenges was trying to understand the topic better and getting a misconception that NGOs and Social Enterprises are the same.

I'm glad we (the team) could communicate with one another because this is something I value the most, as my current job involves lots of communication. I also feel that as a UX Designer, doing research is essential because it's the key to solving the root of the problem. 

The Outcome

Try out the high-fidelity prototype now!

Mockup 1.png

Let's Connect!

©2023 by Rachel Tan Sze Yun.
bottom of page