Build an eCommerce Website from the Ground Up. A UX Case Study.

Using UX Design principles to balance business goals and user needs.

This is a concept project with a fictional hardware store as a client.

Brief: Develop and eCommerce website for Progress Hardware, a local hardware store located in Aldgate since 1964.
Key points: ‘small shop’ appeal, great customer service. Consider the MSCW feature prioritisation given by the client.
UX Methods
Competitive Analysis, User Interviews, Contextual Inquiry, Card Sorting, User Flows, Sketches, Digital Wireframes, Usability Testing
Sprint Duration
2 weeks (Jan 2019)

№1: Research — What does the competition do?

To better understand how the competition organizes their presence online, I did a Competitive Research.

Goals

  1. Identify the weak points of the competition
  2. Define the basic features for the website, to take advantage of that
The brands examined during the Competitive Research

Feature Comparison & Element Analysis

I looked at the online features of the main competitors, again the MSCW list provided by the client. I then compared the recurring elements in the landing page, in the main navigation and the footer of each website.

Identified Opportunities

  • A quick and easy Checkout would be an advantage over the competition
  • None of the competitors have a Loyalty Program

Key Features

  • The “Search” option is fundamental and always prominent
  • The Logo can quickly inform the users about the scope of the website
B&Q Checkout — User Flow: many steps, it requires personal details early in the process

№2: Discover — What do the users do?

To gain critical insights on how, why and when people usually shop for hardware tools, I conducted various user interviews.

Goals

  1. Understand what customer look for in an eCommerce experience
  2. Discover the most common user-flows they follow
User Interview: what does she expect? (examining a competitors website)

Findings

  • Users want to check the availability of a product online
  • They usually want to buy hardware tools in person
  • A clear store location and opening times are fundamental

№3: Structure — Information Architecture

To organize all the products in logical categories (for the users) and create a clear navigation, I conducted multiple rounds of open and closed Card Sorting.

Left: during one of the open card sorting rounds. Right: the final result of a closed card sorting

Results

  1. I was able to create Product Categories easily understood by most users
  2. This helped me to create a Sitemap and define the information architecture of the website
  3. The sitemap informed the Primary Navigation of the website
The Sitemap
First quick sketch of the Primary Navigation (informed by the Sitemap)

№4: Develop — Sketches and Wireframes

To understand how the content could be organized into pages, I created hand-drawn sketches for each page.

Goals

  1. Define how each page of the website could hold its content
  2. Quickly iterate and modify the sketches, allowing different solutions
Sketches — from left to right: Homepage, Products, Checkout Page

Results

  1. I was able to condense all the previous findings into a visual look of the structure of each page
  2. This process helped me create digital wireframes and start rounds of usability testing
Digital Wireframes — from left to right: Homepage, Products, Checkout Page

№5: Understand — Usability Testing

To find out how users would respond to the structure and the organization of the content and create a successful user experience for the customers, I did two rounds of usability testing. Every round comprised 4 to 5 users.

Goals

  • Find pain points in the design of each page
  • Understand the needs of the users and design the pages around them
  • Define the core features of 3 main flows: discovery of a product, checkout process, reorder process
Usability Testing: the quotes alone contain already valuable insights

Key findings

  • Concision: the information needs to be easy to read and to the point — less is more.
  • Feedback: users need feedback for every action they take and to be reassured that something actually happened
  • Conventions: it’s important to follow practices that are used on most eCommerce websites and therefore expected by the customers

Results

  • Testing with multiple users allowed me to iterate the design, to create a more easy and pleasant user experience.
  • It was possible to make changes following the clear feedback gained through multiple rounds of testing.

The Guest Checkout Page:

  • The checkout process was completely redesigned over different iterations.
  • Discarded the members' checkout, a progress bar was then changed into clear highlighted tabs, for a quicker and clear flow.
Three Iterations — Checkout Page

№5: Delivery — Clickable Prototype

At this stage, the feedback from the client is fundamental before moving to high-fidelity mockups and test the UI.

Goals

  1. Show the client at which stage our research and development has arrived
  2. Demonstrate how users could successfully complete the three main flows (discovery of a product, checkout process, reorder process)
  3. Receive invaluable feedback and involve the client before moving forward

The Prototype

Mid-fidelity Prototype created with InVision
Gif of the mid-fidelity prototype

ACHIEVEMENTS

Following the UX Methods explained until now, it was possible to create a successful eCommerce website, ready to be handed over to UI Designers and Developers.

Key Points

  • Clear Information Architecture: users can easily navigate the content of the website
  • Simple checkout: users are 3 clicks away from buy or reordering a product
  • Availability and location: users can see which product available in store and online, and where they are located in the physical store
  • Feedback: every action is backed by clear feedback and confirmation that it happened

Next Steps

With the confidence that the user experience will now satisfy the online customers, we can think about the next steps that could be implemented (after accurate testing of course!).

  • Mobile version: every business needs a responsive website to be successful online
  • Personalized Content: registered users different content when logged-in
  • Chat: an online helpdesk with an expert seconds away from the user

CONCLUSION

This was an intense and challenging two-weeks sprint. I learned a lot during all phases of research and development. Usability testing is such a powerful tool and mastering its use could mean the success of many new products and ventures.


About the Author

I am a graduate from General Assembly, London, User Experience Design Immersive (UXDI) programme. I am currently actively seeking for a job — and happy to meet for a coffee or a quick chat.
My design works can be viewed in my portfolio
Contact me by
ux@davidetremolada.com

Also, please leave your feedback to help me improve.