HAUSPLANT | Plant Care Tool - Usability Heuristics + UI Case Study

Native App

image
image

Challenge: Design a to-do list app

Timeline: June 1 - June 29

Role: UI

Hausplant was my first project with CareerFoundry. We were able to choose between designing screens for a to-do list app or a music player. I have an odd love for productivity tools (hello, Notion.so 😘) so I opted for the to-do list app, but with a twist.

I decided to narrow the scope some, and design a to-do list based app for all things plant care. As is often the case, there are incredible products out there that are really doing it best. Since I couldn't find that for this plant care/to-do list concept, I decided to design it! I downloaded about 10 different plant care apps and started figuring out what I did (and didn't) want to design.

So what is Hausplant? Hausplant is designed to be your pocket plant care assistant. From watering reminders to task lists with multiple views (so it's never overwhelming!) to information about your plants' needs, Hausplant aims to help you become a confident plant parent armed with the information and lists you'll need to care for even the most needy plants.

This project was a challenge in matching known design patterns with user needs to create a product that was easy and delightful to use. In this case study, I'll tell you about the user needs I prioritized, the solutions I found, and the key usability heuristics behind those solutions.

image

1. Identifying User Needs

The first step in designing this UI was identifying the key functionality that my users would want. Because this was a conceptual project focused on the visual design, and I wasn't working from a brief nor conducting a comprehensive UX process, I ran a quick 10 question survey across my friends to find my starting point.

Participants wanted to:

image

2. Matching Design Patterns

With my initial key features in hand, it was time to start sketching some screens.

I'll touch more on this below, but one of the key heuristics in good design is identifying and using common (known) patterns in your work, so that you users don't have to work hard to figure out your product.

This lends towards an intuitive experience and leaves more room to delight your users and anticipate their needs.

Here are some of the design patterns I utilized for Hausplant:

1. Dashboard for centralized information

2. Expandable, editable forms

3. Progress meter

4. Category filters, multiple page view options

5. Slider dots, navigational arrows, distinct icons

image

image

image

3. Usability Heuristics

I've found Neilsen's 10 Usability Heuristics to be extremely helpful guidelines when making design decisions. Here are the three that inspired most of my decision for Hausplant:

Consistency + Standards

“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.”

As I mentioned briefly, in order to create an intuitive and enjoyable experience for the user, they shouldn't have to spend time figuring out how to interact with your UI. Help your users enjoy their experience by providing common patterns and UI elements, and keeping new things to learn to a minimum.

Recognition Rather than Recall

“Minimize the user‘s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.”

Clear navigation, distinct icons and easy to spot system instructions all contribute to helping users know where to look when they need information. Guiding the user through complex processes with clear instructions and easy to navigate visuals streamlines the user's experience and removes potential frustrations.

Aesthetic & Minimalist Design

“Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”

Keeping information concise, nesting extra information and providing expandable cards keeps the interface clean and navigable. Prioritizing good information hierarchy and simple visual design keeps the UI easy to use and understand. A delightful UI is visually engaging but not informationally overwhelming.

The End | Mockups

Hausplant was a fun challenge in finding the balance between whimsy and functionality, and I'm delighted with how it turned out. Enjoy these final screens!

image

⟵ Previous Project

Next Project ⟶