Stand apart from traditional wholesale business by creating a B2B wholesale marketplace
Peeba is an online B2B wholesale platform (plus BNPL) that connects brands worldwide and retailers within Asia-Pacific. As Peeba’s user base grows, we launched a new marketplace app in 2022. We aim to increase user retention and grow our user base with a mobile app, which is becoming an essential component of e-commerce.
I contributed to the overall design process, from research and user interviews to designing interfaces and complex mobile design systems. I worked closely with stakeholders, PM and engineering team.
B2B / Native App
1.5 month (Design phase)
Design leadership, Research, UX study, interaction and prototyping, art direction
Brian Lee (PM), Keithan Lee (Product designer) and Jason Lao (Product intern)
・Shipped end-to-end flow within a short period, collaborating with cross-functional partners across all stages, from research, design to execution.
・Built vision, ran user research, and defined product framework using animated and interactive prototypes using Figma.
・Built a reusable & dynamic mobile design system.
Transplanting the traditional wholesale procurement experience to mobile phones.
Peeba is a website-based Marketplace, and most new features were tailored for desktop experience. However, we have observed that mobile users have already surpassed 60%. People are increasingly likely to conduct B2B wholesale business on their phones rather than on a website.
Although retailers can shop our website via mobile browsers, we know that the responsive web cannot give the most interactive mobile experience. To improve the mobile experience and attract more youthful retailers, we decided to release our first native mobile app.
Research
The biggest challenge is how we provide a better experience to let them manage their business via mobile. Although we have a well-developed web marketplace, we still need to understand how to help the users to switch their business to mobile and identify the most critical MVP features on the app. So, we began by interviewing our internal sales team, stakeholders, and retailers to learn more about the pain points.
Target users
・Retailers - online store
・Retailers - Brick & mortar
・Sales team (retailer side)
Research methods
・User interview (In-person & phone)
・Survey
・Competitor research (App)
Research goals
・Understand customer’s pain point on typical wholesale business to help us better to shift the sourcing experience to mobile app
・Identify key problems & solutions
・Determine the app hierarchy and P0 & P1 functions
Understand the typical purchase operations
Most of our retailers are sourcing brands worldwide rather than Taobao or Amazon. To understand retailers’ daily behavior and how they source products, we scheduled in-person and online interviews with 25+ retailers. The interview questions covered their entire business operation from sourcing to purchase and return, especially how they sourced products before using Peeba.
The process of sourcing and purchasing from a brand or distributor is complicated and traditional. Based on the diagram below, the first potential approaches that come to mind are to decrease the time waste and make the purchase flow more like a to-C shopping experience.
Other key info found during interview & survey ...
What we learned
1. The importance of marketplace communication.
Our web-based marketplace users may struggle to keep track of crucial information such as brand messaging, shipping updates, and order updates, leading to a potentially frustrating experience.
2. The need for constant market updates.
Those busy retail owners must continually update their knowledge of the market in addition to handling their daily business operations.
3. Brand informations
・Provide brand information as much as possible to speed up the purchase time.
・Retailers is also interested about renewal of brands, as they tend to make regular purchases of the same brands.
HMW assist retailers in their busy business to stay on top of wholesale trends and continually explore new products?
HMW enhance information tracking to keep retailers promptly informed and improve response time?
Instead of providing a high-transparency marketplace, the key objective is to speed up the procurement process.
Prioritise our features based on impact and effort.
Our approach involves dividing the initial feature sets into two release stages. The first stage, P0 MVP, will prioritize features that require low effort but have a high impact on addressing pain points and achieving goals.
Architecture
With all the insights we gained from the last phase, we mapped out the complete navigation structure of the app before diving into visual design. We also referenced other e-commerce apps, which is a best way to reduce users’ learning curve by common patterns.
Final design
After talking with stakeholders, we decided to adopt the clean, user-friendly, modern design. Overall experience & function need to be similar to our current website. Consistency will be challenging as we must create an entirely new design system relative to our existing identity.
User preference-oriented
All retailers are required to complete at least 6 steps registration process and submit the business proof to protect the brand's interest and provide assurance for them to sell their products for to-B retailers only and gather information about the retailer's background to improve the accuracy of the product recommendation engine to create a more personalised experience.
In addition, important benefits are highlighted on the landing page to encourage new users to use Peeba.
Explore your next hot product
The explore page (home) goal is to match the retailer’s business type and preference to ensure they can always find the right brands or products to fit their store. Also, we designed a flexible layout to facilitate the future rollout of recommendation categories and promotions in different countries.
Browse by categories
・Dynamic layout for any new events, collections or promotions
・Diverse categories, up to 150+
Filtering
・Shop by your preferences
・Accurately choose the brand or product you need
SHOWCASE
Shop brand store
The store page is designed for brands to showcase their products and collections in one place, while the in-app message feature makes retailers more accessible to deal with the brand for special offers and shipment stuff. In addition, retailers can favourite the brands for quick reference and receive notifications about promotions, new products and restocking on existing products.
Product page
The product page provides basic information about the product and valuable reviews to help retailers make informed purchasing decisions. We also offer the “find similar” feature to let retailers discover similar products quickly.
Checkout
Cart
Retailers typically place orders from several suppliers with different payment terms. Peeba enables retailers to order multiple brands with the same payment terms in one order to streamline the process.
Also, most manufacturer or brand has their own order minimum value, so we created a tab called “Under Minimum” to help retailers easily see how close they are to reaching the minimum required for each brand, make adjustments to their order and ultimately make more efficient and effective purchasing decisions.
Sell Now Pay Later, Risk-free with payment terms
As Peeba advocates - Reduce the Risk for Retailers, we offer a variety of payment terms, while our Sell Now Pay Later (Pay in 60) is one of the key features to enhance their cash flow. For that, we made a couple of components and broke down the payment to make it easier to understand.
We also prioritised all information and designed a second page to allow users to choose different options, ensuring the overall checkout page is clean, intuitive and dynamic for us to add any new features, payment methods or payment terms in future.
Keep retailers posted
During the research phase, we identified the need for a more efficient way to stay updated on shipping status and messages. To achieve this, we planned to implement 3 main types of notification:
Stay informed and in control with inventory
My orders page allows retailers to quickly review their orders and provides information and tools they need to manage their demands effectively. One of the key features of the page is the ability for retailers to keep track of their shipping status. The page also includes a “reorder” button, allowing retailers quickly and easily restock goods for the selected items.
Design system
Conclusion
The current wholesale marketplace landscape poses significant challenges for retailers and suppliers, including inefficient processes, limited access to new products and suppliers, and difficulty in managing inventory and orders. These pain points result in lost time, resources, and opportunities, ultimately hindering the growth and success of businesses.
A mobile app that addresses these pain points and streamlines the wholesale purchasing process has the potential to significantly improve the user experience, increase efficiency, and drive growth for both retailers and suppliers.
I’m so thankful and happy that I got a chance to play a key role in this project. Building a complete mobile app from scratch within a tight timeline was a tough yet rewarding experience for me. Collaborate closely with different parties and review & feedback to each other every day were crucial for success. And it also required me to explore various design solutions in the market, which gave me a chance to grow my design library and knowledge of the e-commerce sector.
On the other hand, I also took on the role of a Product Manager. I was involved in project and sprint planning, which gave me a well-rounded understanding of product development. The experience allowed me to hone my skills in product management.
Since launching the beta version, we've received a lot of good & bad feedback from Retailers, which gave us a chance to study and improve it in the next version.
