top of page

Research & Design

Designing a User Interface for an IoT Plant-Based Air Purifier

Project Type: Internship Project

Role(s) Performed: UX Design, Product Development

Project Timeline/Duration: 15 March 2021 to 26 April 2021

Tools: Adobe XD

The Challenge: 

Task 1:

Design a mobile app which connects to a plant-based air purifier and provides real-time information on plant maintenance and room air quality in real-time

Task 2 :

Design a voice interface with all keywords and linguistic variations of commands which the device can understand.

The Thinking Process

Requirements & Opportunities Identification
Features Backlog Drafting
Prototyping
Handover to Client

Project Background

Botanicaire Photo 2 copy.png

Requirements Capture

The air purifier uses various plants proven to reduce Volatile Organic Compounds (VOCs) and Particulate Matter 2.5 (PM2.5) in the surrounding atmosphere. The plants have maintenance requirements such as soil nutrients, soil aeration, water, ventilation and sunlight. Sensors keep track of all these variables and send the information to a server on the Internet, which keeps track of this over time.

 

I consulted the client to get a more detailed understanding of the product, such as optimal levels of aeration, oxygen and CO2 concentration in the air and soil, and ideal air flow.

I listed down all domain-specific logic which is crucial to how the app works. E.g. Alert the user when soil aeration is below 10% of the volume of soil. Room air should be replaced every 1-5 minutes.

Plant_Sushi_1024.jpg

Botanicaire plant and clay replacement

Opportunity Identification
 

Maximizing Consumer Lifetime Value: I noticed that the purifier itself is fairly expensive, and that people purchase it for their home only once over their lifetime. The company will have to rely on new customers for revenue, and the market may get saturated. Therefore, to maximize the company’s revenue over time, we need to sell complementary items to maintain the product’s function. These include clay and activated carbon top-ups, and sponge filter replacements. The Botanicaire mobile app needs to push notifications to the user when these purchases are needed and make it as easy as possible for the customer to purchase them by reducing the number of steps to purchase them.

Enterprise Features: I identified potential demand among companies which purchase multiple air purification devices to improve air quality in their facilities. Thus, enterprise features are needed to connect multiple devices as a network and allow multiple users with various access permissions to manage them. Enterprise clients would also want to be able to export data to CSV for further processing.

Features Backlog

From this understanding of the product requirements, I drafted out a backlog of features to be implemented in the mobile app. For each feature, it contains:

  • A detailed documentation of the various actions available to the user within each feature

  • A benefit hypothesis to the user to justify the feature

  • Acceptance criteria to fulfil functional and non-functional requirements

  • Example:

Prototyping Mobile App

Design Considerations

We want to communicate that the air purifier is a loyal home companion that ensures wellbeing. I used a colour scheme of light green to represent energy and vibrant health. The text in dark blue which represents trust, reliability and calmness. Helvetica Rounded is used for top level headers and navigation to convey comfort of home and friendliness. 

Icons are used to represent key concepts and statistics related to the user's plants and the environment. This is a visual shorthand that the user will be able to refer quickly, with all relevant information in one glance at the dashboard.  Icons are also used to ease the cognitive effort needed when figuring out what a certain button or option does.

 

Tooltips or explanations are provided for clarity when necessary.  

Plant View – More Details.png
Device Management - Add New Device 2.png
Change 2FA - Scan QR 1.png
Help Center.png

Detailing

Based on the requirements identified in the product backlog and the specifications gathered from the client, I proceeded to draw up mockup screens in Adobe XD. I also implemented the interfaces for app settings, account information, and payment information.

Mockups were designed for user actions within the same feature such as adding a new device vs renaming an existing device.

Mockups contain the implementation of task flows and user flows, including alternate flows such as errors and exceptions. This includes scenarios such as what the app would display if no information is available yet, or dialogs to confirm if a user wants to take critical actions such as disabling two-factor authentication. I also implemented safeguards such as confirming the spelling of a new email address and sending a confirmation when changing the user’s mobile number.

Device Management – Disconnect.png
Device Management – Remove Group.png
Change Email – Confirmation.png
Change 2FA - Validate Code – Cancel.png

Prototyping Voice Interface

From the requirements and product specifications, I brainstormed and listed down all the commands involved. Commands were grouped together by similar functionality (e.g. water, nutrients, aeration). I checked with the client that all functionalities and commands were included.

For each voice command, I came up with linguistic or phrasing variations. When I was working on the project this is crucial because there was no Generative AI. The voice interface was powered by Google Assistant.

  • E.g. (Can you set/ Please set) (my/your/the) fan speed to 50%

  • (When) do I need to (change/replace/replenish/refill/order) (more/your) (soil/clay)?

List out common words that have the same meaning: Air, aeration, change, replace, replenish, refill, top up, servicing/maintenance

Specify voice responses to be returned: Summary of growing conditions and environmental data. All items ok? Otherwise points out any items needing attention

Specify data needed to be returned: E.g. nutrient level, nutrient consumption rate, previous clay replacement date

These were listed down within an Excel spreadsheet:

The Solution

Due to the time constraints of this internship, the priority is to quickly produce sufficiently detailed prototypes for client feedback and handover to developers.

80 screens were designed in total and presented to the client with the voice interface specifications. Product design documentation with justifications, benefit propositions and acceptance criteria for design features were also provided. The prototypes designed were selected by the client for further implementation to be released as a commercial product. From these mockups, a developer can proceed to implement the app in code.

Initial Setup - Register- Log In.png
Device Management - Add New Device 2.png
Device Management – Disconnect.png
Botanicaire Showcase.png
bottom of page