Agrienergy | A Case Study
Rethinking the way agro-energy equipment sellers connect with farmers
Redesign the mobile App experience to address user's pain points
Context
Opportunity to level up
Agrienergy's main purpose is to help farmers connect to sellers of agro-energy equipment. We seek to have a scalable mobile app experience that helps users discover offerings better and address other pain points our stakeholders have raised as well as help the company meet it's business goals.
Tusubira David
CEO - Agrienergy
Project Overview
Project Core Team
The project core team comprised a Product Manager, 1 UX researcher, Devs and I as the UI/UX Designer. The design works spanned 6 months and the development is currently on-going.
Project summary
Project
Agrienergy App
My Role
UI/UX Designer
Category
Agri-Tech
Duration
6 Months
The Problem
More user & product categories, more choices
The outdated design came with it's scalability issues
Poor scalability
The layout and navigation were not optimized for a rapidly expanding user type and offerings categories
Unintuitive purchase flow
The process of evaluating and purchasing offerings was not intuitive which hindered conversions
Hard to discover
Users struggled to find offerings that matched their preferences, with limited filtering and personalization options.
Mixed pricing signals
Since the store had both offerings and indiviual products, there was a confusion on how to price either one of them
Unfriendly to mobile
The apps mobile interface was not fully optimized, creating a less engaging experience on mobile devices.
Confusing onboarding
The onboarding process became confusing as the user types increased.
The Challenge
Transform the overwhelming app experience into an intuitive and engaging experience that guides users towards their main goal.
Design Principles
More user & product categories, more choices
The outdated design came with it's scalability issues
Redefine search experience
Prioritize navigation and interactions that feel natural and intuitive for users
Simplicity & Clarity
Minimize complexity and cognitive load by presenting information in a clear, concise, and easily digestible manner.
Scaleable & Flexible
Have a forward-thinking approach that ensures the app especially the main feed can readily adapt to new content, features, and user needs
Consistency & Familiarity
Using the Agrienergy design-system, adhere to the established platform conventions to create a predictable and user-friendly experience.
My process
It isn't as straight forward as it seems
In reality there is a lot of iteration following design critics
1
Scoping
Context
Target Users
Previous research
2
Research
User interviews
Field Observation
3
Ideation
Journey mapping
Brainstorming
Sketching Ideas
4
Prototyping
Lo-Fi prototypes
Hi-Fi Prototypes
Final Design
5
Evaluation
User Testing
Design critic
Project Timeline
Growing painpoints
Main feed page
Initially designed to have two user types; Farmers and ESCOs, As new user types and offerings categories were added, users faced difficulty navigating the expanding collection, and the homepage's limited space hindered effective content showcasing.
Earlier main feed
Pinpointed issues
Difficulty in navigating the growing user categories
Limited discoverability of new or relevant offerings
Lack of clear organization and categorization
Overwhelming presentation of information
Patching things up
To address the core challenge of a significantly growing user and offerings catalog without sacrificing user experience, we need to accommodate future growth and ensure the main feed remains user-friendly as more offerings are added. Additionally, we need to make it easier for users to find offerings that align with their interests, and present information in a clear and organized manner to avoid overwhelming them.
New main feed
The improvements
Improved navigation & layout by implementing new categories & filtering options, and optimized the layout for better content discovery.
Prioritized key content from the slider to recommended products personalized per user and used clear visual hierarchy to guide user's attention.
Replace featured brands with user types for easy navigation to their respective pages.
Rethinking the search feature to add filters. This aimed at narrowing down the search based on growing user types and offerings
Get rid of the "interested" button on the main feed and instead add a favorite/liked icon on offerings image
Add a "sign in" option for visitors to seamlessly increase conversion rates
Empowering users with filtered search
Introducing a filtered search functionality directly addressed the homepage's limitations in navigating and discovering offerings within the expanding catalog. By empowering users to refine their search based on offering category for offerings and user type for users, we transformed a once overwhelming experience into a targeted and efficient process.
This allowed users to quickly narrow down the selection and find offerings and users that matched their specific interests, effectively mitigating the challenges posed by the growing catalogue. The filtered search not only improved discoverability but also provided a more personalized and user-centered browsing experience, ultimately enhancing user satisfaction and engagement with Agrienergy
New search experience
Overcoming limited browsing by allowing users to actively narrow down their search based on specific criteria, going beyond the limitations of pre-defined categories on the homepage.
Targeted discovery by enabling users to define their own discovery path, leading to a more personalized and efficient experience.
Addressing specific needs by giving users the ability to do things like find offerings within a certain with specific features, where the main feed page's broader categories couldn't.
Growing painpoints
Offering details page
The initial offerings details page had the offerings images, description and installation attached to show confidence through successful past works. However, our filed research showed that most of our users preferred a video description to the wording.
Earlier details page
Pinpointed issues
Laziness or inability of most of the users to read offering descriptions resulting in poor choices selected and purchased.
Patching things up
We created a youtube channel that helped in providing video explanation of specification as well as usage of different offerings.
New details page
The improvements
Adding a video feature linking to our youtube channel to provide detailed explainer videos to respective offerings
Growing painpoints
Power to "ESCOs and Agroprocessors" collectively called sellers
In the earlier version, the offerings and installations were added from the seller's page which constantly confused sellers resulting in a number of complaints.
Earlier upload experience
Pinpointed issues
Confusion by sellers whenever adding new offering or installation
Lack of a central place to add growing upload categories
Lack of scalability as types of uploads grew on the platform
Patching things up
We created a youtube channel that helped in providing video explanation of specification as well as usage of different offerings.
New upload experience
The improvements
Adding an upload icon to the nav bar on the main feed for easy access.
Confining all the upload categories into a pop up screen in one place
Prototype
Onboarding screens
Prototype
Core screens
Prototype
Enjoy the prototype video presentation
Prototype
Project take aways
Influence Through Input — Having to design for simplicity first causes you to prioritize clear focus states, minimizing complex input combinations, and optimizing for directional navigation.
The Power of Passive Discovery — Curating engaging content on the main feed page can drive "passive discovery," exposing users to offerings they might not have actively sought out. A balance of active and passive discovery is crucial for a platform with a growing catalog of content.
State-Based Interactions — Leveraging state changes to convey clickability can minimize the need for explicit visual cues like arrows or buttons, resulting in a more intuitive interface.
Interactive prototype