UI-Isometric-Monochrome-Presentation.jpg

An AR App for Gardening

UX Design Case Study for An AR App for Gardening

 
An AR App for Gardening.jpg
 
 

Evergreen: An Augmented Reality App for Gardening

 
 
  • Role: UI/UX Design (Research, Interaction, Visual Design)

  • Challenge: Design an app that allows users to view a catalog of plants and place them in their garden via Augmented Reality.

  • Client: Evergreen - a gardening app

  • Timeline: 80 hours over 2 weeks.

 
 
 

Scenario

Evergreen is a new app for gardening design and they have partnerships with a number of top 10 gardening stores in the U.S. Evergreen is currently scanning all the catalog items featured by these stores, as well as setting up processes to keep their catalogs updated. 

Problem

  • Evergreen is trying to embed AR technology somehow but the user experience is not quite there. 

  • Evergreen needs to find the right usage for this new technology and bring it to customers by solving a problem that they encounter.

 
 

Project Goal

  • Design an app that allows users to select any type of plants (e.g. small flowering plants ) and see it in augmented reality through their smartphones. 

  • Design the app to be able to handle more complex plants in the future.

 

My Design Process

 
 
 
 

Empathize

As usual, I started off the Empathize phase with Secondary Research to analyze the gardening industry to know how users buy the plants and decorate their garden. Moreover, I wanted to identify how AR/VR is being used for enhancing a shopping experience. 

Research question I would like to explore: 

  • What are gardening trends currently in the market?

  • How do users select plants for their garden? Who shops for gardening supplies online?

  • Which companies are currently using AR/VR to enhance user shopping experience.

  • Which challenges did users face when they decide to choose a plant/flowers etc for their garden?

The research reveals that the highest spending for gardening was among Baby Boomers, married households, those with annual incomes of more than $75,000 and college graduates – but the most important market force was 18- to 34-year-olds. 

 
 
 
 

Competitive Analysis

Next, I conducted competitive research with gardening design apps as well as horticulture apps to analyze the strengths & the weaknesses of Evergreen competitors. This analysis helps me define a niche market for Evergreen app. 

 

Initial things to keep in mind from Competitive Analysis

  • There is still a limited number of VR/AR gardening apps to enhance user shopping experience.

  • Most gardening design apps do not allow users to access user camera for AR/VR. Users only add their images and customize the product from the app.

  • Most apps for gardening have limited selections of plants, trees, and flowers.

Primary Research: One-On-One Interview

Before carrying out the interview, there are a few assumptions coming to my mind based off my secondary research that I would like to validate after an One-On-One Interview. 

  • Users want to physically visit the store to choose the plants.

  • Users want to have access to plant specification and gardening while they go shopping in store and online.

  • Users feel better to see the plant in store before making a purchase

  • Users want to know the size of a plant in the next 10 years or 20 years before deciding to place the plant in their gardens.

To prepare my 1 on 1 interview, I drafted user interview plan to recruit the right users. Due to the time constraints, my focus was to recruit people who are from 20-40 years old, love gardening and decorating their outdoor living space. 

Empathy Map 

An empathy map is where I gather information and put them on post it notes which I, then, organize. In particular, I placed them in 4 quadrants: Doing, Thinking & Feeling, Seeing & Hearing, Saying. This helps me find user insights which I then extrapolate to find user needs.

 
Empathy Map for User Interview.png
 

User Persona

In order to develop a typical Persona that depicts the average audience member, I looked back over the Insights, the Needs and the Pain Points from my Empathy Maps. This Persona also highlights the major needs of the most important user groups so that they can be addressed. 

 
 
 

Define

POV Statement & HMW

The define mode is critical to the design process because it explicitly expresses the problem I am  striving to address through my earlier research. Take the insights and needs from my empathy map and persona, I translated them into Point Of View statements and then How Might We questions. 

 

Brainstorming 

I selected each HMW question and thought of as many solutions as possible, I then jotted each idea down on a post-it-note. After spending 30 min brainstorming, I looked back at my notes, prioritized, sorted and refined all of my solutions that I had come up with. 

 

Define Business Goal & User Goal 

To help focus my project objectives and priorities, I defined where the business goals and user goals overlap. I read over project goals and user data that I had synthesized from primary and secondary research. Ultimately, I combined them with technical consideration to articulate the business goals in the diagram.

 

Product Roadmap 

After defining the shared goals, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Product Roadmap shows not only these goals, but also features that I came up with during the brainstorming process. Also, I added metrics to gauge the impact and effectiveness of such attributes on the app. 

 

App Map 

I organized the features and content architecture based on the priorities of the product roadmap. Then I mapped out the site map to show the relationship within the content on the app.

 
 
 

Ideate

User Flows

I created the user flow to identify the different paths that target users would take through their product to complete each task. According to the research synthesis and product roadmap,  I came up with four scenarios for Helen when she chooses the plants for her garden, how she receives realistic advice about gardening techniques and how she can enhance her gardening skills. 

 

Task Flows

 

Sketching Low Fidelity Wireframe 

Again referencing the user flows and task flows, I sketched screen designs for each keyframe and included annotations.  I focused a few main screens for the augmented reality feature.

 

Mid Fidelity Wireframes

Working from my lo-fi wireframe, I started to sketch the main mid fidelity wireframes. The set of wireframes show the pages where users can place their desired plants in their yards . It also shows how they can measure the tree in AR View and estimate the size of the plants in the next several years.

 
 
 

Prototype

Before moving forward to visual design and high-fidelity wireframe, I needed to examine my initial design assumption. To prepare for usability testing, as always, I uploaded all pages to Marvel and created clickable prototype for usability testing. This lightweight prototype helped me test the product problems faster before going to high-fidelity mockups.

Click within the prototype below to explore and interact with it.

 
 
 
 

Usability Testing

Usability Testing Plan & Conduct Usability Testing

I created a test plan based on Erika Hall’s method to help me test the usability, the functionality, and the problems of the Evergreen app.  

I facilitated the usability testing to encourage the participants to do and to hear what they are thinking and observed to see the app through someone’s eyes and understood why some things that are obvious to me are confusing or frustrating to users. 

Task 1:  Use the app to see how the Green Tree will fit your garden in the next 10 years.

Task 2. Find a detail of a gardening course which you are interested in.

Task 3: Assume your tree contracts a disease. Use the app to ask for advice.

Overall findings showed that there were many errors due to the placement of "Ask a horticulturist", and unawareness of the “Place Icon” at the bottom of AR View.

Affinity Map

Creating Affinity Map is to help me improve my design by defining the problems and suggesting the solutions. I generated sticky notes to write down my observations each on one sticky note. Afterwards, I organized the notes in groups to find the patterns which came to the insights. Eventually, I prioritized each note to determine the recommendations in the next steps.  

 

The Affinity Map revealed the following insights:

  • Most participants tried to find "Ask a Horticulturist" in the “Garden Center” page.

  • Most participants were not aware of the place icon at the bottom of AR View.

  • Most participants skipped the onboarding page to the homepage.

  • Most participants were not aware of the AR Icon at the top of the page.

  • Most participants misunderstood the meaning of the AR icon.

The insights led to several recommendations to solve the user problems going through given tasks:

  • Move "Ask a Horticulturist" to the “Garden Center Page".

  • Create a "Place Icon" button near the tree so that the users can easily recognize it and know how to place the tree in the yard.

  • Cut down the number of onboarding pages and only highlight the key features of the app.

  • Place the AR icon at the bottom navigation bar.

  • Recreate the Icon and add a description underneath so that users can understand the meaning of this one.

User Interface Design

Visual Design

Moving into developing the branding visual design for Evergreen, I wrote down a few keywords that are also suitable for target audience's preferences along with business objectives: Natural, Connected, Creative, Peaceful. I then worked on the style tile, trying out colors and approaches in my wireframes to see how they might work in context.  I chose a natural color palette to apply across the app, I picked green color representing the connection with nature, while using Chinese Red to convey the color of the land.  I initiated my style tile that consists of typography, color palettes, images and logo examples on black, white and colored background and to different scales.

 

Iteration & Updated Prototype

 
 

High-fidelity Wireframes

Based on insights and recommendations from the affinity map, I elaborated a  set of revised high fidelity wireframes. These showcase how visual design applies across the site.  The following are the three main design changes I made based on the recommendations from the Affinity Map

 

UI Kit

To keep consistent across the site, I created a UI Kit that consists of all elements from the Icon Set, the Navigation, the How logo that is scaleable in different sizes, the card feature, etc…

 

Updated Prototype 

I used Marvel app to upload all revised wireframes and used hotspot to create the clickable wireframes that offers another opportunity for user testing before going further with the design and implementation. 

 

CLICK WITHIN THE PROTOTYPE BELOW TO EXPLORE AND INTERACT WITH IT.

 

Next Steps

  • Given more time on this project, I would roll out more features in the wireframes such as allowing users to add multiple plants in user gardens, the customization tools enabling users to duplicate the tree, and the four seasonal looks of each plant.

  • Test: Conduct Usability Testing on Revised High Fidelity Wireframes.

  • Iterate: Analyze the user behaviors and define their problems when they interact with my revised design. Based on feedback from my evaluation, I will iterate my design work to solve the highest level issues.

  • Deliver: create documentation to hand off to engineers and produce the MVP for market.