Nutrition Calculator - Moe's Website Redesign
Moe's Nutrition Calculator
Using input from the brand's stakeholders and extensive customer research with the target audience, we designed and developed a world class nutrition calculator.
Background
As part of the redesign for Moes.com the brand wanted to convey their fresh ingredients and endless combinations. When speaking to members of their target audience, we heard from a large percentage that finding food at Moe's that was healthy and within their calorie range always seemed difficult and prevented them from going. With input from the brand and customers, we decided to focus our attention on designing a completely new nutrition calculator to meet the brand's goals and the customers' needs.
Research
We interviewed several target audience members about their habits, needs, and frustrations when it came to figuring out nutritional information from restaurants and other sources, such as My Fitness Pal. The team ran a competitive analysis exercise on several digital nutrition tools that were either mentioned specifically by customers or suggested by coworkers internally. After determining which were the top two, we ran remote and in-person usability evaluations with members of the target audience.
Sweet Green's Calucator
What we believed to be "best in class" from a design point of view failed miserably with actual customers due to the double column layout. This layout caused people to use a higher cognitive load having to read in a Z-Pattern instead of the common F-Pattern.
Our assumption that Sweet Green's calculator (Menu Modifier) was by far the best in class was immediately dismantled by the results of the usability evaluation. Why? The double column layout was more difficult to read for customers than a single column layout and the interactions were confusing to the people we tested.
Design
There was a lot of nutritional information that was important to our customers and not of all it could fit on a mobile screen without endless scrolling for the user. Prioritizing the information was key in order to figure out what needed to be surfaced and what could be a click or two deep. After two brainstorming sessions, we worked through several iterations of sketching, paper prototypes, and lo-fidelity wireframes.
Lo-Fidelity Wires
After sketching and paper prototyping, we designed lo-fi wireframes to perform usability evaluations and deliver to the brand, visual designer, and development team.
We found out during lo-fi usability evaluations that the ability to customize was so easy for customers that they expected to be able to place their orders within the calculator. Because our online ordering vendor did not have an API to take in these orders, we added a "Copy" feature for people to be able to digitally save their order and we had the Visual Designer over exaggerate the "Nutrition Calculator" title as well as other signs of nutritional information to inform the customers that this was only a calculator, not an ordering platform.
However, with future technical enhancements our team will be able to easily convert this into our online ordering platform.
Result
Most nutrition calculators in the Quick Service Restaurant do not get many visitors, but this design gained a large amount of attention from the minute we launched the new website. It was fun, helpful, and easy to use. People loved it.
“Can you pls redesign every nutrition calculator ever? This is perfect…best I’ve ever seen. Easy, attractive, kind of fun in a way, and seeing the total at the top of the page is perfect while I scroll up and down. Seems a trip to Moe’s would set me back 580 calories – not terrible. I feel better about the idea of having a burrito knowing that I frequently eat salads with just as many calories. Wow, this knocked my sox off…..love, love, love! ”
The Nutrition Calculator became the second most visited webpage on Moes.com (Homepage was number one) after the launch of the website causing confusion for the web traffic analyst as it was not part of the global navigation. In fact, we purposefully had placed it deep within the product pages as the brand was still fearful that people would see the nutritional values and immediately choose another restaurant. Nutrition had never broken into the top 7 most visited pages on our previous site, such as Location, Menu, or Rewards, but customers loved playing around with the tool and coming up with endless combinations of menu items that could meet their nutritional goals.
Layout in Production, Desktop
Check it out at Moes.com/Nutrtion
Project Contributors
Brian Parsons (Myself), UX Strategist - Lead for Requirements, Strategy, Research, Information Architecture, and Interaction Design; Assisted with Visual Design and QA
Claudia Monroy, Visual Designer - Lead for Visual Design; Assisted with Research, Interaction Design, and QA
Mike Creati, Director of Digital & Team - Lead for Development; Assisted with Requirements, Strategy, Research, Information Hierarchy, Interaction Design, Visual Design and QA