Case study

The Brief

Blossom - a local independent garden shop in South London needs a new design for their e-commerce site.

The Outcome

This is the final desktop prototype for Blossom following a two week design sprint using the double diamond design process.

Discovery & research

For this brief, Blossom already has an online audience. They also have a strong identity based around their role in the community, but couldn’t convert that to paying online customers. So what was the roadblock?

Research

What did I want to find out about Blossom’s users? As a concept brief, one hurdle is the lack of data from the business about its own customers. So without being able to dive into their Google Analytics, for example, research had to look further afield. This was an opportunity to explore how people shop online in general, to find out:

• What are users experiences of using small/independent businesses online and offline?

• How do users' expectations differ for online shopping at large chains vs small businesses?

• How do users typically shop for plants and garden products?.

User insights

I began my research with interviews of 5 users that lived in a similar location to ‘Blossom’, and matched the target market. They had varying expertise in gardening but had purchased plants in the last year. Each insight was sorted into common themes and sentiments.

“Shopping at little indie shops is fun, browse and find things you’ve never thought of before”

After a few rounds shuffling post-its, I felt I had a good sense of users' red and green flags when it comes to online shopping. However, what really came through from users - is how much more enjoyable they find shopping at small and independent businesses. It is so distinct from the chore of everyday shopping, much more of a leisure activity where users go to browse and come across something special. The problem comes where this just isn’t replicated well online.

“The last online shop of a local biz I used didn’t have all their products available so I went in-store instead”

“Local sites don’t tend to have much more than opening times”

“I need a company with a good track record online…I don’t expect indie shops to have an online shop too, they’re very in-person focus”

While a desire to visit in person is a part of their motivations, the fact several users brought up using 3rd party platforms like Etsy, Depop and Vinted to meet their preference for shopping at small and independent, suggests that if a site can establish trust, users will eagerly shop online for their convenience.

Users also flagged some important aspects of plant shopping in particular the concerns about shipping fragile, live products. The lack of knowledge also felt like a barrier for the younger users.

Red flags - examples in the wild

This being a concept brief, I thought it was important to research competitors - especially those mentioned by users - to see real life versions of the issues raised.

For direct competitors I looked at a range of online garden centres, Dobbies, Primrose, Sarah Raven as well as the smaller shops that are a closer analogue to a ‘Blossom’ - Camden Garden Centre, Muddy Trowel, Nunhead Gardener.

Over-categorisation of navigation

A frustration users had browsing sites that require them to think quite specifically on what they want. If you’re browsing for leisure, or without extensive knowledge of plants, this can be off-putting. This was a noticeable feature of bigger online garden shops with extensive product ranges, like this example SarahRaven.com:

“I like less clicky clicky submenus more ah yes show me pictures please”

With such huge ranges, they seem to put every possible category of plant into their primary or secondary navigation. Navigation was going to have to be the focus of any solution, to ensure we replicate that casual, joyous, browsing experience.

Lack of conventional e-commerce features to build trust

Out of stock products, limited product range, telephone purchasing, dated UI. All added to a sense that an online service is not the business’ priority. Users need to trust a website. Clear images and full product listings, conventional secure online payment methods and reviews are all features that help build trust.

Defining the problem

User personas

I developed two user personas to provide a clear picture of who the users are, their needs and goals, to help inform my designs. Why two? Firstly, the brief identified their typical client base from two demographics (put very simply: millennial house plant lovers and green fingered boomers with gardens). My user research identified that these two demographics have quite different needs and goals that would not be best served in a single user persona.

• Cat, the houseplant obsessed young professional with beginner gardening knowledge. A web savvy professional, who is happy to shop online, cares about sustainability and wants their purchases from independent businesses to feel special.

• Helen, an experienced gardener and retiree who wants a way to support sustainable independent garden centres by ordering their well researched plant order from them for picking up. They want in-person interaction. They want to share and discuss their hobby with others and feel part of a local community of gardeners.

For the online sales market, Cat is the primary focus of our solution but that’s not to discard Helen’s needs too.

User journey

Users revealed a lot of their red flags from their experiences online. I was able to plot a user journey that hit on the biggest pain points. Bad navigation, out of date products and a lack of social proof about the company all eroded any faith they had in the business in order to hand over their credit card details.

Problem Statement

Once I had a clear understanding of our users’ needs and the challenges they face, I defined the overall goal for this project in a problem statement.

Developing the solution & user testing

Information architecture

In the middle of the first week we were given our product inventories so I could finally start developing the website’s information architecture - working out how to structure the site's content and navigation.

Card sort - trial and error

A card sort - where users are given cards of all inventory items and asked to sort into categories - seemed the ideal method to help develop a new primary navigation.

First attempt, in a moderated sort with open categories (users labelled the categories themselves), was a failure. My testers straight away struggled to identify the products - using their names only, it was pure guesswork. So let’s try again!

Second attempt, instead of names I used images of all products with open categories. This time, users could roughly identify all the products. 2 users were confident in distinguishing plants as indoor or outdoor. However, the categories were becoming very narrow and specific, so I didn't feel any closer to deciding on a navigation menu.

I took this opportunity to go back to competitive research. Look at some best-in-class sites and see if their navigation categories could work with my inventory. Patch.com takes a very simple, broad approach. To me, it seems intuitive. Straight away, it asks very few questions of the users.

Third attempt! A closed card sort, with images, using a similar approach to Patch. Here users comfortably sorted the inventory. This would be my approach for drafting the wireframes and to test with the mid-fidelity prototype.

Sketching & Wireframing

My sketches and early wireframes focused on a user flow for browsing and purchasing a new house plant - as per my primary persona’s scenario.

The priorities for this solution were:

• Simple navigation

• No garden jargon (or tongue twisters…)

• Bold use of imagery

• Reviews and social proof

• Community services & local identity

User flow

Cat quickly navigates to indoor plants, browses the images for one that catches the eye then simply checks-out without any signing-in.

Prototype and testing

I quickly put together a testable mid-fidelity prototype for usability testing. I set my testers the task to identify and purchase a houseplant on the prototype. The goal was to test how intuitive the navigation was, recording any deviations from the ideal user flow and follow up with them after for any further sentiments.

All 5 users could successfully - and smoothly - complete the task. The simple primary navigation worked well. But there were some points to develop on were:

• Product information - more detail and care information

“I wouldn’t buy from here without more information on the plant”

• Filter categories were too ambiguous, particularly the ease of care filters.

“Does ‘impossible to kill’ mean I get a refund if the plant dies?”

• Reviews! Usability tests are fantastic at pointing out those subtle issues you missed but also very handy at reminding you of the glaringly obvious - I’d forgotten to add reviews. 

Delivering the prototype

With the help of the user testing insights, I had about 2 days to modify the prototype and complete the final design.

Visual design

For the visual design, I thought about what the personas actually love about plants and gardens. How Blossom’s users - from inner city London, with small outdoor spaces if any - may differ from larger garden centres. For them, green spaces are sanctuaries from the city, something they want to bring indoors.

I chose colours that reflect that sense of calm, with the dark green an assurance of garden expertise.

I used Bahnschrift for the headings - modern, clean - and Gill Sans for the body - reassuring, timeless.

Something I had also sketched earlier and wanted to bring into the final design was the IKEA image hover navigation. A really elegant way IKEA has brought their old catalogue browsing onto the web. I think it’s very effective for users unfamiliar with plant names, provides a sense of scale and has a great visual impact.

Community

It was also important to reflect back on the requirements of the brief. Blossom wasn’t just another e-commerce site trying to compete with Amazon. It was a community asset. I wanted this to come across clearly on the homepage.

This was just an idea of what kind of community services they would provide. Further user research on this would be interesting to explore.

High-fidelity prototype

The final prototype provides users a visually engaging, easily browsable online shop. The design makes use of conventional elements to establish trust - reviews, clear product images and product descriptions, delivery policy.

Next steps - Lessons

What will I take from this project?

• Insights from users about the different style of browsing comparing Amazon, for example, to an artist's Etsy shop. It’s a little like comparing shopping for a new laptop adaptor to window shopping at Christmas.

• For navigation - you really can be too precise. “Don’t make the user think”!

• Concept challenge - I really wanted some web analytics! I enjoyed engaging with this concept a lot, but a real-life look at who the web users were and where on the site they were getting stuck would be very interesting.

• Could I have gone further in the ideation phase? My focus narrowed quite early on to look at conventional e-commerce sites, ensuring the fundamental features of the site were there. With more time, I’d love to look at ways to inspire users more, and make it more unique to Blossom.