Recipe Nutrition Calculator
Learn nutrition data behind custom recipe
WHEN
July 2021
DELIVERABLES
wireframe
high-fidelity design
Overview
This project was an extension of the My Foods dashboard, adopting the new design elements for users that are in different stages of the user journey. New configurations of the details view built as part of this project were later backported into the main dashboard, ensuring visual consistency throughout the site.
Challenges
While the My Foods dashboard was primarily designed for users who have already signed in, the majority of the traffic for the Recipe Nutrition Calculator consisted of single use visitors that immediately exited the site after their task was complete. The majority of these users are also navigating to the site on mobile. Furthermore, despite the abundance of in-depth information the page presents, information overload made it difficult for users to get through everything. There were three big questions that we wanted tackle:
-
How can we break down all of the information presented into digestible sections?
-
Can we provide a consistent experience between different features on the site?
-
How might this page simultaneously support delightful desktop and mobile user experiences?
Finding mechanisms to guide users to other experiences on the site was deemed to be out of scope for this specific project, but that is something that I have proposed tackling in a subsequent project.
Outcome
THE PRODUCT
OLD DESIGN
NEW DESIGN
DESKTOP VIEW
Challenge: The current design created cognitive overload by showing all information on a single page without any structured hierarchy. Inconsistent page formatting and user flows creates additional friction for the user experience and made it more challenging for users to extract the information they needed.
Solution: Structured design, presenting information consistently
The new design is a single page app, showing two-column modals that compare ingredient lists with nutrition data. Users can interact with them without navigating to any other pages. A long list of nutrition data information is grouped into separate sections, which users can navigate using the navbar.
The design is also using the set of elements introduced by the dashboard - maintaining consistency and helping regular users navigate the wealth of information more quickly.
OLD DESIGN
NEW DESIGN
MOBILE VIEW
Challenge: The previous responsive design worked for mobile as well, but having a desktop amount of page changes and 're-calculate' buttons made it challenging for mobile users to understand where they were in the flow.
Solution: Mobile friendly experience without reloads
Keeping the mobile site on a single page that automatically updated information based on selections makes the navigation more intuitive for mobile audiences. Additional features such as a "calculate" button (to jump directly to the nutrition facts section), and an "edit recipe" button (to jump to the ingredient section) were added to provide breadcrumbs for users navigating on smaller mobile screens.
OLD DESIGN
NEW DESIGN
NEXT STEPS
The objective of this project was to organize existing data to match the new design, our next steps include:
-
Define more specific user personas using this page; study their goals, user behaviors, and friction points on this page
-
Run a usability test to validate readability and usefulness of each section
KEY TAKEAWAYS
1. Data-heavy UX design
By deeply exploring different options, I became adept at presenting content-heavy, complex data. By combining different techniques, such as simple layouts, strategic labels, progressive disclosures, and the right visualization methods, users can be helped to digest large amounts of raw information.
2. Mobile design strategies
While we decided to focus on the desktop experience for the Meal Planner dashboard, mobile played a much bigger role in the Nutrition Recipe Calculator project. Accounting for different inputs (e.g. no hover-over effects, breaking up forms into several steps) and limited real estate were all additional intricacies present in designing for smaller screens.
