Timeline

12 weeks

Role

Product Designer
User Researcher

Tools

Figma
UserTesting.com
Mural

Background

QuickBooks Commerce is a one stop shop for small business owners where they can manage their inventory and orders across all of their online sales channels (think Etsy, eBay, Amazon, etc.).

As a result of a rapid acquisition-to-launch process, there were many opportunities to improve the application. Our project focused on the experience connecting sales channels.

Challenge

Initial problem: How can we improve the sales channel connection experience?

A. Initial Challenge

How can we improve the sales channel connection experience?

Ideal sales channel connection experience.

Current sales channel connection experience.

B. Problem Discovery

As this is a complex problem area, we conducted competitive and internal research and documentation.

i. Internal Research

ii. Competitive Research

C. A Clearer Problem View: Error States

We used affinity mapping to synthesize our findings and used a 2x2 prioritization map comparing impact and effort to reach a clearer problem space.
Once we discovered the error space, the PM honed in on the problem space further. Backed by Customer Success data and engineering feasibility, the specific error we tackled was the Missing SKUs error.

i. Missing SKUs Error

The Missing SKU Error occurs when the stock keeping unit (SKU) of a product on QBC and a sales channel are missing. QBC relies on the SKU number in order to sync the new updates such as orders and stock of a product. Without it, QBC is unable to perform its function and, thus, why this error is so integral to the experience.

How does the Missing SKU error work?

The current flow of the resolution experience requires the user to hop off QBC and onto Shopify to update the products with the missing SKUs.

The current missing SKU error resolution experience

Solution

A. Crawl, Walk, and Run approach

After working with the PM and engineers, a plan of action was devised. This plan was built on the short timeline we were working with and existing solution experiences that existed in product.

The Crawl would be the version 1 experience I design for.

B. User Research and Usability Testing

To better understand the user experience through the error resolution I conducted usability tests and interviews. We started with moderated sessions studying the connection and error resolution experiences of the top two most popular sales channels, Shopify and Amazon.

We pivoted to unmoderated sessions on UserTesting.com when we couldn't find enough target users to interview. As we had to use a prototype, I prototyped the current Amazon experience running into a slightly different error experience but one that had a similar resolution experience to our Crawl approach.

i. Top Findings

  • Unclear to the user if they solved the error at the end of the resolution experience.

  • Disassociates the two steps of the instructions to resolve the error.

Findings from usability testing.

C. Ideation


With a clearer understanding of the user, I began ideation. I led a Crazy 8's session and iterated through my sketch ideas with my design mentor and development partners.

D. The Solution: A Streamlined Experience


After rounds of iterations and balancing timeline with the best user experience, I finalized the design solution.

i. A Streamlined Flow


The user no longer has to hop off QBC to update the missing SKUs. This saves the user hassle and frustration.

Before and after user flow comparison.

ii. Progress Bar: Clear Resolution Indicator


Painpoint: Unclear to the user if they have solved the problem because they land on a separate page.

Solution: Ensure that the user lands back on the diagnostic page and see an immediate progress bar.

iii. Unclear that the two instructions are the same


Painpoint: Unclear that the two instructions pertain to the same document.

Solution: Incorporate all 3 action items into one, consolidated solution.

Old Error Resolution Instructions

New Error Resolution Instructions

iv. User Heuristics: Visability of System Status

A prime usability heuristic is the ability for users to be informed about the system through feedback and visuals. I incorporated this into the experience by adding a step progress at the top of the page.

iv. User Heuristic: Consistency and Standards

As a result of the quick turnaround of the acquisition and different product designers, the error messages throughout the experiences were not consistent. I incorporated the error style from Intuit's design system creating a simplified experience on an already frustrating experience that is error resolving.

Before: Inconsistent Error Messages

After: Consistent Error Messages

Takeaways

  • Designing is collaboration
    As the advocate for the user, the user is first, but it’s important to understand that feasibility and business impact are important. Collaborating and communicating clearly with developers and product managers to make strategic decisions will bring a solution that balances both feasibility and impact.

  • Adaption is what makes a strong designer
    Things will not run as the ideal design thinking pathway, but learning to adapt to make the most of resources to deliver a good solution is what makes a strong designer.

< Previous