A responsive website, concept project tailored to users with specific dietary habits.
Responsive Website, Cross-Functional Team Building
Team of 3 UX Designs, 4 Developers
UX Designer, UX Researcher, UI Designer
Sketch, Invision, Photoshop, Illustrator, Keynote, Trello, Zeplin
User Interviews, Affinity Mapping, Persona Creation, Journey Mapping, Feature Prioritization, Moscow Mapping, Design Studio, Sketching, Wireframing, Iterative Testing, Prototyping, Usability Testing
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.
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:
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.
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.
When people with defined nutritional constraints plan their healthy meals, they’re forced to sacrifice variety because of their busy schedules.
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:
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:
6-8 sketches from each person followed by group presentation and critique.
Solo sketching based on critique.
1 refined sketch from each person based on group critique and learning.
1 sketch combining individual ideas and used as the starting point of user prototyping.
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.
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:
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.
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.