User Experience Designer
Sprout
Enhancing emotional attachment between gardeners and their plants through our paired mobile app and physical device.
https://teamtopiary.weebly.com/
Project Description
Sprout is a mobile-based tool aimed to help plant owners feel more connected with their plants. With the help of a physical monitoring device, the app receives health metric data about the plant and gives personalized care recommendations so users can take better care of their plants and also supports a variety of features such as community posting, a plant encyclopedia, and a way to journal and keep track of your plants growth.
​
Duration: 10 weeks in Spring 2018
Team Members: Javad Goudarzi, Monina Nepomuceno, Gina Gross, Alex Harr
Tools: Whiteboarding + Sticky notes, Sketching, Figma, Lucid Chart, Sketch
​
Research
"Plant's can't talk, so they don't tell you what they want."
​
Our research on this user group consisted of each team member facilitating an interview from a member of our user group and conducting competitive analysis on an existing product that provides some of the same features we aim to incorporate into our project.
​
>Here is my detailed report of my user interview
>Here is my detailed report of my competitive analysis
​
User Personas & Journey Map
Using the findings we made from our research, we created user personas to represent archetypes of our user group. The user personas were created to guide us and ensure we put our users first in every stage of the design process.
Sketches
Originally, our concept for our design was mostly for our app to assist in the plant care process. Given how incredibly broad this goal was, sketching interface designs really helped in narrowing down ideas and helping the good ones rise to the top.
Information Architecture
We created our sitemap of our design using Sketch after designing and sketching ideas of what we want our app to do. This allowed for us to create a hierarchy of the features our app and physical device would include.
Paper Prototypes
Using the hierarchy of our information architecture map, we were able to create our first prototypes of the project. We created paper prototypes that represented three key tasks of our app. We chose paper prototypes given their incredible efficiency, low production cost, and usefulness in testing and getting feedback on how to improve our system. The three tasks we chose to represent were:
-
Initial set-up and account creation
-
Add a plant
-
Open a plant profile and view associated sub-tabs
​​
Annotated Wireframes
After completing our user testing of our paper prototypes, we proceeded to create higher fidelity wireframes of every screen our app will support using the feedback we received. We created our wireframes using the Figma software and added the annotations using google slides. We created annotations for each wireframe, to explain what each screen achieved. We then did critique in class to receive feedback from our peers to improve them for the final iteration of our product.
​
> Link to the complete annotated wireframes doc
Below are a few wireframes I personally made:
Physical Device
As part of our project, we also created a companion physical device that syncs with our mobile app. The device is a plant assistant device, and collects live health metrics about your plants, including: pH, temperature, and moisture. It sends these metrics back to the app for the plant you have a device connected with, and provides care recommendations based of the data and illustrates your plants overall health to assist novice gardeners in the difficult growing process. In our team, I was responsible for rendering our physical device, which I did through a hand drawing that is displayed below.
​
Included Features:
-
LED light that indicates the general health of the plant. Green signifies good health, yellow signifies OK health, and red means that your plant is unhealthy and in danger.
-
Front side includes a screen where the metrics are displayed, for users to be able to view the metrics immediately while gardening outdoors.
-
The backside of the device includes a solar panel, which it uses as its energy source and ensure that you are completely environmentally friendly while gardening!
​​
​​
High-Fidelity Mockups
Using the feedback we received from our wireframes, we proceeded to make high-fidelity mockups of a few key screens from our app, including the dashboard, discover page, and two plant profile pages. We created these mockups in order to visualize what the final product would look like. We chose a light but vibrant green as the main color of our app to be playful, inviting, and match the plant-based theme of our app. Our goal with the app was to be able to convey important information in a clean and easy-to-understand manner so users understood how to take care of our plants. Another goal was to provide emotional attachment between users and the plants, which is why we included features such as personal photos of the plants and adding nicknames so we can help the foster a closer bond.
Here are three sample screens from our high-fidelity mockups, including the discover, dashboard, and plant profile overview pages.
​