Grower's Grove

A group project creating a conceptual e-commerce site for a North London Gardening Centre

Grower’s Grove — a conceptual look into e-commerce

A two week design sprint for a conceptual e-commerce site named Grower’s Grove. The objective was to create an e-commerce function from scratch. I designed this up to mid-fidelity.

This project began as group work (group of 4), but post research design decisions were my own.

Our Client

Grower’s Grove is a fictional garden store based in Islington, North London. They are well known in the community but are now looking to branch out into the world of e-commerce.

The Brief

Due to coronavirus restrictions, Grower’s Grove had begun to encounter financial difficulties. To keep the business afloat, they had decided to bring in revenue by selling their products online. They wanted a clear and efficient way of both locating and purchasing products, and also an easy means of contacting store members for advice. On top of this, it was important to keep their ‘small business’ appeal, including great customer service.

Key Info

Card Sort participants - 17

User Interviews - 16

Design Iterations - 3

Usability Tests - 9

Skills used - interviewing, usability testing, contextual inquiry, competitive analysis, affinity mapping, experience mapping, persona creation, user journeys, paper prototypes, wireframing, digital prototyping, iterative design

I hit the brief by observing that during my 'final' tests users were able to locate the product and checkout without any hiccups.

Key learnings - the key takeaway from this project was the value of gleaning as much information as possible from interviews. I felt that some of my interviews didn't necessarily yield valuable insights - upon reflection I needed to ask different questions and be more open-ended in my approach.

Competitive Analysis

As this was a design from scratch, we knew that looking into some competitors would be a good place to start to understand where there were gaps in the market and where we could source inspiration. Our finding were as follows:

Most small garden stores were not particularly commercial, so there was a gap in the market for a more commercial approach.
Sites did not have a chat function, so perhaps there was another gap in the market there.
Sites always have a 'garden advice' feature.

Card Sorting

Armed with a product inventory, we had to determine how exactly we were going to showcase the products within the website, so we used card-sorting to categorise them.

The graph below showcases participants' ideas on how many categories the products should be split into.

The card-sort yielded many results, but the majority thought that 5 categories would be the best way to organise the page

Interviews

Next we moved onto interviewing to gain a sense of users pain points when using e-commerce sites. One particular quote summed up what many interviewees felt:

“I find that I want to locate a product, but then I end up scrolling through lots of things unnecessarily. When I actually reach the category I’m looking for, I don’t get enough information about the product. It’s really quite frustrating.”

Taking this into account, I created a persona who encapsulated the sentiments and realities of the interviewees; most people were young professionals who enjoyed gardening/being in their garden, but who needed advice as they weren’t gardeners by profession. I called her Tracy - her problem statement was as follows:

She enjoys being in her garden, but needs advice when it comes to actual gardening activities. She also wants to be able to locate items easily within the Grower’s Grove site.

Wireframes

I implemented 5 categories in the navigation.

I wanted to make products easy to find, implement a slightly commercial approach, and ensure that when browsing, there is an option to speak directly to a member of staff.

I tested these designs on 3 users. The feedback was that they generally made sense but that the option to speak to a staff member was too big and that it was unclear if it was a ‘chatbot’ or something different.

Digital

I tried to rectify the issues that had been identified by users in my paper wireframes.

As per the request of the user tests before, I decreased the size of the chat function.

And, keeping in line with the brief and our interview feedback, I kept the page clear and relatively minimal, I tried to ensure that essential information was accessible, and I made products easy to locate.

I tested this with another 2 users. The feedback I received was positive — with the introduction of the ‘Hand Tools’ title, and the details around the page now being more complete, both users commented that they understood the page well.

Further designs

Next I went on to iterate the product page itself. When I tested the image on the left (below) I was told that I should have the product video smaller, add the price, and that I should include more information. 3 users stated that they could navigate the page but that it was far from convincing.

I implemented these changes and also added reviews and an ‘offer’ below the image. 2 more user test confirmed that the second design made sense.

What I learned:

As this project was done relatively early in my UX career, I learned a huge amount. The need to pry and get to the bottom of complex issues in interviews was something that really stood out. If you ask the wrong sorts of questions, interrupt at all, or don’t push people a little further for their feedback, you will not receive the insights that will eventually influence your design.

This was also my first project that I had properly done in Figma, so the learning curve for me was fairly steep. That being said, the only way to improve is to practice, and I found that with each day, my skills improved.