Designing Nero – A B2B Ecommerce App
Nero aimed to simplify the B2B purchasing process for wholesale buyers. Despite vital goals of creating an intuitive platform and streamlining checkout, the project encountered several challenges that led to its failure.
Project Goals:
Build an intuitive platform for easy browsing and purchasing.
Streamline the checkout process.
Increase engagement through personalized recommendations.
Challenges:
Complex B2B Needs: Simplifying bulk orders and tiered pricing without sacrificing functionality led to a confusing user experience.
Mixed User Feedback: Inconsistent and unclear feedback made it difficult to iterate effectively.
Technical Delays: Backend integration issues slowed down development and limited feature implementation.
Mobile Performance: Responsiveness issues caused frustration, especially on mobile.
Final Results:
10% decrease in purchase completion rates due to a confusing checkout.
Flat engagement with minimal repeat usage.
Negative user feedback citing navigation difficulties and a preference for competitor apps.
30% higher bounce rates on mobile, driven by slow load times and poor responsiveness.
Missed launch deadlines, further impacting the project's momentum.
Constraints:
Tight deadlines limited testing and iteration.
Backend limitations restricted workflow and data handling.
Diverse user needs made it challenging to balance simplicity with functionality.
Step 1: Understanding the Target User
Retailers often struggle with outdated and complex systems for placing orders and managing their inventory. This led to frequent order errors, delays in restocking, and missed sales opportunities.
The goal was to design an app that would:
Simplify the ordering process by enabling retailers to quickly search, select, and order products.
Offer real-time inventory updates so retailers know when products will be back in stock.
Provide a smooth communication channel between retailers and suppliers for efficient coordination.
Step 2: Competitive Analysis and User Interviews
I conducted competitive analysis and user interviews to ensure we built a product that would address user pain points.
Competitive Analysis Findings
Through the analysis of competitors like Alibaba and Epicor, we identified key gaps in existing B2B platforms:
Cumbersome checkout flows.
Lack of real-time inventory visibility.
Inefficient communication between retailers and suppliers.
User Research and Interviews
I conducted user interviews with retail managers to uncover pain points. Key insights revealed:
70% found existing tools frustrating due to complex product searches.
65% said they were uncertain about inventory availability, leading to over- or under-ordering.
50% felt the order tracking and supplier communication were slow and inefficient.
Step 3: Information Architecture and Workflow Design
After gathering user insights, I designed the information architecture to simplify product discovery, ordering, and communication workflows. The architecture was structured to guide users through a logical flow:
Home (Dashboard): Provides a high-level view of key metrics like inventory levels, pending orders, and supplier messages.
Product Discovery: A streamlined search function with filters for category, availability, and supplier ratings.
Order Management: Users could place, track, and manage their orders directly within the app, reducing the time spent on repetitive tasks.
Step 4: Sketches and Wireframing
Sketching Initial Concepts
I started with hand-drawn sketches to quickly visualize how the different elements of the app would function. These sketches focused on:
A clean dashboard for retailers to see key metrics at a glance.
Intuitive product search filters and product cards with real-time inventory indicators.
An efficient ordering process that allows users to save time by bulk ordering with minimal steps.
Wireframing the User Experience
Once the concepts were clear, I transitioned to wireframes. These wireframes included:
Dashboard: A single-screen summary showing low-stock items, new supplier messages, and pending orders.
Product Search: A search and filter function lets users filter by stock availability, supplier reliability, and price.
Order Workflow: A streamlined process where users can add items to their cart, adjust quantities, and see expected delivery dates.
Step 5: Style Guide and High-Fidelity Designs
Building the Style Guide
To ensure consistency, I developed a style guide that outlined the colors, typography, and design components used throughout the app. The style guide focused on:
Neutral, professional colors that conveyed reliability and trustworthiness.
Legible typography that ensured information was easy to read, especially for busy retail managers.
A system of intuitive icons for inventory statuses, supplier messages, and order tracking.
Final High-Fidelity Designs
The final design incorporated:
A minimal dashboard for at-a-glance insights.
A product search tool with real-time inventory updates and detailed filters.
A simple ordering process that reduced the time it took to place an order by over 40%.
Home
Catalogue
Checkout process
Profile
Onboarding
Product
Step 6: Testing and Iteration Based on Feedback
Usability Testing
I ran usability tests with retail managers and refined the app based on their feedback. Key changes included:
Revising the order flow to allow for bulk order adjustments after the checkout.
Improving the product search function to add more detailed filters like price and supplier rating.
Below, you can also see what the B2B Nero E-Commerce app would look like, including the onboarding process and the checkout process, as well as the addition of a debit card process.
Step 7: Results and Impact
After launching the app, the results were disappointing:
10% decrease in purchase completion rates, as the checkout process remained confusing.
Flat engagement, with users not returning to the app due to poor usability.
30% higher bounce rates on mobile, driven by slow load times and poor navigation.
Negative user feedback, with many preferring competitor apps due to a better user experience.
Step 8: Reflections and Next Steps
This project highlighted key lessons:
Overcomplication: It is essential to simplify complex B2B processes without sacrificing functionality. Our design was too complex and confused users.
Testing Challenges: Inconsistent feedback made it difficult to iterate effectively. Future projects need clearer feedback cycles and targeted usability testing.
Backend Limitations: Integration issues slowed development and limited feature flexibility. Robust planning for technical constraints is critical.
Mobile First: Mobile optimization was not prioritized early enough, leading to performance issues. A mobile-first approach should have been adopted from the beginning.
