All That Glitters new e-commerce website — UX case study
General Assembly LON | E-COMMERCE WEBSITE DESIGN | CONCEPT SOLO PROJECT | 2-WEEK SPRINT
Overview:
As nowadays every business becoming digital even local shops need new ways to engage with their users. For weeks 2 and 3 of the course, we were given a brief with the goal of designing a brand new e-commerce website for a fictional shop.
Brief:
Client — a party supply shop “All That Glitters” which has been Hackney’s neighbourhood shop since 1998.
Challenge — We needed to establish a new e-commerce website with a smooth and engaging User experience while meeting business goals.
Goals of the new e-commerce website:
- Showcase products, while maintaining brand image.
- Maintain their “small shop” appeal and great customer service.
- Distinguish “All that Glitters” from other e-commerce retailers.
- Reinforce their core business values — service first, everything is chosen by hand, it is the biggest little party supply store in the neighbourhood.
The primary business goals for this website included:
- Having clear ways of locating specific products
- Having an efficient way of purchasing one or more products
- Steering customer toward popular products
- Establishing the brand and its points of difference
User research
Contextual inquiry:
As the brief provided us with very rough information about shop clients, I needed to conduct extra user research. I visited local party supply shops to do contextual inquiry and find out more about shoppers habits.
Key findings:
- Shoppers enjoy product variety and reasonable price.
- They prefer to see and touch the real product.
- Most of the times they buy by the last minute and are afraid that delivery is not going to come on time.
- They found online shopping the time-consuming experience because of their overwhelming content and hard to use site structure.
”Most of the pictures online are too perfect and do not give any feeling of trust.”
User interview:
After contextual inquiry, I needed to choose one of the scenarios, given in a brief for 3 different client groups — local residents, event planners and small business.
Scenario:
An event planner would like to place an order for party supplies to be delivered to a site for a wedding (something the customer does on a regular basis).
To understand their approaches to the local businesses and main needs I have interviewed Indreja who is an event planner and shops in party supply shops every two weeks. This interview gave more insights and helped me to focus on more specific usability path throughout the whole project.
The main needs I defined were:
- Efficient checkout process to save users time and allow for easy purchase of products
- Detailed product information to ensure proper product selection
- Easy way to contact if needed
- Product search to easily find particular products
- Customer brand relationship to establish trust
- Different and efficient delivery options
Competitive Research
To find opportunities and ways to make this e-commerce website different from others I conducted competitive research. I focused on 2 direct and one indirect competitor throughout the project. The direct competitors I analysed included “Party Party” and “Party delight” while indirect competitor I chose “John Lewis”.
My goal was to compare and identify common features across these sites and potential opportunities for All that Glitters to distinguish itself in the competitive field.
The most important takeaway from this activity was learning how different websites organised their products, categories selection and the overall layouts they used throughout the buying process.
Information Architecture
The next step of my process was to develop the navigation system by conducting a card sorting, a user research technique to tap into people’s existing mental models. For this project, I was given an inventory of 75 of the store’s best-selling products to use as a guide. With such a large inventory, it was essential to organise this information in a clear and understandable way so that site visitors could find the products they’re looking for.
- Open Card Sorting: I asked 3 participants to organise the 75 products into categories that seemed the most logical to them. Then I had them labelled each of those groups with titles they felt accurately described the items in that category. The goal of this was to gain an understanding of the potential ways the products on the All that Glitters website could be categorised and how those categories could be labelled.
- Closed Cart Sorting: Based on the results of the open card sorting, I created 8 potential categories from the most common group labels. I then conducted a closed cart sorting were three different participants had to sort the items into these predetermined categories. This helped clarify whether those categories were logical to the majority of users before I began to move forward with my design.
Site Map
With the results of the card sort and inspiration from other competitor websites, I created a site map to define the overall structure of the website. Site map includes all the 8 categories under the Shop page.
Development Phase
Paper prototype:
Once I organised all my insights from the exploration phase, I began to design the website. To start this process I start sketching several of the site’s main screens, using my user flows as a guide. This allowed me to quickly explore several concepts for the website layout.
I tested paper prototypes with 2 participants to validate whether these solutions addressed both the user and business needs.
From the paper sketches, I have decided to keep consistency with neat information architecture throughout the website.
Wireframing:
Based on the feedback from the paper prototypes, I began to design my first wireframes using Sketch. I kept the minimal design with big pictures and “handwriting” typography which gives a feeling of localness.
Homepage:
- From the first screen, I tried to keep the layout clean and simple to ensure that users do not feel overwhelmed.
- As I have created 8 different categories, I have decided to keep them in a separate page and set clear and short global navigation.
- I have included huge banners as an additional way to find the most popular products and well-picked product for the common occasion. I used a wedding occasion as long as my scenario was based on this.
Product Category Page & sub-category page:
- Once users enter the shop they would be directed to all the categories page.
- Once they enter specific subcategory they are directed to inspiring and well-curated page. I added a banner to build user trust with the shop experts who pick the products for the occasion by hands.
- I included a breadcrumb trail to make it easier for the user to navigate and identify where the user is in the site.
Single Product Page:
On the single product page, I wanted to make sure to provide detailed product descriptions so that users can ensure the product fits their needs.
- Below a user could find helpful staff recommendations based on the current product they’ve selected.
- Gave priority to the product reviews section since this allows for user input, establishes trust and also allows users to make more informed buying decisions.
- To help the business make people come back, I have included information about possible rewards for returning customers.
- To make the checkout process as efficient as possible, I designed a drop down cart summary that would appear every time a user clicked add to basket. Users could then click on navigation and go to the basket to begin the checkout process.
Checkout Pages:
I believe checkout beginning is one of the most important steps to let users accomplish the goal, therefore the design is simple and smooth.
- Added an option to check out as a guest
- For returning, customers built an option to save the delivery address and payment information to make payment as quickly as possible.
- Included a breadcrumb trail to help users to indicate how many steps the checkout process will take, what point they are at now, and how close they are to completing their order.
Usability Testing:
Once the mid-fidelity prototype was completed I started usability testing. This allowed me to evaluate how users would engage with the proposed website solution and validate whether it was addressing the primary user needs. It was important to test with mid-fidelity, greyscale wireframes to gather honest, critical feedback from potential customers and to solidify the functionality of the website before addressing the visual design.
I conducted a usability test with 12 participants and asked them to complete the main scenario:
“You are an event planner and regular this shop customer. Your client hired you to organise her wedding party. You are a missing a balloon, but not sure which form of balloon perfectly suits this wedding event, therefore you are coming back to your favourite shop and try to find the best balloon. Buy and deliver it to the same address.”
Key findings:
- Overall users were able to easily navigate through the website
- Participants found payment section not completely secure which led me to add must fill CCV code.
- Radio buttons made them feel that someone is deciding for them.
- Some felt there could be greater to have a wider filter on the products page.
- Some users wanted to have wishlist helping them remember some selections and ideas.
The Next Steps:
This case study represents the start of a bigger design process for the development of this e-commerce website.If I would have an opportunity to work with this project further next steps would be:
- Build a wishlist feature
- visual design
- development of full website included pages, not from my happy paths
- Conduct more usability tests with different groups of users.
- Build a responsive website
