Shop & Purchase

Xerox.com

Global Retail Store for Printers and Supplies

 

Designs

  • Storefront Design

  • Shopping Cart

  • Purchase Process Flow

Contribution

  • Presentations

  • Wireframes

  • Prototypes

 

At Xerox North America, there are a wide range of divisions. From product designs to document management. A large part of Marketing and product owners were there as well.

Mockups & Prototypes

Challenge

Design a better shopping cart and streamline the purchase process so that conversions require less time. 

Solution

The bulk of the solution came from a view into the competition and learning what was being done in the market. How a product performed was graded by over 80 different criteria. Findings pointed toward the best features, and those were the ones that informed the design. 

Shopping UX

Purchase Flow

 

Wireframes

Shopping Cart & Purchase

Since the focus was on how products in a shopping cart move through the purchase process, most use cases and discussion points center around the purchase page aspect.

In the design below, I followed competitive findings showing that a 2 column approach was superior. It allowed me to establish the two topics that exist inside a purchase process. Identity (left) and Transaction (right.)

 
 
asset_Cart_Wireframe2-1.jpg
Signin
asset_Cart_Wireframe2-3.jpg
asset_Cart_Wireframe2-4.jpg

Identification Components

Findings showed that it was better to change elements in a purchase page rather than move between screens.

We want shoppers to become familiar and comfortable with the purchase page.

Mini Shopping Cart

Small Shopping Cart = Easy Purchasing

There’s a big delta between placing products in a cart and following through with the purchase.

It’s scary to the user, and it’s an opportunity to innovate.

In the case of the Mini Shopping Cart, we’re casually introducing the purchase process by establishing a widget that infers the process.

The utility is that it saves products to keep an eye on what is in the cart. It is also subtly making users more comfortable with buying.

 

Product Up-Selling

Another feature spotted in the competitive assessment was the use of promoting other products similar to the one the user just added to the shopping cart.

Amazon.com pioneered this upselling. However, in contrast, we’re providing more clearer, more polite opportunities.

 
 
asset_Cart_Wireframes4-1.jpg
asset_Cart_Wireframes4-2.jpg
asset_Cart_Wireframes4-3.jpg
asset_Cart_Wireframes4-4.jpg
blank.png
 

Workflows

When a component, such as the mini-shopping cart existed across multiple pages, flows can be used to map out where it could appear.

It meant there were fewer page wireframes; beyond the component wireframe, flowcharts like these were used to identify occurrences.

 

Competitive Assessment

Rather than blindly attempting to suggest a design, I simply identified the companies in the same space. Amazon, Staples, Office Depot, and Quill were the key ones. Then I took a close look at their public products, shopping their sites seeing how their products behave. After viewing all of them closely, an awareness began to form about what worked well and what didn’t. 

Consensus for Best of Class

I found what features would make Xerox.com’s shopping cart and purchase the best in the market. However, since I wasn’t a SME nor a business owner, a presentation was imperative. I had to share it with the business side and gauge what a valuable innovation was. 

Design for the Wanted Features

Having the desired features identified went a long way to set scope. After that, the wireframing and prototyping was straight forward. The focus had become narrow and precise and was ultimately easy to follow-through.

 

Domain Knowledge

  • Office Supply Shopping

  • eCommerce Components

  • Market Trends

Design Tools

  • OmniGraffle

  • Axure

  • Freemind

  • Office