Quick Order

MAGENTO 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 Designer + Design Team Project Manager

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 with more direct and defined user flow.

  • Provide better feedback to user & more informative error handling.

  • Implement as a page rather than a pop-up.

 

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.

Competetion

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.

TASK ANALYSIS

 

TAKE AWAY

Once an Item is populated to the form, it’s quite confusing as to what to do next. There are at least 6 different CTAs, all styled identically. ‘Add Item’ doesn’t add anything to the form or the cart, instead it adds a blank line to the form. What are the different use cases where a user would want to add an item to the form, then to the cart and then start over again and add another item to the form and then the cart?


DESIGN

 

WIREFRAMES

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.

 
QuickOrder_PencilSketch_Clipboard-Mockup_3Highlight35.jpg
 

ATOMIC DESIGN SYSTEM

I established design elements to build out the user interface following atomic design principals. The visual styling needed to be easily adaptable to any branding so the UI couldn’t rely on specific colors.

The result is an interface that can have any branding applied without compromising the experience.

 

FINAL DESIGN

V1 Previous

 
Existing QuickOrder Interface.png
 
Screen Shot 2019-04-16 at 3.39.47 PM.png

V2 Redesign

QuickOrder Home1of2_ChromeHeader.jpg
QuickOrder Home2of2_ChromeHeader.jpg
 

BRANDED ITERATIONS

QuickOrder_iterations_teal_77.jpg