Neatleaf
An AI-powered platform designed to improve the health of plants in indoor and greenhouse cultivation environments.
Roles
UX Designer, IxD Designer, UI Designer, and Visual Designer.
Deliverables
One-on-one interviews, user flows, low-fidelity wireframes, high fidelity mock-ups, and interactive prototypes.
Tools
Figma, Balsamiq, Miro, Photoshop, and Illustrator.
The Team
1 data scientist, 1 engineer, 1 annotator, and Neatleaf's CEO.
Timeframe
6 months
Overview
Neatleaf combines AI robotics and human annotations to offer cultivators valuable environmental insights, enabling them to optimize their plants and achieve maximum crop yields.
After operating an MVP for two year, it became imperative to develop Neatleaf 2.0 and expand the customer base with enhanced value propositions. This strategic move aimed to secure an additional round of funding by reaching a specific target number of customers.
Problems
Neatleaf's initial app version encountered several design issues, and although it provided valuable insights, customer engagement with the app itself remained low. It was crucial for us to investigate the reasons behind this and identify any potential missing features that could significantly enhance engagement levels.
Solutions
In addition to a comprehensive design overhaul of the app, we introduced the concept of a home page that displayed "at-a-glance" plant insights, that could be conveniently viewed within the grower's facilities, on a wall-mounted tablet. This strategic approach aimed to generate user engagement with the app by leveraging the proximity to the plants, rather than solely relying on engagement through a browser.
Mock up of Neatleaf's "at-a-glance" feature on a iPad.
By minimizing clicks and maximizing insights "at-a-glance", we could offer significant value and increase engagement right after login.
Research findings
Considering Neatleaf's unique application, we recognized the importance of seeking inspiration from solutions addressing similar individual user interface components rather than directly analyzing the competition.
Customer surveys revealed that the at-a-glance weekly emails, summarizing insights, provided the most value to users. However, many customers expressed a preference for accessing insights without necessarily navigating through various sections of the app.
Through one-on-one interviews, we identified several pain points in the initial iteration of the app. This feedback emphasized the need for a more intuitive design that could deliver insights and value to users with minimal clicks.
Understanding the journey
Users expressed frustration over the high click count required for insights and a desire to have a comprehensive field view. To address these pain points, we revamped the user flow for the "Annotations" feature. The new flow streamlined the process, reducing the number of clicks needed while ensuring users could easily access insights and view the field.
Exploring design patterns and multiple ideas by using rapid sketching
Through multiple rounds of rapid sketching on paper, I was able to delve into various potential solutions for the multitude of UI components that would define Neatleaf 2.0.
This iterative process not only helped me explore different design options but also enabled me to identify consistent design patterns that could be applied across the entire platform.
Defining the vision, and understanding what users find intuitive and not
Following sketching, I translated my ideas into low-fidelity wireframes. These wireframes provided valuable insights into users' task expectations and allowed for adjustments before progressing to high-fidelity designs and prototypes.
A look at incorporated visual design
Considering time limitations, my impact on visual design was strong but limited. However, the still visuals I created formed the foundation for a cohesive prototype and design update.
Mobile designs for "at a glance", image feed, and mobile menu.
Revealing New Shortcomings Through High-Fidelity Prototype Testing
By utilizing this high-fidelity prototype, I successfully immersed test users in a realistic experience, uncovering potential shortcomings in the process. This comprehensive prototype covers a significant portion of the new design, with a specific focus on optimizing the experience for the iPad, the primary device intended to be wall-mounted within the grower's facilities.
Lessons learned
Neatleaf 2.0 is currently being developed by engineering. Below are a few lessons learned from testing the new designs on users using Figma prototypes, and potential next steps to continue iterating further.
A "high level" line chart for all environmental parameters was suggested for the "at-a-glance" section.
"Growth rate" metrics would give a more holistic picture across the field conditions for the "at-a-glance" section.
"Current room conditions" is not as critical for mobile users, and is better displayed towards the bottom of the page.