Arrow Birth
Helping company break into B2B market by designing platform for employer manage workplace benefit
Project Overview:
Challenges
Arrow Birth offers digital courses for childbirth and early parenting as well as 1-on-1 consulting sessions with professionals that support every stage of the parenthood path. Arrow Birth wanted to expand its business into a B2B setting by offering its products for employees as a company benefits program. We were brought in as designers to help them establish the ideal onboarding process for this new business expansion.
Goals
Establish the ideal onboarding process for B2B clients.
Solutions
Design a user flow for onboarding B2B clients.
Provide a tool to help B2B users (employers) easily manage our product as an employee benefit.
Outcomes
Enable client’s to expand their business to B2B setting
User flow & wireframe
About Arrow Birth
Arrow Birth offers digital childbirth and early parenting courses and on-demand, 1-to-1 consulting sessions with professionals that support every stage of the parenthood path. Arrow Birth also offers services and products to the company’s employees In the B2B setting where we were brought in as designers to help them establish the user flow.
Project Brief
This project focused on establishing the ideal onboarding process for the business client. The business client is the employer or HR who will manage their employees’ access to Arrow Birth.
The expected outcome of this project are:
1. User flow for the employer
2. Wireframe for the employer page
Aligning focus and expectation
At the beginning of a project, it’s important to align everyone’s understanding of the brief, and the expectation so that we can set our step to the same focus. For that reason, we planned out our kick-off meeting with the clients. We also set the collaborative side of the project like the time difference and appointed contact point to make sure the communication runs smoothly.
Research
Our initial sprint focused on assisting clients in identifying their issue through conducting research. We selected 3 research approaches, taking into account time and resource limitations. The objective of each study, the challenge, and the key points from each are presented in the following table, while the outcomes of the research will be disclosed once we have synthesized them.
Defining the problem
We exercised affinity diagram to visualize the data in order to find patterns. From the affinity diagram, we could see the general picture of our user and their problem. We synthesized the problem into a problem statement and encapsulated users’ goal, motivation, and need into a persona, Elaine.
It’s important that the clients understand who their user is and the user’s problem so the clients know what problem are we trying to solve and who are we helping. We wanted to communicate the story of Elaine in the most engaging way as possible, which is through a story. We created a storyboard to point out Elaine’s journey as an employer and where Arrow Birth will take a role.
Understanding the constraints
Currently, our clients use WordPress as their website builder with some additional plugin such as Woocommerce and Buddyboss to support their website. Before we continue ideating, we reached out to the backend developers to talk about the technical feasibility as it is important for us to understand the constraints to build around them. We continue working with them and iterate along the way until we have achievable design.
Exploring the solution
How will Elaine’s journey with Arrow Birth look like? We needed to know more detail about Elaine’s journey with Arrow Birth, so we formulated Elaine’s journey into a user flow.
One of the steps to bring ideas into life is by sketching. We decided to break up to put our individual ideas into sketches to translate our idea better then regroup to brainstorm about what’s the best way to solve Elaine’s problem.
As we’re ideating, we kept Elaine’s picture in our mind as we wanted to make sure to approach the problem from her perspective, as a busy employer. Our goal is to provide Elaine a straightforward way to administer her employee to Arrow Birth to save her time and effort.
Gaining feedback and iteration
Was our approach heading in the right direction of solving the problem? Was our design usable? The best way to find out was to test it and gain some feedback. Here are our efforts to gain feedback:
Formative test
We did this in the early ideation process to see if our approach pointing to the right direction to solve the problem
Design Critique
Brought the design to the other fellow designers to get more insight from design perspective such as UI pattern
Usability Test
review company and plan info; add or remove an employee from your plan; obtain the employee registration link; to pay bill
Iterations
1. On the dashboard: Users didn't notice that the dashboard cards were interactive, so we introduced a button to each card. We removed the hover interaction from the cards and applied it to the buttons.
Before
After
2. On the manage members page: Adding and eliminating members proved difficult, as the remove button only shows up after clicking the checkbox. Recognizing employers are unlikely to remove members in batches, we've replaced the checkbox with a remove CTA at the end of each employee row.
Before
After
Final Design
After iterating the design and applied the visual design per branding guidelines, we compiled all of our research artifcact, annotated wireframe, and prototype on a shared folder and handed it off to the clients and delveloper. We included a ‘read me’ file to show them the list of the item and where to locate them.
