top of page
Better Bites
Better Bites is a recipe website that has sustainable recipes and actionable suggestions and tips on how to bring sustainability into the kitchen.
Duration
Role
Team
Tools
12 Weeks
UX Designer
UX Researcher
5 UX Designers
Figma
Miro
Optimal Workshop
Overview
With the creation of EcoReality, the team needed to create a product or service to provide help with the mission of creating solutions that would enable users to find ways to be able to practice sustainability.
Qualitative Research
To understand what type of products or services we could develop for EcoReality, the team conducted five 1-on-1 user interviews. To find the commonalities between our interviews, we coded the individual interviews to create an empathy map to get an insight into the interviewees' opinions and thoughts. We created 2 different personas to reflect our based of our empathy map. We discovered that many of our users need more fact-checked education on sustainability and also a way to learn ways to change their habits that is engaging.
Quantitative Research
Due to time constraints, we needed to find out quickly our user needs and thoughts on sustainability. We put out a survey and received more than 100 responses. The findings of our research suggested that:
-
68% of the survey participants considered themselves knowledgable about sustainability
-
47% of the survey participants preferred to learn through videos
-
25% of the survey participants responded that they would be interested in cooking when asked about their interest
Defining the Product
We discussed our findings as a group and we believed that creating a website that incorporated cooking, knowledge, and video would be a great idea to help our users develop sustainable habits in and out of the kitchen. With that established we were ready to ideate some possible website layouts.
Wireframes
The team brought out the Crazy 8's technique once more to wireframe the layout of our website. We discussed potential features that we would like to incorporate into the design. Some of the features discussed were a navigation menu, search bar, and breadcrumb navigation. We looked at a variety of recipe websites to make sure that we were not trying to re-invent the wheel and we discussed similarities along with differences between them.
Branding & Style Guide
The team was not short of ideas for the style guide. We created a mood board on Figjam to put out all of our ideas for colors. We were not short of ideas so we narrowed down the list by talking about color psychology and running multiple contrast tests.
We decided to stick with the same font as EcoReality because it was legible and it makes for a more accessible website. d
Information Architecture
A recipe website had to have strong information architecture in order to help its users navigate it. We didn’t realize the amount of thought it would take to categorize information. Better Bite's mission is to provide sustainable recipes we had to develop categories that reflected this. The way we tackled this was by creating an affinity diagram using Wurman’s Latch to help guide us with the creation of our recipe categories.
As a way to make peace with our design decision, we decided to go to our users for help. We used the Optimal Workshop software to design a card sorting test. We wanted to know how potential users would categorize different subcategories and from there we would develop our menu. We analyzed the results and decided on the top 4 categories – diet, method, seasonal and time.
Hi-Fidelity Mockups
Each team member created a different webpage following our style guide and a 12-column grid. Once these were created we wanted to do a bit of research about how our website was being perceived. We conducted a 5-second test on five participants and we received some information that opened our eyes!
Check out the prototype!
After our user research, we made the changes to our design and we started to finalize it. We added animation and interactions. We are currently pending additional usability testing to ensure that our users are able to navigate and complete tasks on the website.
Lessons learned
The biggest lesson I personally learned throughout the duration of this project includes time management and working through blockers. Working with 5 people that I did not know was a unique experience, we had to learn to work together despite our differences. We used tools such as time-blocking and Trello to create a Kanban board to keep us all on task. The communication issues that arose were addressed by having a conversation that allowed us to safely communicate our needs with one another. Having that conversation allowed us to become a stronger team!
bottom of page