Gardening mobile app design

Full from-scratch UX/UI Figma design for a gardening app.

A full design of an app made for gardeners of all skill levels in Figma. Features a logic-based, functional mock-ups of a premium-version system, user profiles etc. Also includes a Design system, as well as a Brand style guide.

Project Overview

Probably the biggest group school project I’ve undertook. It’s a full from-scratch design of for an app with a core user base of gardeners. In this overview I’ll highlight and give some insights into some of the things me and my team have created.

Main Focus Points

The main goal of this project was to create a full Figma app design with no dead-ends and as many properly working features as possible, all while keeping Desirability, Viability and Feasibility in mind.

Therefore, our main goals were:

Research

Conducting as much research as we could before committing to creating the app.

Design

Creating a design that’s clearly gardening-themed, consistent and simple.

Figma Flow

Keeping the Figma flow smooth, dynamic and error-proof, without any dead-ends.

Challenges

The biggest challenges during this project came from:

  • Navigating all the research we’ve conducted, making sure it all stays fresh in our memory as we moved through the project.
  • Creating interactive elements that react in-real-time to the users’ actions.
  • Figuring out all the ways the user could navigate through the app, making sure the flow stayed consistent and bug-free.

Research

WIP

Ideation

Desk Research

List of Requirements

Design

WIP

User Flow

Color Choice

Gestalt Laws

Here I just wanted to highlight a few of the many Gestalt Laws we used in the design part of this project.

Law of Proximity

Keeping elements that are related close to each other.

Notifications placed together based on time
Settings placed together based on type

Law of Similarity

Making sure to make related objects similar to one another.

Article cards look similar to eachother
Badge designs are similar with their own unique spins

Law of Common Region

Seperating different sections using different backgrounds with defined borders (closed regions).

Elements related to the garden are kept
Regions separated by a clear background

Figma Flow

WIP

Dynamic Elements

Learnings

Throughout the process of creating MyGarden, me and my team encountered many challenges and learned many things. These learnings include:

01

Managing many points of research at once and figuring out how to properly handle Desirability, Viability and Feasibility

02

Creating and working with a Design system and Brand style guide (available to view in the Figma file).

03

Managing a big Figma flow with many different screens, ensuring no dead-ends or counterintuitive interactions.

04

Creating some simple logic-based systems in Figma to make sure the components are dynamic and react to the users' actions.