Improving online enrollment experience for people on desktop screens
PRODUCT DESIGN . RESEARCH . DESKTOP DESIGN
PRODUCT DESIGN . RESEARCH . DESKTOP DESIGN
OVERVIEW
Ascensus as a company offered tax deferred programs for retirement, education, healthcare and for people living with disability. Enrollment flow to sign up for a tax deferred account for various lines of business was different from each other. This initiative was to design a universal enrollment flow that would allow a for a more smoother transition between each of these accounts, make the back end management of these accounts much easier and reduce technical debt in the process.
MY TEAM
Solo Product Designer with guidance from the Design Director, Product Manager, Product Owner, Marketing Manager, & 2+ Engineers
MY ROLE
Responsible for in-depth research, working closely with Account Owners and internal teams to craft the end to end design of the web experience.
TIMELINE
October 2022 -Jan 2023, Launching in March 2023
The Challenge
The existing enrollment flow for the Ready Save app was a dated and disjointed experience. The interactive elements were old and didn't meet any of the WCAG 2.1 AA criteria. Our goal with this redesign was to create an universal enrollment flow for both mobile and desktop, increase conversion rates, increase rate of Upromise rewards and simplify investment selection.
Discovery
Getting everyone on the same page with the help of user journey map
The first thing I did was to gather our cross functional teams and collectively build a rough user journey map. This was a way for us to align our thought process and build a unified vision for the product. This helped us align team members, clients, and other stakeholders on the user experience goals, identify areas for improvement, and facilitate discussions and decision-making based on a shared understanding of the user journey.
The working group identified 4 key behaviors of differing priority that they would like promote as a part of the enrollment process.
Meeting users where they are
The next thing I did was to speak to current account owners and conduct a usability test to see how they were nvigating the current enrollment flow. Speaking to account owners about their experience was super insightful and helped inform our key design decisions for the web experience. Here are a few main takeaways.
Sythesizing User Research
Once we had collected data from our users, I combed through all our themes and clusters and organized them based on successful completion success rates, warning, and error rates. This helped me clearly communicate which usability issues are critical and urgently need attention, and which ones are less of an issue. Each of these stickies below are linked to the user interview video snippets that allowed internal teams to watch and listen what the users had to say about our current features and functionalities.
Design Principles
The next step was to take these usage contexts and develop a clear vision of the design. Brainstorming a set of experience principles was used to drive some of the key design decisions of the product.
Iterations
PROGRESSION BAR
We know from research that people didn't go back and forth between different pages within the enrollment flow.
So this guided our design decision to add a progression bar to give an indication as to where the user is in the flow. After a few iterations we decided to move it to to the top of the page to simplify the design.
This also reduces the clutter on this page and there is more real estate to help guide the users eye to the most important elements on the screen.
SENSITIVE INFORMATION
Initially when we were thinking of the redesign , our assumption was that one of the main friction points the users would encounter is when they have to give away their SSN.
But our research indicated to us that users that were committed to signing up didn't think twice before giving away their SSN. They trusted the platform and was comfortable giving away their SSN.
So this guided our design decision to take out the assistive text for SSN and the side bar to reduce clutter so that users can focus on the most important task on the screen.
.png)
STREAMLINING THE FLOW
Our current design required users to complete 16 steps to get to the enrollment completion finish line.
We thought this was time consuming and unnecessary. So we consolidated the screens to be make it efficient and simplified the over enrollment flow by adding progressive disclosure on funding and future scholar screens.
With this updated design, users would only have to go through 5 clearly labeled screens to set up the account.
PORTFOLIO SELECTION
Our research indicated to us the most users trusted the platform and chose the keep it simple path when selecting investments.
But there were a select few who wanted to build their own portfolio. And this required them to have an easy access to the performance rates and other relevant information before making a selection.
So this guided our design decision to add an expand/collapsible UI design pattern for the build your own portfolio screen. This allowed the user to read through content as they were making their selections.
UPROMISE SCREEN
Most users skipped the Upromise screen and said that they didn't trust the partner brand enough to sign up for their program.
So this guided our design decision to add relevant data that would compel the user or in the very least motivate them to consider signing up for the program.
We also added an input field where users with a Upromise account will directly be able to connect to their accounts without having to get out of the enrollment experience.
Validation
Once the new experience was ready, we reached out to Ready Save 529 Account owners again for Flash Feedback sessions. We asked them to try out the new experience, and to our extreme delight all users were able to intuitively start and complete the enrollment flow, understand and use the new features and had almost no hiccups along the way.
Design
Once we had validated and gotten user feedback, it was time to refine the designs. Please see below for hi-fidelity mock ups
Challenges
The biggest challenge for this project was getting everyone in the design and product team to be on the same page. Clarifying the impact with the top level leadership and other stakeholders was another challenge that we had to work through especially since there was an existing enrollment experience for mobile. Once we got a thumbs up for the re-design we were able to align the user feedback with the business outcomes.