Brief

PLNT is an app for plant lovers that will help users inventory their plants, notify when plants need to be watered and serve as a plant care resource with an extensive library of plants. PLNT wants a user-centric approach to their app, adding features and flows that make it delightful for people to use.

Objective: Design PLNT's mobile app.

Client: PLNT

Timeline: 80 Hours over 2 weeks

Role: Lead UX/UI Designer

Tools: Sketch, Marvel

Deliverables: Mobile Prototype

Process
Research

Goal: To research the market, competitors and potential users

Process: Market Research, Competitive Analysis, Provisional Persona, 1:1 Interviews

Market Research

To kick off the project, I conducted market research of the indoor house plant industry to uncover demographics, behaviors and trends that help me understand the industry and consumer.

Demographics

  • 18 to 34-year-olds now occupy 29% of all gardening households

  • Millennials were responsible for 31 percent of recent houseplant sales

  • Almost a third (32.7%) of consumers said they purchased an indoor plant in the past year

Plant Industry Trends

  • National survey shows more American households are gardening than ever before (77%)

  • American gardeners reported spending a record $47.8 billion on lawn and garden retail sales

  • Record average household spend of $503

Consumer Behaviors

  • Houseplants from past decades are making a strong comeback

  • Houseplant fascination stems from a deeper underlying focus on wellness and self-care

  • Plants like Dracaena, Sansevieria and Spathiphyllum could remove trace toxins from the air

Competitive Analysis

I conducted a competitive analysis of similar plant apps and tools to identify competitors and their strength & weaknesses to understand PLNT's opportunity in the market.

Plnt competitive analysis.png

Provisional Persona

I created three provisional personas of potential PLNT's users based on secondary research. These personas help me narrow my focus on a target group.

Plnt provisional persona.png

1:1 Interviews

Guided by my provisional personas, I crafted an interview guide to question participants about their plant and plant care experiences. I questioned 5 potential users from a target demographic of age 26-31 for 1:1 interviews to observe user needs, desires and pain points. View the interview debrief here.

Define

Goal: Synthesize research to define core problems

Process: Empathy Map, Persona

Empathy Map

I transcribed the interviews and constructed an empathy map to organize observations by: doing, thinking/feeling, seeing, hearing, pains & gains. The purpose is to synthesize my findings from the 1:1 interviews.

 

From the empathy map, I organized observations into shared patterns and behaviors to identify developed insights and needs.

plnt empathy map copy.png
plnt empathy map insights.png

Insights

  • Users prefer low maintenance plants

  • Users are mindful of select plant care characteristics

  • Users research plants through trusted sources

Needs

  • Users need to know how much effort a plant needs

  • Users need to know a plant’s specific necessities

  • Users need to access credible information about plants

Persona

Meet James, our persona for PLNT. Personas help humanize design by profiling a target audience member to design for. James is based on interview observations and empathy map insights. Moving forward, I based my design decisions on James' profile.

PLNT persona.png
Ideate

Goal: Ideate solutions, organize information architecture, map user journey and construct earlywireframes

Process: POV Statements & HMW Questions, Individual Brainstorm, Business & User Goals, App Map, Task Flow, User Flow, Sketches, Mid-Fidelity Wireframes

POV Statements & HMW Questions

This step helps me transition from the problem to the solution. In the POV statement, James' needs are a result of his insights. I then put myself in PLNT's perspective by asking how might we help James in his point of view?

Plnt POV HMW.png

Individual Brainstorming

I brainstormed as many solutions as I could in three 3-minute sprints for each HMW question.

Plnt brainstorm.png

Business & User Goals

I compared and contrasted user and business goals to create shared goals. Shared goals help me select solutions from the brainstorm that fulfills both goals

App Map

I detailed the most promising solutions in a product roadmap. I organized my solutions and key screens into a sitemap, which: 1. finds a home for proposed solutions, 2. builds information architecture to organize screens

Task Flow

With solutions in place, I documented how a user would complete three tasks using the new app. The task flow helps me understand how the user interacts with the system to achieve a goal.

User Flow

To expand on the task flow, I took a deeper dive and mapped out James' path through three entry points and scenarios. The user flow helps me understand user decision-making, barriers and context to achieve a task.

PLNT user flow.png

Sketches

I sketched low-fidelity wireframes to organize visual hierarchy and experiment with layouts. Sketching allows me to be creative and tap quickly tap into new ideas.

Mid-Fidelity Wireframes

I reviewed competitor apps and Dribbble posts to source inspiration and incorporate familiar design patterns. I digitized the sketches into mid-fidelity wireframes to create a prototype and perform usability testing of the new app.

Prototype

Goal: Build an early interactive example of the app

Process: Mid-Fidelity Prototype

Mid-Fidelity Prototype

I uploaded my wireframes and created a mid-fidelity prototype on Marvel. This served as a working example of the new app. With this prototype, I started to conduct usability testing.

Testing

Goal: Evaluate viability of solutions through testing and feedback

Process: Usability Test, Affinity Map

Usability Test

I created three tasks to test each new social feature's usability. Five participants took part in the test. I observed their patterns and behavior with screen &audio recording.

Test Goals

  • Evaluate effort level of user to complete tasks

  • Identify areas of difficulty and confusion

  • Identify behavior patterns of users to complete tasks

User Tasks

  • Mark rubber plant as watered

  • Successfully add a plant to living room

  • Find plant matches using Area Match feature

Affinity Map

Using observations from the usability test, I created an affinity map to organize participant thoughts and behaviors and derive insights. My recommendations are based on these insights.

PLNT Affinity Map Copy.png

Insights

  • Users were unsure on where to locate the Area Match function

  • Users were unclear about purpose of Area Match feature

  • Users wanted to mark plant as watered from the home screen icon

  • Users wanted to interact with the task status on plant profiles

Recommendations

  • Relocate Area Match feature to Discover

  • Provide clarity for Area Match feature with instructions

  • Enable watering icon on Home plant card to be interactive

  • Enable the task status to be interactive

Design

Goal: Design branding, user interface and populate mid-fidelity wireframes with branding and content

Process: Brand Guide, UI Kit, Wireframe Revisions, High-Fidelity Wireframes, Final Prototype

Brand Guide

To craft PLNT's brand identity, I first defined the core characteristics of the company to be represented:

 

Evergreen - Contemporary - Minimal - Health

I then created a Pinterest moodboard to gather visual references based on these characteristics.  With inspiration for PLNT's design direction, I created a logo, chose brand colors and selected typography.

UI Kit

To expand the brand guide, I created a UI kit that featured user interface elements to house all branded and designed interactive elements. This helps keep me consistent. To develop my wireframes further, I could easily drag and drop elements from this document.

Wireframe Revisions

I took the recommendations from the Affinity Map and revised my wireframes to improve usability. The main changes were relocating the plant match function to Discover, making water icons and status bar interactive and tidying up wordy portions.

High-Fidelity Wireframes

I populated the mid-fidelity wireframes with imagery, brand styles, and UI elements to create high-fidelity wireframes, a highly developed mock-up that I can present to the client.

Final Prototype

I uploaded the high-fidelity wireframes to Marvel. Interact with the Marvel prototype here.

Test the prototype by:

  • Adding an English Ivy to the living room garden

  • Using the Plant Match Function

  • Searching for palm plants

 
Reflection

Lay the Soil.  Building an end-to-end app would probably take more than two weeks and one person, so I reminded myself that I was creating a first iteration. However, the first iteration is crucially important because it would be presented to stakeholders and we could develop later versions from a strong foundation.

 

Keep it Simple. As I drew inspiration from Pinterest and Dribbble, there were numerous plant app designs with flashy features that I wanted to incorporate. In the middle of designing a Nest-based Smart Home feature, I scrapped the idea entirely. The point of the app is to fulfill user needs by providing plant information and serve as a reputable resource - all of which was uncovered in user research. With that in mind, I moved forward to fulfill that goal.

Next Steps:

Develop More Features- Add more functionalities to the first iteration of the app

App Store Approval- Submit for approval to be downloaded from Apple's App Store

Android App- Configure and adapt current app design to fit within Google's Material Design guidelines

jasonmoosedesign@gmail.com |  224-381-5685

© 2019 Jason Moosikkamol | Made in Chicago