Case Study: Ecoseeds
Scroll image to view page
Overview
Ecoseeds, based in Strangford, Co. Down, specialises in native wildflower seed production and habitat restoration services.
Their original website, built over a decade ago, was limited to a desktop-only layout. They needed a design overhaul and a mobile-friendly site that could be easily updated in-house.
Website Requirements
- Modern, mobile-friendly design
- User-friendly CMS for easy updates
- Seed cost calculator
- Design of 16 page How To Guide PDF and webpage
- Google Analytics integration for website monitoring
- Comprehensive training on website management
UX Design
The primary goal was to simplify the seed ordering process for users. This was accomplished by placing the prices and ordering page as the main CTA on the homepage.
Wireframes and sketches were used to structure the content effectively.
User testing was conducted at multiple stages: wireframe, high-resolution design, and pre-launch, ensuring a seamless experience.
Home page planning and sketch
UI Design
The original logo was a blue-and-yellow JPG, limiting design and colour options. I created a vector version, offering greater flexibility for display.
I developed comprehensive UI design guidelines covering logo usage, image dimensions, colour scheme, buttons, layout, and typography. These standards ensured consistency and a cohesive user experience.
The initial design concept featured full-screen wildflower images. However, limited high-quality, native wildflower photos, and unusable international stock images, led me to explore alternative visuals. A royalty-free flower illustration paired with a blue gradient background and the white logo became the final, effective design concept.
Original logo
Vector version
Early concept
Early concept
Flowers illustration
Final concept
Brochure Design
I designed a 16-page "How To Guide" PDF in Illustrator to complement the online content. For selected pages, low-res, text-only PDFs were created to ensure accessibility and ease of download.
Front End Development
HTML prototypes were developed for all pages before integration into the CMS.
JavaScript was utilised to animate page elements, enhancing user interaction.
Google Analytics was set up to track and monitor website traffic post-launch.
WordPress Development
The website was built using the Underscores starter theme, with custom templates created for various pages.
To enhance functionality, the following plugins were integrated:
- Advanced Custom Fields Pro
- Seed Calculator
- Contact Forms
Ecoseeds required full control over content, including complex pages like Pricing and the How To Guide. WordPress was used as the CMS, with Advanced Custom Fields creating custom content fields. Repeater fields were implemented for the pricing table, enabling easy editing and addition of new rows.
Sowing Calculator
Previously, Ecoseeds provided written instructions for calculating seed quantities. To improve user experience, I developed an interactive calculator. After researching plugins, I selected one that could be customised to include a seed dropdown, draggable slider, and auto-update functionality.
Calculator
Pricing table
Result
The website launched in August 2022, receiving positive feedback from both staff and customers. Google Analytics data shows 1,400 visitors within the first five months, with the "Prices & Ordering" page being the most visited.
