Grower's Grove: an E-Commerce Website Design
Grower's Grove has been Islington's neighborhood garden store since 1982. Key values are service-first, everything chosen by hand, and authentic to our roots, supporting the local community.
"How might we support the local community with a webshop but still keep the high-quality customer service and local feel?"
This case study was a concept project for my studies at General Assembly. As a team of 6, we shared our research findings but designed our own website.
Based on my own bias, research, and understandings from the brief, I put limitations on the scope. I understood the garden store was not very large and did not dream up expensive features. Instead, I focused on practical solutions and designed a user-friendly process from the home page to checkout completion, keeping customer service in mind.
Competitor Research: 12 direct and indirect competitors analyzed to determine our closest competition and find design inspiration.
We interviewed 12 potential users to understand their online shopping experiences better.
I defined our users with a Persona and empathized with their journey through an experience map.
Card sorting with 17 people to determine the number of product categories and names.
Created a site map and user flow to visualize the layout.
5 peers critiqued sketched paper wireframes.
Tested low-fi prototypes on 3 users and iterated based on feedback.
Pen and paper
Figma
Trello
Slack
Zoom
Google Slides, Forms
Photoshop
Miro
Notion
Creately
Site Map
User Flow
Home page
Product category page
Product detail page
Shopping cart
Check-out pages
Presentation and Case Study
I have achieved a simple to use navigation for the website.
We listened to our users and ensured that we provide accurate information, a stock notifier, and an easy-to-use checkout.
"Advice" and "Our Story" deliver customer service and keep it local.
12 Competitors analyzed
6 Direct competitors 6 indirect competitors
5 UK-based and 7 international competitors
Notcutts was the closest in "feeling" to our client.
They have a curated selection and are very informative.
The others were either too boutique or too warehouse feeling.
Notcutts had great search filters and nicely displayed information.
Asking an expert is one of the best ways to instill confidence in a customer. Interviews would further back this up. Notcutts has a nice feature for getting gardening advice. I would consider something similar for the website.
Notcutts has a customer service garden expert.
Nike, Puma, and Calvin Klein have an excellent checkout process. Collapsable forms kept the pages uncluttered, clear, and editable. I also found simple solutions for the sign-in or guest checkout in the flow.
The indirect competitors had cleaner and more simple-to-use e-commerce sites.
With research to draw inspiration from, I am ready to start designing but let's discover the users.
The group interviewed 12 potential users, and I interviewed 2 myself.
Meet Jon and Kyle; they are both homeowners and have done professional landscaping work in the past. They both enjoy working on their yards.
Our client mentions they cater from locals to tradespeople.
This is Jon's beautiful backyard (not the UK).
We know who the key competitors are, have some inspiration, understand who our users are, and a list of some problems to solve—time to define.
To keep my focus firmly set on meeting user needs, I created this persona to capture the key insights I uncovered from my research. This persona is a representation of the average Grower's Grove customer.
With 36 items to categorize, we asked 17 different people to make categories for us by doing a card sorting exercise. Using Trello, the users told us how many categories there should be and what to name them.
This tester had fun with the task and made some funny category titles, and these were still useful.
Five categories were the most popular, which surprised me. I came up with eight on my test. I set aside my bias and went with the research; 5 categories it is! What to call them became a more significant challenge.
I made eight categories in my card sort, but five was the most common amount created.
I chose words that reflect the British market and popular names I found in our testing and our competitors. I named them Garden Tools, Outdoor Living, Watering, Plant Care, and Power Tools. A closed card sort would help to determine if these categories were okay.
The provided products are in their correct categories that I made from the card sorting. Additional pages are "Our Story" to give local touches, "Garden Advice" to get help with their garden online, and Rewards for recurring customers.
The card sorting categories are displayed in yellow.
I created a situation for the persona, Sean, to demonstrate the happy path he might take.
The user flow
We are designing for Sean, and we understand his needs. We have categories and structure for the website, time to start designing the prototype.
The first iteration was pen and paper. 5 peers critiqued my work; the feedback was mixed.
Using Figma, I made a low-fidelity prototype of the Grower's Grove e-commerce site. I tested the website to determine if it was easy to use, intuitive, and locate any possible problems and confusing points that need to be adjusted.
I tested it on 3 different users with varying gardening interests.
Irwan testing the prototype
Many other decisions were made to design the whole layout, such as product page features and adding reviews. However, these are some of the more considerable changes that I can share.
Not seen here are the changes made to include guest and returning customer logins.
I realized how important it is to have a test script ready and put your users in the situation's context. It can be helpful to ask the users to think out loud to explain their thought processes.
All of the users were able to complete the task successfully. However, there were a few comments on category naming. Further testing would be needed to validate the concerns.
We listened to our users and ensured that we provide accurate information, a stock notifier, and an easy-to-use checkout.
"Advice" and "Our Story" deliver more customer service and keep it local.
There is an art to user research and testing. It isn't always so easy to be neutral and observe, but it is essential to take a step back and not be too involved in the feedback received. With every user test, I get better.
I have also learned better methods for distilling research findings to share with my team, but I still find discussing them very helpful.
Watch a short run-through of the prototype.
Click through the prototype yourself.
Selected Works