Designing my first E-commerce website, UX case study
Concept Project- Using UX Design principles to balance business goals with the needs of the user.
Methods
User interviews, Contextual inquiry, Card sorting, Affinity mapping, Design lab, User flow, Experience mapping, Paper Prototyping, Wireframes, Usability testing
Tools
Omnigraffle, InVision
Discover
Overview
So in the second week of my GA UX course, we were given a brief from retail client Edge Sporting Goods (ESG) to design a desktop optimised e-commerce site. It contained an overview of what the company was about and how it’s values should be translated from its bricks and mortar store.
The brief included an MSCW feature prioritisation that would influence the finished wireframes.
It was important to summarise ESG ideals and plan to reflect these in the final solution.
Competitor analysis- Website Feature comparison
Starting off I compared websites of direct and indirect sporting goods retailers to gain inspiration for an e-commerce website.
I wanted to compare features on each site and identify opportunities for ESG, this included expert knowledge given on each item page. I also looked at the layout of websites and how the global navigation guided the users’ experience.
Persona and User interviews
Within the brief was a primary persona. I carried out further user research with similar personas to combine the findings and realise the wants and frustrations of the ESG users.
I identified several trends through the persona and user interviews .
What users want
- “Real life” experience
- Curated product
- Easy quick delivery
- Other buyers reviews
- Related items
- Expert knowledge and opinion
- To know when things are finished.
What frustrates users
- Lack of delivery options
- Lack of Expert specialist knowledge.
Contextual enquiry — Insights from a competitor store visit
During my visit to a bricks and mortar store I discovered the importance of translating expert knowledge on each product and displaying best sellers (footwear) to customers straight away. After talking to staff they informed me that footwear was by far the best sellers, hence why this category was given such obvious display retail space in the store. Footwear was the first display a customer could see as they walked into the store.
Could I somehow translate this display through the e-commerce design to give a ‘real world experience’ that my persona Robert appreciates?
Define
Based on the persona and user findings I defined a situation to pinpoint a problem that I could then aim to solve through the final design.
Situation- Robert is a busy male in a central London job that likes keeping fit and will be running a marathon on Saturday.
Problem- Robert is looking for curated running products expertly chosen and wants a seamless service that gives him delivery options suitable for him.
Site mapping and Information architecture
To help my user Robert in solving his problem, I had to develop the sitemap and global navigation of the e-commerce site.
Why you ask? by defining the information architecture and sitemap through a card sorting process, it would enable Robert to navigate through the website as intuitively as possible.
Card sorting
I gave the sample product inventory items (given in the brief) to 4 different users and asked them to categorise the products and label them as made sense to them.
With all the categories created through this open sort sorting method, I placed them into trends through affinity mapping to produce the main categories of my sitemap.
I then recruited another 2 users to place the inventory items into the categories I had defined to see if the users naturally organise the items into these categories too. Luckily they did!
Here is my sitemap developed off the back off the categories created in the card sorting process.
Develop
Ideation through design studio
Carrying out a group design studio helped define the features and design of the home and item page. We addressed features that fulfilled users expectations and ESG brief requirements.
In my initial sketches I was able to include features that fulfilled the requirements requested by ESG . Most importantly though, I made sure to include features that would fulfil users expectations discovered in the research phase.
User journey
Based on the Persona, I developed a user journey that would then inform the user flow and further screen designs.
Robert a running enthusiast, is planning on running a half-marathon first thing Saturday morning. He wants to buy some running products and wants to make sure all of the supplies are ready to be picked up from store.
Experience mapping
I created an experience map applying the user journey and attributing tasks that the user would complete at each stage of completing their goal. The goal being, to buy a product from the website to collect from store.
Below are maps of current users’ experience using existing e-commerce websites, followed by what the experience of ESG e-commerce should be. I aimed to improve the checkout process by asking 3 users to sort how features of the checkout needed to be ordered.
Buying a product from the website to collect from store.
User flow
Before designing a paper prototype of the website, a user flow was created first.
Why? This allowed me to focus on what screens needed to be produced and in what order to allow the user to reach their goal of buying a product from the website to collect from store.
Paper prototyping — Starting to iterate
Sketching out the screens and then testing them with users allowed me to identify features that needed to be changed or added.
I asked users to carry out a particular task of finding running related product to purchase and collect from store. As defined in the user flow I was anticipating users to click on the running feature first to start the flow.
Summary of iterations
Homepage — in the original design I was hoping to feature an interactive ‘real world’ footwear display that would reflect real life , but users though this was just a picture and didn’t realise the shoes would be clickable. In the next iterations I would need to define each shoes with text to show it was clickable.
Payment page — users didn’t realise that even if they were to collect an item from store , billing information is legally still needed by a retailer for payment security reasons. I would need to explain this in the later iterations.
Estimated delivery — Users liked that they could see the delivery estimate change when they selected home or store collection options.
Signposting and copywriting — In my next iterations I needed to explain functions through copywriting and included pop up summary pages so the users could understand and navigate better through the flow.
Wireframes and Usability testing
Producing 2nd generation versions of the paper prototypes informed the digital wireframes. I tested these again with a scenario.
Final User test scenario 1
You have a half marathon coming up and since you want to buy quite a few different running products (from watches to clothing and trainers) , you want to quickly see what running items are available. How would you go about do this?
When you buy you would like to collect your items from the store near by.
Summary of iterations
In the first usability test the main issue discovered (other than signposting and copywriting) was getting the users to select the curated running product feature on the homepage
Firstly the scenario set for users was not concise or particular enough for the users to take the flow I had anticipated. An updated scenario was set for the users to guide them in their journey through the screens in the next generation wireframes.
Secondly several iterations of the home screen were tested before the final Mid-fidelity wireframe. The placement and copywriting of the running products feature was affecting users ability to complete the scenario goal.
Up until the 5th generation design I hadn’t taken into account the common F-pattern of reading web content. Users weren't completing my scenario as I hadn’t placed the starting call to action in the most accessible place in the design. I moved the feature till users started to complete the flow as I was anticipating.
Deliver
Find the Mid-fi Prototype here
Solution Recap
The solution created was one that will allow Robert our main user to find curated running related product easily, view the expert description of each product, add to his basket and then view the delivery options, prices and estimated delivery dates seamlessly.
Going back to the brief and the persona i’ve successfully been able to do the following:
Established the brand as knowledgeable through an expert video, descriptions and curated product features.
Give the users clear delivery options and delivery times through an informative checkout process.
Steer the user to popular product through a ‘real world’ footwear display feature and related products.
Find the Mid-fi Prototype here
Next Steps
As with all web design users have new needs and preferences to address , the story of Edge Sporting Goods e-commerce doesn’t finish here.
Future developments
- Develop the visual design for a hi-fi prototype
- Design a mobile responsive version of the site as 51% of online sales now come through mobile.
- Develop a quick buy feature on each item to allow more decisive users an quicker journey.
- Address the second persona given in the brief and write up the case study for the bulk buy features I included in this design.
Thanks for reading!
Find me at https://www.linkedin.com/in/emma-e-gibson/
This story is published in The Startup, Medium’s largest entrepreneurship publication followed by 277,994+ people.
Subscribe to receive our top stories here.
