Green Thumb is an expert plant caring app which is useful for people, who need an expert’s advice on how to resolve certain problems with their plants. In addition to that, it provides features such as watering and fertilizer reminders. Users can also keep track of the health and growth of their plants.

Plant owners need a quick way to connect with a plant expert for advice on how to resolve certain issues with their plants; because searching online to find the correct answer is very time consuming and the answers they would find are usually not reliable enough and may lead to more damage to the plants.

Green Thumb provides an easy way to connect with plant experts and get help from them immediately. Users can make their own plants list, create plant profiles and set schedules for watering and fertilization, so they can take better care of them.

The design process of the Green Thumb began with research on the current market and the possible competitors to determine what kind of a product would be most useful for the users. 

There are currently no apps that provide expert advice about how to take care of plants. There are websites that provide articles or have forums where people ask questions or discuss their issues and concerns about their plants. There are some applications such as Vera, Plant Care and Plant Care Reminder that offer watering reminders for plants, however they do not offer any sort of information or advice on how much each plant should be watered or taken care of.

I ran a survey for 36 hours and meanwhile I had interviewed three participants with different backgrounds, to better identify the needs of the target audience of the expert plant caring app, Green Thumb.

During this research I had 4 goals in mind:

- To better understand user’s behaviour and needs around the activity of plant caring

- To determine which features and functions users would like to have using an expert plant caring app

- Documenting user pain points with existing plant caring apps or services on the market

- Collecting data on the context in which users would use an expert plant caring app

After gathering and documenting all the data from both the survey and interviews, I began to analyze the results. By creating affinity maps, I clustered the most important findings into five categories and then gathered insights and solutions for the design of the app.

Based on my findings from the user research, I have created three user personas, two as general users and one as an expert user. At this phase of the project I mainly focused on the general user personas and didn’t work with the expert persona any further.

Then I created the user journeys for each persona and later used this data to design the user flows.

Have a call with the expert and rate the experience.

Create a new plant profile and set watering reminder for it.

At this point, my concept for the design of this app was clear and I could begin the with bringing together my ideas together with the user flows that I created before and conceptualize the information architecture; I created the first sitemap in order to visualize how the user could navigate within the app to use its features.

After creating the first sitemap, I ran an open card sorting session to realize how the possible users would put together different categories and features of this app. I analyzed the results and refined the sitemap based on it. 

The user flows together with the sitemap helped me to sketch out the first wireframes of the screens and to create a rapid prototype for the three key features of the app.

I made sketches for the three user flows: to login and search for an expert and book a call(user flow 01); to make a call and rate it afterwards(user flow 02); to create a plant profile and adding watering/fertilizer reminders(user flow 03). 

At this point, the main structure of the screens were settled so I began to add more details and create the mid fidelity wireframes. It was important to consider how each screen would change according to the interaction of the user, before and after each step the user takes.

Next I created a prototype with the mid-fidelity screens.

It was time to put my ideas and the prototype into test. I decided to use the thinking-aloud and observational methodology. I wrote a usability test plan and script and conducted the tests with six participants. The usability tests were moderated-in-person and moderated-remote.

The goal of this study was to find out how the possible users of this app interact within it by completing a few tasks. 

I observed their interactions and points of frustration to measure if they understand the app well and enjoy the experience while doing so.

- Watching how users navigate their way through the app and where they expect to find the features intended within the app.

- To realize if the users can successfully finish the following tasks:

01. Search for an expert and book a call with one

02. Make a call and rate it afterwards

03. Create a new plant profile in the plants list and add reminders for it

The overall comment was that the app was easy to use and simple to understand;

however some testers needed assistance at some point.

Some issues were found during testing as follow:

I designed two variations for the high fidelity wireframe of sign up screen and carried out a preference test using Usabilityhub.

The test objective was to determine if the potential users would prefer a more light colored or more green colored background image for this screen and which design approach would be more effective.

The concept is follow up the same style and color theme throughout the design of the app. This preference test was running for more than 14 hours and 10 participants took the test during this time. The testers where also asked in the end why they made that choice.

Preference Testing Results

Six out of ten participants chose the more green variation of the sign up screen and some stated that the all green image is more calming and inspiring for them, on the other hand four participants found the light colored background better and stated they like the openness in the space of this screen and that it makes it feel less busy.

Based on the results of this test, I have decided to move forward with the second variation and design the rest of the screens according to the same principle.

Based on the identified errors during the usability tests and their severity level, I have revised the Green Thumb prototype.

The preference testing also helped me to decide how to design the high fidelity prototype and make further iterations to the design.

By reaching this point, I moved forward with iterating the design and adding more visual elements. I applied the Gestalt Principles to my design and also started with creating the brand for the Green Thumb app. It was important to choose the style and theme of the app in order to create a user-friendly and coherent experience for the users.

I further created the style guide of the app and applied the iOS Human interface Guidelines to all the screens. Afterwards I had reached a high-fidelity level prototype of Green Thumb app. 

Primary Colors: The brand color is green, which is based on plants and nature. This color is mostly used across the whole app and it conveys a relaxed and friendly atmosphere.

One gradient shade is also used, which is taken from the  Green Thumb logo. Different opacity of the primary colors can also be used.

Secondary Colors: The secondary colors can be used to emphasize on an element in different shades, such as a CTA button.

The background color of the screens is a %10 opacity of the secondary green color. In specific cases the background color can be plain white, such as the onboarding screens.

The font used for the design of the Green Thumb app is Avenir.

One can use the Medium, Heavy and Black weights of this typeface with the right size according to the chart.

Grid & Spacing: For the layout of the screens one should follow a 7 column grid with the below sizes:

Column Width: 47 W

Gutter Width: 7 px

Margin Width: 21 px

When designing the layout of elements, one should consider the spacing between the elements as follow:

Cards: 12 px

Text Fields: 12 or 15 px

Icons: 16 px

Buttons: 8 px

The design of the icons is mainly mono-line, except for some that are filled when in active state.

If a new icon should be designed, follow the same style.

The activated icons can have different colors according to the color palette. 

Bright green is used for when there is a possibility to tap on it and dark green for when the icon is disabled.

Other icon elements can be filled with a solid color from the color palette according to their functionality.

After implementing the design language guide to all the screens and iterating the design elements,I designed the high-fidelity level wireframes using Sketch.

And finally I created a high-fidelity prototype in InVision.

View Final Prototype Here: