Health Hero Employee Engagement App
Health Hero is an app designed for employees to increase health awareness and physical activity through wellness exams and gamification. It allows employers a better picture of the collective health of their employees and provides health insurance discounts and other incentives to employees for participation.
This project focused on one section of the Health Hero Employee Engagement App – the Groups interface. When I joined the team at Health Hero, the app had been without a designer and refined QA process for quite some time. As a result, the user flows and navigation were overwhelmingly problematic. Adoption rates were exceedingly low, and Help Desk tickets were piling up.
I was the Head of Product and User Experience, and worked with a junior designer to:
- Issue assessment: Review Asana and FreskDesk tickets to cataloge frequency and severity of issues reported
- Define and prioritize needed improvements
- Mockup/prototype interface changes reflecting needed improvements
- Devise user tests and test metrics
- Plan for future iterations
We allotted roughly three weeks to complete the assessment, design, and testing/iterating for this project given our goal of keeping the changes to the underlying IA as minimal as possible. The final results were handed off to the dev team at this point for scheduling into our sprint plan.
Week 1: Identify problems, map out solutions, start employing solutions, secure test + backup test subjects.
Week 2: Create and deploy tests and analyze results.
Week 3: Redesign and retest, create necessary documentation for dev team.
Identification and prioritization of issues
We assessed hundreds of FreshDesk Tickets and cataloged the frequency and severity of the tickets. After this, we spoke with users to collect additional feedback.
These occurred frequently and affected the user’s ability to complete their tasks.
- Too many dead ends – There were no ways to back out of certain sections, cancel actions, or check on/cancel progress of pending group invites
- Button locations and symbols were confusing
- This section, though intended for frequent use, was at the bottom of a 15 or so item hamburger navigation on the mobile menu
These did not prohibit use, but made the experience cumbersome for the user.
- Messaging was not present when needed to direct, or communicate success or failure – so the user was perpetually unaware of the status of the tasks they were trying to perform
- The UI lacked hierarchy so understanding it’s flow was difficult.
A few examples of the interface issues
- Groups Navigational item is low on the list, despite being one of the more frequently used options.
- Leaderboard and Groups are both parts of the same section. Having two different nav items was confusing.
- A subnavigation menu was obscured at the top of the screen.
- There was some redundancy and confusion over steps being listed twice.
- The + sign in the header was confusing and didn’t relate to the interface at all, despite appearing to.
- The leaderboard is a subsection, but the labeling makes it appear to be the main section. The user should be able to back out of this.
- Green + icon was confusing to users. They didn’t realize it meant join group.
- The team title and description weren’t visible.
- Two icons with + icons in the same screen were very confusing.
- While creating a team (also inconsistently sometimes called Group), the user cannot delete a picture once added.
- Team Captain has no ability to edit the participant capacity of the group.
- The plus sign is again, confusing.
Critical user tasks
There are two user types, a general user/member and a group captain.
Group member needs to:
- Access groups interface.
- Access groups they are a member of.
- Get information about available groups.
- Join/leave groups, and see statuses for both states.
- View individual and group leaderboard statistics.
Group Captain needs to do everything a group member can do plus the following:
- Ability to create a group, limit # of participants and invite participants.
- View group invite statuses, revoke and resend invites.
- Reassign a new group captain.
Create a plan that employs as minimal change as possible to the core UX to save time, money and prevent users from having to relearn the interface.
- Work through user flows to ensure no dead ends.
- Rework main navigation.
- Fix messaging so the user has a perpetual awareness of where they are and what actions are available to them.
- Reinforce user paths through visual hierarchy and messaging.
- Allow captains to resend, delete and check status of group invites
The success of this interface was to be validated by testing 8-10 of our actual users comprised of a few different companies who used our app. Since we had visual libraries and mockups with the existing interface and weren’t doing an IA overhaul, we were able to tweak the existing mockups quickly to provide a high fidelity Invision prototype. We tested with Loop11and used our own participant pool.
We measured: effectiveness, efficiency and overall satisfaction.
The majority of the tasks were completed within the success metrics we set on the first try. Some of the messaging was still confusing or ambiguous, so we refined the messages, and a few button labels for our second iteration and our follow-ups fell within the defined success metrics.
Our users are not universally tech-savvy, so in many cases, common tablet/smartphone use patterns like swipe left/right were not intuited by the users and more explicit solutions were needed.