QuickOrder M2 Extension Interface
A great tool for B2B clients to provide users, giving them a quick way to place large orders without navigating through a site. DCKAP developed an extension to accomplish prior to Magento’s offering.
The interface was outdated and ready for its next iteration.
Role: UX Design, Wire-Frame, Prototype
DCKAP Team: Andrea Sanchez, Alex Deckard, Mohan Natarajan, Jared Gambatese
Tools: Sketch, Paper + Pencil, Zeplin, Basecamp
Improve user experience by..
Reducing redundant CTAs
Streamline process via a better defined and more direct user flow
Provide better feedback & more informative error handling
Implement as a page rather than a pop-up
To be sure we understood and considered all intended functionality within our new design, we walked through the existing product with the dev team.
We viewed and tested the #1 and #2 google search results currently available.
Order placement is a straightforward task; get information the user already has into the cart. There are three methods to do this, but the existing UI has far too many possibilities within its user flow. Also, there is an excessive amount of competing CTAs, many of which are unclear or redundant.
To keep the checkout CTA’s above the fold, we contained the Purchase List within a scrolling window. It was requested that the individual item search be placed as close as possible to the Shopping List. However, the dev team advised that the search field gets the most use so this was given priority and brought up to the top of the page.
ATOMIC DESIGN SYSTEM
After finalizing the wireframes, I established design elements to build out the user interface. The visual styling needed to be designed in a way that easily adapts to any branding, with the UI relying as little as possible on specific colors. This is where the atomic design methodology was useful.
The result is an interface that can have any branding applied without compromising the experience.
The atomic design system was set up so the Quick Order interface could easily adapt to a brand’s existing styling.
Here are some examples..