The Project

As a plant owner myself, I have often struggled with knowing or remembering to complete the proper care tasks to keep my plants healthy and growing. I also love sharing photos of my plants, asking others for advice, or seeing how others grow their plants. However, there is not an easy way to find other plant lovers since indoor gardening is so often a solo activity. I set out to create an app concept that would help plant enthusiasts communicate with one another while also providing information on how to care for the plants you already own.

Accessibility Considerations

Accessibility is an essential consideration throughout the entire design process. By considering the needs of individuals with disabilities or different needs, we can enhance functionality and design for all users. Throughout my entire process, I wanted to ensure I was thinking of a diverse and inclusive user base that would allow me to create a design that was effective and enjoyable to use for everyone.

Through reading, listening, and my college education, I have gathered knowledge on the need for and how to implement accessibility and inclusivity into the design process. To see research findings and how I incorporated accessibility and inclusivity into this and other designs I have created, please view my blogs here.

1. Research and Empathize

Primary Research

Qualitative Data: Interviews

Two rounds of interviews were conducted with participants that were similar to the intended audience of Leaflet including users who use assistive devices.

Through these interviews, I was able to gain a deeper understanding of peoples’ feelings about plants, methods of care, and problems that they encounter.

Affinity Map

To establish underlying themes and trends from the information gathered, I organized the data in an affinity map.

Significant themes that were observed involved frustration of understanding and remembering care tasks, time consuming and inaccurate information searching, and the inability to ask experts or other plant owners about plant health.

Levels of Commitment to Care

There is a wide range of expectations from individuals of how much time, effort, and money they would like to invest in houseplants. All levels of commitment must be taken into consideration throughout the designing process. This will change what types of information are shown immediately and how much detail can be acquired through additional steps.

Quantitative Data: User Surveys

Secondary Research

I conducted market research and a literature review to study available resources for plant owners. By leveraging existing research, I efficiently accessed a large participant pool, unveiling trends and identifying the needs of plant owners.

Competitive Audit

A competitive analysis was completed to get an understanding of other resources’ strengths and weaknesses to help me find a gap in services and uncover popular market trends. I evaluated other applications based on general information, first impressions, interactions, visual design and context.

View my full competitive audit here

Empathy Map

To understand user goals and needs, I created an empathy map to organize my data in a way that keeps the user as the main focus.

02 Define

Research Insights

By analyzing data from surveys, interviews, and secondary research, I formed key insights to help guide the project.

Design Implications

User Personas

I created 4 personas to understand the challenges, goals, and behaviors of users while putting an emphasis on empathy. A primary persona was designated, however secondary personas were included to ensure a wide range of potential users experiences, lifestyles, and expectations were considered throughout the process. I continued to update these personas as more data was gathered.

User Flows

During the research phase, users consistently expressed concerns regarding both efficiency and specificity. To address these concerns, I developed three user flow diagrams to visually represent the user experience. This approach enabled me to identify areas of friction, explore potential solutions, and maintain a user-centric perspective.

Proposed Layout for Leaflet

At this point, I created a flow diagram to help establish how Leaflet may be organized. This helped me establish where various functionalities and pages may be located throughout the app. Throughout my process and further user studies, I continued to adjust this diagram to match user needs and optimize efficiency.

03 Ideate

Completed Throughout Ideation:

Sketches

When completing iterative sketches, I continued gathering user input and was aware of accessibility needs to design an intuitive and efficient app.

Crazy 8’s, S.C.A.M.P.E.R., and other methods helped me to improve the design with each iteration while thinking outside of the box in a quick and efficient manner.

Usability Testing Design Implications

Mid-Fidelity Prototype

I used my sketches and information gathered from various usability testing and user feedback to guide me as I transitioned to mid-fidelity wireframes on Figma where I created a working prototype. I used Maze metrics to gain a deeper insight into my user’s actual engagement with my design.

Maze Metrics

I utilized my sketches and information collected from usability testing and user feedback to steer me towards mid-fidelity wireframes on Figma. These wireframes served as the foundation for creating a functional prototype. Additionally, I employed Maze metrics to gain valuable insights into the actual engagement of users with my design.

High-Fidelity Prototype

After analyzing all feedback gained from user testing, I made changes regarding button placement, layout of care tasks, and other minor adjustments. From there, I created a UI Kit and style guide to be used throughout my high-fidelity wireframes. Typography, colors, buttons, icons and a logo were chosen and created that represented Leaflet.

Typography

I chose standard fonts used throughout IOS devices. Font size and thickness was chosen to help with accessibility throughout the design.

Color Palette

Two shades of green were chosen as primary colors along with a blue for accent. A dark grey was chosen as the main text color rather than black to help users avoid eye strain while using Leaflet.

Buttons

Various buttons were created and tested with users throughout my design process. Using information gathered through user testing and research for the best designs for accessibility, a simple solid colored button with minimal drop shadow was created. Establishing these components early in the design process helped me maintain continuity within my design.

Cards

Cards were created keeping key rules of design, information from user studies, and knowledge of human perception in mind. Various iterations were created and tested through user testing. Adjustments were made and final designs were implemented.

Sneak Peak into my Throught Process:

While moving through my design process, I wanted to ensure I had a reasoning behind all of my design decisions. I used my psychology knowledge, user research, and secondary research to create designs that were intuitive and easy to understand, yet aesthetically pleasing. To give an idea of my process, below I documented my reasonings, thoughts, and steps completed while creating one of the many components within Leaflet.

From previous user interviews and research, I learned that when searching for a plant, users...

• Recognize and care about a plant's appearance the most
• look for light requirements to see if it will work in their environment
• have varying levels of knowledge and commitment that they are willing to provide

Because of this information, I did not want to provide only the name of the plant when users get search or recommendation results. First sketches of what this could look like included a photo and various bits of information that were provided without viewing the full plant page.

High Fidelity Components

Although this design helped emphasize the plant name, this component was large to hold the plethora of information. This created a convoluted page that could not hold many results at once. I wanted to ensure my design did not require my users to use large amounts of short term memory to compare between plants. I decided to create a smaller component for this reason. Two variations were finalized that could be used in different locations within Leaflet.

Final Designs (primary)

Final Design (Secondary)

Final Prototype

The final prototype for the UX design was thoroughly tested with users to ensure a seamless and intuitive experience. Its design elements were refined and optimized to deliver a product that met the user's needs and expectations. Click the ZoomNextImage below to view the interactive prototype.

Prototype Validation

After the prototype was created, I tested it on 5 users. I made a research plan where I outlined research goals, main questions, key performance indicators, methodology, information about the participants, and a script with tasks to complete. Mainly, I wanted to ensure that the process of searching for, exploring, and finding plants is smooth without any friction, leading to the correct plant being saved and that later the user knows when and how to care for the plant. This was tested and performed in-person using Figma’s prototype mirror share app.

After the usability study, I asked the participants to complete a short System Usability Scale questionnaire.

Accessibility Check

Throughout the process of creating this app, I researched accessibility requirements and suggestions. I kept this in mind as I created each frame and interactive component. After completing the full prototype, I reviewed each frame and evaluated for color contrast to match AAA standards, font size, ease of navigation when using devices such as a screen reader or keyboard, and other accessibility measures.

User's Memory

Memory is an important mechanism that can help or hurt a user’s experience. The more options that people get, the more distracted they may be with various associations they think of. Although it is important to give user’s the necessary information, overwhelming them with too many options may be more than the user’s working memory can process. Because of this, I designed with this in mind using various strategies to help.

Take-Away

With this being my first time completing the full design process from start to finish, I spent many hours researching and reading about various topics including accessibility needs, navigational ideals, good UI practices , and how to present my findings to other team members, stakeholders, or developers. I used all of this information to develop a product that is focused on the user and is based on research.

Some of the key things I have learned throughout the process are:

1. Research is essential: Before I began designing the app, I spent a lot of time researching plant care and the needs of plant owners. This research helped me identify key features and functionality that would be useful to users, and also helped me identify pain points that needed to be addressed in the design. Although I completed many user studies and other forms of research, effective research can be completed with limited time and resources. My extensive background in research helps me develop a research plan and analyze data to give meaningful information about usability needs.
2. User-centered design is key: As a UX designer, it's important to keep the user at the forefront of the design process. This means constantly iterating and applying knowledge of the user rather than focusing on my personal feelings,preferences, or assumptions.
3. Simplicity is key: Users don't want to be overwhelmed with too many features or too much information. It's important to design an app that is easy to use and navigate, with a clean and simple interface.
4. Visual design is important: While the functionality of the app is crucial, the visual design is also important. A visually appealing app can help to attract users and keep them engaged. It's important to use a consistent color scheme, typography, and layout throughout the app to create a cohesive and professional look.
5. Collaboration is key: As a UX designer, it's important to work closely with developers and other stakeholders to ensure that the design can be implemented effectively. Although I worked alone on this project, I often discussed my design ideas with software engineers and developers to help me receive feedback on feasibility and investment that would be required to complete my designs.

Moving forward, I want to take the knowledge I have gained from this project and apply it to future endeavors. There are several more ideas I want to implement in this app, and as I continue to learn and grow, I would like to add them and continuously test with users. Although my process involved completing as many empathy and brainstorming exercises as possible to learn and grow as a UX designer, I will take my knowledge of what worked, what was less effective, and what I would like to adjust to create a quicker and more efficient path to finding a design focused on users and their needs.