Tidying up.

B2B MARKETPLACE

Step-in — July 2022
*Company name redacted due to NDA*‍
Current Version of the Company Website‍
Role
UX/UI Designer (Team of 4)
Tools
Figma, Figjam, Slack
Timeline
Jan 2023 - Feb 2023
5-week long design sprint
Project Type
Internship
Overview
During the start of 2023, I had the opportunity to help an early seed-stage startup design their B2B product: a service that simplifies fashion stock transactions.

I collaborated with a design team to define how the product would be structured and begin building the auction experience.

During the 5 weeks I was responsible for: research, user flows, and prototyping.
Overview
❌ The Challenge
Buyers and sellers experience difficulty when setting up B2B transactions due to large and complex amounts of info.
‍
How can we easily connect buyers and sellers interested in exchanging excess retail fashion stock?
✅ The Solution
A web-based B2B Marketplace that: simplifies the onboarding, listing, and auction process.
Results
5
All

weeks from kickoff to prototype

100%

design materials prepped for handoff to next design team
Background
B2B transactions are complex
B2B services help connect businesses to each other, and most importantly help them to complete large scale transactions. Our client was looking to begin the process of building a B2B Marketplace that would connect European retail buyers and sellers working with excess fashion retail stock.

My team and I set out to lay the UX Foundation to help kickstart the creation of the clients B2B fashion retail marketplace.
Research
Current B2B marketplace trends
To understand the problem space, I had to research both B2B business models and the retail fashion industry. Looking at existing B2B products and practices, I found a common theme that our product cannot stray too far from older B2B industry standards.

We conducted a competitive analysis, looking at existing products such as Alibaba, Ghost, and Choco.
This led to some insights:
What to include ✅
  • End-to-end transparency
  • Predictable design system
  • Filtering / search functionality
What to avoid ❌
  • Visual clutter
  • Poor information architecture
  • Long onboarding processes
Personas
Users want to sell excess stock & buy great deals
Julia
Painpoints
- Networking can take a lot of time and energy
Goals
- Networking-free experience finding clothing deals
- Transparency on availability and prices of clothes
Bianca
Painpoints
- Too much older products taking up storage space
Goals
- An easy way to sell excess stock
- Make smarter decisions on purchasing new items and pricing old items
User Stories & Features
What do buyers and sellers need?
📲
Dashboards look different for buyers & sellers. What are key actions for each group?
📝
B2B transactions are complicated. How can we streamline the onboarding process?
📃
Our client wanted to incorporate their own item listing system using Excel sheets. How can we simplify the listing process?
🙋
Auctions can move quickly. How can we create an auction space that's easy to use?
We divided the key features of the B2B Marketplace into categories: dashboards, listings, orders, auctions, reviews, payments, and settings.
User Flows
How will users participate in auctions?
Since there are many steps required on both the buyer and seller sides of transactions, we began organizing how we wanted to group information. There was a lot of moving around as we learned about required information in each step of the transaction process.

We decided to focus on the listing/buying sections of the flow chart, as we felt that these were the most important features for users on the B2B marketplace.
View Full Image Here
Our client wanted to implement an autofill feature for listing multiple items, so we split the flow into two sections: single item and multi-item listings.

Listings would then lead into the auction posting process.
Ideation
Low fidelity wireframes
As I built the frames for the seller flows, I tested out different ways to visually organize the information on each screen. At this point, I was in charge of creating the seller side wireframes.

I based my screens on standards set by competitors like Alibaba and Ebay, as these two platforms effectively organized large amounts of product information on their listing pages. I wanted to maintain similar formatting for data entry, as I didn't need to reinvent the wheel.

Auction Listing View:

  • I looked at competitors such as Ebay and Alibaba to decide on how to organize auction information.
  • Added an "Active Offers" section for easy access to accept, decline, or view offers made by customers.
  • Filtering options to view offers with individual needs.

Single Item Listing View:

  • I looked at competitors such as Shopify to decide on how to organize listing information.
  • We also spoke with our client and received a list of all information needed for listings on their site.
  • Added the ability to add variants (sizes, colors, etc) for a single listing.

Auction Listing View:

  • I looked at competitors such as Ebay and Alibaba to decide on how to organize auction information.
  • Added an "Active Offers" section for easy access to accept, decline, or view offers made by customers.
  • Filtering options to view offers with individual needs.

Single Item Listing View:

  • I looked at competitors such as Shopify to decide on how to organize listing information.
  • We also spoke with our client and received a list of all information needed for listings on their site.
  • Added the ability to add variants (sizes, colors, etc) for a single listing.
Feedback from the business owner
What worked ✅
  • Clear organization for dashboard
  • Simplicity of onboarding screens
  • Clear flows for listing and bidding
What needed help ❌
  • Onboarding process still felt a bit long due to the amount of information inputs we placed into the onboarding screens
  • Need for a progress indicator during onboarding so users know where they are in the sign-up process
After reviewing the wireframes, the client requested to have the following developed as high fidelity screens:
Before diving into the high fidelity screens, we reiterated on how we grouped information during the onboarding sequence. We had to lessen the amount of information per screen to make sure not to overwhelm the user.
Revisiting the screens
After spending some time self-studying after this project, I decided to revisit the screens our group had made and apply some new concepts I picked up in regards to visual design principles. As you can probably guess, a lot of the screens needed improvements on visual hierarchy and spacing.

Before I show the screens I updated, here is a quick glance at what they looked like before.
Visual Design
Building on the brands existing style guide
Based off of our competitive research, we wanted to keep the look of the website modern and simple, while following the brands color palette.
Final Designs
A simplified B2B shopping experience
Onboarding and Dashboard

Main onboarding flow within the prototype.

Onboarding:

  • Based on client suggestions, we placed all the onboarding at the start of account creation, rather than split it up.
  • Added a progress bar section so that users feel progression as they complete the sequence.
  • Latest iteration: I revamped the landing page, making better choices in color, spacing, and images.
  • Latest iteration: I reduced the number of items on the initial taskbar so that users aren't overwhelmed, and have a higher chance of creating an account from the moment they land on the site

Seller Dashboard:

  • Sales chart as the main focus of the page, as well as specific call to action buttons.
  • Added an "Recent Orders" section for easy access to view information such as customer names and statuses.
  • Messaging section to communicate directly with buyers.
Participating in auctions

Main auction flow within the prototype.

Auction Listing View:

  • Filtering system to organize listings based on user preferences.
  • Using the companies suggested color palette throughout the UI, using green as the main color for important onscreen buttons/icons.
  • Using red text to indicate limited time on deals/listings.

Auction Item Page:

  • Bid call to action at the top of the page.
  • Added a "Similar Auctions" section to encourage users to continue browsing listings similar to what they are looking for.
  • "Add to watchlist" to save and receive notifications about the auction.
Conclusion
Final thoughts
Although we only built a section of the whole marketplace, I felt happy with what we built and was ready to hand off our work to the next design team. We were able to simplify the onboarding sequence, as well as lay the foundation of the marketplace in terms of key user routes and flows. However, I still felt that the visual styles I created needed more work to differentiate from existing B2B products.

Working with others on a design team was definitely a challenge in itself, as I had to learn how to communicate and negotiate with other designers. I also realized just how important research and communication is when tackling a product outside of your realm of knowledge.
If more time was available…
Learnings
OTHER PROJECTS

Let's connect 👋

LinkedIn ⮕
Email ⮕

@Nicholas Chu 2024