Onboarding Flow
ABOUt b-stock
Think Ebay but for liquidation! B-Stock runs an online auction marketplace platform where major retailers such as Costco, Target, and Walmart can list auctions of their overstock inventory sitting in their warehouse to recover money. Buyers (small business resellers) on the platform can bid on these auctions of merchandise that they can then turn a profit on.
Role & timeline
I owned the entirety of the project as the sole designer. I collaborated extensively with 1 PM/PjM, 1 Developer, 1 Content Strategist, and 1 Data Analyst.
Tools
Figma, Adobe Photoshop, Google Analytics, LuckyOrange
PROBLEM
B-Stock has 65+ different marketplaces for each seller that is on the platform, but they each live on their own website. As a result, buyers on the platform need to create a separate account for each marketplace that they are interested, which is a huge hassle and difficult to manage.
From a visual design perspective, my main challenge was to figure out how to best layout the interface while accounting for the educational tidbits of information aimed towards users who might not be familiar with the documents or terms used within the questions.
The Director of UX had completed a majority of the flow and wireframes upon handing it off to me, but have me full create reign over how to layout the different elements on each screen. Overall, the number of screens were over 50 – here is what I started with!
The Director of UX had completed a majority of the flow and wireframes upon handing it off to me, but have me full create reign over how to layout the different elements on each screen. Overall, the number of screens were over 50 – here is what I started with!
research and strategy
We dove into understanding visual design best practices to other competitors and sites that do it well.
Research Process
To get a better understanding of best practices in onboarding designs, I looked to sites like Airbnb, MailChimp, and Lemonade for inspiration.
DESIGN
I created various layout options and met with the UX Director and PM on a weekly basis to get feedback and discuss tradeoffs for each design.
I set the art direction for the designs which led to an updated brand guidelines and design system.
SOlUTION
I designed 50+ high fidelity mockups and animated small interactions such as the progress bar and loading screens.
HANDOFF
Final UI Handoff
I've presented the high fidelity mockups to cross functionally to the Marketing team and React Frontend Team to gather their feedback. I've collaborated with the React Engineers to clarify any questions about the design and interactions as they were building the flow. Here are the final screens that I handed off!