Extending Welldoc’s Mobile Experience to the Web A two-phased attempt to design a web interface that extends the functionality of the Welldoc mobile app ensuring consistent user experience.
Outcome
• The project successfully extended Welldoc’s mobile app capabilities to a web platform, ensuring consistency and enhanced analytics. • The redesigned portal prioritized core functionalities while integrating analytics as a secondary, enhancing feature. • We ideated quickly, providing multiple solutions to the problem and collaborated efficiently throughout the process.
OVERVIEW
Welldoc is a health technology startup that has developed a successful mobile app designed to empower patients by providing insightful health analytics directly on their smartphones. They wanted to build on this success by extending these capabilities to a broader platform through a dedicated web interface. This strategic move aims to enhance user accessibility and engagement, ensuring a cohesive digital experience.
My Role
User Experience Designer Created a conceptual model to guide information architecture decisions. Designed iterations of low and high fidelity wireframes. Ensured responsive design across all devices and screen sizes. Ensured visual consistency with Welldoc's brand identity and user experience.
Tools Figma Axure RP Google Meet
Team UX Consulting Team (Mr. Daniel Rosenberg, Cayce Huang, Shanivi Gupta) Client (Stakeholders at Welldoc): Senior executives, Business Analyst, Senior UX Designer, Product Manager
Timeline The project was completed in two parts over a 6-month period.
Goal
To translate Welldoc’s mobile app features into a responsive web interfacewhile maintaining visual and functional consistency for seamless user engagement across platforms.
Familiarization with the Welldoc Mobile App
The team started off by conducting a review of the mobile app to familiarize ourselves. We also conducted an official heuristic evaluation, not for this project but on an additional request from the client.
The Big Idea
After brief rounds of discussion, our team embarked on this project with a vision to create a web portal that not only mirrored the functionality of the mobile app but also introduced enhanced features like a comprehensive analytics dashboard.
This would allow users to access deeper insights and more robust data visualization, all within a web-based interface designed to complement the existing mobile experience.
DESIGN
We began by brainstorming various ideas for designing the portal. Our vision was to create a home page that sort of functions as an analytics dashboard.
To achieve this, we sketched multiple drafts to determine the optimal number of columns, placement of widgets, essential analytics to be included and wether the web portal will have consistent IA with the mobile. Below were some of our ideas-
Shortly after meeting with the client, we decided to maintain the existing Information Architecture to ensure user comprehension and align with users' mental models. We also decided to go ahead with three columns because the desktop gave us enough real estate for it. We opted for a top menu style of navigation because it was better for responsive design, which aligned with one of our primary user and business goals.
Narrowing Scope
In this iteration, we majorly focussed on the home screen as wanted to nail that first. Our idea was to divide the home screen into three columns and each column would be dedicated to important analytics: 1: Symptoms 2: Feed (As it occurs in the mobile app) 3: Meals
Each designer on the team took charge of one column. I was responsible for meals and started off by brainstorming the various widgets and analytics that could be included in the design. These were the top ideas:
01 Track Macros Users of the mobile app frequently entered their meals, but found it challenging to easily access information about their daily macros intake. To address this, I decided have made macro details more accessible through the web platform.
02 Explore Recipes This widget is featured on the mobile home screen, aligning with Welldoc's unique value proposition of encouraging users to eat healthy by offering quality recipes. In the past, users have shared how this feature has been helpful in maintaining a healthy lifestyle.
03 Plan Meals Welldoc recently introduced their meal planner functionality and aimed to encourage more users to explore it. With the company's plans to integrate this feature with meal recording in the future, I decided to include it on the home screen to enhance its discoverability. This decision was made with the understanding that it will become an important tool for users moving forward.
04 Record Meals The next widget I proposed was the ability to record meals directly from the home page. Previous user research indicated that Welldoc mobile app users highly prioritized this feature to better manage their chronic condition. By making this functionality easily accessible, we aimed to support their health goals.
After finalizing these widgets, I started brainstorming various design ideas to effectively represent the data by exploring different layouts and visual elements.
I explored and refined various widget designs to ensure they aligned with both user comprehension and business objectives. Ultimately, I narrowed it down to two strong options. After collaborating with my team, we decided on a final design that combined the best elements of both options.
Final Sketch and Wireframe
Client Review
We were ready to show our first iteration to the client, excited about our work. The presentation went smoothly, and we felt confident.
However, after we finished, we realized the client had something else in mind. The atmosphere shifted, and we knew we had to rethink our plan to match their expectations.
Just when you think you have it all figured out, something happens that makes you realize- you know nothing!
THE PIVOT
Discovering Misaligned Expectation The initial design phase was fueled by enthusiasm and creativity, leading to the development of a portal-centric approach. This design was heavy on analytics, assuming that users would appreciate and utilize an expansive suite of analytical tools.
However, during the first client review, a critical insight emerged. The client revealed that the primary demand for the web interface was not an elaborate analytics tool but rather a straightforward translation of the mobile app's functionality to a web platform.
They emphasized that the analytics should be secondary, serving more as an enhancement rather than the core focus.
Second Design Attempt
Upon recognizing the misalignment, the UX team knew a significant shift in approach was necessary.
This led to a pivot towards a user-centric redesign based on business goals, industry best practices, user needs and the current product life cycle phase. Traditional user research methods were not employed due to lack of resources. We broke the problem and thought of a solution that lies at the intersection.
Ideation
Gathering Business Goals The simplest way to learn about business goals was to ask. So, we met with Business Analysts, Product managers and the VP to understand their goals and expectations: 1. Cater to a broader user base 2. Retain core functionalities, maintain consistency with existing design system and ensure familiarity for users 3. Meet customer expectations by offering the anticipated web portal
Importance of Market Context We ensured that the design aligns with market realities and addresses real user needs rather than perceived ones. 1. Conducted Competitor Analysis: Researching major competitors, their strengths, and weaknesses. The team focused on established industry standards and best practices to guide the redesign. 2. Cross-Industry References: Drawing inspiration from other industries (linkedin, facebook) to gain fresh ideas on how to design responsive websites.
Gather User Needs Due to time and resource constraints, we were unable to conduct new user research. Instead, we leveraged past research and collaborated with our Human Factors Engineer to inform our design decisions. 1. We studied past demographic and behavior reports and reviewed past user test session recordings. 2. We reviewed FDA guidelines, one of which helped us understand best practices for designing for emergency use cases.
Initial Phase of the Product Life Cycle Serve as an MVP and help guide future plans for the product.
Second Design Iteration
With this researched information in hand, the team started a second design iteration from scratch. While we reused some components, we mostly started on a blank canvas. The new redesign was focussed on these factors:
1. Streamline Information Architecture by deciding hierarchy of information 2.Maintain a consistent visual and functional relationship with the mobile app 3. Provide insightful health analytics to test for the MVP
01
INTUITIVE NAVIGATION
The website had a primary navigation bar (navbar) at the top. Additionally, there were second-level and third-level navigation options. This multi-tier navigation structure allowed users to access a broader range of content efficiently.
Primary Navigation: The design of the web header drew inspiration from the Welldoc mobile app. We retained the icons but changed the colors and micro-interaction behavior.
We also added a global enter button to allow for easy data entry.
Secondary Navigation: A side panel on the web serves as the secondary navigation. We decided to rename "Logbook" to "Day View" to avoid confusion with the "Logbook" tab in the main navigation. Additionally, we introduced a new "Performance" tab to showcase data visualizations.
Tertiary Navigation : Users can click on a course, which will redirect them to a new screen where each course has its own dedicated navigation.
02
RESPONSIVE DESIGN
We carefully crafted elements like card sizes, layouts, and spacing to maintain visual appeal and functionality across a range of resolutions, from mobile screens to large desktop monitors. By considering factors such as browser window sizes and flexible layouts, our designs ensured that content remains accessible, visually balanced, and user-friendly on any device.
Responsive cards were designed at 390px and 350px for different windows. Below are examples of all card sizes in the website-
Break points for window sizes were determined 1440px and 900px.
We decided the specs for responsive spacing between cards.
03
ANALYTICS DASHBOARD
A dashboard screen was designed from scratch to display in-depth analytics of users' vital stats. This dashboard is intended to serve as a Minimum Viable Product (MVP) for testing and validating the concept with users, ensuring that the design effectively meets their needs and provides valuable insights into their health metrics.
04
DESIGN SYSTEM COMPONENTS
We focused on developing a cohesive design system for the web interface, drawing significant inspiration from the mobile app. This approach ensured consistency across platforms, allowing for a seamless user experience as we translated familiar design elements and interactions from the mobile app to the web environment.
REFLECTION
Learnings
Flexibility and Speed
This project taught me the importance of being flexible in the design process to adapt to changing requirements. When we encountered misalignment with our client, we collaborated effectively with PMs and engineers to realign and stay agile. By iterating quickly, we were able to respond effectively to the new opportunity.
Leveraging Past Research and Industry Standards
It was a setback when we learned that the company didn't have the budget for new research. However, we leveraged past research and industry standards to work within these limitations. This experience showed me that it's still possible to deliver effective and informed designs with limited research. We provided multiple solutions to problems based on existing knowledge and best practices.
Balancing Business Goals and User Needs
I learned to balance business goals with user needs for successful product design. Our team ensured a consistent and inclusive user experience across all devices while supporting business strategies.
Going forward from here
As next steps, I would like to measure the success of the product once it goes into production, and more specifically, the engagement metrics and other analytics. This will help in: Understanding if users are satisfied with the experience and how many active users are using the platforms Analyzing Cross-Platform Behavior: Understand how users move between the mobile app and the web portal, and identify any patterns or preferences. User Segmentation: Segment users based on their preferred platform (web-only, mobile-only, or cross-platform) to tailor engagement strategies accordingly.
.png)
.png)
.png)
.png)
.gif)
.png)
.png)
.png)
