How it was done
I used design thinking framework which is a user-centered approach to problem-solving.
This 5-stages process allows for creating an enjoyable experience and identifying market opportunities to achieve our business goals.
Empathizing with the users
The first stage is to empathize with our target users. The goal is to better understand our users: their problems, wants, needs, and situations to design a product that works for them and creates an enjoyable experience.
What we want to know:
But first...
Checking competitors
I checked similar apps in the App Store and Google Play store to conduct preliminary user research and learn more about the plant care sphere. I wanted to understand what features similar apps usually have and how their users speak about these apps. It gave me some insights for my survey.
Survey
I created a survey which I conducted online on 36 people.
It contained 16 main questions and 4 extra questions for people who already had some experience with plant care apps.
Mapping
Creating empathy map
I selected 10 target users and conducted video interviews. Based on the information gathered, I created Empathy Maps for each person. I then combined all my findings into one comprehensive Empathy Map.
Designing personas
On the basis of combined empathy map I created five User Personas. Personas are fictional characters who represent groups of similar users. They help distill large amounts of user information into more manageable chunks. And also help the team to emphathise with users.
Defining key problems
On this stage I analyzed my research findings from the empathize phase and determine which user problems were the most important ones to solve, and why.
What did I do:
Who, what, and why?
Writing user stories
The next step involved creating User Stories for our Personas. A user story is a one-sentence narrative told from a Persona’s perspective, encapsulating who the user is, what they want to do, and why.
Who, what, and why?
JTBD generation
The Jobs to be Done (JTBD) framework views products or services as tools people 'hire' to complete specific tasks. It simplifies user needs by emphasizing desired outcomes, using the structure: When (Situation) + I want to (Motivation) + So that (Outcome)
Key interactions
Preparing user journey map
I created Customer Journey Maps for each Persona for main scenarios to identify key customer interactions.
I identified numerous improvement opportunities, primarily related to app features and design, as well as additional deliverables such as store descriptions, store screenshots, and a landing page to enhance the overall experience.
User's needs, frustrations, and goals
Generation of problem statements
UX problem statements guide design by focusing on users' struggles, needs, and goals. They turn unclear challenges into clear, actionable ideas, leading to meaningful solutions.
Ideation of the solutions
The goal was to generate a wide range of innovative ideas, refine, and prioritize them. This process involved:
As I’ve already have results of Competitive Audits, which I completed on the stage one, I decided to use HMW framework.
As I’ve already have results of Competitive Audits, which I completed on the stage one, I decided to use HMW framework.
‘How might we?’ framework
It allows to take problem statements from the define phase and turn it into a list of questions that start with “How might we,” or HMW. HMW questions help reframe user problems as exciting opportunities for solutions.
How might we
HMW statements ideation
How Might We statements are short, open-ended questions that spark creative problem-solving. They reframe challenges into opportunities for innovation, encouraging teams to think broadly and collaboratively about solutions.
Objectives
Design Goals
I aggregated all the information I gathered during previous steps to the Design Goals. A design goal is a focused objective that drives the creation of a product or experience, ensuring it addresses user needs and achieves project aims.
Prototyping and testing
This stage consists of several steps. My first step was to create an App Site Map, which provides an overview of the site's areas at a glance. Then, I developed paper prototypes for the main screens. I'm not particularly fond of this framework as I struggle with drawing and handwriting, so I prefer to transition to prototypes in Figma promptly. After several iterations, I tested my prototypes with users – I will provide more details in the next stage of my case study. Upon receiving positive results from the usability study, I created mockups and a high-fidelity prototype for the entire app.
Site map
A site map is a visual representation of the app’s content organization
It shows the hierarchy of screens and numerates the app sections.
Prototypes
I’ve designed mid-fidelity prototypes
Usually, the process starts by making paper prototypes that then progress into low-fidelity prototypes. Because I lack drawing skills and have pretty poor handwriting, I choose to create clickable prototypes in Figma immediately. Another significant benefit of this choice is that it enables me to use variables and conditionals for more complex prototypes.
Why do I use mid-fidelity instead of low-fidelity?
2
Low-fidelity prototypes may not provide a clear understanding of the space required for each section.
Benefits of this approach:
• I can organize screens precisely.
• I can create complex prototypes.
• I can quickly transform prototypes into high-fidelity versions by working with styles and components.
• Participants can easily comprehend the screens.
Moreover, the results of the usability study are not influenced by the visual design itself.
Usability study
I prepared usability study scenarios and conducted unmoderated usability testing online with 5 participants for each scenario.
The three main user flows tested were marking tasks as completed, scanning ill plants for diagnosis, and syncing calendars.
Updates
Insights from the usability study
With some additional improvements compared to the first version.
Completing tasks
1
Adding sorting by room
It’s beneficial for users with large apartments/houses or multiple plants of the same type in different rooms.
2
Including a toggle between tasks and plants
It allows users to complete one task for all plants before moving to the next task, or to complete all tasks for one plant before moving to the next plant.
3
Adding tips for each action
It makes information easily accessible, so users don't have to remember details. Including helpful facts, particularly about the user's plants, can also improve the experience.
4
Adding ‘Edit reminder’ button at the end of the care schedule
It allows convenient access on both the home screen and in the Calendar view.
Scanning plant
1
Displaying diagnosis and treatment details on the same scanning screen
Showing all information on one screen makes it easily accessible without requiring additional steps.
2
Automatically adding treatment to the care schedule
If the user already has the treatment, it will be included in the care schedule. If the user does not have the treatment, suggested products will be shown. The user will be asked if they want a reminder to buy the necessary product.
Prototypes
Final design
My goal was to create a design that would bring joy and be easy for all users to use.
1
I focused on creating a clear structure to keep the design simple and intuitive with a great visual hierarchy to guide users through the app.
2
I maintained consistency in design elements such as colors, fonts, and layout across the app, which helps users feel familiar and comfortable while using it.
3
Accessibility was a priority in the design. For more information, please refer to the Accessibility Compliance section.
Design approach:
I began by creating a UI Kit that contains all the elements used in the design. I utilized all Figma features including: Components Styles Auto layouts Conditionals and variables for clickable prototypes This allows me to easily maintain a pixel-perfect design, make quick adjustments, and ensure responsiveness. I also ensured proper layer naming for developers to navigate through the screen and code without difficulty.
Features
Screens and features
Tasks
Calendar
Reminders
Accessibility compliance
Key Takeaways
Working on this project was a real pleasure. I was able to thoroughly work on the user experience using various frameworks. I really like the convenient implementation of the idea of responsible consumption: the application selects products for plant care based on the products and plants already owned by the user. I am also very pleased that we were able to meet the WCAG AAA requirements and make the design truly accessible.
Findings from the project:
1
Users want to simplify caring for all plants and minimize the number of products needed for care.
2
According to my survey, 27 out of 36 respondents are away from home an average of 20 days a year due to business trips and vacations. For them, it is important to be able to reschedule future tasks without disrupting the rest of the schedule.
3
It is important to set up analytics from the very first release in order to monitor user actions, the usefulness of features, and properly plan features for future releases.
Potential features for upcoming releases:
Joint Care: Linked accounts for families to care for plants together.
Some users also have gardens with outdoor plants. Consider adding outdoor plants and their care products to our database.
Use the camera to determine the brightness of the room and automatically decide whether the plants are receiving enough sunlight.
Think about creating a browser plugin with support for web push notifications.
Develop an app for Apple Watch to help users receive notifications and mark tasks as completed more easily.
