Foli Mockup.png

Foli

Using AR to buy plants.

Project:

UX Boot Camp Case Study

Timeline:

80 Hours

Role:

UX/UI Designer, UX Research, Branding

Tools:

Figma, Whimsical

Briefing

The project overview.

Shopping plus AR.png
 

The Stakeholder has a large catalog of plant products across many retail stores. They want to create an app that allows customers to shop through this catalog using augmented reality so that they can best pick out plants for their home or garden.

Research

Finding the focus of the project.

Foli-Research-Icons.png
 

Looking at competitors

No app seems to currently do specifically what the stakeholder wants, so I looked at two types of competitors. Those using plants with AR, and online plant catalogs that allow purchases.

The key strength across all apps was the clarity of information and intuitive functionality.

 

1-on-1 Interview feedback

After several interviews with plant buyers, it was clear that customers just want a convenient buying process with clear information so that the upkeep of caring for their new plant is as easy as possible. Beyond that, there were a few commonalities in the responses:

  • Low maintenance plants

  • Plants with certain sunlight needs

  • Recommendations

  • Plant information

Defining the User

User Persona

I used the research above to create a user persona that had all of the key traits that my interview participants shared with me.

Journey Map

I then elaborated on this information with a journey map to better understand the ideal flow of the user.

Information Architecture

Features List

Using my research, I then began organizing the key features I would need in this app. I used my journey map specifically to understand the best structure of the app.

App Map

Sketches

Wireframes

 

Visual Design

Making the brand and visual elements.

I got pretty far with my wireframes, but wanted to turn my attention to the branding and the visual design. I used my research to come up with keywords to influence my branding and visual choices.

 

Keywords and Mood Board

Keywords: Adaptable, Calm, Cheerful, Modern, Green, Dynamic, Efficient, Helpful, Sunny, Peaceful, Pleasant

Screen Shot 2021-03-14 at 8.35 2.png
Screen Shot 2021-03-14 at 8.37 2.png
Screen Shot 2021-03-14 at 8.45 2.png
Screen Shot 2021-03-14 at 8.44 2.png
Screen Shot 2021-03-14 at 8.42 2.png
Screen Shot 2021-03-14 at 8.39 2.png
Screen Shot 2021-03-14 at 8.40 2.png
 

Colors

Frame 8 (2).png
Frame 9 (1).png
Frame 12 (2).png
Frame 11 (4).png
Frame 10 (1).png
 

Brand Name Ideas

Sereen, Greeny, Grennar, Greener, Plnt, PlantAR, Foli, Plntr, Plant Match, Plant Pick, Pottar

Final Choice: Foli

 

Logo and Typography

 

UI Design

The UI design essentially combined my style tile and the wireframes with small adjustments to stay true to my research. My users want an app thats very clean and easy to navigate. I built out 22 screens and made minor style adjustments as I went along. Below is a selection of those different screens.

 
 

Prototype Testing

 

I created a prototype with my UI design in Figma to use for testing with prospective customers. I made sure to build out the functionality that users would need in order to follow the user flow outlined in my Journey Map. The prototype starts at the login screen and allows a user to search and buy a plant.

foli-proto2.png
 

Testing Feedback

I conducted usability testing with 4 plant owners (and prospective customers) and organized their feedback into an Affinity Map. Overall the feedback was positive regarding the UI’s design, but there were some issues with the AR interface. The main changes needed were essentially making that feature much more intuitive.

 
affinity map2.png

Changes based on feedback

 

I went back to redesign the AR screens, and I also made more of them to clarify how it would function. I started with having the user setup the camera so that they would have a basic understanding of how the feature worked, and then I added more labels and buttons to increase the functionality.

AR On (2).png
Frame 3 (6).png
 

Reflection & Next Steps

Foli’s design has been successful in making users feel that they would be better equipped to pick out the right plant for their home or garden. This app is now ready for stakeholder review and then development.

Designing this app showed me that there are still opportunities to create apps with new things to offer customers. I also found that the design process was mainly a search for the simplest solution. All the revisions I would make to the design and functionality centered around making things easier to use and easier to read. In the future, I will try to save myself some time and start as simple as possible.