How to create a E-commerce website in 10 days using UX techniques?

Design Sprint, UX case study, Information Architecture, Card Sorting, Prototyping.

Estelle JIN
Jul 23, 2017 · 7 min read

CONTEXT

As part of General Assembly London UXD Immersive program, we’ve been asked to design an E-commerce platform for a local hardware shop using UX tools.

My role: I only had 10 days to research, ideate and deliver a low-fidelity clickable prototype. For the ideation, we ran a design studio. The first round with 6 designers and for the second round we practised pair design with Cellyn. I created all the UX documentation below.

UX tools: Card Sorting, Features Analysis, User Journey, Usability Testing, Clickable Prototype.

Date: March 2017


THE CHALLENGE

LOADING HARDWARE (LH), a small hardware shop located in Aldgate, would like to develop their online sales while maintaining the appeal of a “corner shop”. They ask us to help them become “the most trusted little hardware shop”.

SOLUTION

We developed a simple & professional website for “makers”: LEARN the skills, FIND the right products, BUILD your DIY projects.

Proto Live Demo

How did we get there?


DISCOVERY (Design Sprint — DAY 1→3)

Frankly speaking I’m not familiar with hardware shopping. When I received the list of 75 top-selling products to categorise, I didn’t understand half of the list (welder, trimmer, air compressor etc…). That’s the beauty of UX, it’s a methodology. So as long as we ask questions, keep testing on real people, and actively listen to them, everything should work out right?…yes it did!

Benchmark & Competitive Analysis

I started my research with Google map, I listed all the local hardware shops nearby Aldgate and visited their websites (feels like time-travelling back to the early age of internet). As indirect competitors, I added the big retailers and their websites looked more professional.

We benchmarked 20 direct & indirect competitors. This helped a lot to get familiar with the naming (I had no clue what was a jigsaw…).

We then join forces with 2 other designers to create Features Analysis to see some common patterns emerge as best practices.

Competitors Analysis and Brand Positioning

Who are our users? What are they looking for? In which context they need our services? Why?

Contextual Inquiry

I visited a big retailer (Leyland) and a small hardware shop to observe client behaviours in store and experience the customer service. The idea was to find out what is “corner shop” appeal?

User Interviews

I conducted 3 phone interviews (20-30min each) about hardware shopping. I chose friends that recently purchased or intend to buy hardware/tools to fix something in their home.

INSIGHTS:

“I won’t spent too much time on hardware shopping, I just want to get the right stuff to complete my project”

“I look for inspiration online first (Pinterest). Then I go to the shop to get what I need.”

“Professional advice is really useful, sometimes I ended up with another product that the one I intended to buy.”

“I like my local shop because it’s just next door.”

“I like to check the real product to make sure it’s the right size/ texture/ tool.”

IDEATE & DEFINE (Design Sprint — DAY 3→5 )

Persona

To complete the design sprint on time, we decided to focus on 1 persona called Yoshi because she is the most representative of LH customers.

Meet Yoshi, our main persona we are designing for.

Scenario

Yoshi, a busy junior landscape architect, that newly moved to a house with her 2 best friends. After some research online, they decided to repaint their rooms in low sheen white. To save time, she wants to buy the paint and tools online at her local Loading Hardware shop.

Now let’s make it easy for Yoshi to find what she needs…

Information Architecture — Card Sorting

I used Card Sorting exercises on 3 people. I handed 79 bestselling products name on post-it to people and let them regroup the products in the most logical way. We found out that some products would fit in multiple categories.

“The process of buying is a process of deselecting”

Site Map

Design Studio

We decided to run a design studio to brainstorm on 2 key pages: product page and checkout page.

PRODUCT PAGE: how to “glamorize” a pot of paint? What information our users consider as important?

We decided to show the product results instead of the product itself. Showing a yellow chair from Pinterest instead of a pot of yellow paint for example.

Product Pages Sketches

Checkout Page: we decided to not include the compare feature as it’s not relevant to the limited merchandise of LH.

Checkout Pages sketches — Pair Designing with Cellyn

DEVELOP (Design Sprint — DAY 5→10)

Quick and Dirty…

I quickly created a Paper Proto with only 3 key pages sketched (Landing page, Product page and Checkout page). After 2 successful user testings I quickly moved to low fidelity digital prototype (using Keynote and Invision) to gather more feedbacks.

I wanted to design a warm and intuitive experience, where people didn’t get lost in too many choices while finding the right information.

4 User Testings & Iterations after…

Product page with reviews and pro tips

Quick Basket Overview overlay when hover on basket icon

Checkout Page

  • Checkout breakdown in 4 steps
  1. Order Summary → 2. Delivery Details → 3. Secure Payment → 4. Order Confirmation.
  • Progression Bar to encourage users to complete the order.
  • I also added a Summary of user input on the right side to avoid mistakes.
2. Checkout — Delivery Details
3. Checkout — Secure Payment
4. Checkout — Order Confirmation

“Done! that was quite easy”

“I’m looking forward to see the final version.”

“Feels intuitive”

Final prototype:

If I had more time I would love to explore the idea of a forum where people ask for DIY tips within their local communities.

Thanks a lot for reading this. Feel free to leave a comment.

Estelle JIN

Written by

Freelance UX UI Designer | www.estellejin.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade