04. Prototype
Wireframe
Visualize the initial design on Figma to show basic functionalities
Based on the workflow, we identified some key tasks and wireframed 6 screens on Figjam to show how small vendors can interact with the product to manage inventory, shipments, and customer orders.
Wireframe Feedback
Test workflow on the wireframe with 4 small business owners
We wanted to test whether the workflow makes sense to users, so we invited 4 small business owners who sell products online and on-site and conducted cognitive walkthroughs on Figjam to see how they reacted to the wireframe. We color-coded 73 testing data by types and discovered that the users gave overwhelmingly positive feedback to the current product workflow.
Prototype & Iterations
Keep iterating the design based on user and stakeholder feedback
The wireframe evaluation indicated that the basic workflow works well for users, so we decided to spend more time in designing the UI and enhancing information hierarchy. We made 3 fidelity levels prototype and conducted 5 UX evaluations to validate the design with UX professionals and stakeholders. Based on their feedback, we iterated the design to improve UI and user experience.
Wireframe to Low-fi
Refine the design to show key features and main user flows
Low-fi Testing
Conduct a/b tests and iterate the button design to maintain consistency
Redesign the nav bar and the side menu to enhance navigation
Mid-fi Prototype
Test the mid-fi prototype with UX professionals to get feedback
More iterations
Streamline the menu design and standardized the button design
Hi-fi Prototype
Apply the design system to hi-fi prototype and revamp user flows
With the client’s approval for the design system, I applied it to the hi-fi prototype to refine the design and prepare for usability testing.
Hi-fi Testing
Conduct a heuristic evaluation to evaluate information hierarchy
However, at this stage, we were hesitant about information hierarchy and how to prioritize “should do” over “could do,” so we decided to conduct a heuristic evaluation over hi-fi prototype and invited 10 UX professionals to look for some UX problems and provide potential solutions on Figjam. We collected 74 comments and iterated the prototype based on their user feedback.
Final Designs
Design System
View dashboard to make business decisions
Users can initiate key actions, view pertinent information, and use the global side panel to navigate elsewhere on the dashboard.
List new items and manage inventory
Users can create brand new listings or use an auto-fill option to quickly update and manage their inventory.
Deliver with Roadie in a seamless experience
Users can check order details, modify them, and easily deliver their product with Roadie drivers.
Track deliveries to ensure on-time rate
From the dashboard, users can easily identify in-transit orders and track delivery status in real-time.
Get feedback to optimize communication
Users can converse with customers to receive feedback from individual orders and questions about inventory items.