EDEN GARDEN

E-commerce concept website project for a garden center in London. It is an individual project.

  • Project: Concept

  • Individual

  • Duration: 2-week sprint on the General Assembly Immersive course

  • Date:  December, 2018

Opportunity

Eden Garden is a concept garden centre in the heart of London. They had no digital presence before, and it is important to them to replicate the store’s local and communal atmosphere in the website. This covers 4 key features:

  • Visually immersive product pages

  • Product search

  • Common e-commerce features (basket, etc.)

  • Customer assistance

Problem

Because Eden Garden has a wide range of products, most of the challenges I faced designing this site could be traced back to navigation. I was aiming for a navigation experience therefore that makes it easy to find products, even to users who don’t know gardening products that well.

Solution

In order to create a seamless navigation experience, I first reduced the number of product categories to 5, so that the user doesn’t feel overwhelmed. Going through menu navigation, from the homepage to checkout takes 5 steps: category - subcategory - filter - product page - purchase.

A prominent search box was also added to the website header, which reduces the number of steps to 3, given that the customer is about to purchase a specific product.

Result

The project’s objective was to create a mid-fidelity prototype, (see above) which remains visually faithful to the brand image, showcases the products with clear care instructions, and means of contacting the store for assistance.

process

I built the initial site architecture by doing card sorting, conducting interviews, making site visits, competitor analysis, and laying out a site map.

Then I focused on user flows, an experience map, wireframes, user tests, iterations and finally an interactive prototype.

Research

At the beginning of the project I conducted some research, including:

  • Two site visits

  • Competitor analysis

  • User interviews

Store Visit

The store visit was very exciting! I felt like I’m inside a website. :) This was the place where I learned who my users would be.

I learned 3 key things about users’ behaviour:

  • Navigation inside the store was straightforward. Most customers found what they were looking for in a reasonably short time. This made me understand that good navigation on the site is equally important.

  • When they didn’t find the product they asked the shop assistants for help. I knew I have to make a prominent search box.

  • Customers were also asking how the tools work. I realised I had to add clear and well organised descriptions on the product pages.

Competitor analysis

For my competitor analysis I checked out 2 big companies: Ikea and B&Q. It was quite easy to search on their webpages. They solved search with a big search box in a prominent position inside the header area. They both did an amazing job with search. It’s easy to use the filtering feature, and the titles and amount of categories make search easier for the user. From landing page to basket, it takes no more than 2–3 clicks.

I also found the websites of two other gardening centres. They gave me great ideas re. how to create the branding and the product pages.

User interviews

I’ve met two groups of people during my interviews. The expert gardener, who does a bit of shopping on a regular basis, and the young professional, who lives in a small studio in Central London, and is looking for plants for their flat or balcony.

The “Jobs to be done” method made it easy for me to understand what motivates the customer. I set out to identify the intent behind the customer’s decision, and it helped set a direction before going on to designing the website.

Persona

Out of the two groups mentioned above, I chose the young professional.

Here is her Jobs to be Done story:

  • When I buy a plant in my favorite garden centre

  • I want to find the perfect plants for my home

  • So I can make home in my flat, while also living out my inner interior designer

Meet Susan

  • 39yo music teacher form London, Hackney

  • Lives in a small studio with her cat and plants.

  • She loves to shop local, but sometimes prefers to order online from her favourite stores

Navigation

To get a clear picture of the structure of the website, I invited people with different gardening experience to do card sorting. As part of this process I handed out the product list of the top 75 products as separate cards to people with different gardening experience, and asked them to sort and identify categories. This exercise helped me create the 5 main product categories, to guide the user find what they’re looking for.

After I had the product categories established, I created the sitemap and made a few rounds of tests to make it clearer and easy to use.

Global navigation ended up being made up of: search box, profile, and shopping basket; placed in the header, to allow our users to search, purchase, and save items with ease.

User flows

For wireframing, I chose the user flow in which the user comes to the product through product categories, rather than search, and concludes in a purchase.

Wireframes and iterations

After defining the user flow I created the first prototypes, tested them, then made follow-up changes.

Testing broke down to two parts:

  • First, I examined how easy it was to find a specific product.

  • Then, I looked at the payment process.

All this was an incredible experience. It helped me a lot in tailoring the website so that user journeys remain as simple as possible. These are my key findings:

  1. On the home page, I created a search box with a clickable button and a visible icon, because smooth search is one of the key features we wanted our site to have.

  2. Secondly, I had to clarify to the user that in order to check their orders, they have to be logged in first, and if they are, they need to be aware of it.

  3. At first, I placed the “find us” icon near the top, because — as in-store experience is still highest priority for Eden Garden — I had to make it easy to find the store. But feedback from user testing showed that everybody expected it in the footer, so I moved it there.

  4. And to maintain the personal touch of Eden Garden, I put one of their quotes in the middle of the home page, which says: “we are very proud to be a part of our dynamic community”

  5. In the product page I grouped price and rating together, and placed them at the top. This two pieces of information were the first things the user sees when they are on the page. I also made it clear whether you added any items to the basket by highlighting any new items in the basket under the action button.

  6. Making the payment process smooth took a few iterations.

Achievements

Susan, our persona, can be confident going on her favorite garden store, and ordering from the comfort of her couch.

All this was made possible by meeting the following 4 requirements:

  1. The website remains faithful to the brand image and showcases the products.

  2. It is easy to find and purchase specific products.

  3. Also, there are clear product pages

  4. It is possible to Contact the store

 

Next steps

  • Showing popular products

  • Showing related items on product page

  • Work on a mobile version