Grower’s Grove provides that in-shop experience you’ve been craving in Lockdown!

This was a solo concept project I did as a student on General Assembly’s UX Design Immersive course. It was a 2-week design sprint.

UX Techniques used:

  • Competitive analysis
  • User Research
  • Card sorting
  • Persona
  • Sitemap
  • Sketched interfaces
  • User flows
  • Digital wireframes
  • Clickable prototype
  • Presentation

The Brief

I was tasked with creating an e-commerce website for a garden store called Grower’s Grove. They are a small business based in Islington who pride themselves on their face-to-face customer service, reasonable pricing and keeping it local. They employ local staff and support the diverse community that they serve.

The Challenge

Grower’s Grove sees an opportunity for selling online to allow the locals to order items and have them shipped efficiently. However, it is essential that they:

1. Maintain their brand image and ‘small shop’ appeal

2. Continue to offer exceptional customer service and support

Competitive Analysis

I began my competitive analysis by reviewing five garden shop websites to increase my understanding of the market. I focused my research on the product pages of these sites, as they exposed to me the most significant areas of opportunity.

Competitive analysis of Garden store product pages

I put the comparisons into a chart to expose the common and rare features amongst them.

Feature Comparison Chart

Identifying opportunities for improvement

From this research, I realised that Grower’s Grove had an opportunity to stand out from the pack and portray legitimacy and trust by:

Improving their product images

Ensuring they’re a decent size and including a variety of images from different angles for each product to build trust with the customer. This could also be extended to including an image of a customer using the product successfully.

Adding a zoom functionality

Having the ability to zoom in. This could be extended to a 360-degree spin feature for each item to reassure the customers that they are making the right choice.

Listing the product’s weight

Only one of the sites compared had listed the product’s weight. This detail would make a product feel more tangible to a customer, and benefit their understanding of the product’s quality when they don’t have the option to visit the store in person.

Including Customer Reviews

Another striking observation was that only two of the five websites included access to reviews on the product pages. Grower’s Grove takes their customer support very seriously, and the ability to read and add reviews on their website is essential in order to maintain their customer’s trust and loyalty.

Interview Insights

As a group, we conducted 11 user interviews, and from these results, I uncovered several overlaps with the insights gained from the competitive research:

E-commerce sites build trust with:
● option to read/add reviews
● multiple images from different angles
● option to zoom in close on an item

Online shopping pros:
● Delivery of heavy items

Online shopping cons:
● You can’t physically see or feel the product
● In face customer help much nicer than a chatbot

Persona

In order to keep my research focused on the user's needs, I created a persona of the archetypal user based on the interview insights. Meet Nina:

Card Sort

With Nina in mind, I began to think about the website’s taxonomy, and how best to present the inventory for Grower’s Grove in the most usable way. Taxonomy refers to the classification of products.

To do this, I teamed up with 5 others and carried out 18 card sorts. A card sort is a UX technique in which you ask users to categorise items you give them. In this case, we asked 18 individuals to categorise all the products on Grower’s Grove inventory as they saw fit. After I synthesised the data, I saw a clear pattern in the results.

Site Map

Based on the card sorting data, I drew out a site map to illustrate the list of pages that I intended to include on the website.

I decided that Garden Tools, Garden Accessories, and Plants/Fertiliser would be the global navigation for the site, with a mega-navigation of dropdown sub-categories.

I also decided to include breadcrumb navigation on every page to ensure the customer doesn’t get lost in the depth of the site.

Nina’s Scenario and User Flow

I wrote out a scenario for Nina in order to portray the ways in which the website might meet her needs, and solves her problems:

Nina is looking for a new lawn mower for her new house. She also wants a
bunch of flowers in time for her housewarming this weekend. She’d like to
choose the flowers in person but is currently in isolation and won’t have
time after she’s out.

I then drew out a user flow to clarify the journey that Nina would take through the site when navigating through these pages to complete this task. The below user flow is the journey taken to buy a bunch of flowers.

Ideation and Sketching

Now it was time to develop my features that would help Nina in this scenario.

I put pen to paper to draw out my ideas. I began with a product page since this had been the focus in my competitive analysis, and was where I had seen the most opportunity to provide solutions to Nina’s problem.

Below are my low, mid, and high fidelity wireframes of the product page. Fidelity refers to the level of detail and functionality on a prototype.

Key features

  • Chat To Us button — since Nina dislikes the lack of human interaction in online shopping, I decided that a live chat or video chat function could be a possible solution to that problem.
  • Multiple product images — To reassure Nina that what she sees is what she gets, I wanted her to have a variety of images to scan. In the mid-fidelity (mid-fi) version, you can see an image of a happy customer using his lawnmower as evidence of a reliable product

Testing and Iterating

Now it was time to do some usability testing on my sketches to get feedback on my designs.

I carried out two rounds of usability tests with 6 different users, and the results guided my iterations from low-fi to mid-fi.

The key iterations were on the product page:

low-mid fi Iteration
  • Users found the Chat To Us button to be awkwardly placed in an unexpected location. It also looked too similar to the Add To Basket button, which caused confusion since they have such different functions. So, I changed the location and renewed the button's shape as you can see below.
  • Users weren’t reading all the product information since they had to scroll down. So, I replace the scroll bar with dropdown tabs so that the user can immediately see all the product information available to read at first glance.
low-mid fi Iteration on the Sort By button
  • Users found that the Sort By button for reviews was awkwardly hovering between the product description and the reviews, and they were unsure what it was related to. So, I situated it right above the reviews and made it appropriately smaller so that it couldn’t possibly be linked to anything else on that screen.
low-mid fi iteration
  • Users thought that Why Not Try? contextual link sounded like an incomplete sentence, so I amended this to Products related to this item to make it sound finished.

Prototype

See below for my prototype walkthrough

Conclusion

This project taught me the value of card sorting. I found this such a fun and helpful technique! When I initially received the inventory list for Growers Grove I felt incredibly overwhelmed, but asking enough users to categorise them meant I was able to find clear patterns in the data.

Another thing I learnt during the project was the importance of the persona to keep my research and design focused on the user needs. Nina represented a very vivid personality in my head, which really motivated me to empathise with the user and find solutions to their problems. I found that even details like the persona picture affected my understanding of the user and my ability to design appropriate ideas for the prototype.

Next Steps…

The next steps for the website would be:

● Add some filters for the product pages (major brands, colours, etc)

● Build remaining site (about us page, company’s heritage)

● Keep testing and take the prototype into high fidelity

● Adapt the experience appropriately across desktop and mobile

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Human Design: The Permission Slip to be Uniquely You

My UX Journey — Meme-ified

(User Research and Interaction Design) — Design

Curso final do Google Docs 2021 / Google Docs Ultimate Course 2021

Stretch the UX Research Project Kick-off Meeting

How Parents and Teachers Use Kano & Discord to Enhance Tech Education for the Next Generation

What does it take to change the world? One idea (out of thousands).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Madeleine Macgreevy

Madeleine Macgreevy

More from Medium

UXToolsChallenges: Card sort with Curious Cardinals

Sticky notes with profile information on each note

Tools of the Trade: What We’re Using for User Interviews

Welcome to the age of Design Industrialization. Let me explain…

Heuristic Evaluation