Magento Logo.png
 

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.

 
 

PROJECT DETAILS

Role: UX Design, Wire-Frame, Prototype

DCKAP Team: Andrea Sanchez, Alex Deckard, Mohan Natarajan, Jared Gambatese

Tools: Sketch, Paper + Pencil, Zeplin, Basecamp

GOALS

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


 
Research_magnifyingglass_150px.jpg

RESEARCH

DEMO

To be sure we understood and considered all intended functionality within our new design, we walked through the existing product with the dev team.

Competition

We viewed and tested the #1 and #2 google search results currently available.

 Takeaway

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.

Single-Item-Lookup-Task-Analysis_compressed.jpg

WIREFRAMES

QuickOrder_Wireframes.jpg

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.

 
Design-Elements_compressed.jpg

DESIGN

Existing

Redesign

 
QuickOrder-populated-+-config_V3_compressed.jpg

MESSAGING


BRANDED ITERATIONS

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..