Sunny Garden Greenhouses Case Study

Sunny Garden Greenhouses

A conceptual website redesign challenge

Overview

Sunny Gardens Greenhouse is a local, family owned brick and mortar plant nursery that has been in business for 28 years. They are dedicated to sustainability and environmentally friendly practices. The main focus of Sunny Gardens Greenhouse is to offer customers easy access to their gardening needs, like succulents, perennials, seasonal plants, vegetables, and organic growing products.

Propose a redesign to the Sunny Garden Greenhouse website
Help improve the brand’s online presence.

Hi-Fi Prototype

This case study is purely conceptual. Any work represented here is not associated with nor endorsed by Sunny Garden Greenhouses

Competitive Analysis

The Sunny Garden Greenhouses website does not currently have a checkout process. In order to gain some insight into what a flower shop checkout process looks like, I conducted a competitive task analysis of the checkout process with some other flower shops. By doing so, I was able to narrow down the essential steps I needed to design a checkout process. The full competitive analysis showed that it takes an average of 23 clicks to complete the checkout flow, so I aimed for 23 steps or less when designing mine.

Feature Analysis

I also performed a comparative task analysis with some indirect competitors — other e-commerce sites. I did an informal survey of features that users feel are essential when it comes to buying products online, and from there I pared it down to the features that popped up most often.

By comparing the features that these websites had in common, I was able to narrow down the most important features that need to go into the Sunny Gardens Greenhouse website in order to make it a better experience for the users. I also found a few features that I would like to see implemented in future prototypes, such as tips, product recommendations, and subscriptions.

Because of time constraints I decided to use a Proto-Persona known as “The Careful Critic”

Proto-Persona

I created some different HMW’s on how I might solve Tilly’s problem.

How Might We provide Tilly with detailed product information so that she can make sure she gets the best quality products for her money?

How Might We create a way for Tilly to compare gardening products so that she can get the best quality products for her budget?

How Can We Solve It?

I fleshed out the proto-persona to include some more details about their needs and goals. From there I narrowed down the most important information about the persona that pertained to my project. In this instance, the proto persona’s primary concern is making sure they have detailed product descriptions so they can make well informed purchasing decisions.

Tilly needs a way to see detailed information about gardening products because she wants to make sure that the products she’s buying are the best quality for her money

So, What’s The Problem?

I sketched the checkout process from start to finish based on the user flows, making sure to incorporate features users mentioned in the comparative analysis. Here is an example of the sketch to wireframe process of the product page:

Sketches & Wireframes

coming soon

Reflection

Before I could jump into designing, I wanted to find out how I can organize the website pages in the best possible way for ease of navigation. I conducted an open card sort with 13 participants so I could learn where users group products / features.

Card Sorting

After going through the results of the card sort, I refined the categories and created a sitemap. This shows how the information is organized on the Sunny Garden Greenhouses website according to users expectations.

Sitemap

The first user flow demonstrates the first key task — the checkout flow of Sunny Garden Greenhouses. It follows the users from the home page all the way to order confirmation.

User Flows

The second flow demonstrates how users might add a product to their favorites page.

I then converted the wireframes into a prototype for the first round of usability testing to gauge if I was on the right path.

Prototype — Iteration 1

When going into the hi-fi iteration I wanted to keep the refreshing blue, yellow, and green color palette of the original website. After playing around a bit, I landed on this one! I also created a UI Kit to make sure the design stayed consistent across the prototype.

Hi-Fi Style Guide

The first round of usability testing for this prototype was a remote moderated study with 5 participants and 2 key task — the same ones from the user flows.

Usability Testing Round 1

I refined the prototype based on the first round of usability testing. I focused on improving the most important issues that popped up, such as making the icons larger, and simplifying the shop page.

Prototype — Iteration 2

The same method and key tasks were used as in the first round of testing — this time on the refined prototype. I saw marked improvement in performance.

Usability Testing Round 2

I sketched the checkout process from start to finish based on the user flows, making sure to incorporate features users mentioned in the comparative analysis.

Hi-Fi Prototype

Going forward, here is a timeline of tasks based on the results from the last round of usability testing in order of priority.