Project Summary
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.
Key Features
- Strategy Workshop
- UX Design
- WordPress Web Design
- WordPress Web Development
- WooCommerce
- Custom Package Builder
- UK Dev Awards Finalist for E-commerce Site of the Year
- Support, Maintenance & Hosting
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.
We were selected as their web design and development partner, to build them a custom WordPress & WooCommerce website, which would solve their challenges, and scale with them as they continue to grow.
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.
Key objectives:
- Mobile-first to ensure a better user experience
- Create an easier way for users to create custom packages, across devices
- Clear and easy to use navigation
- Performance and conversion driven
- Functionality built into the custom theme to avoid using too many plugins
- Reduce the number of clicks it takes the user to select their options in the create your own category
- Ensure that the user can make edit their custom order from the basket to avoid abandoned carts
- Make adding products in the backend a simple and faster process
- Ensure the website meets GDPR best practice
Solution
Discovery Workshop
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:
- Analytics Review & Search Strategy Discussion
- Competitor Analysis
- User Personas Creation
- User Flow Creation
- Content Outline Creation
- Website Sitemap Creation
- Moodboard Creation
- Conversion & Website Goal Planning
- Page Template Allocation
- Integration & Automation Discussion
- Content Migration Planning
- SEO Discussion
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:
- A mobile first approach to design and development
- Simple social media sharing
- Blog and a ‘News & WooHoos’ section to share mentions in publications and the press
- Related products
- Exit intent banners
- ‘Meet The Team’ custom post type
- Sticky navigation on scroll
- Timeline feature documenting the brand’s growth
- Notification/announcement bar
- Mega menu navigation dropdown
- Sitewide dynamic quick search bar
- Customer login area with easy account and order management
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.
Checkout, Payment & Shipping Features
The site includes a number of features to improve the purchase and delivery process for users and the DBHF team:
- Ability to add pre-order checkbox to checkout page.
- Ability to hide standard delivery option on the checkout when free shipping is available.
- Ability to bulk edit order statuses added via the "Custom Order Statuses".
- Ability to add a store wide notes on products.
- Ability to add a notice at checkout.
- Custom text in the order confirmation email.
- Customised packing slip PDF to make it easier to spot multiple packages and multiple products within a package.
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.
Results
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.
