Case Study: Ecoseeds
Design & development of a custom WordPress website for the wildflower seeds company
Scroll image to view home page
Overview
Ecoseeds are a seed production company based in Strangford, Co Down. Their core business is growing native wildflower seeds. They also provide habitat restoration services.
Their original website was built over 10 years ago and was a desktop-only layout.
They required a design refresh and a mobile-friendly website they could update themselves.
Website Requirements
- A modern mobile friendly design
- An easy to update CMS
- A calculator to determine seed costs
- Design of 16 page How To Guide pdf and webpage
- Website monitoring set up with Google Analytics
- Training in all aspects of website management
UX Design
The main objective of the website was to make it easy for users to place an order to buy seeds.
This was achieved by having a link to the prices and ordering page as the main CTA on the homepage.
Sketches and wireframes were used to organise page content.
A group of users was set up to test the website at wireframe, hi-res design and pre-launch testing stages.
Home page planning and sketch
UI Design
The only available version of the logo was a jpg in blue and yellow. This would limit the layout and colour options for the website.
I created a vector version of the logo, which allowed greater flexibility in how the logo could be displayed.
User Interface Design guidelines were created detailing logo usage, image dimensions, website colours, buttons, layout and typography. These guidelines were strictly adhered to, creating consistency and familiarity for the user.
The initial design concept was to have wildflower images displayed full screen. Unfortunately there were limited high quality photos available. High quality photos from international photography websites were unusable as they didn’t feature native wildflowers.
While researching design concepts, I found a royalty-free illustration of flowers. Combining it with a blue gradient background and the white logo worked well and became the final design concept.
Original logo
Vector version
Early concept
Early concept
Flowers illustration
Final concept
PDF Design
I designed a 16 page How To Guide in Illustrator to complement the online version. Low res, text only PDFs were also created for selected pages.
Front-end Development
HTML prototypes of all pages were created before they were integrated into the CMS.
JavaScript was used to animate page elements.
Google Analytics was set up to monitor future website traffic.
WordPress Development
The basic WordPress starter theme Underscores was used to build out the different templates for the website.
In addition, the following plugins were used to add functionality:
• Advanced Custom Fields Pro
• Calculator
• Contact forms
Ecoseeds required full control over all content, including complex pages such as Pricing and the How To Guide.
WordPress was used for the CMS. Advanced Custom Fields were used to create separate fields for all content. Repeater fields were used for the pricing table, allowing the admin user the ability to add new rows or edit existing ones.
Sowing Calculator
Previously Ecoseeds had written instructions on how to calculate how much seed was needed. An interactive calculator would be much more user friendly.
I researched calculator plugins and found one that could be customised to suit our needs. It features a dropdown selection for seeds, drag-able slider and auto update.
Calculator
Pricing table
Result
The website launched in August 2022 and feedback from staff and customers has be positive. According to Google Analytics, there have been 1,400 visitors in 5 months with the most popular page being Prices & Ordering.
