04. Prototype
Wireframe
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.
Testing
We wanted to test whether the workflow made sense to users, so we invited 4 small business owners who sell products online and on-site and conducted cognitive walkthroughs 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
The wireframe evaluation indicated that the product workflow works well for users, so we decided to spend more time in designing the visuals 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
Moving from the wireframe to a low-fi prototype, I designed the initial layout by standardizing the top banner and the side menu, because these two main components would stay the same and provide flexibility for users when navigating across the platform.
Low-fi Testing
At this point, I had multiple design solutions in my head but had a hard time picking the best practice, so I conducted an a/b test by designing two interfaces and invited UX professionals and stakeholders to vote for a more user-friendly design.
Mid-fi Prototype
After conducting a few rounds of testing and receiving some helpful feedback, I focused on streamlining the mid-fi prototype design to enhance user experience. I removed the taskbar, replaced the clickable text with icons, and standardized the button design.
Design System
Before coloring the prototype, we had to determine our design system. Since the seller platform belongs to the Roadie family, we wanted our visuals maintain an unique aesthetics yet look visually consistent with the current Roadie product, so users would not feel out of the place when switching between the two websites. We carefully selected the colors from the Roadie color plate, inherited the current roadie button design and typography, and chose rounded icons that resemble to the Roadie logo.
Hi-fi Testing
With the client’s approval for the design system, I applied it to the hi-fi prototype to make the most refined design and prepare for usability testing.
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
View Dashboard
Users can initiate key actions, view pertinent information, and use the global side panel to navigate elsewhere on the dashboard.
List New Items
Users can create brand new listings or use an auto-fill option to quickly update and manage their inventory.
Deliver with Roadie
Users can check order details, modify them, and easily deliver their product with Roadie drivers.
Track Deliveries
From the dashboard, users can easily identify in-transit orders and track delivery status in real-time.
Get Feedback
Users can converse with customers to receive feedback from individual orders and questions about inventory items.
.png)
.png)
