UX Design
Foodwise (CUESA): Cultivating Better Habits through UX
Foodwise (formerly known as CUESA)
-
Content Strategist and UX Designer
-
A conceptual 2 week design sprint
-
Figma, Miro, and G Suite
Overview
Foodwise (formerly CUESA) is a Bay Area-based nonprofit focused on helping people make healthier food choices and build better habits for the future. They host farmers’ markets in the bay area as well as give their audience helpful information about how they can change and what they can do. Their goal is to help everyday people develop habits to reduce their personal food waste that goes into landfills. COVID-19 has impacted our lives in many ways by turning normal activities into monumental tasks. Simple activities like organizing your trash and recycling have become a lot harder.
Challenge
We found that users of the current website had a hard time locating the information related to food waste. They had a hard time using the navigation as it was not consistent throughout the entire journey. Most either did not find it or went to the footer to find a path to the information they wanted. The whole site is also focused on farmers’ markets and doesn’t leave much room to showcase the amazing information they have about helping the environment through the act of reducing their food waste impact.
Proposal
Our solution to this problem is a redesign of the site focused on improving navigation throughout the entire site, including global, local, and footer navigation. Reorganizing the way content is displayed and found. Foodwise (formerly CUESA) has a great selection of content, but it is not easily accessible to its users, especially during the times of COVID-19. Focusing on the navigation and content strategy will enable more people to become return users of their site as well as increase the impact they have on improving people’s lives and habits.
See what we are working with . . . [usability test 1]
We started by testing the current site to determine where the users had the most issues. We conducted our first round of usability testing with four testers who tried both the desktop and mobile experience. Through our testing, we concluded that most users were unsure if they had found the correct information and were confused about where to start the journey.
Home page
Navigation was confusing to most of our users
The layout and how it was displayed was not similar to the experience they had before
It was not easy to see where to go (sustainability page)
The carousel banner was only highlighting information about farmer’s markets and events
At first glance, this page is very busy and has many objects competing for our user’s attention
Sustainability page
The breadcrumb trail is incomplete here
it shows a path from home to learn, but it stops there; it does not have any indication about the sustainability page
The selection of articles shown is very minimal. CUESA has a large variety of content, and much of it is not being shown. Users were unsure if these were related to food waste.
Article page
The breadcrumbs are lacking and confusing
It goes from home to learn but does not show the sustainability page
The recent articles have nothing to do with food waste. This was a place were users were confused as to why they were being shown unrelated information.
Checking out the Competition
CUESA is a Bay Area-based nonprofit, and because of that, we looked outward to see how other nonprofit organizations are using strategies to engage their users. We looked at three main topics how they showcase information on their homepage (banner), the structure of their content, and how they used their navigation to give users a path through breadcrumbs to see how they got to certain information.
We looked at Urban Tilth, Room To Read, and East Bay SPCA.
The Conscious Consumer
-
The conscious consumer lives in the city during COVID-19 and working from home because of shelter-in-place. Because of this, they now eat all their meals by cooking or ordering takeout.
-
To learn about how to create a better routine for their food waste
To feel like they are positively contributing to the environment
Taking action
-
Very likely to finish meals and save leftovers to eat later to reduce food waste
Mindful when buying food: expiration date, packaging, reusable bags
Like to sort trash by trash, recycle, and composting
-
Information not easily accessible
Does not know where to turn for helpful resource tips specific to food waste practices that can be done at home
The Right Path [user flows]
After understanding who our conscious consumer was, the next step was to understand the user’s path through user flows. Narrowing it down to two main tasks that align with both CUESA and the conscious consumer’s needs. We used Whimsical to map out the users’ most natural path to accomplish these tasks.
Task one was to locate information about food waste. To be able to move from the home page to the article page related to food waste.
Task two was to locate information about farmer’s markets and how they have adapted during COVID. CUESA’s main focus is to educate and help communities grow through food. They hold farmer’s markets in three locations in the Bay Area.
-
Survey Says . . .
Taking our insights from round one of the usability tests and our secondary research of other nonprofit organizations, we compiled questions for a survey to better understand our users’ understanding of CUESA’s mission and their knowledge about food waste. This survey helped us understand who CUESA’s target users were, and using the data, we affinity-mapped the responses using Miro. This leads us to solidify our target user, the Conscious Consumer.
-
Reorganization & Restructuring
Finally, we tackled the site map and content structure/strategy of CUESA’s website. As mentioned, one of the main issues the user faced was not knowing where to go from the navigation and not having relevant information on the food waste-related pages. So, we restructured their navigation to bring attention to the sustainability section of the navigation and changed the order of the rest of the navigation. Then, we focused on what relevant information concerning food waste should be on the sustainability page concerning food waste. None of the content was discarded; instead, it was relocated as CUESA had fantastic content, but it was hidden because of poor navigation and content structure.
Teamwork makes the Dreamwork
-
home page
-
sustainability page
-
article page
Testing & Polishing our Design [usability test 2]
Putting all our ingredients together, we cooked up our redesigned prototype using Figma to work together collaboratively. Then, I tested the low-fidelity version with our group of testers from our first round of usability testing. We learned that the experience improved, but there were still places we could improve in terms of the page structure and how many ways they could reach the sustainability page's end goal. Moving relevant articles to the sustainability page helped users feel a sense of accomplishment that they were on the page they were looking for. Gathering our insights from our second round of testing led us to create our high-fidelity prototype, integrating what we learned from our users.
From our second round of usability testing, users found the redesign to be easier to look at and digest, unlike the current home page, where the page is very busy and hard to follow.
-
The navigation is now clear and visible. It follows website navigation conventions, and from our usability test, the users found it similar to the experience online.
Some users went straight to the carousel banner highlighting an article about food waste. This gave our users multiple paths to achieve their task of finding information about food waste.
-
Foodwise (formerly CUESA) already has so much fantastic content, but it is not being appropriately showcased.
Our users found that when they got to the sustainability page, they had a positive response, as there was a much more extensive selection of articles related to food waste and sustainability.
-
It was much easier for users to see how they got to this page
There is now a complete breadcrumb trail from the home page to the final article page about “12 Tips for Reducing Food Waste.”
The sidebar also highlights an art instillation about the impact everyday people have had in regards to food waste that will bolster the Conscious Consumer into taking action and changing their habits
In Conclusion
This was a conceptual project, but I would love to see how this redesign would impact Foodwise’s (formerly CUESA) users if implemented. Throughout this process, I learned a lot about the complexity involved with providing information to the public while being a nonprofit. Research and content strategy was critical in bringing this proposed redesign to life.
current home page (left) & proposed home page (right)
proposed home page
proposed sustainability page
proposed article page