PlantJournal
A note-taking and health-tracking app for gardeners and hobbyists.
ROLE
As the sole UI/UX designer, I researched and identified user needs, conducted interviews with the target audience, and built an interactive prototype, which I then used to conduct user testing.
OBJECTIVES
A high-fidelity interactive prototype of a note-taking and health-tracking app for plants. The goal was to design for the needs of gardeners of all levels of expertise. The scope of this project was limited to an interactive prototype.
CHALLENGES
Identifying the needs of both experienced gardeners and newer hobbyists, implementing the required features was challenging. It was also challenging to arrange the visuals of the prototype to be pleasing and align with the planned visual identity before the deadline for user testing.
OUTCOMES
A high fidelity interactive prototype developed through iterations of design and constant feedback from users and peers. Both the visuals and the features of the app were validated through interviews and tests with users within the target audience.
Overview
This project targeted the problem of people having difficulty taking care of plants. The solution chosen was an app that would track the plant's health and offer suggestions based on the information and the species. This way users could enjoy the freshness and benefits of owning plants with half the work.
Based on the above, my target audience for this project could be defined as experienced gardeners, junior gardeners, and hobbyists who are interested in expanding their hobby.
User Interviews & Color Scheme
Starting off, I conducted interviews with peers who were gardeners or owned and worked with plants. These interviews were focused on their experiences with owning plants, features they might look for to make it easier, challenges they face with using phones during the process. The insights from these interviews were used to decide the visuals and the screens to focus on for user testing.
The colors used, and an example screen showing them in use.
These were the colors chosen to be consistent across all visuals. They were chosen to be dark as one of the challenges faced by the target audience is glare from phone screens. Due to glare, users often have to brighten their screens, which can strain their eyes when the screen is white, or another bright color. As our users are expected to be outside in the sun often, they would have to increase their screen's brightness often. The darker color scheme ensures that the app does not place strain on their eyes. The colors chosen are also green to match the idea of plants.
Process & Features
After collecting the insights from the interviews and deciding on the colors to use throughout the prototype, I made the first few screens needed with constant feedback and iteration from peers and users. The colors remained largely unchanged but the layout went through many changes.
The images of a screen from its first iteration to its latest iteration
The feedback consisted largely of the layout and iconography being used. The above image shows how feedback on the bottom bar being too crowded was fixed. Initially the idea was for random vectors to represent the plants saved by the user as well, but tests showed that users would often get confused by that and so they were changed to be actual pictures of the plant that the user would be encouraged to take.
The interviews with the users also gave me insights into what features would be beneficial to users of the app, and so what features I should focus on prototyping first. After learning their struggles, I settled on prototyping three main screens first: one for saving and navigating saved plant profiles, one for navigating saved notes or logs, and one that uses saved information to show the plant's health and well-being. On top of this, I also made a screen for the signup and login for quick feedback.
All the screens made for this project
The range of the thumb and the curve leading the eye as they were used on the plant information screen
The plant information screen shows how the eye is naturally lead through all the pieces of information using a curve that is also pleasing to look at. This screen also accounts for the user's thumb range, placing the button at the part of the curve where the user will be able to press both the exit and the notes button easily. There was an issue during testing where the notes button, initially having been on the right hand side, was hard to press intentionally, and often was pressed accidentally by the inside of the user's thumb. This was horrible for the user experience, and so it was changed to be the left hand side, where it could naturally be fit as part of the curve.
The inspiration for the layout of the forum page came from Pinterest.
The Forum screen is the screen with posts from other users in the community either asking for help or showing their own plants off. Immediately the first problem becomes apparent: differentiating the two easily. For this purpose the tags at the top right corners of the posts were used, with differing degrees of seriousness. The layout was greatly inspired by Pinterest, and it was also used so as to show more posts to the user at once. This, in conjunction with the visible tags showing where help is required, made it more likely that users would see and aid others that needed help. The layout was also well-received by users.