Case Study: Food Tracker
Over the years there were many iterations of it, constant upgrades and feature enhancements based on user feedback.
Before the user has tracked food for the day was a great opportunity to liven up the design, adding colorful illustrations to what would otherwise be very plain look. An arrow draws your attention to what you should do first on the page, creating an immediate call to action.
Where to place the graphs and feedback was always a dilemma. I managed to squeeze it in beside the list of foods on desktop and added a button that scrolls you down to the start of the graphs on mobile, letting the user get instant results and feedback on how they are doing for the day without the scrolling.
Where do we need to go?
Keeping it Responsive.
/04 Ease of Use
Keeping it simple.
Tapping or hovering your mouse shows the details of nutrients remaining for the day. This made it easily accessible when the user was ready, but kept it clean and simple to start with.
Checkmarks show you have reached your daily goal. Darker ranges on the bars and circle graph easily indicate the daily range the user is shooting for.
/05 What's Next
Designing for the future.
Planning ahead for upcoming features helps keep the design looking good. Recipe functionality and a food barcode scanner for mobile apps slated for the second round are designed in and turned off for easy first round deployment.