PlantPal - End to End Mobile App
Project Overview
With many phones now capable of viewing products in AR, I was interested in making a plant shopping app that incorporated being able to view available plants in one’s environment. During research however, the goals of the project changed due to participant’s responses in interviews and surveys, and the app’s scope broadened to include plant management and wellness.
Roles: Branding, UX research, UX & UI Design
Tools: Figma, Optimal Sort, Whimsical
Duration: 80 Hours
( *This project was a part of UX Academy’s curriculum. )
Design Process
Empathize - Research & Interviews
The app was originally intended to focus primarily on users purchasing & viewing plants in AR at home. Therefore, attention was paid to both AR plant apps that focused more on plant identification than AR placement, as well as AR interior design apps. Shortly afterwards users were surveyed and interviewed as well, to make sure the product would be of interest to people.
Competitive Research
6 apps were chosen to help get a feel of the state of commercial AR apps that are available to the public. 3 directly focused on plants and plant care, but none offered to view new plants in your environment, only diagnostic tools, cataloguing, and organizational help. Because of this, 3 additional AR apps focusing on interior design were chosen as well, since the primary feature of being able to place a plant in one’s environment when shopping for one fell more in line with interior design apps. Each of the 6 apps usually had a single feature the other’s didn’t, but researching some was limited due to rampant bugs or a subscription to access every available feature.
User Research & Interviews
A survey was sent out through OptimalSort’s system to gather feedback on users plant purchasing habits, and what they would like to see from an AR plant app. The responses were overwhelmingly interested in having help to care for the plant in some capacity, with twice the number of participants more interested in care than viewing the plant in AR while shopping. However because most said that how the plant looks (90%) and level of care (80%) were primary deciding factors when purchasing a plant, including the ability to view it in AR still seemed important. Users also mentioned their lack of confidence and knowledge when trying to diagnose their plant’s issues, so an additional “AR Doctor” feature was thought to be an important addition to address this need.
Four potential users were also interviewed over Zoom for a more detailed look at people’s needs with an AR plant app. Again, the interviewees reflected much of what was found in the survey, with primary issues in taking care of plants, as well as wanting advice both when purchasing & for later caring of them.
Putting the research together, it showed that:
Although users were interested in viewing plants in AR before buying them, they expressed greater interest for a plant help & care app.
Define - Feature List, Persona, and Information Architecture
Thanks to the surveys and interviews, I now had a clearer goal of what users were looking for in an AR plant app. A features list was created from responses gathered during research, and a persona generated from the most common characteristics shown by the respondents.
Persona -
Although each response to the surveys and interviews were unique to an extent, there were some overarching themes nearly every participant shared with one another that were able to be crafted into a persona. Each participant was not very confident in their plant knowledge, but still empathetic to their plants and interested in taking care of more of them.
Affinity Map -
To help add clarity to who I was designing for, an Empathy Map was created to figure out who Taylor Hawkins was as a person, & why she might be interested in using an app focused on plant purchasing & care with AR.
Task & User Flows -
Now with an understanding of what people are likely to use an AR focused plant application and what they are looking for, work began on the flows a user would likely take. The task flows were extrapolated from the research as being likely among the most common a user was to engage with. Because adding a plant to one’s “My Plant’s” tab/category would be straightforward, more detailed user flows were created for purchasing a plant, as well as using the AR doctor.
Ideate & Design - UI, Wireframes, & Hifi Screens
To have a clear path forward with UI & aesthetics, a mood board and style guide were created before work began on the wireframes of the application.
Mood Board -
Having never dealt with green palettes or plants when designing an app, I sought after imagery and related work online to develop a unique yet familiar experience to any users familiar with alternative apps. Specifically I was interested in getting images that had a range of greens that reflected the variety of greens found in plants. Then for neutrals, I looked to beige and greys to reference the colors of the pots or baskets of house plants.
Style Tile -
With a general direction of where to go stylistically, typography and the color palette were worked out of the mood board’s images, with the greatest inspiration taken from the interior design images. Sketches of the logo were then done inside a notebook before deciding on a font found during the creation of the mood board and a leaf icon. Then after figuring how listings, icons, and products will look, work could then begin on the app’s screens.
Low Fidelity Wireframes -
Wireframes were created with the idea users will go through the previously created task & user flows more than most when using the application. Attention was paid to how current plant care apps organize their pages, and how AR screens are laid out within interior design apps.
High Fidelity Wireframes -
After revising the wireframes for errors, work began on the high fidelity screens to be used for the prototype. Additional screens were completed to increase intractability during user testing, specifically for the beginning and ending screens of the user flows. Color, additional details, and sensible copy were added to bring the screens to a level of detail that would be consistent with an mvp version of the application.
Prototype & Testing -
With the screens brought up to high fidelity, work began on the prototype and user testing.
For the prototype, additional screens were created and components connected to allow the user to complete the assigned tasks through multiple paths (such as measuring light levels with the CTA or within the AR placement screen.) Because testing was done through Figma, users had trouble selecting the various tabs in the prototype’s footer during the first round of user testing. With this in mind, users were then given a new prototype link for each task that was to take place on a new tab. User feedback was generally positive, but still gave good insight on what could be changed in later versions of the app.
Click Here to test out the prototype within Figma.
Affinity Map -
User feedback was compiled into an affinity map to be used as guidance on future revisions to the budgeting feature. Feedback was easily categorized into general positives, pain points, and suggestions/improvements. User feedback was by-and-large positive, with good suggestions for edits and additions for future versions of the app.
Key Takeaways
As my first full end-to-end mobile app, it was a little daunting in scope & scale, but still informative and a good project to sharpen my skills. Honestly the most fun part was when it became clear that users were more interested in an app that helped them with the plants they already have, and I had to rework how the app was to function. However, getting to implement & study how to use AR within the app was also pretty interesting and fun, although when testing various AR apps to try and get first hand exposure to how it could be used, I had a wicked amount of trouble getting most of them to work inside my small apartment. Researching what all to do for the application also led me down into finding out a lot about interaction design, and has piqued my interest to study it more on the side as a designer. In the end, the project was good practice in branding & iOS design, and taught me both AR & interaction design for a mobile audience.