Creating a mobile app for a plant delivery service.
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.
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.
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.
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.
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.