The Challenge
To help people better understand nutrition, and lead healthier lives. How?
By building a nutritional activity tracker powered by smart voice recognition, that translates potential calorie intake into the physical activity needed to burn it off. Making it painless to manage nutrition, and live a healthier life.
My Role
I took over design of a half built product that wasn’t thriving. As the sole designer on the project. I owned the project end-to-end, doing user research, IA, UX, UI, Visual Design and marketing collateral. I worked with Product & Engineering to understand challenges and create the best app possible.
Calio – Functional Prototype – (full video)
The original look and feel created by the visual artist was flat 1.0, had an odd honeycomb layout and didn’t test well. Some patients had difficulty reading it due to retinal neuropathy – caused by diabetes. I needed to adjust the font sizes, and increase contrast to hit accessibility targets. The flat design lacked visual indicators for tapable items, it had flow issues and required patients to do math. It needed to evolve.
Calio – Usability Testing – (full video)
There are over 2.2 million apps in the iOS app store. You get one chance to make a great 1st impression and wow your users. If you don’t, the first time users run low on storage space your app will be deleted.
Before doing any design work, I user tested Calio with 10 users and found several significant glitches :
• Issues with Flat Design – some items didn’t appear tap-able but were required to move forward
• Too complex – no one understood the primary calorie and exercise meters on the home screen – very bad.
• There was no indication that there was content below the fold and the app wasn’t horizontally swipe-able
• Users couldn’t change the date to track their progress
• The art style was all over the place: Photos, flat design and cartoons
• Fonts were way too small and lacking contrast for people with vision issues (diabetics)
Personas
Understanding important health needs of Calio users
I don’t suffer from any chronic diseases like diabetes or hypertension. So how do I design a product for patients when I don’t know what they are going through on a daily basis? I create personas, based on patient data and interviews. This helps me “live in my user’s shoes,” build empathy and identify their real needs.
Markin – 46
Hypertensive
Uses iPhone/iPad
Connects with friends on LinkedIn & Facebook
Malcolm has stage 2 hypertension – 164/105. He is on medication. He suffers from headaches, shortness of breath, and is worried about renal issues. He needs to track his sodium, potassium, fat and sugar intake. His doctor has advised him to adopt a healthy lifestyle.
Brooke – 46
Diabetic
Uses iPhone/iPad
Connects with friends on Facebook
Brooke has suffers from metabolic syndrome, she is a type 2 diabetic, and has hypertension. She has issues with blurred vision, tingling in her hands and feet, very dry skin, and slow healing wounds. Her doctor has advised her to adopt a healthier lifestyle or risk serious complications.
Jacole – 42
Weight Loss
Uses iPhone/iPad
Connects with friends on Facebook
Jacole gained weight during her pregnancies and has had difficulty losing weight. She wants to get her “bikini beach body” back. She is at risk for metabolic syndrome, which could lead to diabetes and pre-hypertension. Needs to track her calories and increase activity level.
Aaron – 42
Athlete
Uses iPhone
Connects with friends on Facebook & Strava
Aaron is a top amateur cyclist, he holds a license with Cycling USA. He has corporate sponsors that provide funding for bike equipment, race fees and travel. His coach has advised him to track his training, calorie intake and expenditure, and his macro and micro nutrients.
The Redesign
Wireframing – (Partial Flow)
After user testing, I examined the home screen flow of the app and talked with the heads of Product and Engineering. There was a lot to fix, but we had a timeline and a budget to contend with so I put together a new flow for the home screen with suggestions on how to fix the biggest problems.
View zoomable vector PDF (opens in new tab)
Prototype – (Homescreen and secondary pages)
After getting sign off on the new home screen flow, I put it into Marvel which allows me to link all my designs together, add gestures and animated transitions between pages so it feels like a real app. Then I put it in front of the target audience again to see if they grokked the new designs.
Lo-fi clickable prototype user test results
What was tested:
Home screen dashboard simplification
• Do people understand the ideas behind the new home screen dashboard?
• Do they like new icon driven visual progress indicators?
• Do they understand there is content below the fold and how to navigate?
• Could they track their progress?
• Would they use voice to input their activity?
Participants:
• 5 women
• 2 man
- Understood the idea behind the new home screen dashboard 100%
- Liked new icon driven visual progress indicators 95%
- Understood that there was content below the fold and how to find it 100%
- Understood how to track their progress 100%
- Would regularly use voice to input their activity 75%
Establishing a new Look & Feel – and why it was critically important
In testing we found people thought the app “looked too techie” and thought the home screen was overly complex. Some users had difficulty reading things due to retinal neuropathy – caused by diabetes. I decided to simplify the app. I used bold data driven iconography to inform users of their daily progress with one glance of the home screen – NO MATH. If they wanted more info, they could drill in and view granular details.
The new icons
“A picture is worth a thousand words.”
My goal was to create digital hieroglyphs, I wanted the new dashboard to inform the user instantly of their status with a simple glance. I also discovered most of our users played mobile games like: Bejeweled Blitz, Candy Crush or Disney Tsum Tsum. So I thought, what if I gamify our app?
Style Tile V1
Similar to the paint chips and fabric swatches an interior designer uses to get approval on before designing a room. I use style tiles as a design deliverable consisting of fonts, colors and potential interface elements that communicate the visual essence of a potential brand.
The CEO wanted the style to be clean and easy to use. Many of our users played social and mobile games, so I thought if I made it more game like with visual rewards and levels, it might make the app stickier than a math or chat based app. I went for a flat 2.0 look and feel after reviewing the user tests and seeing how many things didn’t look tap-able to users. I had also read an article by the Norman Nielsen Group, that flat design didn’t resonate well with older users: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users
The green style tile below tested best with users on Fivesecondtest.com, they felt it communicated “health” and “growth” and was fun, easy to use and engaging.
Professional Reviews
Reviewed by Marisa Moore, MBA, RDN, LD
www.foodandnutrition.org
Synopsis of the App
Calio is a food, nutrition and activity tracker with voice technology designed to help you manage health and weight loss goals with ease.
RDN Score: 4 out of 5
Pros
- Attractive and simple-to-use design.
- Scan, say or type to search the Calio database to enter your food and activity entries.
- The voice technology works – allowing you to speak naturally. Using the app’s smart voice command, just say,
- “Show my carb intake for today.” Or, “How much water did I drink today?”
- Includes voice interface to enter daily food and activities in one minute or less.
- Has more than 500,000 items in the food database, including popular grocery and restaurant items.
- Add custom and homemade meals to the database and save for quick recall.
- Input exercise activities from more than 300 options.
- Personalized options available for your goals, with nutrient intake details.
- Open the app in the “quick view” from the home screen to see your calorie budget and calories that remain upon.
- The “stop me” rescue button offers healthy swaps and tips for the end of the day when you might only have 100 calories left in the budget. This button also includes motivational quotes.
- Option to scan foods into the app.
- Save favorite foods and exercise for easy recall and entry.
- The Calio team includes a registered dietitian nutritionist on staff.
Cons
- Not integrated with the Health app.
- Does not include a sleep entry.
- Only available on the Apple platform at the time of this review.
Bottom Line
Calio stands out from the typical calorie-counting app with its voice commands. It’s ideal for those who need the audio direction and support for entering data quickly. It also acts as a reference, shopping list and tracker.
User Results
Calio was really well received by users, dietician and corporate wellness programs. NantHealth was approached by corporate partners to white label Calio for internal corporate wellness programs. The program Calio – Total Well-Being was launched helping Corporations cut the cost of employee wellness by Gamifying Health and providing incentives to employees who participate in the program.
The most rewarding part of the project was when users started sending us before and after photos and telling us how Calio! helped them in their wellness journeys. One user lost over 175lbs. The user below lost 42 lbs.
