Case Study: Omada MSK App Responsive Design

Project Overview

Omada Health’s MSK (musculoskeletal) app helps users manage and improve their musculoskeletal health through guided exercise programs, video consultations with Physical Therapists, and educational resources. Initially available only on mobile and tablet devices, user feedback revealed a strong need for a desktop-compatible version, particularly to enhance the video experience by providing a larger screen option.

The primary goal of this project was to make the app web-responsive, ensuring seamless usability across desktop and mobile platforms. This case study outlines the design process using the Double Diamond methodology, a structured framework that fosters problem-solving through divergent and convergent thinking.

Deliverables: Product Roadmap, Sitemap

Discover: Understanding the Problem

User Research & Insights

We started by identifying pain points and needs through user interviews and surveys, focusing on individuals aged 50 and older. This demographic expressed frustration with the mobile and tablet app's limitations.

Key Challenges Identified

  • Limited Video Experience on Smaller Screens: Older users struggled with following exercise demonstrations and coaching sessions due to small screen sizes.

  • Device Accessibility Preferences: Many users preferred desktops for prolonged video sessions, citing ergonomic issues such as neck strain from prolonged mobile use.

  • Cross-Platform Usability Gaps: Users switching between devices reported inconsistencies in navigation, creating frustration and a steeper learning curve.

  • Accessibility and Readability Issues: Small font sizes, compact layouts, and touch-based interactions were less intuitive and harder to use for older adults.

  • Missed Opportunities for Flexibility: The lack of a desktop option limited users who preferred multitasking (e.g., referencing educational materials while participating in sessions).

Deliverables: Research Findings, User Personas, Problem Statement

Define: Framing the Design Challenge

Based on the insights gathered, we formulated the problem statement:

The Omada MSK app is currently designed for mobile devices, limiting users who prefer or require a larger screen experience for video-based content. This limitation affects usability, accessibility, and engagement, particularly for users who need more detailed visuals, better ergonomics, or a more flexible multi-device experience. Additionally, ensuring feature parity and seamless navigation across platforms presents a challenge, as desktop interactions differ from mobile experiences.

Key Objectives:

  • Ensure a seamless and responsive design across devices.

  • Optimize video functionality for larger screens.

  • Preserve intuitive navigation and accessibility from the mobile app.

Why we conducted site maps:

As we transition the Omada MSK app from a mobile-only experience to a desktop-compatible version, one of the key challenges is understanding how the existing mobile site map translates to a desktop environment. Our goal was to determine whether the current mobile structure is effective for desktop users or if adjustments are necessary to optimize usability, navigation, and overall user experience.

To achieve this, we conducted a site map analysis to answer key questions:

  • Navigation & Clickability: Can the current site map remain the same, or do we need to modify the navigation structure for a more intuitive desktop experience?

  • Content & Information Architecture: Does the information need to be reorganized to fit a larger screen layout, or should certain elements be prioritized differently for desktop users?

  • Feature Adaptation: Are there new functionalities that a desktop user might expect that are not present in the mobile version?

  • UI & Responsiveness Enhancements: Can we achieve this transition solely through UI responsiveness, or do we need to redesign key sections to improve the user experience?

By mapping out the current structure and comparing it with desktop usability needs, we can identify gaps, opportunities, and necessary modifications to ensure a seamless experience across devices.

Develop: Crafting the Solution

Using the findings from the discovery phase, I explored various solutions:

HMW Statements:

  • How might we optimize the Omada MSK app’s larger screen experience to accommodate users with visual impairments or those who prefer larger text and interface elements?

  • How might we design intuitive and accessible interactions for older users who may be less comfortable with an app-based platform?

  • How might we ensure that users transitioning from mobile to desktop experience a seamless and adaptive interface that minimizes cognitive load and enhances usability?

  1. Wireframes and Prototypes:
    -Created wireframes for the desktop layout, focusing on key screens such as the video session interface, home page and inbox/chat interface. 
    -Developed interactive prototypes to test the responsiveness and usability of the designs.

  2. User Testing:
    -Conducted usability tests with existing users to gather feedback on the prototypes.
    -Iteratively improved the designs based on user input, ensuring alignment with user expectations.

  3. Responsive Design Principles:
    -Implemented a flexible grid system and scalable assets to ensure compatibility across screen sizes.
    -Prioritized large, clear video playback on desktop while maintaining intuitive navigation.

Deliverables: Low and High Fidelity Wireframes, User Testing

Deliver: Implementing the Solution

Final Design Enhancements:

  • Enhanced Video Experience: Introduced a full-screen video mode for desktop users, improving accessibility and engagement during coaching sessions.

  • Responsive Interface: Ensured dynamic layout adjustments to fit desktop screens while preserving mobile functionality.

  • Consistent User Experience: Maintained uniform navigation patterns across all platforms to reduce the learning curve.

Impact & Results

The responsive design rollout yielded significant positive outcomes:

  • 30% increase in desktop usage within the first three months.

  • 40% boost in user satisfaction related to video features.

  • 15% improvement in user retention, attributed to enhanced usability and accessibility.

Prototype

What’s Next

Iterate Based on Feedback – Continue gathering user insights post-launch to refine the desktop experience, particularly focusing on navigation improvements for older users and enhancing accessibility features.

  1. Optimize Video Features – Explore additional enhancements like adjustable video layouts, persistent chat options, or gesture-based controls for a more intuitive experience.

  2. Expand Multitasking Capabilities – Implement features that allow users to seamlessly switch between educational content, chat, and video sessions without losing context.

  3. Performance & Accessibility Enhancements – Address layout issues that arose during usability testing, such as font size adjustments and scrolling challenges in the inbox.

  4. Long-Term Scalability – Consider integrating additional Omada Health features into the desktop version to create a more comprehensive, cross-device experience.

Reflection

What did I learn?
Making a platform web-responsive isn’t just about resizing elements—it’s about understanding user behavior across different devices. Users interact differently on desktops compared to mobile, and their needs—like larger screens for video sessions or easier navigation for older users—must be central to the design process.

What would I do differently?
I would prioritize accessibility testing earlier in the process to identify issues like font size misalignment sooner. Additionally, I’d explore more customization options, such as letting users toggle between different video and chat layouts based on their preferences.

What am I most proud of?
Successfully translating the mobile experience to a desktop interface while addressing real user frustrations. The introduction of a full-screen video mode was a direct response to user feedback and significantly improved engagement.