Creating a mobile app for a plant delivery service.

Creating a mobile app for a plant delivery service.

As part of an immersive UX/UI bootcamp, I was tasked with creating a lightweight prototype of a mobile app using Figma for Patch Plants.

image

Patch Plants helps people to discover plants suitable for both indoors and outdoors that are then delivered straight to your door.

ROLE

UX Design
UI Design
Prototyping

TOOLS

Figma
Photoshop

TIMELINE

5 weeks

The Problem

The challenge set for this project was to develop a mobile app version of the Patch Plants website, with buying an indoor plant as the the user flow to be prototyped within Figma. The below user story summarises the task that was set.

As a fan of plants I want to buy a plant from patch for my desk so I can improve my home office setup.

The Solution

I began by absorbing the current experience available on the Patch Plants website which including the structure of pages, styles including the fonts, colours, imagery, and also importantly assessed the checkout experience as that was what I would be translating to my mobile app.

image

The Outcome

The main goal of this project was focused solely on the UI of a mobile app, so I chose not to conduct any usability tests to validate the design as I had not identified any specific user problems at the defining stage of the project.

The full process

Ideation

Sketching

After absorbing the current website experience of checkout for the Patch Plants website, I began by sketching solutions in low fidelity before jumping into Figma. This helped me quickly map out and understand the user flow and how I might translate that to an experience within a mobile app.

image

Wireframes

Before creating my high fidelity prototype I decided to convert my sketches into low fidelity wireframes. By doing this I was able to validate the initial ideas I'd developed within the sketches and add more detail in the layouts and the content to mirror the content found on the website.

High fidelity wireframes

Prototyping

High Fidelity Prototype

Below is the final prototype I created. I included various interactions and transitions from Figma to mirror the main checkout experience defined in my initial assessment of the website experience.

The Outcome

The main goal of this project was focused solely on the UI of a mobile app, so I chose not to conduct any usability tests to validate the design as I had not identified any specific user problems at the defining stage of the project.