Despite the rapid growth of the U.S. hydroponics market, many plant enthusiasts struggle to effectively manage and optimize plant growth in hydroponic systems.
An innovative hydroponic education app can bridge this knowledge gap, empowering individuals to successfully engage in hydroponic gardening, reduce their food costs, and better understand and utilize plant monitoring tools for future generations.
This project was a final group assignment for my ArtCenter Course on "Intro to Interaction Design" led by John Deyto.
An ex-filmmaker, a marketer and a visual designer walk into a room.. to build a hydropics education app! Each of us leveraged our experience to push the project forward and over the finish line in less than a month!
May (me!):
- Project coordinator
- UX researcher
- Visual design lead
Taylor:
- Project manager
- UX researcher
- UI designer
Renee:
- Information architect
- UX researcher
- UI designer
Collaborating across 3 people means getting on the same page about how we want to solve the problem.
We used Figjam to dissect the prompt into key ideas and talked through what we thought the core loop should be and what kind of audience we wanted to impact.
Core Loop:
- Physical sensor collects data -> farmer view sensor data on app -> farmer makes decision
Possible users:
- Local distributers
- Traveling truckers
- Private Homes/ HOAs
- Schools with gardening/sustainability programs
Although we discussed targeting hydroponic experts, we soon realized our access to them were minimal and our project timeline was too short to seek them out.
Instead, we pivoted to interviewing folks in our network who were familiar vs. experts with hydroponics.
Our research within our own networks, plus that of Reddit, signaled that folks wanted an easy way to track data on their produce while also learning more about how to maximize their yield.
Our decision based on research:
Users want to learn how to be better at hydroponics.
Rahul, an ambitious aspiring restaurateur aiming for international acclaim, is committed to incorporating hydroponic cultivation into his culinary practices.
By utilizing this innovative approach, he plans to implement farm-to-table concepts, ensuring a consistent supply of fresh Indian herbs and vegetables for his dishes.
Rahul's vision and dedication exemplify the transformative potential of our hydroponic education app, highlighting its value in fostering cutting-edge practices and culinary excellence in small businesses.
We used "as a user" statements and post-it notes to clearly define the user experience and the core functionalities of our app.
This exercise allowed us to allocate specific design tasks to team members efficiently, ensuring each screen was crafted with a focused understanding of user needs.
The Loop:
- Sign in as a student > view all plants > detailed sensor view
Lo-Fi Design Homework:
- May: sign in, dashboard, plant overview page (greenhouse), pH & lumens screens
- Taylor: EC level data and water depth level screens
- Renee: Temperature data screen
To ensure our mobile app effectively displays crucial plant data, we began by sketching a sensor prototype to capture this information accurately.
Sensor considerations:
- how many per plant?
- how much would it cost?
- how would they be identified per plant?
We realized from our hydroponic research that the sensors would not be placed in dirt, but in water baskets so our hardware needed a second iteration after these initial sketches. 🫠
Data captured by sensor:
- moisture levels
- pH
- temperature
These initial sketches, paired with lo-fi wireframes of our app, allowed us to visualize how users would interact with and benefit from real-time data on their plants' health.
This process informed the app's functionality, ensuring it meets user needs for monitoring and optimizing hydroponic cultivation.
Consistency across the app is important, especially when working with multiple team members.
To establish a scalable and efficient design system, I chose the modern Poppins typeface and a natural color palette of blues and greens to define our app's brand identity.
Collaborating with Taylor, we developed reusable components to streamline the design process, ensuring consistency and ease of updates.
Key System Features:
- Created shades of the brand green for cards, button colors and backgrounds
- Created a small typography scale for headers, subtitles and paragraphs
- Reusable components: Cards, progress trackers, and status icons
View our presentation here.
Check out the prototype here.
In the final stage, we developed a clickable prototype that showcases the core loop and final frames of our app, emphasizing its user-friendly interface and functionality. This took a couple of iterations after our initial lo-fi designs.
Here are some changes we made:
- Limited the amount of green/color (trust me, there was green everywhere before)
- Implemented auto-layout for consistent margin around the app itself
I know that school work doesn't quite equate to "real world experience" due to lack of constraints/risk. But here's what I think we'd need to consider if we were to actually launch this product:
There's a handful of work to be done if we were to launch this live. Let me know if this would be something you'd be interested in actually using something like this! 😉
In the meantime, you can view our final presentation with the below.
Group projects are not scary when you have great teammates 💪🏾
The best way to learn is to teach others. Helping each other learn how to leverage Figma features like components and auto-layout is key 🔑
Everyone has strengths and weakneses. As long as we can be open and honest about this, we can learn to fill the gaps as a team to achieve our goals. 🌟
Organize SproutEd dashboard to list red/yellow status sensors/plants first for easier user recognition and actionability
Ensure consistency across the platform with proper icons for related topics (ie. book icon for plant courses)
Build out sort/filter functionality. What does this look like? What will users need this for? Additional research required for this.
