Aeki
Aeki
WireoneLabs - Design
WireoneLabs - Design
Freelance Design Consultant
Freelance Design Consultant
As a freelance design consultant for Wireonelabs, I took on the role of the sole designer and successfully delivered a cross-platform (Hybrid) mobile application for Eeki Foods.
As a freelance design consultant for Wireonelabs, I took on the role of the sole designer and successfully delivered a cross-platform (Hybrid) mobile application for Eeki Foods.
My responsibilities included designing components and building a design system from scratch, ensuring alignment with Eeki Foods' branding. It was an engaging five-month experience, and by the end, we were able to significantly improve the user experience for farm supervisors, enabling them to more easily monitor and capture data on plant growth, temperature, and watering—paving the way for future automation.
My responsibilities included designing components and building a design system from scratch, ensuring alignment with Eeki Foods' branding. It was an engaging five-month experience, and by the end, we were able to significantly improve the user experience for farm supervisors, enabling them to more easily monitor and capture data on plant growth, temperature, and watering—paving the way for future automation.
Context
Context
📋 Overview
📋 Overview
Modernizing the Agritech app to provide real-time monitoring and control of agricultural systems was crucial for increasing efficiency and productivity. Farmers and agricultural technicians needed a seamless, intuitive solution to manage their tasks effectively. Above all else, it was the right thing to do, and an opportunity to significantly enhance the user experience.
Modernizing the Agritech app to provide real-time monitoring and control of agricultural systems was crucial for increasing efficiency and productivity. Farmers and agricultural technicians needed a seamless, intuitive solution to manage their tasks effectively. Above all else, it was the right thing to do, and an opportunity to significantly enhance the user experience.
👩💻 Stakeholders
👩💻 Stakeholders
One of the best parts of this project was getting to work directly with the COO, who’s hands-on with all the IoT aspects. He was there every step of the way, helping me really understand the product. He’s out in the field and even set up Google Meet sessions so we could connect with the actual users. Having that direct line to both the product and the people using it was a huge advantage, especially when it came to making sure the app really met their needs.
One of the best parts of this project was getting to work directly with the COO, who’s hands-on with all the IoT aspects. He was there every step of the way, helping me really understand the product. He’s out in the field and even set up Google Meet sessions so we could connect with the actual users. Having that direct line to both the product and the people using it was a huge advantage, especially when it came to making sure the app really met their needs.
Problem
Problem
⚡️ The Challenge : Transforming an outdated agricultural app into an intuitive, user-friendly tool that meets modern agricultural needs.
The existing Agritech app was plagued by several issues that hindered its usability and effectiveness. Farmers and technicians struggled with its complex interface, unreliable data visualization, and cumbersome control mechanisms. These constraints needed to be addressed to ensure the app could meet the modern needs of its users.
The decision was made to completely overhaul the mobile application — which presented its own set of unique challenges:
A tight three-month deadline, as the redesign had to be completed before the peak agricultural season.
Data integration complexities with various types of agricultural sensors and control systems.
User diversity, ranging from tech-savvy agricultural technicians to farmers with minimal tech experience.
Maintaining real-time accuracy, ensuring data updates and control commands are executed without delay.
Offline functionality, allowing the app to remain useful even in areas with limited internet connectivity.
The existing Agritech app was plagued by several issues that hindered its usability and effectiveness. Farmers and technicians struggled with its complex interface, unreliable data visualization, and cumbersome control mechanisms. These constraints needed to be addressed to ensure the app could meet the modern needs of its users.
The decision was made to completely overhaul the mobile application — which presented its own set of unique challenges:
A tight three-month deadline, as the redesign had to be completed before the peak agricultural season.
Data integration complexities with various types of agricultural sensors and control systems.
User diversity, ranging from tech-savvy agricultural technicians to farmers with minimal tech experience.
Maintaining real-time accuracy, ensuring data updates and control commands are executed without delay.
Offline functionality, allowing the app to remain useful even in areas with limited internet connectivity.
North star design
principles
North star design
principles
User-Centric
Prioritize the needs and workflows of farm managers & executives.
Consistency
Maintain uniformity in design elements and interactions.
Accessibility
Ensure the app is usable by people of all abilities.
Real-Time Precision
Accurate, real-time data and control feedback for timely decision-making.
Simplicity
Focus on essential features, minimizing clutter, Intuitive and easy to navigate
User-Centric
Prioritize the needs and workflows of farm managers & executives.
Consistency
Maintain uniformity in design elements and interactions.
Accessibility
Ensure the app is usable by people of all abilities.
Real-Time Precision
Accurate, real-time data and control feedback for timely decision-making.
Simplicity
Focus on essential features, minimizing clutter, Intuitive and easy to navigate
Design Timeline
Design Timeline
Our implementation process was not linear. As I developed the basic design system and component library, the development team simultaneously began their work, ensuring a seamless and integrated approach to the project.
Our implementation process was not linear. As I developed the basic design system and component library, the development team simultaneously began their work, ensuring a seamless and integrated approach to the project.
Design Process
Design Process
📚 Research
📚 Research
You gotta start somewhere
You gotta start somewhere
The existing application was a jumble of disorganized features and poor user experience, built entirely by developers without any input from a designer. Our journey began with a thorough examination of this app, identifying the chaotic flow and scattered features.
In collaboration with stakeholders, I delved into understanding the product and its multiple modules. The development team provided access to the existing app and guided me through its functionalities. This groundwork was crucial for mapping out a coherent and user-friendly design.
The existing application was a jumble of disorganized features and poor user experience, built entirely by developers without any input from a designer. Our journey began with a thorough examination of this app, identifying the chaotic flow and scattered features.
In collaboration with stakeholders, I delved into understanding the product and its multiple modules. The development team provided access to the existing app and guided me through its functionalities. This groundwork was crucial for mapping out a coherent and user-friendly design.
Old Designs
Old Designs
Old Designs
Finding structure amidst the chaos
Finding structure amidst the chaos
To bring order to the disorganized application, we started by categorizing the various features and flows into distinct modules, each addressing specific aspects of the process in the field. This approach helped mitigate the cognitive load and made the app more intuitive for users. Additionally, complex technical terms were simplified to be easier for everyone to understand.
To bring order to the disorganized application, we started by categorizing the various features and flows into distinct modules, each addressing specific aspects of the process in the field. This approach helped mitigate the cognitive load and made the app more intuitive for users. Additionally, complex technical terms were simplified to be easier for everyone to understand.
Pinpointing the Issues
Pinpointing the Issues
To unravel the complexities of the legacy application, we meticulously mapped out its various features and workflows into comprehensive flowcharts. Each flowchart delineated specific functionalities and interactions within the app, shedding light on its intricate structure.
In collaboration with stakeholders, we identified key pain points and inefficiencies embedded in the existing processes. This structured approach laid the groundwork for streamlining operations and enhancing user experience in the redesign phase.
To unravel the complexities of the legacy application, we meticulously mapped out its various features and workflows into comprehensive flowcharts. Each flowchart delineated specific functionalities and interactions within the app, shedding light on its intricate structure.
In collaboration with stakeholders, we identified key pain points and inefficiencies embedded in the existing processes. This structured approach laid the groundwork for streamlining operations and enhancing user experience in the redesign phase.
💡 Key Findings
💡 Key Findings
Permissions for location, camera dialogue interaction needed to be performed
No validation if action was performed successfully nor indication for progression
Few phases in each menu were identical
Permissions for location, camera dialogue interaction needed to be performed
No validation if action was performed successfully nor indication for progression
Few phases in each menu were identical
Getting Quick Fixes In
Getting Quick Fixes In
Most of the issues could be addressed directly with improved structure and categorization. This approach aims to enhance user experience by fostering a clearer perception of progression and organization.
Most of the issues could be addressed directly with improved structure and categorization. This approach aims to enhance user experience by fostering a clearer perception of progression and organization.
DESIGN
DESIGN
The challenges encountered
The challenges encountered
While conducting the dry run of the prototype, several constraints were identified that needed to be addressed to ensure a seamless user experience.
While conducting the dry run of the prototype, several constraints were identified that needed to be addressed to ensure a seamless user experience.
Example
Example
Example
DESIGN
DESIGN
Layout Pattern
Layout Pattern
No Fluff, Consistent, and Scannable
No Fluff, Consistent, and Scannable
Keepin' it mobile-first — responsive layout for mobile devices.
A standard set of layout grids and breakpoints (Figure) was critical in ensuring we could design and build quickly and consistently. Given our user base and their predominant usage of mobile devices, we focused on creating a mobile-friendly product that provides a seamless experience on smaller screens.
Keepin' it mobile-first — responsive layout for mobile devices.
A standard set of layout grids and breakpoints (Figure) was critical in ensuring we could design and build quickly and consistently. Given our user base and their predominant usage of mobile devices, we focused on creating a mobile-friendly product that provides a seamless experience on smaller screens.
DESIGN
DESIGN
Visual Design Direction
Visual Design Direction
💎 Undeniably Eeki Foods, unmistakably modern.
💎 Undeniably Eeki Foods, unmistakably modern.
Leveraging Material Design for our custom design system.
At Eeki Foods, we realized the importance of a cohesive design language to provide a seamless user experience. Drawing inspiration from Google's Material Design principles, we crafted a bespoke design system that reflects our brand's ethos and functional requirements.
Leveraging Material Design for our custom design system.
At Eeki Foods, we realized the importance of a cohesive design language to provide a seamless user experience. Drawing inspiration from Google's Material Design principles, we crafted a bespoke design system that reflects our brand's ethos and functional requirements.
Adopting Material Design Principles
Instead of creating a completely new design system, we utilized the atomic components of Material Design, adapting them to suit our specific needs. This approach allowed us to maintain consistency and usability across our app's interface.
While the core components were based on Material Design, we introduced customizations to better align with our unique user interactions and visual identity. The result is a modern, intuitive, and efficient interface that enhances the user experience for our farm executives and site managers.
Adopting Material Design Principles
Instead of creating a completely new design system, we utilized the atomic components of Material Design, adapting them to suit our specific needs. This approach allowed us to maintain consistency and usability across our app's interface.
While the core components were based on Material Design, we introduced customizations to better align with our unique user interactions and visual identity. The result is a modern, intuitive, and efficient interface that enhances the user experience for our farm executives and site managers.
Merging innovation with tradition.
Our design process wasn't just about following trends; it was about forward-thinking while respecting our foundational values. By integrating elements of Material Design with our specific requirements, we created a system that is both functional and aesthetically pleasing, ensuring our users enjoy an optimal and engaging experience.
Merging innovation with tradition.
Our design process wasn't just about following trends; it was about forward-thinking while respecting our foundational values. By integrating elements of Material Design with our specific requirements, we created a system that is both functional and aesthetically pleasing, ensuring our users enjoy an optimal and engaging experience.
DESIGN
DESIGN
Style Guide
Style Guide
Color Palette
Typography
Iconography
Illustration
DESIGN
DESIGN
Final Designs
Final Designs
One of the top factors that I make sure to include as a designer is accessibility. EekiFoods has a User diversity, ranging from tech-savvy agricultural technicians to farmers with minimal tech experience. I want to ensure the app is usable by people of all abilities.
This meant the design components had to be bold and intuitive. Of course, I adhered to the Material design principles and Digital accessibility guidance standards. Throughout, I present design system updates weekly to the team and sought feedback for iteration.
One of the top factors that I make sure to include as a designer is accessibility. EekiFoods has a User diversity, ranging from tech-savvy agricultural technicians to farmers with minimal tech experience. I want to ensure the app is usable by people of all abilities.
This meant the design components had to be bold and intuitive. Of course, I adhered to the Material design principles and Digital accessibility guidance standards. Throughout, I present design system updates weekly to the team and sought feedback for iteration.
DESIGN
DESIGN
Final Designs
Final Designs
Accessibility
Accessibility
User diversity, ranging from tech-savvy agricultural technicians to farmers with minimal tech experience.
User diversity, ranging from tech-savvy agricultural technicians to farmers with minimal tech experience.
DESIGN
DESIGN
Final Designs
Final Designs
A Question of Textual Focus vs. Visual Emphasis
A Question of Textual Focus vs. Visual Emphasis
The design aimed at providing detailed textual information within each card, focusing on elements such as issue title, status, assignee, description, due date, and creation date. However, early internal feedback indicated that the lack of visual elements made it difficult for users to quickly grasp the critical information and the context of each issue. This led to a second iteration that placed visual elements and glanceable information at the forefront.
The First Iteration, Each card contained detailed textual information, including issue title, status, assignee, description, due date, and creation date.
The Second Iteration, Each card now emphasizes the issue title and includes a thumbnail image, allowing users to quickly understand the issue visually.
Colored icons indicate the urgency of the issue (red, yellow, green), providing immediate visual cues. Grouped elements like the due date and active duration with the title for quick reference.
The design aimed at providing detailed textual information within each card, focusing on elements such as issue title, status, assignee, description, due date, and creation date. However, early internal feedback indicated that the lack of visual elements made it difficult for users to quickly grasp the critical information and the context of each issue. This led to a second iteration that placed visual elements and glanceable information at the forefront.
The First Iteration, Each card contained detailed textual information, including issue title, status, assignee, description, due date, and creation date.
The Second Iteration, Each card now emphasizes the issue title and includes a thumbnail image, allowing users to quickly understand the issue visually.
Colored icons indicate the urgency of the issue (red, yellow, green), providing immediate visual cues. Grouped elements like the due date and active duration with the title for quick reference.
DESIGN
DESIGN
Final Designs
Final Designs
It didn’t have to feel like a static app
It didn’t have to feel like a static app
Process of Data Entry — Completion vs. Ease of Use
My initial approach was focused on ensuring that users did not abandon the process of adding data midway. This was achieved by guiding them through each micro-action one after another, step by step.
Though it appeared intuitive in theory, it was actually unnecessarily cumbersome. I made the pivot to an approach more conscious of streamlining the navigation and ease of use. Even if users couldn't finish the data form filling process, they could always come back to the draft section to complete it.
Process of Data Entry — Completion vs. Ease of Use
My initial approach was focused on ensuring that users did not abandon the process of adding data midway. This was achieved by guiding them through each micro-action one after another, step by step.
Though it appeared intuitive in theory, it was actually unnecessarily cumbersome. I made the pivot to an approach more conscious of streamlining the navigation and ease of use. Even if users couldn't finish the data form filling process, they could always come back to the draft section to complete it.
DESIGN
DESIGN
Final Designs
Final Designs
Streamlining Navigation — Reducing Clicks for a Smoother Experience
In the initial design, users faced significant navigation confusion due to excessive clicks and page transitions. The goal of the redesign was to minimize these clicks and create a more seamless navigation experience, enabling users to update data more efficiently.
The first iteration consisted of two separate screens. Users first navigated through a list of Production Data Collection (PDC) menus.
Upon selecting a menu item, users were taken to a second screen where they could access and update specific data menus.
The second iteration streamlined the process by incorporating all PDC menus and data options within a single screen.
PDC menus were presented as expandable sections. When a user expanded a section, the relevant data options appeared directly beneath it.
Frequently added data options were placed at the top of the screen for quick access.
Streamlining Navigation — Reducing Clicks for a Smoother Experience
In the initial design, users faced significant navigation confusion due to excessive clicks and page transitions. The goal of the redesign was to minimize these clicks and create a more seamless navigation experience, enabling users to update data more efficiently.
The first iteration consisted of two separate screens. Users first navigated through a list of Production Data Collection (PDC) menus.
Upon selecting a menu item, users were taken to a second screen where they could access and update specific data menus.
The second iteration streamlined the process by incorporating all PDC menus and data options within a single screen.
PDC menus were presented as expandable sections. When a user expanded a section, the relevant data options appeared directly beneath it.
Frequently added data options were placed at the top of the screen for quick access.
DESIGN
DESIGN
Final Designs
Final Designs
Is Something Happening?
In the initial design, scanning the QR code immediately redirected users to the data filling page without any indication of processing, leaving users unsure if the scan was successful or if data was being fetched.
To address this, we revised the design to include a loading indicator after the QR code scan, signalling to users that the system was processing the scan and fetching data to pre-fill the form.
Is Something Happening?
In the initial design, scanning the QR code immediately redirected users to the data filling page without any indication of processing, leaving users unsure if the scan was successful or if data was being fetched.
To address this, we revised the design to include a loading indicator after the QR code scan, signalling to users that the system was processing the scan and fetching data to pre-fill the form.
DESIGN
DESIGN
Final Designs
Final Designs
DESIGN
DESIGN
Other Screens
Other Screens
Splash Screen & LogIn Page
Splash Screen & LogIn Page
DESIGN
DESIGN
Other Screens
Other Screens
Home Screen & Profile View
Home Screen & Profile View
DESIGN
DESIGN
Other Screens
Other Screens
Issue Tracker
Issue Tracker
DESIGN
DESIGN
Other Screens
Other Screens
Production Data Collection (PDC)
Production Data Collection (PDC)
DESIGN
DESIGN
Other Screens
Other Screens
Plant Analysis
Plant Analysis
DESIGN
DESIGN
Other Screens
Other Screens
Device Controls
Device Controls
DESIGN
DESIGN
Other Screens
Other Screens
Alert Dashboard
Alert Dashboard
Retrospective
Retrospective
What People say
What People say
Takeaways
Takeaways
🤝 Collaboration is Key
🤝 Collaboration is Key
Engaging with stakeholders throughout the project fostered a sense of ownership and ensured that diverse perspectives were considered, leading to more innovative solutions.
Engaging with stakeholders throughout the project fostered a sense of ownership and ensured that diverse perspectives were considered, leading to more innovative solutions.
📈 Data-Driven Decisions
📈 Data-Driven Decisions
Utilizing data analytics allowed us to identify trends and make informed decisions, significantly enhancing the project's efficiency and effectiveness.
Utilizing data analytics allowed us to identify trends and make informed decisions, significantly enhancing the project's efficiency and effectiveness.
🔄 Iterative Learning
🔄 Iterative Learning
Embracing an agile methodology enabled us to adapt to challenges swiftly and learn from each phase, ensuring continuous improvement throughout the project lifecycle.
Embracing an agile methodology enabled us to adapt to challenges swiftly and learn from each phase, ensuring continuous improvement throughout the project lifecycle.
💡 Innovation Through Diversity
💡 Innovation Through Diversity
A diverse team brought a wealth of ideas and approaches, fostering creativity and enabling us to tackle problems from multiple angles.
A diverse team brought a wealth of ideas and approaches, fostering creativity and enabling us to tackle problems from multiple angles.
🌱 Sustainability Matters
🌱 Sustainability Matters
Incorporating sustainable practices not only benefited the environment but also resonated with our target audience, ultimately driving greater engagement and support.
Incorporating sustainable practices not only benefited the environment but also resonated with our target audience, ultimately driving greater engagement and support.
Suruthi.
Thanks for stopping by, let’s chat! 👋
Suruthi.
Thanks for stopping by, let’s chat! 👋
Suruthi.
Thanks for stopping by, let’s chat! 👋
CONTACT ME 💌
s@is5.in
s@is5.in
LET’S CONNECT 🤝
©2024 SURUTHI THAARANI RAJENDRAN
Made with 💜, 🎵 , ☕️ &