Designing an e-commerce website
This is a case study of how I designed an e-commerce website for a local independent grocery shop called Fresh Crop, located in South London during a 2-week design sprint. This was a group project that was completed during my time studying remotely at General Assembly’s UX design course. The deliverables were to create a mid-fidelity prototype e-commerce website and a final presentation.
Software I used: Figma
Research Methods and Deliverables
- user interviews and competitive analysis
- open and closed card sorts, user persona and user flow, site map
- usability testing on digital prototypes
The Project Brief
Fresh Crop is a small grocery shop that prides itself on handpicked and special food items. They want an e-commerce site to support their customers by providing an option to shop online and deliver to different addresses or pick up in-store.
Checklist of primary musts:
● Have clear ways of locating specific products
● Support a single page for each product which can be linked to directly
● Have an efficient means 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 (including to request a product not
otherwise stocked)
The Design Process — 1. Discover
User Research Interviews
Our group interviewed different people to gain insights into our users’ habits and pain points. I interviewed 3 people around the age of 24 to 27 years old.
Here are some of the key insights I gained from the research:
- Due to the pandemic of covid-19 many users have turned to shopping online for their groceries more often than before
- Convenience was a big factor in all of my users
- some had bad experiences searching for a product due to bad categorisation in the websites
- users generally tend to rely on search bars because of bad categorisation and navigation, but it also meant excess scrolling to locate a particular item
Doing the interviews helped me to realise the biggest problem my users faced is finding items in a clear and easy way as it hindered their ability to shop quickly and efficiently.
Competitive Analysis
With my group, we looked into direct and indirect competitors to see what e-commerce features were appearing in the market.
Here is a visual example to show the main difference in navigation styles of different brands. I picked out two brands that I thought summarised the main patterns I saw on various competitor’s website layouts.
On the left shows Holland and Barrett’s huge navigation menu which seems to act as an index. On the right shows Oddbox, a smaller brand with a minimal navigation system that guides the user in a simplified way to order on their website.
Referring back to my user interviews, the common feedback for users was they found the categorisation of some shops hard to use. They found it took a lot of time to find an item, and the process of searching for an item didn’t feel straightforward and time-efficient.
Given that as one of the main pain points in my user research, I will be aiming to design a simplistic navigation menu for Fresh Crop’s website, inspired by the easy navigation of Oddbox’s website.
We then looked at other competitors compared with Fresh Crop in the market. Fresh Crop is currently placed in the bottom left corner, but I would like Fresh Crop’s new website to have the efficiency and usability of the bigger brand websites, but still maintaining the ‘small shop’ appeal.
The Design Process — 2. Define
After learning about my users and researching competitor’s website navigation styles, it was time to start crafting the building blocks to designing Fresh Crop’s e-commerce website.
Open and Closed Card Sort Activities
Card sorting is an activity where participants categorise and group items so researchers can gather information on possible ways to determine a site’s navigation paths.
Here are some things I discovered from the card sorting activities
After narrowing down the selection with a closed cart sort, here are the results.
Building the User Persona
My group got together during the define stage to discuss the traits of our user persona for this project, which we then individually built our own user personas afterward.
A user persona is a fictional character that is based on user research to represent the breadth of users who could use our product. It can help by keeping the project focused on solving the user’s pain points.
Creating the User Flow and the Site Map
Next, I started thinking about the user’s journey using Fresh Crop’s e-commerce website to order groceries. First, I created a diagram to show Sam’s user flow journey, which depicts the idea of a ‘happy flow’. A ‘happy flow’ is the most efficient and straightforward way for a user to achieve their task when using the website.
This diagram will guide me to make sure I am designing a solution for my user’s problem when I create my prototypes later on.
Secondly, I made a sitemap so that I can prioritise the most important pages of the website and visualise how the information should be placed in hierarchy. These diagrams are initial ideas for the structure of the website and they will be used as a conceptual guide for when I am prototyping the site, and not as a concrete instructional plan.
The Design Process — 3. Develop
I started the develop process by sketching out low fidelity wireframes of the pages that my user persona, Sam would encounter when they use the website. The pages I first sketched out came from the ‘happy’ user flow I made earlier in the design process. From those sketches I developed them into digital prototypes on Figma. With several usability tests and lots of feedback, I adapted the design with several stages of prototypes before completing the final prototype.
Some key feedback from usability tests for prototype 1 & 2
- 1st prototype: home page navigation wasn’t clear and easy to use
- 1st prototype: payment process page was too long and needs sectioning to make it seem quicker to complete the form
- 2nd prototype: some users with dietary requirements said it would be easier and better for them to be able to see particular items they can’t eat on the top of the product description page
Usability tests are a way to test prototypes to gain insights for better development of the product. I asked 9 users in total to test out my prototypes and I received many suggestions and critical feedback on my prototypes. They led me to remove and add different features, change my layout, and considered what was good usability for my users.
Here are links to my first prototype and second prototype.
The Design Process — 4. Deliver
At the end of the 2-week design sprint, I presented my process and the final prototype to my course.
Here is a link to the final prototype.
Looking back
Here are some of the things I could’ve improved on:
- Add time slots to the delivery options on the checkout page, because this was something I missed out on.
- Test what users preferred seeing first on the home page to increase engagement. This is because I had different user feedback about users preferred seeing product advertisements vs shop ethos in the top of the home page.
- Design better-faceted navigation. Perhaps adding an advanced filter feature, so users can search items by eliminating ingredients because there were some feedbacks from users with dietary restrictions that I also missed out on my design iterations.
Things I learned
This project was my second big project in General Assembly’s UX course, and it was a very exciting project to do. I felt that it was a lot to do and it was also my first time working in a group, but I learned a lot through teamwork.
Here are some of the main things I learned:
- Usability testing is really important to do throughout the design process because it can give you insights into your design that you may not have thought of.
- I get distracted when I am designing a lot of different features, sometimes I forget to design the main solution to solve my user’s pain point. So I need to remember to keep that at the top of my priority.
- It is easier to analyse data if I see it visually. The card sorting activity was done on Miro and that helped me to see which categories were prominent with users a lot better than data on spreadsheets.
Thank you for persevering to this point! Please consider leaving a like if you enjoyed what you read, learned something new, or simply scrolled to the bottom of the page!
You can read about other projects I’ve worked on here in Medium or you can view them in my portfolio!
