Reviving Blank Beauty's Headless Shopify UX

Technical Challenges

Blank Beauty’s existing platform suffered from technical issues related to their problematic headless implementation as well as being saddled with tech debt. 

On the UI/UX side, their Colour Picker tool’s functionality was unreliable, leading to inconsistent experiences for customers. Additionally, they had issues with banner displays and interactive UI elements.

Solutions

Discovery

We kicked off with an intensive discovery sprint, diagnosing pain points and prioritising critical UX issues. By clearly mapping challenges, we shaped a phased plan focused on quick wins that boosted usability.

Design Process

We started by creating an atomic design system, which we then used to quickly create interactive prototypes. This allowed us to fine-tune our solutions before committing development resources.

Using this approach we were able to streamline complex user interfactions, particularly the troublesome colour picker and banner functionalities, and significantly simplified product exploration and selection.

Development Process

Key elements of the development process included:

• React frontend integration, optimised for performance and reliability.
• Refining Shopify’s headless backend for stability.
• GitHub collaboration for smooth process management and continuous delivery.

Results

Blank Beauty’s website makeover delivered immediate improvements to their user experience, resulting in a 25% increase in their conversion rate. Additionally, our technical optimisations allowed them to achieve 2.5x faster page speeds across their site.