Made for a tech start up that creates a wellness app for life insurance policyholders (specific company name available upon request). User engagement on the Dashboard was low. And the number of return users only about 1% of the eligible user base. There was a need for a Dashboard redesign to make navigation more intuitive for users and increase return visits to the product.
In preparation for the Dashboard 2.0 redesign, I conducted the following research activities:
View HotJar Videos. Watch and record findings of user activity and behavior on our app. Data set of 50 different users. HotJar is a tool we use to record users' web sessions and then view how users operate and behave when working through our web app. This helps us determine if users are moving through as web app as intended or if there are areas of improvement or opportunities for better engagement.
Document existing dashboard navigation. Write out and list all of the navigation headings and webpages that make up our app. To understand all of the components of the dashboard and how they function today, a Trello board was created to list all of the app features and pages. Every component of our existing app and the category it sits under is documented on the Trello board titled Dashboard (CURRENT STATE). In addition to the Trello board, a visual user workflow of our existing app was created to illustrate how users move through our app from the dashboard, top navigation, and side navigation.
Review and list observations.
Hot Jar Key Findings
• Most Used Features: mood, water, sleep, health record, workouts, food journal (also most are above the fold). Overall greater user page views for tracking features
• Frequent clicks on Leaderboard to check ranking and user desire to see more info about competitor’s profile and ranking.
• Lowest used features were content library, surveys, points, and rewards pages. For example with the Content Library 5 out of 50 users explored, 1 out of 50 user actually read an article. Points was used by 4 out of 50 users. Surveys were taken by 3 out of 50 users. And only one user redeemed their Rewards.
User Flow Of Existing App
This is a visual representation of how the web app currently functions. User flow means the paths in which a user can move around the site. The success of a website or app is often contingent upon how well your modeled flows meet the needs of your targeted users (personas), as well as the needs of your business.
To see the user flow in its entirety please view via this Overflow link.
User Flow Key Findings
SPECIFIC FUNCTIONAL PATTERNS
The app has a very specific user pattern, which is:
Track health data
Earn points (shown as a flash notification)
View graphs and trends of health data
View insights (which is data correlations and its meaning)
Return to dashboard
Other functions user can do:
View points and leaderboard
View and claim rewards
INCONSISTENCY FROM ONE FEATURE TO THE NEXT
Not all features follow the same user pattern.
Some features (food journal, workouts) allow you to track and immediately see graphs or insights.
Other features (water, sleep, mood) direct you back to the dashboard immediately after tracking and skip redirecting users to insights.
Some feature headings or titles are not consistent
Some pages have "Back to dashboard" at the top while others do not.
In some cases, a user is automatically re-directed back to dashboard after taking an action on a page.
In the top navigation there is "Points" tab but also a circular points icon that both lead to the points page. The circular points icon is not clear or intuitive what it is or means until you click on it.
Redundancy in and of itself is not necessarily bad especially if its used to encourage desired user behavior. However in this instance the symbol isn't intuitive and rarely was used according to HotJar video findings.
There are three different patterns depending on what you click.
Some features that are Dashboard Cards (mood, sleep, water) are not in the Top or Side Navigations.
Top Navigation and Side Navigation share the some of the same features (e.g., Workouts, Food Journal) but take you to different pages.
"Workouts" in the top navigation takes you to the Workout Summary or Trends page.
"Workouts" in the right side navigation take you to Track A New Workout page.
There little visual indication of where you are as a user and how you move through or go back from one page to another.
Physical Health Trends can only be accessed by clicking on the Teddyman icon at bottom of dashboard or lifeline icon (squiggly purple line) in the top navigation. This is not evident to the user. According to HotJar videos, these two icons are rarely clicked on. Therefore, these pages are buried and rarely seen.
Dashboard Navigation + Content Structure Exercise
I conducted an exercise using Trello boards where the current site navigation and all web pages were documented and categorized to understand our existing user experience. The above Current State shows the Web App as is. I made the boards with each tab, and then under it are the categories. i.e. Rewards stands for all that is underneath the rewards tab on top nav.
Opportunities for Growth
Consistency with Dashboard card styles and patterns
Create a more connected experience
Consider the hierarchy of Dashboard
Create uniform patterns and style across all features
Display Insights in a more prominent way
Consistency with Dashboard Card Style & Patterns
Determine standard functionality of dashboard card. Then apply in a uniform way for every feature.
Here is one proposal:
-Track health data directly on card without leaving dashboard
-View graph of data directly on card without leaving dashboard (would flip automatically after new record submitted)
-Click button to view further insights and then be directed to that feature's insights page
-Click"Dashboard" in the top navigation to return to the dashboard
Create a More Connected Experience
Potentially could link similar pages together.
Based on HotJar footage, This Week’s Leaderboard on the side navigation gets attention; however, this is a static element. Users’click on their rank and other users' rank on this Leaderboard but nothing happens because it is not linked to points or leaderboard. There is an opportunity to link this ranking list to a Leaderboard page that explains rankings. Or incorporate with points more cohesively.
Consider the Hierarchy of Dashboard
Based on HotJar footage, content that is above the fold on the app homepage gets the most click activity and engagement.
We should think about how we prioritize and order items on the Dashboard.
Create Uniform Patterns and Style Across all Features
Consistent in how we:
name features (e.g. navigation heading, and page title headings)
each feature page appears and is accessible for a user (e.g. tracking, graphs / insights.)
users can track actions (e.g. some actions like water and sleep can only be tracked on dashboard but other actions can be tracked on a separate pages like workouts, health record, and food journal).
users move from one feature page or sub-page to another.
Display Insights in a More Prominent Way
Currently Insights are embedded within dashboard cards and by being buried many users aren’t accessing Insights.
We can rethink how Insights are more accessible to users.
Other Areas to Clarify as a Company Before Moving Forward
1. What is the purpose of the dashboard cards?
Viewing user progress?
Previewing features and linking user to feature page?
2. What is the primary action we want the user to do on the dashboard?
Stay up-to-date on their progress? Be more Insights focused?
Keep tracking more actions?
3. How can the dashboard design be more like a "coach" (i.e., instructive)?
Voice, tone, style of user empty state (How do we get user to understand and take a first action?)
Voice, tone, style of user progress state (How do we get user to continue action.
Voice, tone, style, and timing of notifications
New Dashboard Card Pattern
This carousel shows empty state to active state where the dashboard cards would flip after a user interacts with each feature. After they submit a health record they could immediately view a health insight and have the option to click in deeper for more health insights.