Don’t Buy Her Flowers is a UK e-commerce brand, specialising in thoughtful and customisable gift packages for all occasions.
After significant growth their existing website had reached its limitations, giving no flexibility or control.
Building packages and checking out was not intuitive, and especially difficult on mobile. The website was also difficult to update and manage for their team.
We designed and developed a mobile-first WordPress & WooCommerce website, with custom functionality to dramatically improve the user experience, and an easy-to-use backend for their team.
Challenge & Objectives
After a period of significant growth, Don’t Buy Her Flowers found that they’d outgrown their existing website. It had been built using an off-the-shelf WordPress theme and had reached its limitations, offering no flexibility and being very buggy.
The new site needed to better represent the brand, easily scale, and focus on usability, especially for their mobile users.
The existing package builder and checkout process were not very intuitive and especially difficult for mobile users. Yet their mobile traffic was higher than desktop.
We needed to deliver a smooth, frictionless shopping experience across devices, and an easier backend experience for their team to manage and update products, packages, and other content.
Our website strategy workshop allows us to delve into past data, and present the best structure for the website moving forward. We brought together all key decision-makers to understand their key website goals and objectives.
The workshop included:
Wireframes & Prototyping
From the findings of the workshop, we were able to wireframe the key page templates for desktop and mobile views, showing the client where important features would sit in relation to each other, and how user journeys would flow through the site.
This is done before visual design, which can distract from usability considerations.
We created 22 page views based on the page templates, 44 screens across the 2 devices.
We created high-fidelity designs for the 22 page templates, showing each of the viewports (mobile and desktop), so 44 screens in total.
We then created a style guide for all UI across the site including forms, calls to action and image aspect ratios, to ensure consistency across the pages.
Each of the pages was bespoke designed for DBHF following brand guidelines, and presented using our online proofing tool, which allowed them to test the various user journeys discussed in the strategy workshop.
Development Of A Bespoke Theme
For all of our websites, we create bespoke themes (never using off-the-shelf themes). This improves usability and ensures that the websites can be scaled and built around the business, strictly following design visuals.
Improved Usability & Engagement
We implemented numerous features to improve usability and engagement, including:
Custom Package Builder
Don’t Buy Her Flowers needed a more user-friendly, visually engaging, and product-focused way for their customers to build custom gift packages on mobile and desktop.
They also wanted the user to be able to edit options from the basket if they wanted to make changes to their custom order, to save them from having to start again, reducing cart abandonment.
It also needed to be simple to manage from the backend for their team, as their previous off-the-shelf plugin solution was very time-consuming.
We developed a completely custom product builder with improved performance and expandability as it evolves. It uses drag and drop and dynamic backend search for adding and managing the products, and a visual, easy-to-use interface on the front end, with simple checkboxes for easy mobile use.
A Foundation Of SEO Best Practice
A new site can pose a risk to organic search performance if not considered and careful migration carried out.
We ensured SEO migration best practice was followed, including thorough redirect mapping where required, and preserving URL structure where possible. This was carried out by our in-house SEO.
We included Yoast to give the team at DBHF easy control over their metadata and content optimisation, and the Redirection plugin to ensure they can easily manage future redirect needs.
Easy To Follow Training Videos
To ensure that the website is kept active and up-to-date with content, whether page updates, new packages, or new pages, we provide bespoke video tutorials.
These show various features and tasks being carried out and are narrated by one of our team.
They live in the backend of the website and provide a handy refresher for their team, or onboarding for new employees.
The website was very well received, winning Best In Class for the ECommerce, Consumer Goods & Retail categories in the IMA Awards 2022, and placing as a finalist alongside some of the UK’s largest brands in the 2022 UK Dev Awards.
It has also been recognised on several design websites, including Awwwards, CSS Winner & CSS Reel.