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
Did you know that 83% of consumers think that a seamless user experience across all devices is vital?
Or that 60% of online shoppers will use only mobile devices to make shopping decisions?
With stats like these, it’s obvious that Patch Plants needed a mobile user experience, quick. Every day without it was a day of missed opportunity and missed profit.
To design out a suitable mobile experience, I had to start with the desktop. 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.
Using a handy Figma wireframing kit, I then create wireframes of the experience. I did this using a grayscale palette to avoid any colour bias.
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.