City Sprouts

PROJECT OVERVIEW

For the first group project in General Assembly, our group was tasked to analyze and redesign a social enterprise website, City Sprouts. During the four weeks, we collaborated on the groundwork and user research, ideation, wireframing and prototyping. At the end of the project, we did a usability test to assess the effectiveness of the website to create an impact on users.

People:
Hamburg Studio
‍Xiuhui (Me!)
Rachel
Chloe

Skills:
‍Evidence-based research, User research, UX writing, Low-fi wireframing, Prototyping, Usability test

Duration:
‍4 weeks
(November 2022)

ABOUT CITYSPROUTS

City Sprouts is a social enterprise that was started in April 2019, with the mission to rejuvenate urban spaces and develop educational programs. They are committed to redevelop multiple urban spaces with community-driven programs and workshops that will help to nurture a community that are interested in food, agriculture and sustainability.

THE PROBLEM

During our user research, we conducted user interviews to understand the users' first impression when browsing the City Sprouts website. Many of the users commented that from the homepage, they could not tell what City Sprouts is about and did not realize that it is a social enterprise.

Thus, we gathered that although the current homepage is clean and easy to navigate, it lacks the storytelling element of what City Sprouts is about and why was it started. It also lacks the information to educate and convince users about the importance of food sustainability and inspire them to take actions.

City Sprouts' current homepage design focuses mainly on its events & workshops

THE SOLUTION

To create a more impactful impression on users, our team decided to focus on the educational features of the website to increase awareness of food sustainability. We also redesigned the webpage, maintaining the clean design of the current website, but adding a "Who We Are" summary at the top and information about the importance of food sustainability at the bottom of the homepage.

Redesigned homepage:

Educational features added:

1. Animated Slideshow
Nothing leaves a stronger impression than using visual imagery!
‍With the picture superiority effect, the images are more likely to be remembered than words.

2. Interactive scroll element
Scroll and follow Singapore's journey towards food sustainability!
Information are given in short summary for better memory retention and less chances of users skipping text.

3. Mascot for personification of brand
"You can play your part to support locally farmed produce!"
Personification of brand makes it easier to resonate with users and text are “spoken” instead of just written as chunk of text to increase user engagement.

Groundwork Research

As our group members are not familiar with the topic of food sustainability, we decided to do some basic groundwork research before starting on the project.

We gathered information about the importance of food sustainability and focused our research on Singapore's goals and efforts towards being food sustainable. Having a greater understanding of the topic allowed us to appreciate what City Sprouts is trying to promote and be more motivated to convey our learning to other users through their website.

The main insights that we want to convey to our users:

Climate changes and its effect on food production: By some estimates, in the absence of effective adaptation, global yields could decline by up to 30 percent by 2050.
Singapore's food sustainability goals: To produce 30% of our nutritional needs locally and sustainability by 2030.
The benefits of supporting local produce: Choosing locally-farmed produce is more sustainable as it reduces your impact on the environment, and supports our food security and economy.

User Research

Empathize

We conducted 8 user interviews to find out users perceptions of food sustainability and their impression of City Sprouts’s current website.

Our goal is to find out what users like and dislike about the current website and to find out their level of understanding of food sustainability.

Some of the main insights gathered were:‍‍

"I like that the website is easy to navigate but I could not tell that it is a social enterprise."

"I feel that there is a certain targeted group that is interested in food sustainability/growing their own food"

"I think there must be more awareness for the benefits of locally produced food.."

Defining User Needs

Define problems

From our groundwork and user research, we found out that users:

Hence, we decided that the redesigned website will need to:

Are unsure of what City Sprouts is about and what it is trying to advocate
Are familiar with the concept of food sustainability but are not aware of Singapore's efforts towards being food sustainable
Do not know how to grow their own food and are not sure of what they can do to contribute to food sustainability

Have a clear storytelling of what City Sprouts is about
Provide information about Singapore's efforts towards food sustainability
Convince and motivate users to take actions and contribute to food sustainability

Design Studio

Ideate

To get as many ideas as possible, our team planned a Crazy 8 design sprint exercise using Figma to quickly gather ideas.

Each of us tried to sketch as many ideas as possible in eight minutes. After sketching, we had a mini-critic session to decide which was the best and what features we could combine from our different solutions.

Low-fidelity
Wireframes

Ideate

With the basic sketches and ideas in mind, we then created low-fidelity wireframes. Our team decided to prioritize website functionality before moving on to the visual appearance by creating low-fidelity wireframes.

This approach made it easier to make changes as we needed to edit each other's wireframes to ensure consistency across pages and avoid a disjointed design

Solutions - Education features

Prototype

Animated slideshow to provide short information about the global food situation
Interactive scroll element to learn about benefits of food sustainability
Mascot for personification of brand to resonate with users and encourage them to take action for food sustainability

Our prototype focused on showcasing our main solution which was adding education features to City Sprouts website to address the problem of users not perceiving City Sprouts as a social enterprise. The main features are:

Usability Test

Quantitative & qualitative test

With the high fidelity prototype, we conducted usability tests on 5 users to test the impact of the redesigned website.

Qualitative questions (i.e What are your takeaways after visiting the website?) were asked to test if there were any changes to users' knowledge about food sustainability and their understanding of Citysprouts.

Quantitative tests were also conducted to ensure users are still able to book the workshops without any error with the redesigned website.

Main insights gathered:

5/5 users were able to book the workshop without any error
Users are able to identify from the homepage that City Sprouts is a website that promotes food sustainability, by conducting workshops and renting green spaces.
Users are able to locate “education” page and gain more knowledge about Singapore’s effort towards food sustainability.

Iteration

Implementing the changes

However, the users also faced some issues with the prototype during the usability test. After a team discussion, we made some changes to our prototype to resolve the issues.

Before
Animated slides automatically transit to a new slide and some users found it too fast.

After
Addition of a "Next" button to allow users to navigate to a new slide only after they are done with current slide.

Before
No end-of-page indication for the workshops page and some users commented that do not know if they reach the end

After
Addition of numbered pages at the end to signify the end of the page

Mobile breakpoint

Implement

Besides the desktop version, our team decided to create the prototype for the mobile breakpoint as well.

We think that some users might be accessing City Sprouts with their mobile as well, especially since City Sprouts have a very active instagram page and many users would be directed to their webpage through instagram.

Final prototype

Implement

At the end of the four weeks, our final prototype was born.

Try out our newly designed City Sprouts and we are very confident that you will learn some new knowledge about food sustainability that you never knew!

Click here to view prototype

Reflection

What went well and what can be improved

To be honest, when our team was first tasked to redesign the City Sprouts website, all of us were daunted and did not know how to start. We had almost zero knowledge about food sustainability, so how could we redesign a website that was based on that?

However, the eureka moment came after we did a thorough research about food sustainability and found out about Singapore’s effort and the impact of food sustainability. That's when we truly understand the mission and vision of City Sprouts and became more motivated to improve the website.

I am immensely pleased at our final prototype especially during usability test when users told us about the new knowledge they have learned!

However, if given more time, there are some things I would have done differently:

Designing a mascot that truly represent City Sprouts i.e a girl with green fingers? :)
More interactive elements for the animated slide show

At the end of the day, I am glad that I did the project with my teammates who are all very collaborative and helpful. It was also a very enriching project as I also learned new knowledge about food sustainability that I would not have researched if not for this.

Looking forward to the next project and all the new things I get to do and learn!

CITY SPROUTS

Redesigned homepage:

Educational features added:

Process Overview