00_Hero.png

Arrow Birth

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.

01_Team Arrow.png

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.

06_Content Auditpng.png

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.

07_Price Chart.png

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.

Domain Research

Mental models and behaviors of current working moms.

UX Patterns

Best practices for onboarding and account creation.

Meet Peggy

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.

AB_Affinity Diagram.png

The affinity diagram can be viewed here.

Peggy is a busy working professional. She wants to have a baby soon and is looking at her options for family planning and pregnancy.

AB Storyboard.png

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.

16_Usr Flow v01.png

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.

Arrow Birth Dash Sketches.png

Dashboard sketches

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.

19_Dashboard_v1.png

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:

100% Onboarded

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.

 
Birthing Iterations

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.

25_User Flow v02.png

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.

26_Dashboard Iteration 1.png

Dashboard Iterations

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:

27_Preference Test.png

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

 

Outcome

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.

30_Mockups.png

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.

 
Lessons Learned

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.

Client Testimonial

"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.

Featured Work

Thought that was interesting? Check out my other featured projects.

Franck

Mobile Web

UX/UI, Strategy, Research

Paw Prints

iOS Mobile App

UX/UI, Research, Visual

PetHarbor

Website Embed

UX/UI, Research

Say Hello

Wanna know more about my projects or work together? Let's chat about it!

Call me, beep me,

if you wanna reach me...

  • LinkedIn
  • Instagram

© 2020 Martha Magsombol