OVERVIEW

DESCRIPTION:

Small hardware store client trialling online sales channel on website. The client’s  business model is designed around high-quality in-store advice and products for locals and tradespeople.

MY ROLE:

UX Architect (sole).

TIMEFRAME:

2 Weeks

CHALLENGE:

A small hardware store sought assistance to enable e-commerce capability while reflecting the service-led nature of the in-store brand.

SOLUTION:

The design an e-commerce product shop from first principles. In addition, the gifting process has been designed.

TOOLS:

Paper & Pens, Sketch App, Invision, Optimal Sort.

ACTIVITES:

  • Hybrid Card Sorting
  • Navigation Design & Prototyping
  • User Flow Design
  • Competitor research
  • Flow design
  • Paper prototyping
  • Wireframe design (Sketch App)
  • Flow prototype (Invision)
  • User walkthroughs

DESIGN PROCESS

INTRODUCTION

This was short brief to add an e-Commerce component to existing website for a hardware store client. The client had an existing website, and two existing physical neighbourhood stores.

As the client was dipping their toe in the water of E-Commerce and was looking to test out the concept of an online channel. A narrow / lean approach to the proposed solution as a low-cost entry point for the business that they could be expanded on later, should they choose to transition more of their business to an E-Commerce or digital business model.

It is unusual to design an e-commerce retail site from scratch for a small business client. Many of the E-Commerce retail solutions available on the market today have a well-defined structure and workflow, which unfortunately don’t allow for much flexibility or customization of an experience for a target audience.

DESIGN PROCESS OVERVIEW

The design process ran with four major parallel workstreams. These were: Business analysis, information architecture and navigation design, business and user flows, and lastly, the user interface and interaction design. However, the streams were not independent; Each design stream influenced each and every other stream.

BUSINESS RESEARCH

BUSINESS ANALYSIS

The Hardware Store provided it’s values, culture and three personas of potential users and the “jobs” they were seeking to get done. I comment on whether these were the right starting point in my final reflections.

At a high level, these three personas can be described as an

  • Andy — a Tradie seeking quick delivery of stock on job sites,
  • Thomas — a low-knowledge buys online gift buyer and
  • Lisa — a busy DIYer always looking for the next project.

COMPETITIVE RESEARCH

A competitive review was undertaken of the “Big Box” competitors websites such as Masters & Bunnings. From these, I was able to draw insights around the design of their navigation menus, locations of search boxes, and the prominence of the store locator at the top of the page.

I took onboard insights around how each of them had laid out elements on the product category pages, and where competitors were using buttons and prices on product category pages. There were some strong learnings around how wishlists could be implemented. It was also noticeable how they had combined top level categories in an “A & B” format to reduce the number of top-level items.

The competitors’ websites were excellent in term of layout and experience. Although, it was noticeable that the Bunnings website was a product category site, rather than a pure e-commerce site. There were obviously reasons why this made more sense to them than taking their entire range online — and may have pointed to some hidden challenges for their business model transitioning online that could be exploited by The Hardware Store.

The competitors sites were fully featured — however, given the scope of client’s initial product set was limited to a small set of 300 popular product SKUs, implementation of all of the functionality of competitors’ sites would have been simply overkill. Instead, I choose to focus more on core features. It was recommended to the client that a staged roadmap for more advanced features be developed.

COMPARATIVE SITES

A comparative analysis was undertaken to review the best in class E-Commerce websites such as Amazon, Asos and Gifts.com as well as a range of DIY Ideas websites.

These websites provided insights into some of the latest e-commerce trends and the importance of simplicity in a 3–5 step checkout process to ensure conversions.

Although there was a lot of variation, it was clear that once a user was in the checkout process, it was required to be distraction free. Only the most essential elements were left on the screen and many even took the user from the normal site, onto a completely different e-commerce gateway site.

Best practice indicated that the login and registration pages should be overlaid popups over product pages (etc), to ensure that users were not taken from their current location, and it didn’t interrupt their current shopping experience.

The best practice websites used pop-ups and signalled acknowledge of actions such as the addition of products to the cart. They provided very clear acknowledgements when products were or were not available.

The “Add to Cart” Button and “Checkout” Buttons were highlighted use bright colours to encourage users to take these steps.

It was also clear in the Amazon experience, that efficiency was a key requirement of the checkout process, allowing users to checkout as quickly and easily as possible. If they had entered shipping or payment details previously, then these should be shown, and the customer / user allowed to simply pick them or acknowledge that they are correct, so they user could process to the next step without effort.

Another Amazon learning was the use of pre-populated fields and defaults chosen for checkouts. When two options were provided, the most likely option was selected. If an address was being entered, the website would look it up and try to autocomplete, saving the user time and reducing the effort for completion.

CONTENT & INFORMATION ARCHITECTURE (IA)

I completed a Site Navigation design with emphasis on 2nd and 3rd level navigation menu layers as major and minor product categories.

PRODUCT CATEGORY TESTING

The client provided a subset of less than 300 popular products by brand and name with each product’s product imagery.

As a first round exercise these were sorted by me and three other colleagues as a group sort. We sorted the products into major and minor categories. This produced the initial hypothesis around how these products would be categorised on the website.

The initial hypothesis was tested with 19 users in a Hybrid Open Cart Sort using Optimal Workshop’s Card Sorting online tool online. This tool required users to categorise 60 products into one of the nine major categories, or alternatively, if users believed that it didn’t fit any of those categories, they then had the option to create their own category.

I learnt from the card sort that less major categories were easier for users, and in general, they had agreed with our choice of the major categories. However, there were some re-arrangements that were required in terms of the top level combinations. For instance, Outdoor and Gardening was replaced with Outdoor and Lifestyle.

Some product items did not seem to fit any major category and indicated a need for primary category and second category attributes, so they could be located in more than one location in the hierarchy.

It also became obvious that search functionality would be the only way that some products could be found — for instance, Pet products did not logically sit comfortably within any category.

The client had indicated that the Shop functionality was a trial, so I took a hands-off to modification of top level menu items, for this initial implementation for the functionality. The categories (major) and sub-categories (minor) became second and third level menu navigation items to be displayed in a mega menu which was common amongst competitors websites.

GIFT CATEGORIES

Gift categories were created based on competitors designs (in particular Masters) and have not yet been tested. At a high level, they seem logical. They are based on two conceptual models: The type of person who the gift is for and the amount or value of the gift. It is expected that product items would fall into some of these gift categories as second category attributes. Some further testing would be required to validate that price and person were the customers would search for gifts, and the breakdowns by type and price were correct.

DIY Tips / Ideas Categories

The DIY Tips / Ideas menu structure was based on a competitors design by area of development. This seemed like a reasonable hypothesis of how a DIY person would search, however, it does need to be validated through more extensive user testing.

PROCESS AND FLOWS

For each of the three personas, a customer journey map was developed for the persona’s happy journey. The journey map for each persona became more refined with each iteration.

ITERATIVE DESIGN PROCESS FOR UI

Rapid paper prototyping of the UI and Checkout process with regular user and stakeholders resulted in some early changes in direction. I decided to focus on the checkout process initially as for me this was the key process. I later turned my attention to the shopping process which was about helping users find or choose the products they required. Many of the learnings in other work streams informed decisions made in the UI phase.

Early feedback on rough UI sketches helped me discover that too much information was being collected in the checkout process and I could reduce the amount of information collected for registered users. Feedback was also provided about the number of steps in the shipping process, which allowed the shipping step in the checkout process to be collapsed. Feedback from stakeholders removed unneeded functionality like comparison features.

Early feedback on rough sketches also allowed the quick discovery of missing functionality in the checkout process such as the ability to navigate back in the checkout process.

CHECKOUT PROCESS

The checkout process was initially based on E-Commerce Clothing Retailer ASOS’ checkout process. But early user testing showed that the ASOS process, although comprehensive was far too cumbersome for users. A lighter five stage process was developed based on an Amazon’s slimmer checkout process.

Amazon, famous for their one-step checkout, emphasised the ability to use stored information to guide a user quickly and efficiently through the checkout process.Users informed that it was important to allow some flexibility into the process, and not require one-time purchasers to register for the site, so a Guest checkout process was created. These Guest customers could, at the end of the process, signup to the store and with a little further information register for the site.

Users informed that it was important to allow some flexibility into the process, and not require one-time purchasers to register for the site, so a Guest checkout process was created. These Guest customers could, at the end of the process, signup to the store and with a little further information register for the site.

The checkout process accommodated the clients wishes for local support. The second stage of the process requested the user’s postcode. This was used to identify local users of the hardware store, that may be eligible for free delivery by the customers service. The information was passed to later stages.

Feedback on the working prototype identified that a multistep process on a single page may be appropriate for users with slow or poor internet connections.

THE SHOPPING PROCESS

As a starting point for the process, I hypothesised there would be multiple ways a persona might begin their shopping journey. They could arrive on the homepage, arrive through a blog entry, DIY tips or product page through a deep link on a search engine (like Google) or through a direct link (for instance, through a client newsletter). Each of those would be modified to redirect the user to potential products or upsell opportunities. For instance, the DIY Tips item page would show relevant items that might be required to complete that DIY activity. The site’s overall design philosophy enabled users to have multiple ways to navigate and find what they were looking for — through breadcrumbs, search boxes, a large global navigation menu, or a vertical secondary navigation menu.

There are two different navigation hypotheses — these remain to be validated. The first is that was that users would use a global navigation followed by secondary navigation to find the item they were looking for, and only then would the user use the search functionality . The second was that search would be the primary navigation tool used by different personas. The emphasis and high central placement of the search bar on competitors sites led credence to the second hypothesis. However, unlike big box competitors who had tens of thousands of items in their e-commerce stores, the client was starting with only a small number of items.

Hierarchy-based navigation mental model: Navigating from the home page, through major and minor product categories.

Search-based navigation mental model: Navigating from the home page, through search to find a product page.

PRODUCT PAGES

The initial sketches of the Product Category and Product Detail pages show the emphasis on images, with attempts to minimise detailed text through tab menus.The pages followed a standard e-commerce template design with sub-categories on the Category pages, but not on the product detail page.

The pages followed a standard e-commerce template design with sub-categories on the Category pages, but not on the product detail page.

I decided to focus the user purchase and make this really easy, making the “add to cart” prominent on the product detail page, and also available on the secondary level category page too.Early feedback allowed from product detail sketch iterations allowed the eliminations of unneeded comparison features and the swapping the position of the recommendation and related products sections.

Early feedback allowed from product detail sketch iterations allowed the eliminations of unneeded comparison features and a swap of the position of the recommendation and related products sections.

Early rapid paper-prototype was used to validate early designs. Its fugly but it works — and very quick.

The paper prototypes evolve into low fidelity wireframes.

GIFT PAGE DESIGN

An exception to the Product Category template was the Gift category page design which had a slightly modified layout — making it more tailored toward this category.

DIY Design

While the design of the DIY features of the site followed a familiar flow and template to the Product Categories, the actual DIY Detail Page itself varied considerably. The page has to accommodate a variety of content such as videos, images and text used to illustrate the “How to” nature of the content. It was important for the DIY Design page to include callouts that encouraged the user to make contact with the local store. The bottom of the page showed related articles and relevant products to encourage up-sale.