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.
Tiny Garden is an e-commerce site that encourages learning before buying.
2 designers + 3 developers
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.
Plants are aesthetic. The large community of proud plant parents on Instagram is a market opportunity.
Google Forms Survey
We conducted a survey to challenge assumptions and get a better idea of what the consumer might want from our product.
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.
We looked in and out of category, from plants to glasses to Lamborghinis.
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 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.
Here we identify trends and key insights from our research, narrow the scope and dive deeper.
We conducted a user journey workshop with our dev team and two guests.
The user journey helped us empathize with our users in every stage, identifying pain points and opportunities.
Minimum Viable Product (MVP) Session
Determine KPIs to measure success, prioritize features and connect with the dev team.
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?
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.
Overview of the information architecture (IA)
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.
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.
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.
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.
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.
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.
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.
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
A small sample of micro interactions and transitions.
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.
Shop the look
Beautiful images of spaces with plants to inspire users to recreate the look in their own space.
We added sub navigation to move from the articles to the Plant Doctor feature.
How it works
This short animation introduces the design configurator to give the user an idea of what they can achieve on the site.
Inspired by our audits and user feedback, we used the side module to break down the process task by task, one at a time.
Package designs, make annotations and document task flows for hand off to our star developer team.
Hand off to our dev team
We packaged everything into a Google Drive folder for our developer team. Complete with source files and a “Read me” document with links.