PATCH PLANTS

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.

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

Role

User research • UX design • UI design

Tools

Miro • Figma

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.

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

Role

User research • UX design • UI design

Tools

Miro • Figma

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.

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

Role

User research • UX design • UI design

Tools

Miro • Figma

Challenge

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.

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.

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.

Process

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.

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.

Wireframes for Patch Plants mobile app.

High fidelity mockup

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.

High fidelity design for Patch Plants mobile app.