Widow Fleur Shopify Website Design Case Study

Window Fleur came to me looking for help turning their Shopify store into a better mobile-first website and for their unique product offering to make more sense to the user, which would help boost conversion rates.

Client: Window FleurServices: UX & UI Design, ShopifyRole: Shopify Design Expert

Product page UX wireframe

The existing website had multiple elements that resulted in a poor UX and a poor conversion rate. I suggested creating a UX wireframe prototype of a revised design of the product page that took their existing 3-page journey and made it work within one small mobile screen. A key UX idea was to utilise screen slide-ups to house more information to not overwhelm the user on the product page.

Accessibility and best practice in a design system

The previous site looked nice but it was very passive and under further inspection it didn’t meet modern web accessibility standards. One of the trickiest parts of being a UI designer is to do both accessibility and maintain the brand and get the brand personality in throughout the website experience. I took a fresh look at all the elements when building out the new design system and tweak the ratios so the typography was clearer and the call to actions stood out.

Figma mobile prototype of new website design

Once I have created the design system and have mapped out all the elements, states, components and Shopify sections I then build out the pages using the design system and create a prototype of the final Shopify store in Figma so we can through the purchase journey on a real device.

Mobile user interface screens

Here are the opening screens through the mobile purchasing journey. I brought the journey to life by using the brand patterns that I created and also brought in key shopping messages and purchase converters in a fun and memorable way.

New Shopify store ready for future growth

Working with my close Shopify Expert developer, I oversaw the QA (quality control) phase of the project which meant the final Shopify store was pixel perfect to the designs.

The finished website has all the Shopify 2.0 sections needed to help build out new landing pages to aid future business growth. Investing in the Figma design system means that Windowfluer are now set up perfectly for CRO (conversion optimisation)  work.

Ant was fantastic to work with—professional, efficient, and made the whole process seamless. Our website saw huge improvements, and we’ll definitely be working with him again for future projects. He also has great industry contacts, which was a real bonus!

Frannie Liddle
Window Fleur Co-Founder/Creative director