User research · Wire-framing · Prototyping

Quote, sell & fulfill faster with Skutally's Commerce Cloud

asdfsdfad.png

My role at Skutally

  • 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 using our software already - 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

I created flowcharts based on our updated sales-user personas. 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 (7+) 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.

Low awareness

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 know for a fact that they are working on a draft order and it has not been submitted (paid) for yet. Also, when printing a Quote from within a draft order, users are presented with many printing options that they are able to give to the customer. 

Design recommendation

Use different page titles and badges to help the order status standout more. 

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/contact to an order, the user is taken to the customer's account screens; interrupting the sales process. 

Design recommendation

Use overlays so users can quickly do a task and move on to the next one without having to leave the order screen.

Desired outcomes

To give users an end-to-end process for working on sales orders; with an aim to reduce error by incorporating more effective

prompting, flexible functionality, and increasing awareness on order-related statuses.

 

Search & filter redesign

  • Reduced amount of clicks by separating the search from the filters menu 

  • Ability to view table results in realtime

  • Ability to view recommended filters based on what is being typed in 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 in order to accelerate customer interaction?

2.

increase user awareness when they are working on a draft order?

3.

structure the sales order process to create a seamless and minimal-click flow?

SOLUTION

Understanding our users

Through user testing sessions and screen recordings, we came up with a complete redesign - focused on our users' major pain points and desired outcomes.

Our thinking was to split the order screen into a simple process that follows three main steps

  1. Create a draft order

  2. Checkout

  3. Fulfill order

Creating Wireframes

With Balsamiq Mockups, I was able to quickly nail down the core experience I wanted the user to have.

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 start typing right away. If wanted result is not visible, user can click directly into filters and apply as many as needed.

Screen Shot 2021-05-26 at 10.39.04 AM.pn

Design update 2

Restructure the sales order's draft screen so that user knows they are in a draft order and a payment has not been made yet. 

  • Title the screen "Draft order" instead of "Sales order".

  • Allow for overlays to populate on this screen versus users being redirected into another screen when clicking on an action button.

  • Separate 'Customer & Contact' card from the 'Fulfillment type' card so that they aren't hidden anymore.

  • Allow for users to only send customers quotes from this draft order.

​Once products have been added to the draft order:

  • Allow for users to only send customers quotes from this draft order.

  • Direct users to Checkout next where they can add payment methods or a payment term

new.jpg

Design update 3

After the order has been paid (via checkout), users will want to fulfill the order. In this 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).

Paid, Unfulfilled.jpg

Within this screen, we wanted to give users the ability to quickly view their whole order. We found this to solve a fulfillment pain point that our last design was missing: users will be able to tell customers how many products they purchased in the original order right from here.

Final design & Prototype

Thanks for stopping by :)

Have questions or an opportunity you'd like to discuss with me? I'd love to hear from you!

Made with 🖤 in Fort Lauderdale, FL

Takeaways ⭐️

With the help of new page titles, CTAs, and page reconstructions, users are guided from draft to submitted seamlessly now.

We are currently in the process of user testing and prototyping before putting it into production.

 

With this project, I also 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.