Weight Watchers for Android
Problem: This long-forgotten version of the app was not inline with Google’s Material Design or unified with Weight Watchers’ iOS rebranding.
Users: Weight Watchers members who are Android owners.
Tools & Methods: Sketch, Adobe CS, Principle; user research and interviews, customer journey mapping, sitemapping, design research, wireframing, UI, prototyping.
Hypothesis: We believed that by updating our Android app design, we could make our brand more cohesive and user friendly. We measured our success by increased overall usage of the app and by member feedback on Google Play Store.
Timeline: 2–3 months.
Background
I was assigned the task of updating the Android version of the WW app when I was first hired. The iOS app had been redesigned, but Android didn’t follow the material design guidelines or match the iOS design.
iOS Home Screen.
Android Home Screen.
User Needs
Before getting into user flows and wireframes, I wanted to ensure I would be solving actual member problems. Here's some feedback I got from our members:
"Losing weight is hard enough. The app has made me feel overwhelmed and unsure of which way to turn."
– Jennifer
"I switched from iPhone to Android last month, and now I feel like I need to re-learn an entirely new app."
– Vanessa
"Is there a difference between the navigation drawer and the plus button? They're very similar."
– Donna
Site Maps
As I familiarized myself with the Android app, I noticed that there was repeated information and entry points. I made a site map and highlighted all of the repeating screens, in hopes that they could be condensed.
The Android site map: yellow indicates entry points to track food; blue is to track activity.
User Journey
I mapped out a user journey with the majority of the app's screens. Seeing the flow of the screens emphasized the poor, repetitive design and the lack of brand consistency.
Design & Interaction: Floating Action Button
Based on the user journey (seen above), I compared our app's screens to Google's material design guidelines, in order to correct the designs and flows.
An example can be seen in the side-by-side comparison of the floating action button (FAB) in Material Design and the one in our app:
![Fig. 1 – Animation: Material Design offers this explanation of the GIF: "The [FAB] animates onto the screen as an expanding piece of material by default."](https://images.squarespace-cdn.com/content/v1/55148042e4b05ec98fd6048f/1591669013525-S4HJEOZ9OKCQ3AR6HPPP/FAB.gif)
Fig. 1 – Animation: Material Design offers this explanation of the GIF: "The [FAB] animates onto the screen as an expanding piece of material by default."
Fig. 2 – Android Home: The size and design of the FAB and its shadow were inaccurate. Upon tapping on the FAB, the user was led to the screen shown in Fig. 3.
Fig. 3 – FAB Expanded: Rather than expanding inline (as in Fig. 1), the FAB led to a separate screen with new page titles, not to expanding actionable items.
Android Wires & Guides
I began mocking up wireframes based off of the existing iOS designs in order to guide the Android redesign. Below, examples of the updated wireframes and their final visual designs.
Updated FAB
Updated Android Home.
FAB Expanded.
Final Animation.
Updated Search & Food Detail
Search.
Food Detail.
Final Design.
Android Guidelines
After completing Android updates, I created a guide so that every element of the app would remain consistent going forward, no matter who was designing.
Updated App
After a few months of working closely with developers and my PM, the updated Android app was released. In the final version, we replaced the navigation drawer with a bottom nav, in order to make each screen more accessible.
