GreenPhyto: smart farming solution
Jump to final design
Duration
Feb 2021 - Mar 2021
My Role
UX/UI Designer
Team
Cathy Xu
Overview
GreenPhyto’s farm management system was outdated and needed a revamp.
GreenPhyto is a B2B product that provides vertical farming solutions. Farmers can utilize the farm managment system to monitor their crops, equipments, and sensors.
GreenPhyto’s lack of design system burdens the team with creating inconsistent product and marketing materials.
Initial Problem Statement
How might we streamline the process of creating unified design?
Based on initial stakeholder intake, the stakeholder wish to improve team efficiency while developing new website pages, and improve users satisfaction while managing their farms.
Problems
Pain Points
1. Inconsistent and old-style colors and typography
1a. Weak in branding
1b. Can lower user's interest to operate the system
1b. Can lower user's interest to operate the system
2. Some interactions are unnecessary and redundant
2a. Increase user's time to read and digest information, thus decreasing working efficiency
2b. Increase development time from engineer and designer perspective, adding development cost
2b. Increase development time from engineer and designer perspective, adding development cost
Stakeholder Interview
Use affinity diagram to cluster recurring theme of pain points
We talked with our client and took notes of pain points he brought up in design discussion meetings. Before long, recurring themes began to surface.
3 Aspects
Methodologies
Marketing Aspect
- The logo must stand out
- Get a cooperate theme color to speak for the brand
Style Exploration
- Competitive Analysis
- Mood Board
Design Aspect
- Cohesive and user friendly interface
- Reduce strain on resources to focus on complex problems
Key Screen Redesign
- Product Audit
- Align User Stories
Developing Aspect
- Easy to find assets
- Reusable patterns
Design System
- Atomic design system
- Accessibility Audit
Style Exploration
Explore style through curating mood board and typography
GreenPhyto comes in with a direct and first impression of brand color 'Green'. We brainstormed and came up with four themes, 'Corporate', 'Joyful', 'Futuristic' and 'Elegant' to explore the most appropriate theme for this farming related ERP product. We created four mood boards, along with color palettes and typography, and reviewed them with the client and stakeholders.
Corporate
Joyful
Futuristic
Elegant
Roboto
Morandi
Avenir Next World
Lora
Mood board feedback from stakeholders
GreenPhyto comes in with a direct and first impression of brand color 'Green'. We brainstormed and came up with four themes, 'Corporate', 'Joyful', 'Futuristic' and 'Elegant' to explore the most appropriate theme for this farming related ERP product. We created four mood boards, along with color palettes and typography, and reviewed them with the client and stakeholders.
" I like the 'Joyful' one. I like the warm feeling."
"The 'Corporate' one is too cold."
"I like the 'Elegant' one personally, but it might be too cold."
"The 'Corporate' one is too cold."
"I like the 'Elegant' one personally, but it might be too cold."
- Susan (CEO)
"I like the 'Futuristic' one."
"Light background works better for me."
"I prefer use red, flashing colors rather something blue for alert."
"Light background works better for me."
"I prefer use red, flashing colors rather something blue for alert."
- CTO
"Combine the 'Joyful' one with 'Futuristic' one."
"We use this software in indoor farm with workstation. Light background works better."
"We use this software in indoor farm with workstation. Light background works better."
- Farmers
Finalize the mood board and decide the style
Based on the interviews we had with key stakeholders, surprisingly we realized the score was tied between two styles -- Joyful and Futuristic. In order to satisfy the needs of all users, we decided to find the balance between these two themes and merged them into one new style: a neat light background with green-blue gradient elements, and a hint of warm orange color.
Product Audit
Key Screen 1: Status Screen
1. Header
- Screen name can be shown at the content area
- Logo will be hard to see on right side
Missing user profile
2. Sidebar
- Buttons without labels are hard to understand and use
- Different side bar buttons for different user groups
3. Content Area
3.1 Content title position is weird
3.2 Table (display type)
- Inconsistent columns, colors and words are used together but represent the same thing
- Some rows are sharing the same value
3.3 Action button
- Blue button looks not obvious due to table header color
Product Audit
Key Screen 2: Dashboard Screen
1. Header
- Same as status screen
2. Sidebar
- Same as status screen
3. Content Area
3.1 Progress bar
- Green and yellow are a bit hard to tell which one is selected
3.2 General info
- System logs seems to be messy and unnecessary
3.3 Growing environment info
- Info is too separate and looks boring
3.3 Growing environment controls
- Too easy to change, and also user feel lost about what to do
3.4 Camera related controls
- The buttons are hard to tell whether it’s tappable or not
Product Audit
Key Screen 3: Growth Parameters Table
1. Header
- Theme is disconnected from other two screens
2. Content Area
2.1 Table
- The style looks a bit boring
2.2 Action buttons
- Some actions are hard to take in groups.
Iterations
Structure Redesign
Have a consistent layout: Header and Sidebar should follow the same style and stay in the same place. This can help user locate features better; Also suggest different user groups to login within same screen but have access to different sidebars
Admin, settings related info on top right corner
Add a search button if necessary
Content area normally will have a up and down vertical layout; within each content area, follow a left and right layout. This would help create better readability.
Key Screen 1: Status Screen
Have a consistent layout: Header and Sidebar should follow the same style and stay in the same place. This can help user locate features better; Also suggest different user groups to login within same screen but have access to different sidebars
Admin, settings related info on top right corner
Add a search button if necessary
Content area normally will have a up and down vertical layout; within each content area, follow a left and right layout. This would help create better readability.
Version 1
1. Use the big layout suggestion above
2. Separate different areas for better understanding
3. Same status should use the same symbol
4. Mark a specific area if there is anything the manager needs to pay attention to
5. Maybe can support 2 views, default is card view. Able to switch to table view so that manager can do search with filters and see the desired results
3. Same status should use the same symbol
4. Mark a specific area if there is anything the manager needs to pay attention to
5. Maybe can support 2 views, default is card view. Able to switch to table view so that manager can do search with filters and see the desired results
Version 2
1. Get rid of the settings button since there are not much to change
2. Use big and clear green/yellow/red badges to represent equipment/sensor status.
3. Add a colored bar on each card to represent the status of the whole process
4. Enlarge equipment/sensor number
2. Use big and clear green/yellow/red badges to represent equipment/sensor status.
3. Add a colored bar on each card to represent the status of the whole process
4. Enlarge equipment/sensor number
Version 3
1. Update sidebar to a darker color for better readability
2. Add search bar
3. Add different states (pressed, hover) for cards indicating that they are tappable
4. Make the big container able to exapnd/collapse
5. Add a toggle to allow users to toggle between card view and list view
2. Add search bar
3. Add different states (pressed, hover) for cards indicating that they are tappable
4. Make the big container able to exapnd/collapse
5. Add a toggle to allow users to toggle between card view and list view
Key Screen 2: Dashboard Screen
Version 1
1. Use the big layout suggestion above
2. Process bar -> put them in side bar as second level
3. Suggest to divide the table into 4 areas: general info, environment data, control buttons, and camera related
2. Process bar -> put them in side bar as second level
3. Suggest to divide the table into 4 areas: general info, environment data, control buttons, and camera related
Version 2
1. Combine some readings with their related controls (LED light and CO2 injector)
2. Remove search bar since it's not needed here
3. Add previous/next button so that user to switch between different levels
2. Remove search bar since it's not needed here
3. Add previous/next button so that user to switch between different levels
Version 3
1. Update sidebar to a darker color for better readability
2. Remove system logs
3. Add special status for control panels (red stroke)
4. Highlight previous/next buttons with orange color, also add a backup button (dropdown)
5. Change toggle color to green-blue gradient. The previous orange one looks like an alert
2. Remove system logs
3. Add special status for control panels (red stroke)
4. Highlight previous/next buttons with orange color, also add a backup button (dropdown)
5. Change toggle color to green-blue gradient. The previous orange one looks like an alert
Key Screen 3: Growth Parameters Table
Version 1
1. Use the big layout suggestion above
2. Shuffle the table item for better understanding ( put name in front)
3. Clean up the action buttons:
2. Shuffle the table item for better understanding ( put name in front)
3. Clean up the action buttons:
- Save button should not exist unless the user clicks edit button
- Remove cancel button
- Add the option to do single item edit/delete
Version 2
1. Refine interface with darker background to increase readability for the table
Version 3
1. Update sidebar to a darker color for better readability
2. Add search bar
3. Highlight action buttons
2. Add search bar
3. Highlight action buttons
Accessibility
Final Design
GreenPhyto: smart farming solution
Status Screen - Card View
Status Screen - List View
Dashboard Screen - Default
Dashboard - More Than 6 Controls
Design System
Color
We needed to maintain an extensive brand color palette , but also wanted to build a solution that would be lean. We combined our base colors with various percentages of white or black. This solution allows the design system to declare a base color once and branch off into infinite tints.
Typography
There are two groups of typefaces in the system. One is for headers and emphasis. The other one is for body text.
Iconography
In the past, individual icons were created/collected when needs arose, so the UI iconography lacked consistency. Icons were shown with differences in weight, sizes, and style. We gathered/designed a collection of icons that brought clarity and consistency to the UI. Most of the icons are stoke based, creating a neat feeling to the system. These icons are good for commercial use.
Buttons, Cards & More
We continued to develop the design system, adding styles for input fields, bank status, tables, and more. We organized all components as nested component within Figma library. We also added different states for buttons/cards to ensure that, moving forward, no cases would be left behind.
Logo
During the design process, we realized the new visual style makes the company logo hard to read. In order to make the logo stand out in all different materials and media, we also created a light (white) version of it.
Reflection
What I learned
Creating and keeping a consistent UI/UX across every touchpoint of your products helps users intuitively navigate, and successfully interact, with different parts of your applications without confusion. A good brand is always needed.
In our process, we have been creating a design system from the ground up. We audited the existing design, then turned it into an system that defines visual elements and style guide, which tells the story of GreenPhyto.
© 2023 Cathy Xu