Skutally's Sales Orders
Redesigning how to quote, sell & fulfill orders more seamlessly in the Commerce cloud
Role
Lead Designer & Researcher
Tools
Figma & Balsamiq Mockup
Team
Product Trio
BACKGROUND
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
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. We set out to redesign Skutally's sales order process–quickly.
OPPORTUNITY
Provide users an end-to-end process while working on sales orders By splitting the current screen into a simple, three-step process; aimed to reduce error by incorporating more effective prompting, flexible functionality, and increased awareness on the order's status.
PROCESS
As the primary end-to-end designer for this project, my process was:
-
conduct usability tests with key users to define the problems
-
update sales-user personas and flowcharts to visually see our user's pain points
-
define key insights and recommendations that address each pain point we aimed to solve for
-
define user stories and frame "how might we" questions
-
map out high-level user flows
-
create wire-frame concepts & craft swift prototypes
RESEARCH FINDINGS
1. 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.
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)
2. 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.
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.
3. 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.
RECOMMENDATION:
Make the payment card and/or primary action button always visible.
4. 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.
RECOMMENDATION:
Use overlays so users can quickly update customer information within the sales order process.
DESIRED OUTCOMES
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
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 sales process to create seamless & minimal-click flow?
TESTING & PROTOTYPING
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.
With Balsamiq Mockups, I was able to quickly nail down the core experience I envisioned for our users before translating flows into mid-hi fidelity wireframes.
Mid-Fidelity Flows
HI-Fidelity Flows
Update 1
Separate search from filters menu to reduce extra clicks & allow users to start typing right away.
Update 2.2
Once products have been added to the draft sales order, users can:
-
send quotes to customers
-
checkout (add payment methods or a payment term)
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).
Prototype
Handoff
Update 2.1
Restructure sales order's draft screen by:
-
titling screen "Draft order" instead of "Sales order"
-
using overlays rather than redirecting to new pages
-
separate 'Customer & Contact' card from the 'Fulfillment type' card
-
allowing for users to only be able to send customers quotes from within a draft order
-
having the main page actions be shown twice for visual awareness
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.
