Grower's Grove: an E-Commerce Website Design

Scope:  Conceptual • 10 Days • Solo project • Group research
Apple-iMac-27_-Mockup-1

A local garden store sees opportunities for growth with an e-commerce site.

About the client

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. 

THE BRIEF

 "We want to maintain our "small shop" appeal and great customer service."

The Problem Statement

"How might we support the local community with a webshop but still keep the high-quality customer service and local feel?"

My Responsibilities and the Team

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.

Limitations and Goals

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.

The Process

  • Competitor Research: 12 direct and indirect competitors analyzed to determine our closest competition and find design inspiration.

  • We interviewed 12 potential users to better understand their online shopping experiences.

  • 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.

  • Sketched paper wireframes, they were critiqued by 5 peers.

  • Tested low-fi prototypes on 3 users and iterated based on feedback.

Tools

  • Pen and paper

  • Figma

  • Trello

  • Slack

  • Zoom

  • Google Slides, Forms

  • Photoshop

  • Miro

  • Notion

  • Creately

Key Deliverables

  • Site Map

  • User Flow

  • Persona
  • Clickable prototype including:
    • Home page

    • Product category page 

    • Product detail page

    • Shopping cart

    • Check-out pages

  • Usability test report
  • Presentation and Case Study

The Result

  • 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.

Keep scrolling to read how it happened.

DISCOVER

Research and Interviews

Competitor Analysis

  • 12 Competitors analyzed

  • 6 Direct competitors 6 indirect competitors 

  • 5 UK-based and 7 international competitors

Determining our direct competition

  • 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.

Notcutts1-1
Notcutts2-1
Notcutts3-1

Notcutts had great search filters and nicely displayed information.

Customer service features

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. 

CustomerServiceNotcutts

Notcutts has a customer service garden expert.

Indirect competitor key findings

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.

NikeCHeckout
PumaCheckout

The indirect competitors had cleaner and more simple-to-use e-commerce sites.

Research Conclusions

With research to draw inspiration from, I am ready to start designing but let's discover the users.

Who are our users? What are their motivations?

User Interviews

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.

JonInterview
KyleInterview

I am learning about Jon's and Kyle's online shopping experiences.

Key Interview Findings:

  • Accurate item descriptions are essential — Both have received something much bigger than described. We need to ensure all the relevant product information is clear.
  • Talking to a real-life person (sales associate) gives trust in buying something. Even if it is not in-person, professional advice can still positively impact the customer's decisions.
  • Reviews and aesthetics of a website also build trust.
    A premium-feeling website gives more buyer confidence.
JonsBackyard

This is Jon's beautiful backyard (not the UK).

User Research Conclusions

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.

DEFINE

Persona, Card Sort, User Flow, Site Map

User Persona

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.

Persona

Card Sorting:  Determining Navigation Categories

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.

cardsort

This tester had fun with the task and made some funny category titles, and these were still useful.

Conclusions from the card sort

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.

Cardsortresults

I made eight categories in my card sort, but five was the most common amount created.

A tough time naming the categories

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 Site Map helps to imagine the page layout

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.

sitemap

The card sorting categories are displayed in yellow.

User Flow

I created a situation for the persona, Sean, to demonstrate the happy path he might take.

"Sean's lawn is turning brown. He would like to purchase a water-conscious sprinkler."

GG-User-Flow-1

The user flow

Conclusions

We are designing for Sean, and we understand his needs. We have categories and structure for the website, time to start designing the prototype.

DEVELOP

Designing and testing paper and digital wireframes

Paper Wire Frames

The first iteration was pen and paper. 5 peers critiqued my work; the feedback was mixed.

  • Some buttons weren't clear if they were clickable or just information.
  • Users wanted to see related or suggested products on the product page. In case the product isn't quite right for the customer, they can still explore.
paperwireframes-1

Low-Fidelity Prototype and User Testing

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. 

irwantesting
irwantesting2

Irwan testing the prototype

Header iterations

  • Spacing was adjusted. Too much space felt unprofessional and not trustworthy, and too little space was not accessible.
  • "Our Story" and "Advice" were moved to a more visible location to keep the local feeling and provide customer service.
Headeriterations

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.

Determining how the checkout will work

  • Creating a profile is one way to make the checkout process faster, but having a guest option is required for those who don't want to sign in.
  • It was essential to clarify the progress the customer has made in their checkout. Checkmarks and collapsing menus indicate progress. 
  • I changed the "EDIT" button in the "Overview" to "QTY" or quantity. This is the most likely adjustment the customer will edit.
checkoutiterations

Not seen here are the changes made to include guest and returning customer logins.

Learnings about testing from testing

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.

User Testing Conclusions

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. 

DELIVER

The Prototype and Conclusions

Conclusions

  • 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 more customer service and keep it local.

Next steps

  • Will there be page numbers? or infinite scrolling?
  • Develop the pages for Our Story, Garden Advice, and Rewards.
  • A closed card sort needs to be tested, and category titling needs work.

Personal Development

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. 

The Prototype

"Find a conscious water sprinkler and complete the checkout process to have it delivered home."

Watch a short run-through of the prototype.

Click through the prototype yourself.

Thank you for reading!

Selected Works

FLAVRUX Case Study

Made.comUX Case Study

The Yarn PitUI Design Case Study

Back to top Arrow