Welcome Home Hardwares
E-commerce website
Overview
The second project for the General Assembly UX design immersive was to design an e-commerce platform. The first part of the project was done in a team of 4. The team would dissect the brief, write a research plan, and carry out all of the research together. From there each of us would complete the rest of the project individually.
Goal
Showcase Welcome Home Hardware’s products, while maintaining their brand image, through a new E-commerce website.
Design Process
- Empathise — Client and brief, User Research, Market research, Feature Analysis, SWOT analysis, Card sorting
- Define — User Persona, User flow, Sitemap
- Ideate — Sketches
- Build — Wireframes, Prototype
- Test — Usability testing
Empathise
Client
Our client was Welcome Home Homewares, a local homewares store in Stratford, London. They operate from a high street brick and mortar location, servicing local customers from the store however they have decided they could help the community more by adding an e-commerce website.Their values are:
- Quality over quantity
- Customer service
- Reasonable pricing
- Keeping it local
Brief
“Through a new e-commerce website, we want to showcase our products, while maintaining our brand image.”
The client made it clear that the following were their priority for the new website which gave us a good starting point:
- Have clear ways of locating specific products
- Support a single page for each product which can be linked to directly
- Have an efficient way of purchasing one or more products
- Steer customers toward popular products
- Establish the brand and its points of difference
- Allow customers to contact the business
Market research
We decided to look at Ikea, John Lewis, and West Elm as major competitors that customers might look to to purchase the same products as well as a store called Indish that is also a local homewares store servicing local customers. The methods used to research these competitors was a feature analysis and a SWOT analysis of their websites.
Feature analysis
Below are the features we identified on each website; we took this information to identify the features that the competitors thought the customers needed.
The features we decided were most important to include for the client are:
- Global navigation with drop down navigation menus
- Hero slider to showcase the store, and sales
- Popular product recommendations
- Breadcrumb navigation
- Large image tiles
- Multiple product images
- Product details and descriptions
- Product reviews
- Similar products
- Wishlist functionality
- Cart amendability
- Purchase confirmation
SWOT Analysis
A Strengths, Weaknesses, Opportunities, and Threats analysis was also done to see what the competitors did well that we could emulate and what we could improve on for the client and their customers.
Following this research we wanted to bring the following to the clients website:
- Maximise the white space
- Multiple navigation options
- Related and popular products
- Contact options
User Research
Our research plan started with us writing a few questions separated into the users experience, behaviour, and the features they liked or didn’t to gain further understanding into how users met their goals. 5 users were interviewed that were between the ages of 25 and 27, both male and female, and were from different countries and backgrounds.
The key insights we took from these tests are as follows:
- Reviews are very important
- Wish Lists are important as users window shop and come back
- Users like to shop by sales
- Contact options are important
- Customer service makes a big impact
Card Sorting
While we were interviewing users we also carried out 7 open card sorts and 5 closed card sorts. Card sorting is an exercise to determine how users categorise products so that we know how to label and organise the website to make sure the users had an efficient experience while using the website.
The responses were recorded and we received a broad range of category names that we then needed to approximate to identify the trends that are pictured below. This is how the products would be structured and where users could find them.
Define
User Persona
I then developed a proto-persona which is a user that I invented to give me an idea of how a typical user would use the website. His name is Tim and he is about to throw the best dinner party his friends have seen! But he needs a few things first.
User flow
Tim has a goal in mind and wants to move through the process quickly as he needs to get back to his own sketches. He wants to buy plates for a dinner party. Below I have drawn what would be his ideal path through the website.
Sitemap
With the information we had from the competitor research, I designed the sitemap pictured below to present the store to customers in a simple but easily understood structure. I used the results from the card sorting exercise to ensure users can find the items they are looking for without having to search too hard.
On the left, you can see the categories that I finally used but this is not the structure I started with. It took two rounds of testing and calling back on the card sort to arrive with this structure.
Ideate
Sketches
I then set about drawing the different pages Tim would need to complete his goal with the features that users would want. The post-it notes detail the features we identified in the competitive research that would result in the best experience for Tim while he bought his plates.
Build
Wireframes
I used Sketch to create the digital wireframes that would be used to prototype and test on users to identify any shortfalls or improvements that could be made.
In the sketches you can see that I only had three categories on the mega nav, hoping to increase the white space. This created confusion in my usability testing and as a result the information architecture was completely overhauled into seven categories. More on this later.
More research
I had heard about the complexities of the checkout process and forms, so I wanted to make this the focus of my project. I went and did extensive research on the checkout process best practices and design rules and designed with the following considerations to ensure an efficient checkout and minimise cart abandonment:
- Show the users progression and state along the process
- Validate user information as they progress
- Use simple forms with one input field per line
- Allow users to view and edit at any point
Test
Usability testing
I carried out virtual usability tests on the first iteration of the website on six users and noted down their feedback. I carried out a more detailed test on the majority of the users to ask for detailed information about each page they visited but made sure not to guide their process which helped me collect detailed and rich insights that I was able to use to make changes.
I then carried out a second test and asked each user to simply “Complete the goal of purchasing a set of plates” this test allowed me to see how users would naturally move through the process. This test suggested that users were confident in the flow and found each element where they expected it to be.
Home Page Feedback
- Mega nav simplified too much. Users went to the wrong category to find the plates
- Users unclear of the difference of the connect with us options in the footer
- Users looked for contact details to make sure someone is on the other end
Sub-category Feedback
- Users wanted more categories to sort through different tableware
- Users want filter and sort functionality on this page
- Users want to see product rating on the tiles
Product Page Feedback
- Feedback was missed when users added a product to their cart
- Overall product rating missing
- Users took too long to find the reviews
- CTA “Add to cart” was too small
Final Screens and Prototype
Click here to see the final prototype made with InVision.
Learnings and What’s Next
I learned a great deal about the checkout process and cart abandonment while working on this project and that researching design best practices is hugely beneficial in designing products, features, elements, and pages.
I learned how important information architecture and testing is to the user flow as what I had initially planned tested very poorly. By nesting categories into others to save space I made the user work harder to get where they wanted to go.
In the design process I did not test a low fidelity prototype on users which I discovered later in the process may have meant that I missed some key feedback from users about the placement of certain features. I am hopeful that my second test picked up any feedback I would have gathered from it but understand its importance for future projects.
The next steps for this project would be to add the functionality of:
- Account sign in
- Customer rewards
- Wish lists
- Live chat
More usability tests should be carried out before moving to a high fidelity prototype and repeating the usability tests. At this stage I will not be developing this further.
