User Research · Wire-framing · Prototyping
Quote, sell & fulfill faster with Skutally's Commerce Cloud
MY ROLE
-
Explore and conceptualize new projects for sales, purchasing and operational workflows
-
Translate high-level concepts into user flows that lead to intuitive product experiences
-
Develop and maintain a component library via Figma for iOS, tablet and desktop resolutions
-
Develop conceptual ideas across their entire product lifecycle and into the product launch
OVERVIEW
An industry ripe for change
Skutally was founded in 2018 as a means to replace obsolete inventory management systems with a modern, all-encompassing software solution. Skutally's Commerce Cloud helps B2B retailers and wholesalers manage inventory, sales, and daily operations.
With the user in mind, Skutally set out to give customers what they want - a fast checkout experience, real-time order updates, and exceptional customer service. It was obvious that a lot of these needs could be addressed by optimizing the sales order process for online and in-store purchases.
CHALLENGE
Addressing user-error while optimizing the sales order process
Skutally created its first iteration of the sales orders process where users were able go from quote to sale quicker, and it worked!
However, sales order data revealed that user errors were happening almost daily, costing their business money in something that could have been avoided with a more effective design. With businesses already using our software - and pouring in thousands of sales orders daily through their sales channels - we had a wide range of needs. So, we set out to redesign our sales order process - quickly.
Defining the problem for our users
In order to get a better understanding of how users are using Skutally's sales orders, I conducted usability tests where I observed our key users. By clearly listing out their problems, I was able to update our sales-user personas and flowcharts. These flows helped me visually see our users' pain points and areas that needed attention for the redesign. I began by jotting down recommendations for design improvements to address each pain point we aimed to solve for.
Below are some examples:
Too many clicks
Users are clicking 5+ times to apply a filtered search which leads to a poor user experience. Additional user feedback confirmed the process was excessively tedious.
Design recommendation
Reduce number of clicks by separating the search from the filters menu and provide filter recommendations based on what user is searching for.
.png)
Low awareness of sales order status
We noticed that every different state of the sales order looks identical except for the status badge in the header (draft, open, closed). We want users to definitively know when they are working on a draft order vs. viewing a submitted order.
Design recommendation
Ensure the status of a sales order is clearly shown in the header throughout the sales order process. Use different page titles and badges to help draw attention to status of the order.
Poor information hierarchy
Cluttered and lengthy pages lead to cognitive overload; when users create a draft sales order, the payment card is hidden by default and isn't shown until a line item is added. When there are many (more than 10) line items added to an order, the payment card gets pushed down the screen, ultimately getting hidden to users. The payment card holds the primary action buttons that the user will need to click in order to take the order out of draft state.
Design recommendation
Make the payment card and/or primary action button always visible.
Extra screens
When adding an address or updating the customer information to an order, the user is removed from the sales order process and taken to a separate screen to update the customer's information. This temporarily interrupts the sales order process.
Design recommendation
Use overlays so users can quickly update customer information within the sales order process.
Desired outcomes
Provide users an end-to-end process while working on sales orders - aimed to reduce error by incorporating more effective
prompting, flexible functionality, and increased awareness on the status of orders.
The following user stories were identified to achieve these goals:
Search & filter redesign
-
Reduced number of clicks by separating the search from the filters menu
-
Ability to view table results in real-time
-
Ability to view recommended filters based on what is being typed in the search bar
-
Desktop, tablet and mobile friendly
Sales order redesign
-
Ability to add and edit customer data
-
Ability to add and edit products
-
Ability to update the fulfillment type and addresses; whether walk-in, pick up, ship to or deliver to
-
Ability to pay with multiple payment methods &/or payment terms
-
Ability to either quick fulfill or request fulfillment
-
Ability to print, email or SMS quotes and invoices
-
Desktop, tablet and mobile friendly
By framing "How might we” questions, we set ourselves up for an innovative solution.
How might we...
1.
Update our search & filter functionality to increase user efficiency?
2.
Increase user awareness in the status of a sales order?
3.
Streamline the sales order process to create a seamless and minimal-click flow?
SOLUTION
Understanding our users
Through studying our users, creating new personas and flowcharts, we came up with a complete redesign - focused on our users' major pain points and desired outcomes.
Our thinking was to split the sales order screen into a simple process that follows three main steps:
-
Create a draft order
-
Checkout
-
Fulfill order
Creating Wireframes
With Balsamiq Mockups, I was able to quickly nail down the core experience I envisioned for our users. The intent of these mockups was to identify requirements that might go into the minimum viable product (MVP) of the flow for draft and submitted sales orders.
Below are some of my initial wireframes:
After a few review sessions, I was ready to create high-fidelity mockups and prototypes in Figma.
High - Fidelity Mockups
Design Update 1:
Separate the search from the filters menu to reduce extra clicks and allow users to start typing right away. If the wanted result is not visible, users can click directly into the filter drawer and apply as many as needed.
Design Update 2:
Restructure the sales order draft screen so that the user knows they are in a draft order and a payment has not been made yet.
The following changes were made to address this:
-
Title this screen "Draft order" instead of "Sales order".
-
Allow for overlays to populate on this screen versus users being redirected into another screen.
-
Separate 'Customer & Contact' card from the 'Fulfillment type' card so that they stand out better.
-
Allow for users to only be able to send customers quotes from within a draft order.
-
Have the main page actions be shown twice; in the header and below the cart. This way, users will know they must add products in order to checkout.
Once products have been added to the draft sales order:
-
Users can send quotes to customers.
-
Users can checkout (add payment methods or a payment term).
Design Update 3:
After the order has been paid (via checkout), users will want to fulfill the order. In the below Sales order screen, we wanted to give a timeline visual to our users so they are fully aware of what to do next (Fulfill order).
Prototyping & testing
Before implementing these design changes into production, it was important to get user feedback from various users. Feedback was collected in the form of observing users react to our interactive prototype below. With the help of new page titles, specific CTAs, and a visual timeline, users are guided through the entire sales order process seamlessly and with less areas for errors.
Developer handoff
Below is a glimpse of how I prepare my flows in Figma to prepare for the developer handoff.
For organizational purposes, I like to:
-
show a status banner for the user flows and states indicating if they are completed or in-progress.
-
provide important links to documentation, low fidelity mockups, user flow charts, and prototype videos.
-
separate each main flow into groups where I can better explain any changes, indicate the key action being taken, and show movements using connector arrows.
Takeaways ⭐️
Applying the design thinking process to this workflow added great clarity in what our users really wanted and needed out of Skutally. It provided an efficient way to identify user pain points and design improvements without having to spend any time guessing.
With this project, I wanted to make sure Skutally was following WCAG Color contrast guidelines by updating our design system's styles that were not meeting their standards. I used a Figma Plugin called Able to get this done.
Throughout my time at Skutally, the quality of my designs has grown tremendously by accepting feedback from peers and users. Although my team was rather small, I worked directly with the CEO and CTO for two years, a product manager, a content writer and developers - all who taught me communication skills and how to better present designs and pitch ideas with open conversations.