Gardening Application

A custom web app built using Angular Material Design to manage garden plants and gardening tasks.

Client

In House

project Type

Development

Design

Services

User Experience Design

Visual Design

Implementation

3rd Party Integrations

Hosting and Domain Setup

Using the Angular and Material Design frameworks, we built this web application to manage garden and landscape data across a physical property. The application allows the user to create gardens with beds, and then add plants to the beds. Other management functions include seasonal planning, greenhouse management, and planting history timelines.

Tools used

Axure

We use Axure to quickly prototype key interactions and visualize interaction flows.

Sketch

We use Sketch to design the UI and mockup pages, as well as to prepare visual assets.

Angular

We used Angular along with TypeScript, to provide a modular code design that is scalable and maintainable.

Angular Material

We used Angular Material library to quickly build UI implementation process while maintaining consistency and design standards.

Examples

Plant Inventory

Plants can be viewed in a list and cards format, and filter by plant and variety. Additionally a search tool allows to target specific plants by entering a query.

Plant View

Detailed plant view displays key information such as lineage and physical attributes.

‍

Additionally, a diagram displayed a visual of the ideal time for planting along with the heat pattern of the location planted.

‍

Editing the plant allowed to gather all of this information.

Garden Bed Plan

This view allows to select plants from the catalog and add them to a bed to visualize in a calendar planting times.

Garden Bed Timeline

Plants can be organized in gardens and in bed, and from there record gardening events, drawing a timeline for future reference.

Other Projects

Redesign of Handled Booking Flow

Bitovi Agile Training Landing Page