NutritionCalc Plus
NutritionCalc Plus is an educational web application designed to track a users' nutrition.
NutritionCalc Plus is one of the many solid online educational applications from McGraw Hill that helps young people worldwide learn about nutrition. Some of these apps felt a little outdated and my team was tasked with giving NutritionCalc Plus along with several others a much-needed makeover!
This app design is an excellent example of a project in which, after rounds of careful strategizing and testing, would quickly change from being a somewhat bland series of graphs and tables to something that genuinely engaged and connected with users.
Involvement
I was assigned as the sole designer and developer on this project, so I had quite a bit of work to manage! To make it happen, I had to juggle a bunch of different roles, including scheduling and organizing teams from the various companies involved. It's always great to be given the chance to take on a big task and prove yourself, and I'm really grateful for the experience and proud of what we created.
Interaction Flows
Component Definition
User Testing
Color/Contrast Evaluation
Accessibility Testing
Brand Development
Wireframing & Prototyping
Animation Development
Process
Discover
Client Workshops
Current Product Map
User Interviews
Analyze
Workshop Meetings
Alignment
Rough Concepts
Develop
Workflow Development
Prototypes
Continuous Iteration
Outcome
Evaluated & Approved End Product
Brand/Marketing Outline
Handover & Database Integration
User-focused design to allow for a custom-tailored experience.
Through lots of user feedback and research, we found out that people really wanted more control over their experience when using NutritionCalc Plus. Since the app is all about individual lifestyle choices, it only made sense to give users the ability to customize it to their liking. We wanted everyone to feel like they were in charge of their own experience, so we made sure to build that functionality right in. It's amazing what a little bit of personalization can do to enhance the user experience!
Wireframes
User-approved design choices.
The design philosophy for this project was all about creating an engaging and colorful experience. We went through lots of rounds of testing to find the perfect color palette and animation styles. We even did some A/B testing with users to see which colors they liked best! We wanted to make sure the illustrations fit with the overall feel of the app, so we did some testing there too. In the end, we landed on a design that features bright, contrasting colors, friendly shapes, and playful animations that really make the app come alive.
Rebuilding a new library of components.
We based our new application's architecture on Atomic Design philosophy. By doing an extensive inventory of the existing elements, we created a system that allowed us to build each section of the app using smaller reusable components. This approach made our designs much more efficient and easy to manage!
Component Images
