Overview
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.
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.
