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.
Team: 4 UX Designers, 2 PMs, 1 Developer
Roles: Research, Synthesis, User Flow, Wireframe, Test
Tools: Procreate, Figma, Miro, Zoom
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.
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 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:
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.
Mental models and behaviors of current working moms.
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.
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.
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.
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:
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.
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.
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.
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.
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:
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
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.
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.