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.
Timeline: 80 Hours over 2 weeks
Role: Lead UX/UI Designer
Tools: Sketch, Marvel
Deliverables: Mobile Prototype
Goal: To research the market, competitors and potential users
Process: Market Research, Competitive Analysis, Provisional Persona, 1:1 Interviews
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.
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
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
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.
Goal: Synthesize research to define core problems
Process: Empathy Map, Persona
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.
Users prefer low maintenance plants
Users are mindful of select plant care characteristics
Users research plants through trusted sources
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
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
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
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
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.
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.
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.
Goal: Build an early interactive example of the app
Process: 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.
Goal: Evaluate viability of solutions through testing and feedback
Process: Usability Test, Affinity Map
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.
Evaluate effort level of user to complete tasks
Identify areas of difficulty and confusion
Identify behavior patterns of users to complete tasks
Mark rubber plant as watered
Successfully add a plant to living room
Find plant matches using Area Match feature
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.
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
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
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
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.
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.
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.
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.
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
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.
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