MyFitnessPal

Design Generalists & Quality Encasements

05

Overview

We introduced bottom navigation and AI restructuring, a redesign to help address confusing navigation. The redesign improved the discoverability and usability of the app experience.

Additional product contributions include making the Web products more consistent across the board. We've updated our Onboarding, SEO, and App Store pages and made some user experience enhancements in our iOS app. We've also updated our Android app to Material Design guidelines.

Client

MyFitnessPal is a health app that helps users understand their eating habits and make smarter food choices to motivate and meet their goals. Customer: Anyone who wants to track their progress toward reaching their nutrition, water, fitness, and weight loss goals.

Initial brainstorming sessions for navigation IA

Problem

We knew the navigation would need to be easy to explore and switch between top-level views in a single tap. It also needed to be explicit and focus on the structure so that users could easily find what they were looking for without getting sidetracked. The main goal was to ensure that users didn't get lost when navigating the app and instead had an experience with clear intent and flow where each step was intuitively connected together in a way that made sense for their goal. All of this meant making sure there were no unnecessary steps or extra taps required before reaching the desired destination within their workflow—it should feel like one seamless experience from start to finish.

Navigation IA site map overview

User insights and feedback revealed the following:

  • Our navigation was inefficient and complex.
  • Existing user confusion over primary sections of the product.
  • Most essential destinations should become self-evident.
  • Benefit from native experience and incorporate material google patterns.
  • Ensure and explore ads integration, and promote user profiles and premium.
  • Consolidate the navigation menu and remove unnecessary items.

High-level views user journey map

Solution

We used the bottom navigation pattern to solve this problem. The navigation was hard to explore and switch between top-level views in a single tap, which made it difficult to use. The navigation was not explicit, lacked focus and structure, and had accessibility problems.

List of all enhancements

  • Strive for consistency and user-friendly
  • Addressed problems with Icons, Spacing, typography, colors
  • Remove links from the navigation menu and surface them elsewhere appropriately.
  • Use a bottom navigation bar for (Home, Diary, Progress, Me (Profile)
  • Consolidating personal info into a "Me" section (Goals, Friends, My Recipes, etc.)
  • Move user reminders and step to the user diary within settings.

‍

User feedback review

We reviewed existing user feedback regarding the current navigation experience. We gathered google play team feedback better to understand the limitations and benefits of the project.

‍

Internal feedback

Explore a top placement for the primary navigation

Consider icons replacements

‍

Reiterate

Navigation below the toolbar, since it applies within that screen and sometimes different screens it, breaks the hierarchy of the view

  • The tools in the toolbar feel strange because they apply to the content below the toolbar
  • Redundancy of the App-bar with the navigation labels tool bard
  • Tab navigation inside any of the main views of the app

‍

Transition in Navbar when Scrolled

Result

The result? A new navigation pattern allows users to explore and switch between top-level views in one tap. The new navigation is clear, structured, and accessible—best of all, it's easy to find your way around. We have lunch the IA restructuring in a few phases to avoid undermining the large user base and get more inside before implementing the following stages.

Afshin Gholami