Challenge & Objectives
Don’t Buy Her Flowers experienced a prolonged period of significant growth. With this, they found that they had outgrown their existing website, which was built on a pre-built WordPress theme.
We were selected as their agency partner, to create a custom built WordPress/WooCommerce website, and for ongoing support & maintenance.
The new site needed to better represent their brand, and easily scale with continued growth. A key focus on usability for mobile users was important, with their analytics showing a heavy weighting to mobile visitors. The site needed to allow users to discover content more easily, and ensure a smooth, frictionless shopping experience.
Key objectives:
- Achieve a website that is designed and built mobile-first to ensure that the traffic from mobile devices can checkout far easier.
- Create an easier way for mobile users to create their own products.
- Clear and easy to use navigation for the user.
- Build a mobile-first website that is performance and conversion driven.
- Have a bespoke website built that has functionality built into the theme to avoid using too many plugins to add functionality.
- Reduce the number of clicks that it would take the user to select their options in the create your own category.
- Ensure that the user can make changes/edits to their custom order to avoid abandoned carts.
- Make adding products in the backend a simpler 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:
- Competitor Analysis.
- Analytics Review & Search Strategy Discussion.
- Website Sitemap Creation.
- Content Outline Creation.
- User Personas Creation.
- User Flow Creation.
- Moodboard Creation.
- Conversion & Website Goal Planning.
- Page Template Allocation.
- Integration & Automation Discussion.
- Content Migration 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 around the page templates, 44 screens across the 2 devices.
UI Visual Design
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, call to actions 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 templates). 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.
- ‘News & WooHoos’ section to share mentions in publications and the press.
- Related products.
- Exit intent banners.
- ‘Meet The Team’ custom post type.
- Blog.
- 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
DBHF 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 the options 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 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 provided bespoke video tutorials. These show various features and tasks being carried out, and are narrated by one of our team.
