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.

↓

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.