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.
December 7th — 21st 2020
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.
Competitive Analysis
To gain an understanding of what the e-commerce market looked like for gardening stores, we decided that we needed to dive into some competitors sites for inspiration.
After looking at 6 small, independent plant stores, it seemed that keeping the website as simple as possible was the best route forward. Several small stores across London had made it easy to locate products on their sites.
From the graph below, we can also see that there is perhaps a gap in the market for a ‘local’ or community-centred business that takes a slightly more commercial approach.
One final observation was that not one of their competitors — direct or indirect — had an online chat function. Considering that Grower’s Grove wanted to make it easy to contact store members for advice, it seemed logical to try to incorporate this.
User Research
Next, our course instructor gave us 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.
Due to the difficulties of Covid, we were unable to do this in person, but using the website Trello, we were able to run this exercise digitally. Collectively, we ran 17 card sorts. Below are the results:
People’s views, as you might expect, varied greatly when it came to the different categories that we could implement in our navigation of our designs. This was an open card sort — so participants were free to categorise however they saw fit. The most popular number of categories was 5, therefore this was the number that I decided to proceed with.
This allowed for the creation of a sitemap. I envisaged 5 different categories on the navigation of the homepage, with several subcategories underneath. For example, one participant in the card sort suggested 7 different categories, but two of their categories were ‘power tools’ and ‘hand tools’, so I felt that I could kill two birds with one stone by following the majority decision of 5 categories, but also differentiating between power tools and hands tools.
As mentioned before, we identified an opportunity to take a slightly more commercial approach, so I wanted to have ‘sale’ as one of the main categories.
The features in the top right of the site map below were decided upon as a result of our competitive analysis. Every site examined has an ‘about’, a ‘contact’, a ‘search, and, in the case of gardening stores, ‘garden care’ or ‘garden advice’ was always there.
Interviews
As well as taking participant’s advice on categories and conducting competitive analysis, interviews were our best bet in discovering how we should lay out the website.
Interacting with as many others as possible would give us the deepest understanding of what users will expect.
We interviewed 13 people to understand what their pain points were when purchasing online, as well as their thoughts on gardening in general. In large part, people’s frustrations were down to websites being too busy, and products themselves not having enough information. One interviewee said:
“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.
Meet Tracy:
Tracy’s situation is 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.
The advent of Tracy was followed by the creation of a detailed user flow in order to showcase the journey that she was going to embark on within my designs. I decided that she was going to navigate to a ‘trowel’ product page, get some advice, then purchase it.
With the navigation through the site complete, it was time to start designing.
Wireframing
Starting with the paper sketches above, I implemented the sitemap of the 5 categories and designed a general layout for the home screen, the ‘tools’ products page, and the product page itself.
As per the brief, and interview feedback, 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.
One user was also unclear on the layout of the ‘tools’ page:
“What am I seeing here? I understand that I have clicked ‘hand tools’ to reach this page but what am I supposed to see here? Is this where I pick the product?”
Digital
Considering users had found the layout to be relatively intuitive, but with some hiccups, I decided that a digital wireframe would perhaps help clarify some of the pain points.
Above you can see a digital version of the products page. As per the request of the user tests before, I decreased the size of the chat function.
Again, 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.
One further feature that can be seen in the above is the ‘plus’ sign in the corner of each product listed. A user suggested it to me:
“If you want to make things easy for users, just let them add a product to the basket as quickly as possible”
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.
After this, I added the chat feature. As both the brief and users had stressed the importance of being able to obtain advice from staff, I thought a voice call would be the best option rather than a chatbot, which several users had complained were ineffective.
I was lucky to receive great feedback on this. Users really enjoyed the idea of being able to directly speak with a shop member before purchasing a product. One issue immediately raised was
“how long would I have to wait to speak to someone? What if their phones are occupied?”
This is something that if the project were to have continued, I would have investigated and accounted for.
Finally, once the product had been purchased, I decided that a friendly wave would showcase the ‘local store’ aesthetic that Grower’s Grove wanted to maintain. Being able to go into the store confirms its status as a shop at the heart of a community.
Prototype:
https://www.figma.com/proto/VnYzNZKqFWZ0ONDMHc44TU/Third-Draft?node-id=29%3A211&scaling=scale-down
Next steps:
The next steps for this project are to iterate the designs up to high-fidelity to really bring to life our findings from our research. Beyond that, further testing needs to be done to understand where else the product could improve.
What I learned:
As this project was done relatively early in my UX career, I learned a huge amount of information. 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.
