Tiny Garden-Thumbnail.png

Tiny Garden

 
 

problem

There are countless good reasons to have plants, but a lot of us don’t have enough space or knowledge to encourage us to take action.

 
 
 

Solution

Tiny Garden is an e-commerce site that encourages learning before buying.

 
 
Tiny Garden-Case Study Hero.png
 
PROJECT OVERVIEW.png

Timeframe
3 weeks

Team
2 designers + 3 developers

My role
UX/UI Designer

 
 

Our Process

 
PHASE 1-ABSORB.png
 

Learn all you can. Don’t make anything yet. Read a lot. This is the phase where we get immersed in the subject matter, make observations about the market and see what is already out there.

 
 

Social listening / data

We explored the internet to find insights about indoor plant trends. We found an overwhelming amount of articles dedicated to Millennials and plants.

 
Tiny Garden-Social Listening.png
 
We are talking about an antiquated industry that hasn’t changed and a consumer that has. Millennials don’t want to go to Walmart to buy their plants.
— Eliza Blank, 33, Founder of The Sill
In the past three years, U.S. sales have surged almost 50 percent to $1.7 billion.
— National Gardening Association
 
Tiny Garden-Instagram.png

3,462,452 posts

Plants are aesthetic. The large community of proud plant parents on Instagram is a market opportunity.

 

Google Forms Survey

Screen Shot 2019-08-20 at 1.40.35 PM.png

85 Responses

We conducted a survey to challenge assumptions and get a better idea of what the consumer might want from our product.

Tiny Garden-Survey results-2.png

I

f you don’t have plants, why not?

These most popular responses show a lack of confidence in buying plants, and point to a need for education.

 

Competitive audit

We looked in and out of category, from plants to glasses to Lamborghinis.

 
Tiny Garden-Audit-Plants.png
 
audit-zenni try on.gif

Zenni Try-on

Zenni allows you to create a virtual try-on using short videos. Visualizing the glasses on your own face, adding value to the product by ensuring a satisfactory fit.

 
Nike-customize.gif

Nike by you

Nike’s customizer is an excellent example of a guided step by step process. The screen uses progressive disclosure, showing one task at a time.

 
PHASE 2-DEFINE.png
 

Here we identify trends and key insights from our research, narrow the scope and dive deeper.

 
 

user journey

We conducted a user journey workshop with our dev team and two guests.

 
User Journey.gif

Empathize

The user journey helped us empathize with our users in every stage, identifying pain points and opportunities.

 
Personas-2.png

Personas

Personas help us distance our personal experience from the project. We landed on these two “types” after analyzing our survey results, 1:1 conversations and desk research.

 
HMW.png
 

Key insights

People want more than just plants, they want decor and lifestyle.
Plant parents lack confidence because they buy on impulse and learn after.
 

UX Strategy

UX Strategy-Revised Copy.jpg
BUY-LEARN-2.gif

Minimum Viable Product (MVP) Session

Determine KPIs to measure success, prioritize features and connect with the dev team.

KPI STICKERS.png

Define Key Performance Indicators (KPIs)

We gave each participant 3 stickers. one of each color, and asked them to vote for the KPIs in order of priority.

 

How will we measure success?

KPI-Revised.png
 
MVP-Session.jpg

Prioritize Features

From least valuable to most valuable and from least level of effort to highest level of effort to create. For the minimum viable product the sweet spot is high value and low level of effort.

 

Sitemap

Overview of the information architecture (IA)

Tiny+Garden-Sitemap.jpg
 

The filters

The filters will help identify the best plant for you, assessing your space and interests. Using the filters will lower the chances of purchasing a plant on impulse that will not thrive in your space.

 

10 plants

These are the ten plants we selected to start with. There is enough variation in size, maintenance and light needs to put our filters to the test.

Tiny Garden-Filters.png
 
PHASE 3-DESIGN.png
 

Where rubber meets the road. Finally, we create. In this stage, we start with low fidelity sketches and move into higher fidelity mockups as we gain confidence in the design through user testing and constant iteration.

 
 

SKETCHES

Quantity over quality (counterintuitive for creatives, I know) but this is just a means to externalize ideas quickly. After many sketches, we select the best ideas to move forward with.

 
Tiny Garden-Sketches-Line.png
 

Wireframes

We are moving up the truth curve (thank you, Lean UX). After making our wireframes, we tested our designs with 7 people to challenge our assumptions and observe real-time interactions with our product.

 
Wireframes-Screenshot.png
Testing-Wires-Timelapse-4.gif

Testing our wireframes

Remember: you are not your user. We put together a test plan with questions and tasks we wanted to validate. Then we took the feedback and made revisions.

Tiny Garden-Wireframe Iterations.png

Developing a visual Style

Now that we have our information architecture and wireframes, we can think about the visual style. We were inspired by a lot of green, interesting leaf patterns and modern pops of color, and photography of plants in the context of real spaces.

 
Design-System.png
 
Landing-Exercise-3.gif

Building the home page

We invited several people at Wyncode to participate in an exercise to help us select from variations of the modules for the final home page.

 

High fidelity mockups

Home-full.png
 

InVision Prototype

 
 
 
 
 

IXD SampleS

A small sample of micro interactions and transitions.

IXD-Confirmation-3.gif

Order confirmation

When you scroll through the checkout form, the order summary stays in place. Once you place your order, you receive visual feedback that your order has been received.

IXD-Shop-the-look-3.gif

Shop the look

Beautiful images of spaces with plants to inspire users to recreate the look in their own space.

IXD-Care-Page-3.gif

Care page

We added sub navigation to move from the articles to the Plant Doctor feature.

tiny-garden-how-it-works.gif

How it works

This short animation introduces the design configurator to give the user an idea of what they can achieve on the site.

IXD-Config-3.gif

Design configurator

Inspired by our audits and user feedback, we used the side module to break down the process task by task, one at a time.

 
PHASE 5-LAUNCH.png
 

Package designs, make annotations and document task flows for hand off to the development team.

 
 

User Flows

User-Flow-Config.png
User-Flow-Care.png
 
Screen Shot 2019-08-18 at 9.56.51 PM.png

Hand off

We packaged everything into a Google Drive folder, complete with source files and a “Read me” document with links.

 
sneak-peek-dev-2.png

Sneak peek from the dev team

A well deserved shout out to our development team! They have been working hard to bring our design to life.