The idea behind Shape Right was to create an all-encompassing app that helps users keep track of their weight loss progress. By bringing together elements such as your diet, your caloric intake and your exercise, the app monitors all of the aspects of your health. The best part is that it’s easy to use and it’s in your pocket whenever you need it.
This is the first thing that the user sees. It’s a handy landing page that summarizes intake and displays progress. For the food screen, we created a page that can guide the user. On this page, you’ll find a range of foods and compare their nutritional value. Lastly, for the calorie balance, we wanted to highlight the bottom line: calories in versus calories out. This screen shows the important comparison between calorie intake and calories burned via exercise.
Sketches and Mockups
The biggest challenge with this project was to not only offer the user comprehensive stats but to do so in a clear manner that’s easy to understand and appealing to look at. We started with sketches as design always starts out with a brainstorm. Then we started defining some of the ideas and that’s where we started to design the calendars, charts and comparison tables. In regards to the shapes, we were looking for a way to make this fun but also display important data. That’s how the playful bar charts and graphs came about.
For the navigation, we knew that there would be a lot of features in the app, so it had to be seamless for the users to use. They need to find what they’re looking for right away. We decided that the three most important buttons would be the ones that revolve around the core function of the app: calories in, calories out and the ratio of the two.
Once we refined the sketches and smoothed the rough edges, we added some texture, color and feel to our illustrations. We blended it with the navigation, tested the functionality and made sure that our test users found this experience to be smooth. That’s how we knew we had a winner.