00_Hero.png

Arrow Birth

How might we help Arrow Birth expand to businesses and their employees?

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.

Type: Client


Team: 4 UX Designers, 2 PMs, 1 Developer


Roles: Research, Synthesis, User Flow, Wireframe, Test


Tools: Procreate, Figma, Miro, Zoom

The Challenge

The design team was tasked to tackle the onboarding process for the employer (B2B) and individual employee (B2C) sides. The design team split into two to focus on the different target users, but still checked in with each other throughout the process to make sure that our research and designs aligned with each other.

B2B and B2C team breakdown

Being assigned to the team that handled the individual employee (B2C) side, my goals as a designer were to...

Create User Flow
Employees activation and onboarding of employer- provided benefits.

Gather User Analytics
Data-gathering questions in the onboarding process for Arrow Birth's future use.

Help First-time Users
Redesigning the home screen so users can better understand Arrow Birth's offerings.

Starting Line

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 members' dashboard

From the content audit, I found that they were lacking usability heuristics that would make the website friendly for first-time users.


After going through the website, I coordinated with the B2B team to hold a meeting with the client to understand their business offerings, and how that might affect the employees. Our client revealed that they had 3 different levels in their current offered plans:

07_Price Chart.png

Arrow Birth's plan offerings to businesses

From this, 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 basic understanding of Arrow Birth’s business plan, I started to look into our users.

Understanding Our Users

The following is our target audience as defined by Arrow Birth in our brief:

25-40 year old females

Users with high education backgrounds

Expecting working parents

Current working parents

[Uh-Oh!] Interview Mishaps
We were provided with 8 interview participants, but found that 3 of them were stakeholders, who could have introduced bias to the research. As a result, we looked to the remaining 5, but only had 3 who were still potential end users that met the above criteria.

[Yay!] Supplementing our Research
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.

We compiled our research into an affinity diagram, and we found that:

Career-focused women who still want children place high value in family planning
There is strong evidence demonstrating men’s desire for education on the topic
• Employees usually activate benefits through their work’s HR portal and work email
• Reimbursement is the most preferred benefit when it comes to employer-provided classes
They want to be able to use the product as soon as possible.

Meet Peggy
The client was already familiar with their target audience, but creating a persona from our findings helped facilitate our conversation about design decisions during meetings.


Peggy is a busy working woman who wants to have a baby soon and is looking into family planning.

14_Persona.png

Persona: Peggy, the Working Professional

Keeping Peggy in mind, I worked with the team to come up with our problem statement:

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.

User Flows + Wireframes

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 User Flow version 1

Our B2C team met with the B2B team to converge on our user flows and make sure that our potential ideas fit together. 

The design team collectively agreed to test our user flows, so I proceeded to midfidelity wireframes for the B2C side to save time and test. While designing, I kept Arrow Birth’s business offerings in mind, which were that every B2C user has free access to courses and an Arrow Guide. Below are some key screens:

Welcome Overlay
Personalized using the Arrow Guide with a CTA to the Arrow Guide’s first message to let the user know what’s included in their plan.

18_Overlay.png

Welcome Overlay

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

19_Dashboard_v1.png

Dashboard Redesign

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.

Testing User Flows
We put together a quick prototype to conduct a formative test with end users to validate or refute the hypothesized tasks in the user flow. We found that users…

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.

These findings were a great piece of information to update the client on, so I worked with the design team to communicate our findings and planned next steps.

[Uh-Oh!] Technical Rabbit Hole
Our clients were pleased to hear about the progress and test results, but they became hyper focused on the technical feasibility of our designs so far. They had questions for us that could not be answered from our end.

[Yay!] The gang’s all here!
We asked the client for a meeting that included the developer. Having the developer exchange questions and answers with the design team put our clients’ earlier technical concerns at ease. She assured the clients that our user flows, initial wireframes, and planned iterations were within technical feasibility.

Additionally, the developer clarified the parts of our flows that linked B2B and B2C.

How B2B and B2C's user flows connect

Iterations on Iterations

User Flow Iterations
During the meeting, we got approval from the client to change the last part of the flow to simply end on the Dashboard, because anything after that was past onboarding. The results of our formative test, which was that the welcome overlay and tutorial were not valuable to users, dictated this final iteration.

25_User Flow v02.png

B2C User Flow version 2

With the remaining time on the project, I focused my attention on the dashboard design to assure that it was friendly for first time use.


Dashboard Redesign Continued
Based on the formative test and input from our client we made the following iterations to the dashboard wireframes:

1. Removing Tutorial banner and moving "COVID" link there for time sensitivity.
2. “Consultations” on the second tier to accommodate client’s request to place it up front with the goal of selling consultations to users whose plans did not cover it.

26_Dashboard Iteration 1.png

Dashboard Iterations

Navigation
We still needed to validation on the navigation design, because our previous formative test was focused on user flow. Given the time that we had left on the project, we couldn’t create more screens for users to interact with through regular usability testing. I decided to do preference testing between the side navigation that we currently had and a split navigation, and quickly wireframed the second option. 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

High Fidelity

While our handoff stopped at mid-fidelity, I worked with the team to bring our wires to mockups to have a better feel of the experience after the project. We used existing colors and similar fonts to the ones that were present in their current arrowbirth.com website.

30_Mockups.png

Hifi Screens | Registration → Onboarding → Dashboard

If we 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.

What I learned from this project is...

Design for non-designers
Meetings are design challenges of their own. Assuring that all participants (including and especially the developer) are present is important, especially in this case where the clients were worried about technical feasibility since they were using Wordpress along with several plugins to create their website. Because our clients were non-designers, we needed to make sure that our conversations were clear and presented in layman’s terms.

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 this client project where I worked as a solo UX/UI designer.

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