The B2B Ecommerce Nero App
To keep retail store managers' business flows as effortless as possible, I designed this B2B app so they can work efficiently.
Overview
What is the Nero app?
The Nero app is an ecommerce marketplace place designed for B2B use with retail managers. It’s researched-backed with a user-centered design to compete with other ecommerce B2B marketplaces.
The Problem
Product managers need help with poor inventory management, a lack of system processes, and manually connecting to vendors.
The Goal
By simplifying the manual process of supply and demand for all users involved.
The Responsibilities
User flow mapping, wireframing, visual design, and prototyping.
The Tools
Figma, Adobe Illustrator, Adobe XD
Possible solutions for retailer managers.
The outline process of what the wireframing will look like, including some illustration ideas.
Single platform
To manage the entire stock and inventory.
Simplified process
For all the potential users involved in the supply and demand process
Convenient ordering
All vendors are available in one consolidated system.
Here are the users involved in the process
Customers
Purchasing goods for their store.
Vendors
Selling goods to retail.
Delivery person
Responsible for delivering goods from vendor warehouse to customers store.
Collectors
Collecting payments from customers and handing them to vendors.
Discover
Strategy
Competitor analysis
Understanding the user
User persona
Affinity mapping
The Process
User-Centered Approach
Define
User journey
Task flow
Card sorting
Information Architecture
Design
Sketches
Wireframes
Design system
User interface
Deliver
User testing
Dev testing
QA testing
Prod testing
Beta release
Competitor Analysis
GlobalSpec
Menu heavy
A lot of user input
Rich in information
EC Plaza
Lack of details
Simple and easy to navigate
Alibaba
Information overload
Well organized
Loaded with features
The findings of the competitor analysis
All three competitors used promo codes, reported missing product options, and show a buying capacity.
Alibaba is the most successful competitor having all features.
Barcode scan search and image search were the most missing features in the competition.
Age group: 25 - 60
Gender: All
Location: USA
Occupation
Shop Keeper
Purchasing Manager
Shop Owner
Shop Attendant
Store Manager
Staff
Operations Manager
Marital status: married, unmarried, single
Language: English
Education: High school diploma, bachelors.
Understanding the Target User
Tasks:
Communication to vendors
Day-to-day stock management
Super rising & checking order delivers
Follow up with vendors, and delivery people for order updates
Cater to specific consumer requirements
Handle uncalled situations regarding delivery - order quality, invoice error, order delays
Forecasting consumer needs to place the order accordingly
Keeping a track of seasonal products.
The User Persona
Step 1 - User Interview
Participants - 8 Mode - Online Video Interview
Goal - Understand mental models, Current journey, Motivation
Nero Interview Questions
How are you feeling?
Do you have a smartphone?
How long have you been using it?
How often do you use it at the shop?
For how many hours do you use it?
Does it help in making work easy?
If yes, how? If not, why?
What applications do you use regularly?
Which one is your favorite?
And why is it your favorite app?
Can you tell us what work you do?
What are your daily tasks?
Do you like the work that you do?
If yes, why? If not, why?
What are some things that you would want to change?
Do you think any solution can make the current scenario better?
Have you had any business losses recently? State reason.
Tell us about a recent incident at the shop which made you unhappy.
How do you place orders with vendors?
Do you have fixed vendors?
Do the orders arrive on time?
Are you able to return/ exchange the products?
Highlight 1
Not able to meet the growing customer demands. This is a result of order shipping time and inefficiency in stock management.
Highlight 2
Irregularity in order items. This sometimes makes them feel helpless due to the lack of returns.
Highlight 3
Expand their customer base. This is so they can grow the business further in Michigan.
Step 2 - User Persona
Name: John Smith
Age: 34
Status: Married
Occupation: Purchasing manager
Location: Michigan, USA
About
John Smith is a purchasing manager of a retail store in Michigan. He has an experience of over six years. He decides all restaurant purchases, and he handles all orders by himself.
Personality
Extrovert
Analytical
Numerical skills
Tactful
Networking skills
Frustrations
Often stressed about the constant workload.
He needs to gain more experience with the latest technology and prefers using easy digital products.
Needs help to keep track of paperwork of recent orders.
Paper-based tracking of items is very time-consuming for John.
Goals
Wants to have the best deals on items while making purchases.
Wants a smooth and easy system to order products for the retail store.
Wants to save time and money while dealing with investments.
Wants easy payment options for ordered items.
Seeks easy returns for damaged products.
Wants a hassle-free digital experience.
Step 3 - User’s Current Journey (Daily tasks)
The Customer Journey Mapping
The key findings of the customer journey map
The most positive experience was browsing the app’s catalog. Seeing the products and features made the user excited to see what they can now do for their retailer.
The least positive experience was integrating the new system into the user’s workload. There are a lot of doubts that it will be cumbersome due to something new.
Task Flow - Registration & Placing an order
The significance of the task flow of a new user
This is the flow where the user will use an action to move to the following app sequence.
The most important was keeping the onboarding and inputting personal information to a minimum so as not to stress the user.
Yellow: Registration actions.
Blue: Placing order actions.
Process Map
The Significance of the process map
This map shows the connection between Nero’s admin to each user, such as the retailer manager, the delivery driver, and the supplier.
Blue is the interaction of the user with another user.
Yellow is the Nero Admin’s decision to proceed or cancel.
Green is the customer’s interaction.
Information Architecture
The significance of the information architecture
The layout is based on the user accessing all features of the Nero app.
The most important is the best deals with limited-time offers. Another is the invoice information that can be downloaded.
Sketches
Wireframing
The Style Guide
Onboarding Designs
New User: Sign Up
Select Option
Final Step
Confirmation
Homepage
Product Search
Profile
Product View
Adding Credit Card Information
Shopping Cart to Product Order
The Prototype
Below you can also see what the B2B Nero Ecommerce app would look like. Including the onboarding process to the checkout of products. As well as the adding a debit card process.
The Project Learnings
What did I learn from this project?
Users often feel overwhelmed with the number of features of other B2B commerce suppliers and want a simplified way to find what they’re looking for.
Communication with drivers and vendors can often be lacking due to human error. This could be a reason packages arrive late or need to be recovered. With more time, it would be worth a look at how to communicate better with the Nero app.
A common situation with buyers is the feeling of not getting paid on time and running into over-drafting fees. This can be solved with a pay later feature, solving the fear of using a company credit card.