12 weeks
Product Designer
User Researcher
Figma
UserTesting.com
Mural
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.
Initial problem: How can we improve the sales channel connection experience?
How can we improve the sales channel connection experience?
Ideal sales channel connection experience.
Current sales channel connection experience.
As this is a complex problem area, we conducted competitive and internal research and documentation.
i. Internal Research
ii. Competitive Research
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
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
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.