Increasing member conversion rates within an aggressive set of constraints
The product
Wellframe is a platform for health plans to deliver digital, whole-person health management to their members, meeting those people on their own terms and in a convenient, easy-to-use format.
On the Wellframe mobile app, members connect directly via HIPAA-compliant chat with care management teams, customer service representatives, and other support staff who are integral to their health journeys. The app also serves as a way to deliver condition-specific educational content, reminders for appointments and medications, and more.
On the Wellframe web dashboard, health plan staff — primarily care managers, who support members who struggle with their chronic diseases or complex conditions — manage and prioritize their caseload, message and engage with their members, and customize their members’ experience with content appropriate to where their members are at.
The problem
A sign up experience should be an app’s initial chance to make a great first impression on its users, convey the product’s value prop, and provide a smooth start to the users’ experience with the brand—but that’s not what Wellframe’s sign up flow was delivering.
We were able to piece together a different (and underwhelming) narrative from a variety of metrics and leading indicators from internal teams at Wellframe:
30% of all members who successfully onboarded needed help from the Wellframe Support team to do so.
Our Support team spent ~50% of their time in the first half of 2019 resolving issues related to sign up and avoidable user errors in it; 30% of all users who successfully signed up did so only because they had assistance from this team. (This was also expensive: it required development of detailed operational support protocols, maintenance of an extraordinarily complex Support site, and 1-2 dedicated FTEs per client.)
Our Client Services and Operations team would regularly spend countless hours creating 15-step job aids and running multiple trainings at client sites to familiarize care managers with the sign up experience so they could walk their users through sign up, to try to increase success (since users were having such trouble on their own, as detailed above).
Our Engineering team had a backlog of 175+ WCAG/accessibility violations and bugs to fix, and in some parts of the sign up experience, the code was so crippled by tech debt and deprecation that rewriting it would be half as costly as trying to fix it.
Our Data Science team couldn’t pull reliable data for analysis, leaving us in the dark about the sign up flow’s performance, so for all that we wanted to track conversion rates and better understand in a data-driven way why our sign up experience had such middling conversion rates—we couldn’t.
As Wellframe began to scale, the situation became more tenuous. We could have kept on adding more people to the Support team to take on anticipated increases in sign-up related Support requests, for example, or we began the painstaking process of addressing each of those 175+ accessibility violations and bugs, one at a time—but there had to be a way to solve this problem by working smarter, not harder.
The challenge
How might we improve our app sign up experience to improve usability, increase the conversion rate, and allow internal teams to scale effectively?
Process
Discover
I knew from the outset that we were going to be challenged on this project by the time available, the team’s size, and the potential for scope-creep. We began without a dedicated Product Manager, so I took on the majority of the research, discovery, and project management responsibilities in addition to the design, while balancing several other projects. I had a single quarter to deliver a development-ready design and established a plan to work efficiently.
Pragmatically speaking, a sign-up experience isn’t the most innovative or unique user flow in the software ecosystem; almost every app has one. Even though Wellframe’s sign-up flow must adhere to stringent healthcare requirements, other complicated industries have complicated flows, and do them well! For inspiration, I looked to apps that require uncommon or sensitive pieces of information, like those in the financial industry.
I examined investing apps like Robinhood and Wealthsimple, which ask for confidential details such as social security number, previous known addresses, and other items for identity verification. Wellframe, too, needs to verify user identity, so these examples provided helpful guidance on how to do so in a trustworthy, user-friendly way.
The Robinhood investing app, one of the north stars I examined at length. I liked their focus on low cognitive load, by only having the user fill out one field at a time.
Wealthsimple, another financial app that I looked at for inspiration. I liked the progress bar and the “Let’s get you set up” screen (bottom left) to give context for all the information that they would be asking for next.
“When you’re helping a member on a support call, what part of the sign up flow, if any, do you find most difficult to walk them through?”
Due to constraints with our clients, it was difficult to reach patient users for user testing and feedback sessions; as a result, I looked to internal teams and resources like our Help Desk tickets to find user pain points. I interviewed folks such as account managers and support staff, who provided valuable second- and third-hand feedback about where mobile app users were getting stuck in the sign up experience. A key area that I focused on was what parts of the flow were difficult to explain—a good proxy for identifying which parts of the flow were tough to complete unassisted.
Due to the sensitive nature of the health information we handle in Wellframe, I worked closely with our legal counsel to fully understand the compliance standards I’d need to incorporate into our flow. I identified new privacy requirements to enhance our adherence to applicable regulations such as HIPAA, COPPA, CCPA, GDPR, and others.
Finally, I convened with the Tech Lead on our mobile development team to get a better understanding of the known technical limitations of our current sign-up experience. Together we did some archaeological digging to determine the API calls that were used throughout the flow. We mapped out all of the variations that can exist in our sign-up experience: 8-12 steps across 4+ onboarding paths, based on combinations of different features that each client has enabled. It turned out to be a highly complex web of user states, dependencies, and architectural anomalies, yet the exercise yielded an important insight for us—since we wouldn’t have dedicated backend support from the Engineering team for the project, the API calls would have to remain intact and called in the same order to avoid breaking changes.
User flow diagram of the all the possible sign-up variations
Whiteboarding the sign-up flow and where it hits the API endpoints
Plan
With this broad base of knowledge about the business requirements, existing user pain points, and limiting factors that we understood the constraints we’d need to work through and solve for. Although a full code refactor was discussed, we didn’t have data to support the decision to start from scratch and couldn’t justify the cost against other high priority projects and client commitments. I determined we should put the majority of our efforts towards improving the UX, visual design, and content strategy throughout the sign-up experience. Narrowing our focus to these aspects of the sign-up flow would allow us to:
Bring a friendlier, more welcoming tone to the experience (through an elevated visual design language)
Clarify confusing steps in the sign-up flow (by refining the content strategy);
Reduce the cognitive load on each screen (by enhancing the UX); and
Improve the entire flow without changing its basic technical underpinnings (by avoiding any breaking changes to the API).
This strategy put a greater emphasis on my role in the project while allowing our mobile development team to dedicate time to other projects in parallel.
Early-stage sketches
Prototype
Next, I began sketching and building out a prototype of a re-imagined sign-up experience. With the guardrails of the API endpoints in place, I laid out the necessary steps of the flow, in their required order, and then began filling in details. Once I had a basic idea of the look and feel, I created a clickable prototype to share with the Engineering team for first reactions. These were met with excitement—I had included animation ideas and the beginnings of a new, crisp visual design language—but also trepidation. Our team had little familiarity with the code for the existing flow, and our developers were concerned about making substantial changes without really understanding how it should work.
First-pass wireframes
Design workshop
There was clearly a disconnect between what I had learned in my months of discovery and what the mobile development team knew about this part of the app: how it worked currently and what I proposed changing. In order to get the entire team on the same page (including our newly hired PM), I decided to create an artifact in a collaborative way to share what I knew. I came up with the idea for a series of design workshops to construct a “blueprint” of the onboarding paths. Our first session was very simple—we merely plotted out the screens from my prototype and indicated where each API call was made. Over time as we considered each idea and made decisions about what to change, we added those details to our blueprint.
Our entire blueprint for the sign-up experience, including flags for screen taxonomy, event logging naming conventions, API calls, components, expected behaviors, error states, field validation, image assets, navigational model notes, and more.
We used color-coordinated post-it notes to overlay several types of information—everything from the form fields on each screen (including small details such as what could trigger errors and what validation each should have), to the naming conventions for the screens and event-logging data. I led sessions to conduct most of these activities together and found it not only made decision-making more efficient by crowd-sourcing knowledge, but also gave the entire team a sense of ownership over the project and its success. By the time we reached development, the anxiety over unfamiliarity with the code had been dispelled, and this blueprint artifact provided ongoing value as a source of truth, a reference point to write Jira tickets, and a foundation for our content strategy.
Design
Once we had all of these nuances mapped out, I turned my attention back to solidifying the visual design and voice and tone for the sign-up experience. I knew I wanted to create a look and feel that was welcoming and positive, but also had plenty of space for detailed instructions, helpful hints, and encouraging messaging. I settled on an illustration style that conveyed these emotions, a friendly and snappy animation style, and a typographic hierarchy that would allow for both a quick explanation of what to do on each screen and more detailed descriptions if needed.
Illustration mood board and the resultant illustration components
Top: Defining animations for screen transitions;
Bottom: defining micro-interactions for text fields
New visual design language and component based design framework that resulted from the flow redesign
From there, I worked with my Product Manager to define the content for each screen, in each possible user flow, and in each possible state. While we weren’t able to conduct usability testing with users within our demographic, we shared with the relevant internal stakeholders that I had interviewed in my discovery phase. Across the board, each individual was satisfied that the new user experience addressed their concerns about the original flow.
Writing error states and dialogs
Defining content strategy throughout one variation of the user experience
Documenting content for development, so we could more easily update rather than relying on mockups to have the exact final copy
Solution
The final solution for this project is a bold statement about the direction that Wellframe’s mobile app design is moving. With a new, crisp visual design language, a refined content strategy and tone of voice, and lower cognitive load per screen in this complicated flow, we are poised to make a great first impression on new users. Our new sign-up flow provides a smooth user experience that introduces our brand and conveys our value prop in a simple, accessible, and friendly format.
Outcomes
While this feature has not yet been launched, I put a lot of thought into measures by which Wellframe can determine success. By going back to some of the metrics I uncovered during discovery and primary research, I’ve defined our goals below:
30% of active users needed Support team assistance to sign up in 1H 2019:
Reduce by 50%
~50% of Support team tickets were related to sign-up in 1H 2019:
Reduce to ~15%
Over 115 WCAG/accessibility violations on each platform:
Reduce by 95%
Success! This goal was met in development.