A Case Study That's
The Spice of Life

Avi

A responsive website, concept project tailored to users with specific dietary habits.

Case Study Focus

Responsive Website, Cross-Functional Team Building

Team

Team of 3 UX Designs, 4 Developers

My Roles

UX Designer, UX Researcher, UI Designer

Tools

Sketch, Invision, Photoshop, Illustrator, Keynote, Trello, Zeplin

Methodologies

User Interviews, Affinity Mapping, Persona Creation, Journey Mapping, Feature Prioritization, Moscow Mapping, Design Studio, Sketching, Wireframing, Iterative Testing, Prototyping, Usability Testing

Introduction

As the world moves towards a more customized consumer market and the nightly news shines more light on serious life-threatening food allergies, my team thought it might be a worthwhile experience to research how technology can play a role in helping users with specific dietary needs.

Research

While exploring the general topic of food my team thought-mapped various ideas ranging from sustainable farming to pet food. As we discussed and the merits of each avenue of interest we agreed that learning more about individuals with specific dietary needs could be worth a more in-depth look.​

We would need to seek out users with a more restrictive relationship with food to find what role, if any, could technology play in their specific dietary needs. A screener survey was sent out and two key questions were used to narrow our user focus:

User Interviews

Cross-referencing those who selected nutrition as the main reason for their dietary behavior and those who felt those behaviors affected their daily life moderately to very much we had 24 viable candidates. We selected and interviewed 5 users of diverse backgrounds. Making sure to include not only those who selected nutrition as their main dietary behavior but also those who selected a secondary reason for these behaviors as well.

Insights

  • The majority of the interviewees felt it was harder to maintain their dietary behavior while in a group that was not as focused on a healthy diet.
  • Users planned their meals to ensure healthy eating habits to avoid dining out on unhealthy food.
  • Most users found that to stick to their preferred healthy diet, they had to sacrifice variety. Many of them expressed desire in wanting more variety but were limited by time and busy schedules.

Synthesis

With insights gleaned from our users, it was time to begin understanding their behaviors, goals, needs, and pain points. Using affinity mapping and I-statements we were able to create a persona, a representation of our a-typical user. This would aid us to better empathize with our users.

Problem Statement

When people with defined nutritional constraints plan their healthy meals, they’re forced to sacrifice variety because of their busy schedules.

  • Stacey feels stuck in a routine of meals to make sure she’s eating healthy throughout the week.
  • How might we help Stacey efficiently maintain a healthy meal plan while adding diversity?

Journey Map

Ideation

With a user in mind to design towards, it was time to begin coming up with features for our responsive website. We began brainstorming our ideas as a group writing down every concept no matter how simple or grand it might be. These were then arranged on to a MoSCoW map of features that we Must, Should, Could, or Won’t have on our website. Feature Prioritization and MoSCoW mapping were also conducted with the software engineering team to gain their insights and ensure features could be developed within our timeline. ​

We were able to narrow it down to 5 main features that would make up our MVP:

Search Recipes

Filter By Dietary Behavior

Bookmark Recipes

See Nutritional Information

Show Related Recipes

Group Design Studio

Keeping in mind our MVP, we began to sketch layout ideas. Through the Design Studio Process, we completed 3 rounds of ideation using the homepage as a starting point:

Round 1

Solo sketching.
6-8 sketches from each person followed by group presentation and critique.

Round 2

Solo sketching based on critique.
1 refined sketch from each person based on group critique and learning.

Round 3

Group sketching.
1 sketch combining individual ideas and used as the starting point of user prototyping.

Design

We started with a mobile-first approach as it is easier to scale our designs up without sacrificing functionality. Iterating from design studio to paper prototyping, mid-fidelity to hi-fidelity we were able to make our product a better user experience with every iteration.

Usability Testing

User testing was done throughout each prototype step to ensure our product was streamlined for our users. During our last round of hi-fidelity testing we found the following:

Development

It was time to hand our designs off to the software engineering team to start development on our site. Final adjustments were made to the design based on feedback from our users, as well as, input and the availability schedule of our SE team. A 3rd breakpoint was added so that users would enjoy their experience across all devices. A healthy food recipe API was used to populate the information on our site to give it full functionality.

Next Steps & Reflections

Further quality assurance testing is needed with our SE team before going live. Several UI and coding issues were found. Additionally, filter parameters still need to be set, as well as, establishing full functionality of the “Inspire” random recipe button.​

Working with software engineers is a great experience. It is important to get them involved in the process early on. Not only are you more likely to get them on board with the UX process, but their contribution to the design is invaluable. UX and SE are two sides of the same coin, you are compatriots fighting towards the same goal...technology that can improve the lives of your users.