Creating an online shopping experience for Growing Garden Supplies

General Assembly UXDI , Project 2 — April 2017

Team: 1 UX Designer. Duration: 2 weeks.
Client: General Assembly.

Lady Of The Night

Summary

This was a student project for General Assembly London’s User Experience Design Immersive course. I created a prototype of a website to allow an online shopping experience for a hypothetical Garden Supplies Centre.

The Brief

You will be creating a prototype for the ‘Growing Garden Supplies’ site, using a desktop first approach. Think through the process and design the experience of shopping online, designed to meet the goals of users (as represented by the provided personas), and the business goals of the company. During the design process, the brand values of the company should be considered.
You will need to create a sitemap, design the major user journeys, create wireframes for each page required to illustrate the user journey, a click-through prototype to test with at least 4 users, presentation & Case Study.

Discover

COMPETITOR ANALYSIS

Initial exploring online revealed two distinct types of gardening supplies sites - large, nationwide sites, quite mainstream in look and feel, and also, small, local garden centres with a more local business feel. There was also a smaller third group which I refer to as the middleweights.

The methodology I went for was to pick 9 direct/indirect competitors broken down as follows. 2 chain giants, 3 middleweights, 2 local garden centres near to where Growing Garden Concerns is situated (neither had online shopping as a feature) and two indirect competitors (a local cake maker and online seller, and a local fabric supplier).

I visited one of the local garden centres to get more of an idea of the look and feel and also how they organised and labelled their products.

After a site visit I then researched online performing extensive feature analysis and comparisons of the competitor sites alongside quantitive and qualitative heuristic analysis.

KEY FINDINGS

The local garden centres felt very much independent but had limited website features while the nationals like B&Q and Homebase had many features but with a more corporate look and feel. There were also the gardening middleweights that sat somewhere in the centre.

This exposed three clusters with a gap between the local garden centres and the middleweights.

Slightly above and left of Crocus and Bakker was the area I felt needed exploring.

CONCEPT MAPS

The concept map below was sketched out after the site visit and competitor analysis and was useful for the general forming of ideas for what local garden supply eCommerce site could include.

PERSONAS

I was given three personas and three user journeys to work with.

From the above, we were encouraged to pick a main persona and match that persona to one of the user journeys.

The main persona I focussed on was Yoshi.

My reasons for picking her were as follows.

She’s a landscape architect working on a small residential project in London.

She is likely to purchase larger volumes and more frequently.

She wants to support local businesses and avoid the big resellers.

She’s frustrated with disorganised systems.

And picking the user journey for Yoshi was pretty straight forward.

A junior designer at a landscape architecture studio quickly needs to put in an order for some topsoil to be delivered to a client site (something the customer does on a regular basis)

USER INTERVIEWS

As well as choosing my main persona, I also phone interviewed two people who had differing degrees of gardening experience - asking them of their experiences and how they went about purchasing and acquiring various garden products.

Rich, 45, married, father of 2, lives in East London.

“I buy most of my stuff by going to the Garden Centre otherwise I have no idea how it’s going to look but I do buy seeds and bulbs online”

“I hate advertising on websites, and often the site’s auto-suggested content is way out”

“Sometimes I have to Google a product and the website because the website’s own search is so bad”

“I’m not aware of the ethics of a product and how and where it is made. I would like it to be more obviously labelled”

Mel, 39, single, mother of 3, lives in North London.

“I buy 50% of my gardening stuff online”

“I get half way through a job and realise something is missing and have to rush to the garden centre”

“I use Amazon reviews even if I see something in a shop on special offer to gauge if it’s good quality and value for money”

I ask a lot of questions when at the garden centre because I still don’t think I know enough about what I’m doing”

USER JOURNEY

Referring back to my main persona I was able to produce the following user journey and affinity map representing how Yoshi might achieve the task of ordering topsoil for a client site.

This user journey helped me in defining solutions which bridges over into the Feature Prioritisation in the next section.

Define

INTRODUCTION

To exploit the gap between local and heavyweight gardening sites I felt the need to include some of the core features of the larger/corporate eCommerce sites that were missing from the local and even middleweight sites but also highlight the local touch by driving the community and heritage aspect of the company.

FEATURE PRIORITISATION

A dedicated favourites page to allow easy reordering of common products to order for client jobs.

An intuitive basket to handle both multiple items and ordering quantities of more than one item (which would often be the case for some of the bigger jobs).

A single product page so the user can read detailed descriptions, directions and user reviews before adding a product to the basket.

Handling multiple addresses to enable ordering items to different client sites.

A friendly ‘Our Story’ home page to describe heritage and promote commitment to the local community and businesses.

Popular Products or hand-picked Associated Products highly visible on the site to steer customers towards.

Develop

INTRODUCTION

The develop phase was another large phase involving iterating through information architecture, site maps, navigation schemas, sketches, wireframes and user testing.

INFORMATION ARCHITECTURE

Part of the brief included a product inventory of 75 items which would need to be included in the site. This leads me to naming, categorisation and general information architecture.

By using a combination of open sorting and closed sorting techniques with a number of users, I was able to group items together and come up with names for the product categories.

From this point I was able to iterate through various versions of the site map by repeatedly returning to users and rechecking variations in categorisation.

Early Iterations above
Later iteration

CRITIQUE (ROUND 1)

The first group critique stage involved me placing competitor research and site maps on a wall for a number of fellow designers to view and comment.

The result of the session was to merge the product categories of ‘weeding’ and ‘pest control’ into one classification and to rename ‘hoses’ to ‘hoses and watering’ to give it more context.

A separate point was raised about how my site map didn’t reflect the community aspect of the garden centre enough so I introduced specific sub categories for customers’ gallery, cafe and children’s play area under ‘community’

USER FLOWS

Sketching out user flows to cover a main happy-path journey, as well as the two other user journeys included in the brief was done before sketching out any interface screens.

ONE OF THE USER FLOWS — ORDERING A PRODUCT DIRECTLY FROM FAVOURITES

FIRST SKETCHES

The first sketches were of the individual product page, this was an important page because it needed to provide comprehensive product details and directions as well as to drive clicks to buy via a ‘related products’ view.

A product categories page was also considered important by enabling the user to quickly find the product they were searching for had they not favourited the item.

WIREFRAMES

Inviting critique from fellow designers, and a user who closely matched my key persona I was able to develop these ideas further into wireframes for more critique sessions and user testing.

This was probably the most beneficial feedback session, raising the following issues.

“Having a basket to contain both shopping, orders and account details is confusing.”
“Consider renaming ‘Favourites’ to ‘My Favourites’ otherwise it’s confusing having both ‘Favourites’ and ‘Popular’.”
“You’re missing a screen per sub category, otherwise how do you quickly navigate from product categories to an individual product.”
“Consider using a secondary navigation system similar to Apple, where you can quickly go from primary to secondary navigation without the step of clicking.”

PROTOTYPING

The next stage was designing some more and creating interactive prototypes in Invision, of which a selection of screens is shown below.

USER TESTING WITH INTERACTIVE PROTOTYPES

These user tests focussed on the following tests scenarios

Feature: Favourite an item

As a landscape architect, I would like to access my saved items,

in order to quickly buy frequently purchased items for my clients.

Feature: Buy an item and have it posted to a new client address

As a landscape architect, I would like to add a new delivery address,

in order to have items sent directly to the address of a new client site.

KEY FINDINGS FROM USER TESTING

The user did not know they were already logged on so tried to log on before accessing favourites

The user thought it annoying that the default product quantity should be set at zero and not one in the favourites page and individual product pages

WHAT NEXT

Reflecting on feedback and user testing, these are the areas I’d like to focus on going forward.

Add an indicator that the user is logged on or not (e.g. Hello Yoshi, by the account icon).
Explore an alternative to rows of ‘Add To Bag’ buttons in the Favourites page.
Look at size differentiation between buttons with different functions.
Look at responsiveness of the site and how it scales to mobile.
Change popular products to associate products.
Investigate if the Products page is more important than Our Story for a homepage.
Promote own brand products by labelling them as made, grown or sourced locally.

Closing Thoughts

Market research, although time-consuming, was key to this project as was repeatedly testing with users at various stages throughout the process — although this latter point is probably obvious seeing as it was a user experience design project.

I would like to have interviewed more people, ideally in person, and people who were regular customers of both competitor stores and competitor sites.

One of the other points in the brief was how Growing Garden Supplies also wanted to serve tradesmen and local businesses so interviewing people from this group would also have been of great benefit.

Show your support

Clapping shows how much you appreciated Jason Sparks’s story.