B2C onboarding for Arrow Birth as an employee benefit
Role: UX Designer and Researcher
Team: 4 UX Designers, 2 Project Managers, 1 Developer, 2 Business Stakeholders
Platform: Desktop Web
Tools: Procreate, Figma, Miro, Zoom, Jira
Problem: Users want an easy and fast way to activate Arrow Birth services as a benefit through their employer.
Solution: A short but personal onboarding experience that ends with a self-explanatory dashboard.
Outcome: 100% usability success rate for a streamlined onboarding process, and a reworked dashboard with a navigation preferred by 70% of users.
Arrow Birth is an online education platform that offers digital courses and expert consultation for modern parents on the topic of parenthood. Their current offerings are for individual families, and they are looking to expand to forward-thinking employers in a B2B model. The design team was brought in to help Arrow Birth design for this planned B2B expansion.
B2B and B2C team breakdown
Pregnant with Problems
To get an understanding of our starting point, I conducted a content audit of their unpublished members site on Wordpress to better understand the Arrow Birth’s current direction.
Arrow Birth's initial members' dashboard
From the content audit, I found that they were lacking usability heuristics that would make the website friendly for first-time users. Additionally, I met with the client and B2B team to learn about Arrow Birth’s plan for this expansion and how it might affect the users I was designing for.
Arrow Birth's planned offerings to businesses
I learned that B2C users will all have courses and Arrow Guides in common, no matter what level plan their employer provided. Arrow Guides are specialists who provide support exclusive to B2C customers. Having a concept of Arrow Birth’s business plan helped me understand how to approach user research.
Getting to Know Parents
[Uh-Oh!] We were provided with 8 interview participants, but could only use 3 who were still potential end users that met the above criteria and were not stakeholders that could introduce bias. In order to gather more data to understand our users, I worked with the team to supplement our research with the following:
Survey on Onboarding
On how users activate employer-provided benefits.
Mental models and behaviors of current working moms.
Best practices for onboarding and account creation.
I worked with my team to define a primary persona through affinity diagramming the primary research to find patterns and analyzing data from secondary sources. Defining a persona helped facilitate our conversation about design decisions during stakeholder meetings.
Peggy is a busy working professional. She wants to have a baby soon and is looking at her options for family planning and pregnancy.
Peggy's experience based on research data
With an understanding of Peggy, it was easier to pin point a problem statement to references when creating designs.
Users want an easy and fast way to activate Arrow Birth services through their employer in order to educate themselves on parenthood and family planning so that they can feel empowered as working parents.
The Stages of Finding a Solution
1. Early Flows
I drafted a user flow based on our research and problem statement, making sure to add data-gathering questions per the clients’ request.
B2C Onboarding Flow
2. Initial Wireframes
The user flow gave me a direction for sketches to visualize the onboarding. I focused on reworking the dashboard for better visual hierarchy because the user’s ultimate goal was to use Arrow Birth as an educational service and not just onboard.
I converged with the B2C team to discuss our ideas and took sketches into mid-fidelity wireframes to start testing. Here’s how the dashboard evolved based on my sketches.
Dashboard Initial Redesign
This screen was redesigned so that there is a hero image to highlight “Courses,” because this is included free for every plan for the B2C user. Other changes made were the addition of titles and descriptions, as well as moving all navigation items to the side bar to keep them all together.
3. Actively Testing the Flow
I conducted a formative test with end users to validate or refute the hypothesized tasks in the user flow. The following are the results:
All participants completed the onboarding up to the dashboard
Welcome Overlay Dislike
Closed it right away, without even reading its contents.
Explore > Tutorial
Expressed that they signed up for a service not a tutorial.
Refining the User Flow
Upon uncovering the results, the team got approval from the client to change the last part of the flow to simply end on the Dashboard because the welcome overlay and tutorial were not valuable to users.
Iterated B2C Onboarding Flow
With the remaining time on the project, I continued to focused my attention on the dashboard design to assure that it was friendly for first time users.
Iterations on the Dashboard
Based on the formative test and input from our client I made the following iterations to the dashboard wireframes:
1. Placed “COVID” info in the banner to follow similar time-sensitive ui patterns in other sites.
2. Placed “Consultations” on the second tier to accommodate client’s request to place it up front, aligning with the business goal of selling consultations to users whose plans did not cover it.
Wait-- we need to test the Navigation!
The formative test was focused on user flow of onboarding, but our user's ultimate goal is to use Arrow Birth and navigation from the Dashboard is crucial. Given the time left on the project, I couldn’t create more screens for users to interact with through regular usability testing. I decided to conduct preference testing as a quick way to gather data and understand user behavior. Below were the tested screens:
Preference Test Options. Split Navigation was more popular!
Overall, we had 17 participants and found that 70% of users preferred Screen B with split navigation because of:
Groupings of the Information
Visibility of the Navigation Items
In summary, this design achieved a 100% success rate for a streamlined onboarding process, as well as a reworked dashboard with a navigation preferred by 70% of users. I worked with the team to bring the designs to high fidelity utilizing Arrow Birth's branding present at the time.
Hifi Screens | Registration → Onboarding → Dashboard
If I had more time...
I would have wireframed a few more of the screens past the dashboard, so that we can fully test how well the navigation serves the user when interacting with the website. I would have also tested the UX writing of the website. There were a lot of items that were not labeled clearly and missing descriptions when I conducted a content audit. This would have ultimately led to different results during usability testing as well.
Constraints aren't dead ends
Time and resources were a major constraints for this project. I learned that constraints are actually a great tool for driving strategy decisions. Constraints aren’t dead ends, there’s always more than one way to solve a problem. This project was an excellent lesson in utilizing the entire design process in a more condensed manner. Research and testing are just as important as the design itself, so finding ways to conduct research and test in unideal conditions was a good lesson to learn.
"Martha worked with a team of UX designers helping my company, Arrow Birth, tackle user flows, client on-boarding and overall UX within our web platform. I was very impressed with her ideas, professionalism, and commitment to excellence. I highly recommend her and know your company or project will benefit from having Martha on your team! "
Mari Stutzman Smith
Co-Founder of Arrow Birth
Arrow is currently seeking a seed round and is aiming to ship this B2B/B2C expansion in late 2021.
All illustrations and animation done by me.
Thought that was interesting? Check out my other featured projects.