case study 2

App Design

The challenge

Create a simple tracking app

In 2017 after completing an overhaul of the HMR digital brand, I was tasked with creating an app that would be used as a companion to the program. This app should be visually cohesive, simple to use, allow for tracking program principles, and provide valuable feedback to users. The mission was to create an MVP that could eventually deliver digital coaching to the 70% of users who want to diet on their own. I was the primary UX designer and the sole UI designer.

The approach

App design process

To make our app successful, we needed a robust design process that really worked. The first thing that differentiates a good app from a bad one is the user experience so having a process to follow is critical.

    Strategize
  • Strategize with stakeholders to set objectives, user demands and requirements.
  • Define
  • Define and create the information architecture for a user centered design.
  • Wireframe
  • Wireframe and design interactions and flows with OS-specific guidelines, and prototype for testing.
  • UI Design
  • UI design for all screens and elements. Define color palette and typography.
  • Deliver
  • Deliverable handoff of high-fidelity screen flow, exported graphics and design specifications.

Strategize, define architecture

We started with a team of various stakeholders to brainstorm and hypothesize objectives, requirements, and user needs. We determined our main objective was to create a user-centered app that was not only a program companion but also simple enough for our user persona (average age 58). To alleviate a biased experience or false-consensus effect, user research needed to be conducted to ensure we created a product that users would appreciate. We needed to find out what they expected!

    Steps taken
  • Interview coaches for all data requirements to facilitate coaching in group settings.
  • Current user interviews designed to capture demands and expectations for this user centered app.
  • Stakeholder input on business requirements.
  • Analysis of competitor apps.
  • Create an app architecture that satisfies findings.
Prototype of wireframes for user testing

Number one concern for users — simplicity

Personalized plan

Tracker screen only shows the items you need to track on your diet plan

Goal feedback

When your plan minimums are reached the item bar turns green for success

Easy to use

Plus and minus touch icons are easy to understand and tap

Track in seconds

Using the track screen as the home screen makes tracking a tap away

Toggle between days

Tap through past days or use a scroller to look at a certain days

One tap note taking

Use the note icon to take any relevant notes about the day

Applied learnings to high fidelity

After testing we found some things that were a bit too complicated. Users wanted simple tracking and simple data visualization. I addressed those issues and streamlined our MVP to meet the users needs.

The release

HMR Program companion App and Tracker

This all-in-one diet and exercise tracker now connected all of our online resources to one platform giving both clinic‐based and at‐home members access to new digital content. Members could track program behaviors, get feedback, set goals, and receive targeted coaching to help them achieve their weight‐loss goals. Coaches received streamlined data to personalize the member experience. Furthermore, data aggregation would help refine the program's delivery to improve member compliance. This iOS and Android MVP was designed to allow for future enhancements and eventually full scale virtual coaching.

I want to acknowledge Linda, she has been crushing it in Adobe XD...with hundreds (if not thousands) of screens. There must be 500 moving parts that are coming together in a very tedious way, and you keep it all moving forward on a mission to deliver a truly great experience worthy of HMR's amazing programs.
John Lally
VP of Marketing