Plantopia

Role

UX/UI designer

Duration

March - May, 2024

Team

Context

I designed an app that helps people better take care of their house plants. I led the project from research to final design. The project is a coursework for Google UX Design Certificate.

Problem

>20% of house plant growers struggle to keep their plants healthy or alive. They rely on plant care advice from search engine results which are overwhelming and generic. This makes them frustrated and lose confidence in their ability to care for plants.

Solution

A plant care app that provides:

  1. Quick identification of plants

  2. Easy-to-follow care guide

  3. Plant health report specific to users' situation

Impact

  1. Created a prototype with 100% success rates to identify, find care guide for and diagnose house plants

Read ahead for my design process.

I conducted semi-scripted interviews with 9 house plant hobbyists to understand their experience caring for house plants, especially their pain points when diagnosing sick plants.

I mapped out the user journey and identified improvement opportunities at each step.

For example, in step 3: choose treatment for sick plant, users feel overwhelmed by the number of treatment options. This is an improvement opportunity to help users reduce information overload by providing metrics about different options.

Our competitors converge on similar features such as photo identification and questionnaire diagnosis. There are a few missed opportunities that our competition has not addressed.

Competitive analysis: availability of features

Photo identification

Photo diagnosis

Questionnaire diagnosi

Treatment comparison

Step-by-step instruction

Links to buy products

*Treatment comparisons is a feature that provides users with information on the effectiveness, cost and ease of the treatment. This helps users compare treatment plans and better decide on the best action.

->See detailed competitive analysis

Competitive analysis: availability of features

Photo identification

Photo diagnosis

Questionnaire diagnosis

Treatment comparisons*

Step-by-step instructions

Links to buy products

*Treatment comparisons is a feature that provides users with information on the effectiveness, cost and ease of the treatment. This helps users compare treatment plans and better decide on the best action.

->See detailed competitive analysis

Ideate

The information architecture is structured according to 4 user goals identified in the user research:

  1. Identify the plant

  2. Care for the plant

  3. Diagnose a problem & find a treatment

  4. Learn about plants

Information Architecture: 4 user goals

Home

Identify

Basic info

Care

Care guide

Diagnose

Result

Treatment

Diagnose

process

Learn

Articles

Information Architecture: 4 user goals

Home

Identify

Basic info

Care

Care guide

Diagnose

Diagnose process

Health report

& treatment

Learn

Articles

User flows

Home

Home

Identify

Identify

Find care

Find care

Diagnose

Diagnose

Take photo

Plant info

Plant info

Care guide

Care guide

Questionnaire

Questionnaire

Submit answer

Plant health report & treatment

Plant health report

& treatment

Wireframes

User testing

I tested the usability of the user flows in an unmoderated usability test with 6 participants.

Usability testing key findings

  1. Most users get stuck when app identify a plant wrong

  1. Most users need additional information about different treatment options to decide their next action

  1. Half of the users were unclear which treatment treats which problem

KPIs: Success rates & error rates on 3 user flows

Identify

Care

Diagnose

Result

Goal

Result

Goal

Result

Goal

Success rate

100%

100%

100%

100%

100%

100%

Error rate

83%

0%

0%

0%

55%

0%

Identify

Care

Diagnose

R

G

R

G

R

G

Conversion rate*

100%

100%

100%

100%

100%

100%

Error rate*

83%

0%

0%

0%

55%

0%

The qualitative data consists of participants’ “think-out-loud” responses while interacting with the wireframes. I used an affinity diagram to organise themes and identify patterns.

Affinity diagram

Iterations

Iterations based on testing

Allow users to re-identify a plant when app identify a plant wrong

Provide metrics such as ease, effectiveness for treatment recommendations

Specify targeted problem in the treatment plan

Iterations based on HCI literature

Explain AI diagnosis in terms of cause of the problem

Iterations based on designer feedback

Reduce visual complexity

Equal size = equal importance

Minimise the number of clicks required

Brand design

Plantopia represents a lifestyle signified by connections with nature and caring for others. I composed a colour palette and a logo that are reminiscent of the natural elements.

Colour palette: grounded in nature

Espresso

Sunset

Forest

Dark

Light

Dark

Light

Final design

Hand-off document: design system and prototypes

Next steps

  1. Achieve 0% error rates and test new iterations

  1. Explore shop link feature, an low-priority improvement opportunity identified in the user testing

  1. Build "learn" user flow to address the 4th user need to learn about plants

Learnings

  1. Process of iteration

My design will never be perfect. It is important to know when it is good enough to move on.

  1. Importance of feedback

Feedback from other designers offered fresh insights, helping me avoid unnecessary trial and error and saving me time.

11:59 am