Client:
Gaia
Role:
UX/UI Designer, Researcher, Visual Designer
Project Type:
End-to End Application
UX/UI Design, Research, Branding, Prototyping
Tools Used:
Figma, Maze, Vectary
Year
2022
View Prototype
*This is a fictional project done as part of Designlabs UX Academy
ASTRA Mockup Laptop & Mobile
*This is a fictional project, consisting of fictional destinations.
*The following Background and Goal sections appear in the crawl in the video above.

OVERVIEW

Client: ASTRA
Project type: UX/UI Design, Research, Branding
Role: UX/UI designer, Visual Designer
Timeline: 12 weeks
Tools Used: Figma, OptimalSort, Maze
Background

IMAGINE ALL THE PLANTS

Everyone wants a beautiful lawn, and with the wide assortment of fauna and flora available today, people yearn to plant and display the most beautiful arrangement of plants that is aesthetically pleasing to them. However, it can be troublesome to know just how plants will look in an area without actually planting them and seeing how they grow. Also, the practice of focusing on aesthetics alone can be problematic in sustaining a supportive biodiversity of the land in which those plants are planted, which can seriously impact the local ecosystem.

The Problem

A BUDDING CONCERN

  • User's don't know how their plants will look within their gardens before actually planting them
  • Planting something that looks good may lead to a beautiful garden, but it may have an adverse impact on the local ecosystem
  • User's need a platform that can help them visualize and organize the layout of their garden whilst also providing essential guidance on how to manage and maintain their gardens in order to be more sustainable and aid the local biodiversity
  • To understand more about Biodiversity and the implications we face by threatening it, read this article by the WWF.
Project Goal

THE PLOT THICKENS

To help users better imagine and organize their layouts I wanted to create an app that would utilize AR technology to allow them to properly visualize how plants would appear in a space before actually planting them. I also wanted Gaia to be a garden management app with a focus on sustainability and having a positive effect on the environment. Incorporating a social aspect to this app was also part of my plan, so gardeners could compare their "Biodiversity scores" and also learn from other like-minded gardeners.
Design Process

AND, HERE. WE. GO

RESEARCH

DEFINE

IDEATE

HIGH FIDELITY & TESTING

ITERATION & PROTOTYPE

1
2
3
4
5
Research Goal
Competitive Analysis
User Interviews & Survey
User Persona
Empathy Map
User Journey Map
App Map
Task Flow
Wireframes
Visual Design
Scoring System
AR Camera
AR with Vectary
UI Kit
High Fidelity Wireframes (v1)
Usability Testing
Affinity Map
‍
Design Revisions
Prototype

RESEARCH

Research Goal

SOWING THE SEEDS

The purpose of research for this project was to find out what users expect from a garden management app, their views on sustainable gardening, and also how they felt about having an AR feature to help them visualize how plants would look before planting them. I also began to research the concept of biodiversity and how it can be calculated in regarding gardening along with whether or not exotic plants were any better than local plants for sustainability purposes.
Competitive Analysis

THE NEIGHBOURS LAWN

I started looking at various garden management apps, AR landscaping apps and tools. I wanted to get an idea of what was already available to users and how their features work, and how users have responded to them. In this, way I formulated what would I could utilize in my design decision process.
User Interviews & Survey

A MOMENT OF YOUR THYME

Just as a plant needs good fertilizer to grow, I required something similar but less messy for this project. I conducted user interviews with likely users who have a passion for gardening.
  • Most participants are attracted to gardening because they have a love for things that grow, growing their own organic produce and plants with medicinal properties.
  • Weeds are a common pain point for participants.
  • Having the ability to monitor plant health is an important feature participants would like to have access to in order to diagnose and treat diseases and pests that appear on their plants.
  • The ability to see how a plant looks in an area is an attractive concept as some participants are unsure whether plants will look and function well in certain areas of their garden.
  • Participants try to focus on companion planting in which plants can help each other do well which would mean less work for them.
To compliment the user interviews, I also created an online survey. Some key findings from that are listed below:
75%
Of participants are between the ages of 18-44
62.5%
Stated sustainability was important to them
62.5%
Consider themselves avid gardeners
40%
Have been gardening for around 6-10 years
60%
Would like to know the impact of their plants on the local biodiversity

DEFINE

Click to enlarge
User Persona

THE GARDENER

Using the information gathered thus far, and learning more about the mindset and motivations of current gardeners; I created a user persona, Lily, to represent the most likely target user for Gaia.
Click to enlarge
Empathy Map

A BLOOMING PERSONALITY

I then created an empathy map consisting of key findings and observations noted from the user interviews and survey in order to further flesh out Lily's persona.
Click to enlarge
Click to enlarge
User Journey Map

AN ORGANIC JOURNEY

Time for a little gardening. With my user persona well defined I proceeded to lay out a user journey map that captured Lily's thoughts and feelings while tending to her garden.
Click to enlarge

IDEATE

App Map

APP LANDSCAPING

Due to the time constraints on this project, I decided to focus on the camera, home page, and plant library sections. The community and profile sections would be fleshed out in later iterations.
Task Flow

BRANCHING OUT

With my hierarchy mapped out, I proceeded to come up with the most likely tasks user's would do while utilizing Gaia. I created 3 tasks outlined in the flow below and laid out the path they would have to take to complete them.
Wireframes

GARDEN FRAMES

I started to draw out idea’s of how the new profile layout would look, as well as the redesigned and newer pages within the User Settings section. As this was my my first time designing for an AR concept that would have various options and tools for the users, a good amount of my time was spent on coming up with different variants and concepts for that layout.
Visual Design

COLORS OF THE WIND

"You think you own whatever land you land on
The Earth is just a dead thing you can claim.
But I know every rock and tree and creature
Has a life, has a spirit, has a name."
- Credits for the lyrics from "Colors of the Wind" by Judy Kuhn
‍The inspiration for my app name came from Greek mythology, as Gaia is the goddess of Earth. I felt that was an appropriate name for an app emphasizing sustainability and biodiversity. The butterfly landing on the "g" was done to show the importance of pollinators.
Scoring System

THE BIODIVERSITY WREATH

To add to the theme and motivate users, I created the "Biodiversity Wreath" scoring design. The idea was that Gaia would analyze and track what a user plants in their plots and generate a score showing them how well they rated for biodiversity. The average score from all plots would then be used to calculate the users biome score.

To add motivation, I made the score into a wreath which would either grow and prosper, or wither depending on their score. Those that tend to have a passion for growing things and seeing them do well would definitely be driven to make their wreath as green and healthy as possible
AR Camera

FENNEL I SEE YOU?

Yes a bad pun, you should expect as much by now. The AR Section for Gaia was meant to host 3 actionable options; Free Placement, Create a Plot and Plot View.
  • Free Placement would allow a user to freely place a plant to see how it would appear in their garden.
  • Create a Plot would allow a user to create a section and outline it within their garden, thus allowing them to manage separate plots within their entire garden. Within this option the user would have additional options; "Free Draw", "Shapes" and "Input Dimensions" to help them create a plot.
  • Plot View would allow users to see their various plots that they've created within their garden, and from their either add a plant to the selected plot or go straight to that plot's page for management.
AR with Vectary

LAVENDER HUNT

Try it out yourself! To see how using AR to visualize and place a plant would appear, I utilized Vectary to generate a lavender plant in an AR setting. Utilizing the QR code will allow you to get an idea of what Gaia is attempting to achieve.‍
UI Kit

THE GARDEN SHED

I created many of my own components and graphics within Figma so that I could properly represent an aesthetic representative of nature and gardening. The components within the UI Kit below are the revised one after usability testing which I then utilized in my final prototype accessible below.
‍

HIGH FIDELITY & TESTING

High Fidelity Wireframe (v1)

SPROUT, SPROUT, LET IT ALL OUT

These are things I can't do without... I then proceeded to create a high fidelity prototype in Figma which I then utilized in my usability tests. The following is the unrevised version which I then iterated on after usability testing.
Usability Testing

TROWEL AND ERROR

To assess my design and concept, I conducted unmoderated usability testing of my high fidelity prototype with user’s on Maze and a few moderated tests in person. The main purpose of the usability tests was to:
  • Assess the overall usability of Gaia and it's features including the AR functions as much as I could implement them.
  • Note any difficulties user’s faced for further revision/iteration.
  • See how user’s felt regarding the concept and whether it solved the problem laid out at the start of this project.

GARDENER'S TASKS

  1. Onboarding and Plot Analysis
  2. Placing a Plant in AR and viewing the Plant page
  3. Scanning a Plant

‍

Affinity Map

WEED REMOVAL

Following the usability test, I compiled the information gathered into an affinity map.  Reactions and experiences were mixed but overall; the user’s were able to analyze a plots biodiversity score, scan a plant, and navigate the majority of the app with relative ease.

Trouble arose with locating the AR mode within the Camera in the bottom navigation, the onboarding experience and certain UI elements that seemed to have been bugged/glitched during the test.

"Biodiversity score wreath makes me want to put in the work to have a beautiful wreath with butterflies"

"Nice way to keep track and manage plants in a plot"

"Great front page with great visuals"

"Makes me want to see what else I can place in my garden"

WINS/STRENGTHS
  • Biodiversity score wreath seemed to motivate users as intended in order to grow their wreath.
  • Some user's found it easy to locate the AR mode and were eager to see how other plants would look.
  • Impressed with the level of detail and information on the plant page that was available to them.
  • Plant scan option was intuitive and straightforward and user's liked being able to access a plants page after scanning it.
  • User's liked having all their plots accessible and viewable to make management more easier.
WEAKNESSES
  • Confusion with how to access the additional modes within the Camera option in the bottom navigation.
  • Certain user's found that the onboarding didn't provide them with enough information.
  • Biodiversity analysis and plant scanning animations seemed too long to some users.
  • Certain UI elements were not functional which made navigation difficult to certain pages.
  • Inability to return to previous onboarding pages in the beginning.

ITERATIONS & PROTOTYPE

Design Revisions

MULCH BETTER

Taking the data gathered from usability testing, I proceeded to revise my design in order to combat some of the issues user's faced.
  • Redid the onboarding section and added animations showing the user what to do, where to go and how to achieve certain tasks. I also allowed users to return to earlier sections within the onboarding.
  • Added text labels to the bottom navigation.
  • Fixed various UI bugs in order to streamline navigation
  • Connected the prototype fully so that most sections were accessible
  • Added a "Help" icon to sections in the AR camera mode which would help user's if they were stuck
  • Decreased animation times on Biodiversity analysis and Plant Scanning.
Prototype

PROTOSYNTHESIS

With the feedback and suggestions from usability testing, and the changes I made to my high fidelity prototype; I created a revised prototype. My next step for this project would be to host usability testing for this prototype and get further feedback and see whether my changes were effective or not. The prototype can be accessed below!

MORE OF MY WORK

Responsive Interstellar Booking
ASTRA
Add a feature
LVL-UP
Responsive Redesign
DUNBAR PIZZA & INDIAN FOOD
© 2023   ZARAR HAFEEZ
Get in touch!