All That Glitters E-Commerce Design
This is a concept project created where the client, a local party supply shop based in East London, tasked me with designing an e-Commerce website. Sounds simple, but there were many factors to consider!
My Role
I aimed to design something that was not only professional looking but smooth in experience and retained core values of the local store.
This project was a two-week sprint where I focused on the core principles and processes of UX Design. I conducted user testing and interviews to gain insights and shape ideas. As things progressed I was able to create a mid-fidelity prototype to present to the client.
User Research
I conducted user interviews to gain an understanding of the their focus, attitudes and approaches. One of the biggest challenges as someone who is new to the field, was asking open ended questions and not leading users on.
Some of the feedback I got during the interviews were:
“I would prefer to shop online and find ideas before stepping out and visiting shops.”
“In store you get a feel for size, fabrics and fit. Items can look different to how they look online.”
“Look of the website — I feel like if there is effort in the website there is effort in the clothes, ease of navigation, filter items down, time saving”
This allowed me to focus on one of the three persona’s already provided to me in the brief.
Persona
The results highlighted what some of the key focal points of the website should be. Areas such as product information page, the look and feel of the website and ways to save time browsing.
With this in mind I concentrated on analysing the competition. Who are they? What are they doing right? What are they doing wrong? This step gave me insight into the potential gap in the market and how to exploit it whilst designing.
An interesting observation I found when analysing 6 competitors was that whilst they had the fundamentals, they lacked some essentials. Without a strong store branding and online presence, little or no option for the user to select delivery times and finally no product reviews there is a demand that is not being met. This was the gap my website would bridge — usability and simplistic navigation.
So, I aim to keep things simple, keep things clean, remove the clutter and retain what was necessary.
Card Sorting
Open and closed card sorting is a great way to see how users organise data based on what’s logical and intuitive to them. This exercise helped me design the starting point of the first point of action for any user — the navigation bar.
Below you can see this in action:
Outcome Statement & Storyboarding
Now that the skeleton of the project had been developed, we could look at creating a detailed site map that forms the foundation of the website. This gave me a visual guide to what categories it should include and which sub-categories should follow as drop down menu’s.
Based on the needs and frustrations felt by the persona, I developed a user story to put myself in their shoes and ideate navigation with their needs in mind, from landing on the home page to reaching checkout confirmation.
Prototypes
This led to my first iteration of a paper prototype. My feedback on this was positive in the sense that navigation was simple and intuitive aside from the placing of certain button locations.
I used this feedback and directly incorporated them into my first iteration of a clickable prototype. which looks like the below:
I gathered rapid insight from a final “shuffle test”. This allowed me to concentrate on what needs improving within the prototype to optimise the site for usability.
You can see an example of the before and after iteration below which removals, additions and improvements in detail.
Below is a link to the final clickable prototype itself.
Given more time I would have liked to conduct more testing to solidify the direction I was going in. I would have also liked to spend more time perfecting the mid-fidelity prototype as I found the process a constant generator of ideas. This was also challenging because I had to to keep in mind timing of deliverables and maintain focus on the bigger picture, details can be added in later!
As the project was coming to a close, I had to look back and ask myself — “does my final iteration serve a purpose to the key users represented by the persona and meet their need?”
I believe the navigation provides the users with quality and rich information that will allow them to make informative decisions, find ideas and not overwhelm them with information.
It alleviates my persona’s frustrations by providing options and opportunity for the shop experience, engagement with stellar customer service if required, a chance to support her local shop and avoid wasting time and money.
I also believe it retains the client’s business requirements and encases the feel and look they specified within the brief. The “small shop” appeal, a professional yet casual and welcoming website that encourages engagement with the store.
Thank you for reading. Please feel free to get in touch with me to discuss the case study or anything else via the email address below or add me in LinkedIn:
parinashra@hotmail.co.uk
