Weight Watchers iOS Mobile App

Weight Watchers iOS Mobile App

APP REDESIGN I CASE STUDY  

 

Read about my process for this project, including mishaps & musings, on my Medium page here.

DESCRIPTION

 

Weight Watchers is an American company that offers products that help with weight loss and maintainence that utilizies a points system where no food is off limits. 

The mobile version of Weight Watchers allows customers to Sign Up for free, but customers must pay the same prices to follow the plan on their phone. Currently, the mobile version is available for iPhone, iPad and Android. For the purpose of this case study, I will be focusing on redesigning for an iOS system. 

I have been a Weight Watchers customer myself, to help curb my sugar addiction in college so I *thought* I understood the WW process well. I chose to redesign the WW mobile app after having several close family members complain to me about the app. After performing an initial run through of the app, I decided that this was a perfect case study for a redesign.

OVERVIEW

THE COMPANY

Weight Watchers is a subscription based program where customers choose their level of support and pay monthly for a program that customers have the option of tracking, meetings and/or coaching. Oprah Winfrey is the current spokesperson (2016) and has a 10% stake in the company since 2015. 

MY ROLE

As the only UX Designer, I was the lead designer and researcher for the Weight Watcher mobile app redesign.

THE CHALLENGE

I had received various complaints of the Weight Watcher mobile app from friends and family, but it was up to me to dig deep and discover what was really going on. So challenge number 1 - discover the problem.

My hypothesis was that users were unable to track food and/or fitness due to a confusing tracking user flow.

THE APPROACH

WW processWW process

AUDIENCE

Desktop Copy 3Desktop Copy 3

COMPETITIVE & COMPARATIVE ANALYSIS

Desktop CopyDesktop Copy
Desktop Copy 2Desktop Copy 2

Based on user interviews and user surveys, I developed a user story that was used to determine design decisions throughout the process of the project.

TO ONBOARD? OR NOT TO ONBOARD?

Below is Weight Watcher's current onboarding strategy. When I first downloaded this app, I skimmed through quickly and once I was finished realized that I had gone through the onboarding process and remembered nothing. So I deleted the app and re-downloaded, only to realize I had not missed any pertinent information. I was still just as confused about the different points then I had been before.  

DesktopDesktop

​​​​​​Since these screens would be the first impression of Weight Watcher’s app, it was important that the mobile onboarding was done right. I wanted a hybrid of function-oriented onboarding, that focused on key functionality, benefits-oriented onboarding, that focused on presenting the benefits of the app and progressive onboarding, that relies on the fact that users learn more by doing.

IDEATION & USER TESTING

Based on user interviews, competitive analysis and user research, I came to the realization that WW not only needed a better onboarding process, but also a cleaner Home Screen.

Onboarding Thought Process -- 

I decided I wanted a hybrid onboarding that consisted of benefits onboarding and progressive onboarding. Benefits onboarding explains what the app does and how the user can integrate this app into their life, as well as the value. Progressive onboarding is a true walkthrough of the app that presents information to the user (the learn by doing method). 

Currently, users understand the benefits of Weight Watchers (lose weight, track food, become healthier) but what they don’t understand is what the App can do for them. So out of the two onboarding techniques the progressive onboarding was the most important.

Home Screen Thought Process-- 

I mocked up three seperate home screens (below) and user tested with 5 individuals. The Home Screen on the far right was a clear winner - users liked visual icons and wanted to track by adding to meals and/or snacks.

* The original Home Screen for WW's app can be found at the top of the page.

thisthis

Weight Watcher's Redesign for iOS

StyleguideStyleguide