Gardening
App

UI-UX CaseStudy

35+
Screen Designs

20+
Component

Overview

A gardening app that can scan QR codes to show information about a specific plantation would be a useful tool for both professional and amateur gardeners. The app is used in public parks, botanical gardens or supermarket, where visitors can scan the QR codes on plants to learn more about plant's name, origin, growing conditions, and care instructions.

Design Process

1

Research

2

UX Design

3

User Flow

4

Hi-fi Design

5

Prototyping

Research

In order to design the best experience, I’ve look at the possible paths the user might take during their journey and examine  what happens during each step. I usually create a map in Figma to get a detailed view of the User Flow.

Interactive Planting Guides

Develop a feature in the app that offers interactive planting guides for each type of tree. When users scan the QR code on a particular tree, the app will provide step-by-step instructions on how to plant and care for that specific tree. This will ensure that users have access to accurate and detailed planting processes, helping them achieve successful cultivation.

Employee Progress Tracking

Integrate a system within the app that allows cultivation staff to input their daily progress and quality of output. This data can be accessed by managers, providing real-time updates on the status of each staff member's work. Implementing a performance evaluation feature can also help identify areas for improvement and promote accountability among employees.

Product Traceability

Incorporate a product traceability system in the app, enabling users to scan QR codes on products and receive information about the product's origin and supply chain. This could include details about the farm or supplier where the product was grown or produced, ensuring transparency and authenticity for customers. Having access to such information will build trust and confidence in the quality of the products purchased.

User Persona

In the initial stage of creating the application, we paid special attention to creating user parsonas. Since our application is user-oriented, we used the Human Centers Design methods.

Farmer - Process Creator

Inspector
Manager

Inspector - Manager

Food Shopper

Card Sorting

Information architecture refers to the practice of organizing, structuring, and labeling information in a way that facilitates effective navigation, retrieval, and understanding of content within a system or website

Onboarding

Splash screen

Sign in by Zalo

Start Now

Create Planting Area

Location/ Address

Type of plant

Acreage of Planting area

Process of planting trees (template)

Planting Area Information

Types of plant

Created day

Number of healthy tree

Number of diseased tree

QR code

Share QR code

Print QR code

Start plant

Start 1st step

Complete each step

Add image of results

Write status

Receive points

Start next step

Personal Information

Mobile number

Address

Delete account

Scan QR code

Plant Area Information

Number of healthy tree

Number of diseased tree

Planting history

Disease history of the plant

Report disease to the tree

Plant disease treatment

Treat plant diseases as directed

Report disease & Treat plant diseases as directed

Scan QR code

Select diseased tree to report

Upload Image

Search plant

Disease state of the tree

Select Disease

Save Report

Start treatment as directed

User Flow

User flow in UI/UX refers to the path that a user follows while navigating through a website, app, or digital product.

Moodboard & Hi-fi Design

The moodboard of the app captures the essence of its design and visual identity, evoking a sense of modernity and sophistication.
The hi-fi design of the app embodies a seamless fusion of aesthetics and functionality, delivering a visually captivating user experience.

Prototyping

Provide a visual blueprint and structure for the user interface, ensuring effective communication and planning of the user experience.