Skills: UI, Wireframing, Prototyping
Time: March-April 2021
Tools: Figma, Miro, Notion
I designed a mobile version of the online buying experience of Patch Plants, a stylish, minimal online plant shop.
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.
I designed a simple, seamless 5 stage flow that respected the existing web experience style and branding.
Digesting the current experience
I began by digesting the current experience of viewing and buying house plants on patchplants.com. I absorbed the page structure, visual styling like fonts, colours, imagery (using CSS Peeper and Fonts Ninja) and paid close attention to the desktop check out experience - which I would then be translating into a mobile design.
It’s sketching time
After digesting the desktop experience, I ideated different solutions with some rapid, low fidelity sketches of the different check out process phases. As I advanced, I increased the design quality, which can be seen below. A = very basic, B = basic, C = bit clearer.
I then create a wireframe prototype in Figma of the experience.
I then converted my low fidelity wireframe into a high fidelity version following Patch's visual styles, which I digested at the start of the process.