top of page

INTERNSHIP PROJECT

Greenphyto

A Singapore government-backed smart-farming brand.

BACKGROUND

I took my internship as a UX designer in Greenphyto, a B2B government-backed company. My work was focused on refining the information structure of the product, redesign key interfaces, and build the design library.

OUTCOME

Designed an entire design system for this product, reconstructed the product and redesigned three key screens. The design system will be used by the company for further development.

DURATION

1.5 Months

MY CONTRIBUTION

Product Analysis / User Research / Problem solving / UI Design / build design system

TOOL

Figma / Zoom

- OVERVIEW -

What is Greenphyto

Our client, GreenPhyto, is a vertical farming startup based in Singapore which strives to bring affordable, fresh and healthy vegetables to the masses. Its Farming Operation Management System will be the backbone of the farm, serving to automate the operations and allow timely intervention on the growth of the crops based on input from the sensors.

Overall Problems

The table below demonstrates our first impression of the product.

We need to create a more visually appealing and user-friendly platform with a reusable design system to improve team efficiency while developing new website pages and improve users satisfaction while managing their farms.

Timeline

Design direction decision

Explore the main design directions of the product by interviewing with stakeholders and test which one aligns best with their preferences

- STAKEHOLDER KICK OFF -

Learning from users to find out their pain points and goals

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.

- STYLE EXPLORATION -

Explore style through collecting mood borad 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 stakeholders.

Cooperate

Roboto

Joyful

Montserrat

Futuristic

open sans

Elegant

lato

Get feedbacks from 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."

                          

——Susan (CEO)

"I like the 'Futuristic' one."

"Light background works better for me."

"I prefer to use red, flashing colors rather than something blue for an alert."

                                                                                                              —— CTO

"Combine the 'Joyful' one with 'Futuristic' one."

"We use this software in indoor farm with workstation. Light background works better."

"Corporate' is straight, 'Elegant' is too high-end maybe. 'Joyful' is happy to look at."

                                                                                                              —— Farmers

Update the mood board and style

Based on the interviews we had with key stakeholders, surprisingly we realized the score was tied between two styles -- Joful 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

Break down the information architecture of the product to unify and simplify the entire system

- ANALYZE ORIGINAL DESIGN -

Key screen 1 - Equipment & Environment Status
Key screen 2 - Seeding interface
Key screen 2 - Seeding interface
Atomic Design system

We followed Brad Frost's Atomic Design idea, where interfaces are made up of smaller components. And we can break entire interfaces down into fundamental building blocks and work up from there. We were trying to deliver a design system that contains a collection of reusable components, guided by clear standards, which can be assembled together to build any number of applications.

- BREAK DOWN THE STRUCTURE -

We're not designing pages, we're designing systems of components.'

Rebuild the structure of the product

We followed Brad Frost's Atomic Design idea, where interfaces are made up of smaller components. And we can break entire interfaces down into fundamental building blocks and work up from there. We were trying to deliver a design system that contains a collection of reusable components, guided by clear standards, which can be assembled together to build any number of applications.

Key screens and product system design

Based on the rebuilt structure, further create the components to update UI design and finally determine the design system.

- Develop and iterate designs -

Key screen 1 - Equipment & Environment Status

Version 1

  1. Use the big layout suggestion above

  2. Separate different areas for better understanding

  3. The 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, the default is card view. Able to switch to table view so that manager can do a 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

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 expand/collapse

  5. Add a toggle to allow users to toggle between card view and list view

Key screen 2 - Seeding interface

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

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

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

Key screen 3 - Growth parameters

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:

  4. Save button should not exist unless the user clicks edit button

  5. Remove cancel button

  6. Add the option to do single item edit/delete

Version 2

  1. make the background of the listing darker for easier reading.

  2. Combine the set button with the profile head photo to isolate and highlight the notification button.

Version 3

  1. Update sidebar to a darker color for better readability

  2. Add notification to search bar

  3. Highlight action buttons

Accessibility test

In order to make sure users can read all information properly in their working space, our team did contrast tests on all possible UI elements. We found out the system status labels were not meeting the standard. We updated all three colors without breaking the current UI style.

Equipment & Environment Status - Card view

- FINAL DESIGN -

Equipment & Environment Status - List view
Seeding
Growth Parameters

- DESIGN SYSTEM -

Color
Typography
Icongraphy
Cards
Form
Button
Logo
Take away

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 a system that defines visual elements and a style guide, which tells the story of Greephyto.

bottom of page