Pick Your Plants is a gardening App that helps people pick the right plants for their garden. The App Pick Your Plants synthesizes all of that information so that you don’t need to spend time Googling plants or paying for expert landscaping.
Timeline: 6 months
Role: UX Researching, Ideating, Task flow, Wireframing, Prototyping, User Testing, Motion Graphic
Tool: Sketch, Adobe XD, Zeplin, After Effect
About The App
There are lots of gardening apps out there and this one is unlike all others. This App simplifies the process of picking plants that work in your conditions, look good together, and reflect your personal style. How you then arrange them or have the neighbourhood teenager dig the holes is up to you. The app Pickyourplants synthesizes all of that information so that you don’t need to spend time Googling plants or trying to figure out whether two plants go together based on those tiny tags in their dirt.
About My Role
This is a work project I worked on during my time at Humber as a Part-time designer. My client wanted to create an App that helps people pick plants that can survive and flourish in their home environments without the costs of expert landscaping. I started with the initial research, basic gardening principles, looking at soil types, hardiness zones, ranking different garden centers and analyzing other gardening apps to build the paper sketches, wireframes, prototypes, and UI motions design.
Design Process
Ideas
Enables people to search for plants that work in those garden conditions and based on their personal preference.
Simplify the process of picking plants that works in people’s own garden conditions, and reflect their garden style.
Guides people through a step-by-step process for selecting plants and gives them feedback on their selections.
Helps them find the garden centers nearby and then helps them get the quote.
Challenge
There are many existing technologies that help you search for plants. What would the visitor experience be, if we could start from scratch, simplifies the process of picking plants that work in your conditions, look good together, and reflect your personal style? How to help people get started on their own space without paying a professional landscaper or relying on store clerks or experienced gardener friends to help? When it comes to basic landscaping, people need to know their options and get good suggestions.
Ranking from different gardening websites give knowledge about the process and criteria of picking the suitable plants for your own garden at beginning, though there’s still a lot of time needs to be spent on.
There are not many existing gardening apps, instead of looking at other similar apps, I chose to benchmark other popular apps to get inspirations. The concept of our app is unique enough to draw users’ attention, I don’t to make users feel unfamiliar with the navigation as that will get them more overwhelmed.
User Research & Synthesis
Our research phase began with the goal of better understanding how people think about building the garden. To do this, we conducted user interviews, had conversation with garden centres employees and new beginners, asked them questions about how they feel about the process of building a garden. We also conducted Secondary research by reading book <What Grows Where in Canadian Gardens> to find the ultimate guide to help Canadian gardeners select the right plants for their garden, and evaluating existed gardening websites and apps.
Bed Level Search Filters
Plant Level Filters
Ideation
We went through brainstorming and my team and I drew some quick sketches to convey our ideas as well as to stimulate others' inspiration. And during our ideation, we kept asking questions like “does our design solution meet our research insights and meet design criteria?”
User Journey map
This process provides a holistic view of the customer experience by uncovering moments of both frustration and delight throughout a series of interactions. It is ux designer’s responsibility to look at the entire experience from the user’s standpoint. Creating the journey map reveals opportunities to address customers’ pain points, alleviate fragmentation, and, ultimately, create a better experience for users.
Task Flow
Task flow V1.0
If we can imagine how a clerk would do it at a garden center, and assuming the hardscaping questions have been answered, first question is, what conditions do your plants need to survive and/or flourish and second question is which plants will help you achieve the desired “look”. So assuming all the options meet your parameters, maybe you approach it by sorting out levels – starting with trees and vines and tall shrubs, to medium plants, to ground cover. Maybe you find some way of assessing the user’s personal style, then leave them to make selections from what goes with that style, then make further suggestions or even criticize what the user’s selected based on the above design criteria. In other words, there are many different orders of operation in terms of organizing the process for the user.
Task flow v3.0
Basically, task flow v3.0 is the upgraded version based on Task flow v1.0. Start from the beginning, this task flow shows how users log in their account, then landing in homepage to review the garden(s) they have built. Before they create a new garden, we ask them for the garden conditions such as soil type, hardiness zone, sunlight, then based on these conditions, the App filtered the plants that are suitable for their own gardens. Although we made a few changes in terms of how the App guides them to find the right plants for their gardens, task flow v3.0 is the initial structure of the App.
Low-fidelity Prototypes
Firstly, we did a rapid low-fidelity paper sketch and made it tested by a few users.
High-fidelity digital prototypes
I gathered feedback from users and selected the most important and common suggestions. Based on the insights, a few improvements were made then applied to the high-fidelity digital prototypes.
UI Design
First round UI Design before the second round usability test.
Tobbi Eye-tracking Usability test
My Role: Moderator, Script Writer
We had a mix of amateur users as well as expert users. The amateur users had very little issue in interacting with our interface as they can just simply follow the steps and instructions. Overall, they found it was very intuitive and aesthetically pleasing. Whilst the expert users could also successfully navigate the interface, they had more issues regarding the interaction models, one of the users also criticized the information architecture of some screens.
Tool: Tobbi Eye-Tracker
User Quotes
“Can’t understanding the filter function.
”
“didn’t know info icon can be tappable”
“The log in button is in the bottom, I tended to tap the picture to log in.”
“I can’t recognize the filter icon at first.
”
“I skipped the text body of info button, and atraacted by the pictures.”
“I can understand the info icon and filter function.”
“Overall design and function is good. Pictures and texts are well presented.”
Feedback grid
Here are some key features to help users be able to discover the right plants in a easy and smart way:
Fast and Simple – Pick Your Plants App helps people identify and enter their garden’s location/sun/soil conditions.
Filter – It enables people to search for plants based on their personal preferences (eg. colour, blooming time).
Flexibility – Also, you can choose to “like” the plants and look at later. Even if you don’t have a particular style in your mind, you can still select the appropriate plants that suit your garden conditions by using this App.
Step-by-step – The App guides people through a step-by-step process for selecting plants from (1) what works in their conditions, (2) for that style, based on some key design principles, and gives you feedback on their selections.
Applying Micro-interaction to UI
Pick your plants step by step
Pickyourplants allows you to choose your preferred style (or no particular style)
Gives you a lists of plants based on your style.
It then guides you through a step-by-step process for selecting plants from what works in your conditions: Ushers you a step-by-step process: Choose your tallest plants, medium plants, short plants, ground cover, and accent plants.
Design Tips
Pick your plants dynamically applies design “rules” and notifies you when your picks are out of bounds.
Eg. You pick plants that flower at the same time. You should stagger blooming seasons so that at least one plant is flowering at all times.
seasonal views
view your plants in different months.
Give you an overview of your garden outlook in different seasons.
Search plants, like plants
“like” plants to look at later – refer to your selections later if you
forget what you planted.
Using the filter function to search the plants that work in your garden condition.
Launching the Product
