Brand Onboarding Redesign
SUMMARY
This project was for Abound (helloabound.com) where I was the founding designer for its two-sided marketplace. Abound is a curated e-commerce platform for buying and selling wholesale.
Two of the core pillars for Abound's mission were scalability and growth. In order to build for this, we needed to have a seamless onboarding experience that enabled brands to launch their shop and be ready to start selling on Abound quickly.
ROLE
Product Designer
TEAM
Product Designer
Project Manager
3 Engineers
THE CHALLENGE
Brands Aren't Launching With a Ready-to-Sell Shop
One of our offerings to retailers was that new brands would be added to the platform weekly. Through previous user interviews with retailers, and watching retailers shop on FullStory (a platform that captures every user interaction) we knew that a retailer's first stop on Abound was typically the "New Arrivals" section where they would look for new brands to discover and shop from. This meant that having brands onboarded quickly and ready to sell was important. But we were observing two main challenges:
Challenge 1: Brands start, but don't complete, onboarding, and therefore never launch their shop
Challenge 2: Brands complete onboarding and launch their shop, but it's not in a good place to sell (incorrect assets uploaded, bad photos etc.)
THE SOLUTION
Multi-Step In-App Guide
By redesigning the onboarding to be a multi-step in-app guide we would:
-
Add clarity about what brands need to do in order to successfully set up their shop
-
Educate brands on best practices for their shop
-
Allow brands to submit their project catalog in-app
-
Give brands an easy way to get help along the way
-
Lock brands into onboarding before they can do anything else to focus their efforts
USER RESEARCH
Where Are Users Getting Stuck and Why?
While we had a hypothesis that the solution to our challenge was a multi-step in-app guide, I wanted to gain validity. In order to do this, I worked with coworkers from the brand success team (who had been the closest to the issues happening with the current onboarding process), to come up with a list of assumptions. These assumptions were based on what brands asked for help with during onboarding, and what they observed that brands hadn't done well when conducting brand assessments. I then interviewed seven brands who had been approved to sell in the marketplace and had started, but not completed, onboarding.
I conducted the seven brand interviews via Zoom where I had the brand share their screen and complete onboarding. I asked them to talk out loud while they completed each step and verbally share any frustrations/ideas/thoughts they had.
Original onboarding flow
After each brand user interview, I filled out an assumptions table, testing the same assumptions with each user.
Assumptions table filled out after an interview
USER STORIES & FLOWS
Seeing it in the Context of the User
Using the insights gleaned from the user interviewers, I put together user stories to lay out the focus for the redesign:
“I want to be guided throughout.”
“I want to be able to ask for help."
“I want to see where I am in the process.”
“I want to see where my images will go.”
“I want to see examples of the images I'm adding.”
"I want to know what my shop will look like as I build it."
“I want to know the status of my product catalog upload."
For this project, I was only redesigning the brand onboarding experience once they were approved to sell in the marketplace, but I wanted to lay out the user's entire journey to give me a full picture:
Flow for user before they begin onboarding
Proposed onboarding flow
IDEATING & WIREFRAMES
Exploring Different Options
Now that we had an idea of the user needs, it was time to start wireframing. I designed desktop-first because the majority of brands used Abound on their desktop computer. I ended up presenting two options to the team.
Option 1
Option 1 aligned with the user flow I had laid out above. It was the simplest option. I took the fields we had in the brand settings, reorganized them, and laid them out with a stepper.
Pro: Simplest approach; less to build for engineers
Con: Doesn't create the hand-holding experience brands said they want; doesn't allow for more detailed guidelines/examples; might still feel overwhelming; doesn't clearly show where they can view the progress of their shop
Option 2
Option 2 proposed a more complete redesign, with a reimagining of each step.
Pro: More visual; the hand-holding experience brands want; less information requested in each step is less overwhelming and allows for more focus on each task; provides more guidelines for images; provides examples for reference
Con: Larger scope; potentially takes brand longer time to complete which could result in them abandoning
Decison: Option 2
The team felt option 1 wasn't enough of an improvement from what we currently had and wouldn't get us closer to our goal of brands launching with a shop ready to make sales. With option 1 they anticipated the same volume of brands needing guidance, which our small brand success team would not be able to handle if we achieved the growth we were striving for.
Option 2 user flow; wireframes for "build brand shop" step
GUIDED ONBOARDING
Creating a Hand-Holding Experience
Creating a hand-holding onboarding experience was crucial to the success of the redesign, and I set out to achieve that by adding some key features.
Having a progress home screen
One of the key features of the redesigned boarding was the progress home screen which laid out all the steps and sub-steps the user would need to complete to launch their brand. This enabled the brand to see an overview of what they had completed and what was still to come. Each time they completed a step (not a sub-step) they would be directed back to the progress home screen which would allow them to reorient themselves. And, if at any point they were in a sub-step and confused about their progress, they would be able to save where they were and exit to the progress home screen to see the overview.
Completing the last sub-step of step 1 and being directed back to the progress home screen to see progress
Seeing a visual of their shop progress
To account for a brand's desire to see what their shop looked like while they were building it (to get a sense of their progress and if they're using the right assets etc.), I included a preview of their shop on the progress home screen that would automatically fill out as they moved through the steps. Seeing their shop getting filled out would also add to the excitement of them launching.
Letting the user see what their shop looks like while they move through the steps. You'll notice there are no products shown. That is because the user has not added their products yet.
Including tips and examples
When applicable, screens had clearly laid out tips for choosing the right image or other best practices. I also showed an example of how and where the image would appear in their shop.
Showing guidelines and tips for what image to choose, and highlighting where it would appear in their shop
Having an option to get help at any point
At any point during their journey, if a user had a question, they would would be able to choose a way to get in touch with the brand support team.
Giving the user 3 different options for getting in touch to get help
EVOKING THE RIGHT EMOTIONS
Creating a Sense of Community and Excitement
Having been with Abound since its beginnings, I had interviewed dozens of brands across many different projects. One theme I picked up on was that brands value a sense of community and that was something we always tried to foster on Abound.
Seeing Other Brands Live On Abound
To foster the sense of community during the onboarding process, and to also create some excitement about launching their own shop, I included photos from brands already launched with the date they launched.
Using images of brands already launched on Abound to give a sense of community
Getting Congratulated on Launching
I added a congratulations screen at the very end to really drive home excitement around launching. The brand had just put in a lot of work to build their shop and it was something to celebrate!
Because our goal for this project was to make sure brands were in the best place to start selling quickly, in the congratulations screen I included a CTA to schedule a brand assessment (something the brand support team already offered brands and was having great success with). I also included a link to join our maker group on Facebook where brands could ask questions and offer each other support.
Final screen of onboarding
BUSINESS GOALS
Taking Business Goals Into Account
In order to be profitable, we needed retailers to sign up and shop. One path for getting new retailers to sign up was through our Boost referral program where the brand would invite their retailers and offer them a sign-up credit. We were always seeking new ways to promote Boost and decided to incorporate it into the onboarding flow as its own step since we'd have the brand's full attention.
Push to take advantage of our Boost referral program during onboarding
While all the other steps during onboarding were mandatory and you had to complete them in order, we couldn't make adding your retailers to Boost mandatory and I needed to allow for that. I did this by providing a "skip for now" option on the screen where we prompted them to add their retailers, allowing them to move on to the next step if they chose to skip.
But, because Boost was important to achieving company goals, I wanted to have one last touch point that would, once again, encourage the user to add their contacts. I did this on the last step before launching.
Encouraging users to take advantage of Boost one last time
USER TESTING
Does It Solve the Problem?
Once I had a prototype, I user-tested it with six brands and it was very well received. Noted feedback included:
-
Steps were easy to navigate and felt straight-forward
-
Had clarity on where the images would go in their shop
-
Appreciated everything was in a similar format while still giving them the opportunity to personalize their shop and be unique
-
Loved how visual each screen was
-
Loved the tips
-
Having the ability to choose a way to reach out to brand support felt thoughtful
THE FINAL PRODUCT
Bringing it All Together
After several iterations with copy and UI changes, the designs for the feature were ready. I designed desktop-first because the majority of brands accessed Abound on a desktop computer.
RESULTS & KEY TAKEAWAYS
How Successful Was the Feature?
The new onboarding flow had a positive impact on our goals:
-
There was a big improvement in the time it took a brand to launch their shop. In 2021, on average, it took a brand 36.17 days to complete onboarding, and in 2022 the average was 16.12 days.
-
There was an increase in the number of brands that launched their shop. When comparing the number of brands that launched their shop during the same period (Jan - June) in 2021 and 2022, in 2021 45% launched and in 2022 56% launched.
36.17
Days it took brands, on average, to complete onboarding pre redesign
16.2
Days it took brands, on average, to complete onboarding post redesign
45%
Brands that launched pre redesign
56%
Brands that launched post redesign
A Consideration
Even though the project was well-received by brands, in retrospect I do wonder if we could have started with option 1, the simpler iteration. While option 2 may have been the better user experience, the scope of it was too big and we ended up removing some of the features (Boost referral program, preview page) so that we could launch within our given time frame. There were also a lot of bugs and the Q&A for the feature took weeks. Option 1 would still have been an improvement to the original onboarding flow and we never user-tested it to see if it would achieve our goal. As a company, we were iterating on our process of building features, and going forward we moved to a more agile framework where the scope of projects was smaller so that we could get a feature out quickly and start gaining feedback early on.
