The directors first contacted VI to discuss creating a brand new website for their fast-growing business. The previous website was beginning to look tired and needed to keep up with the company’s rapid growth and ambition for the future.
The newly launched site is a mix of eye-catching imagery, engaging functionality and structural animations – providing the perfect user experience for prospective customers on any device.
Vivid Greens‘ buildings are fully bespoke, so it was only right that the new website is as unique as the brand itself!
Evolution not Revolution
With many website projects, one of the first things that often comes to light is the need to strengthen the brand.
Vivid Green’s original logo didn’t need a complete redesign but our in-house Graphic Designers simplified the existing logo by removing the leaf device and tagline. Although ‘space for life’ and other derivatives such as; exercise, work etc. are still used in their marketing, it was agreed that this wasn’t needed in the core logo.
A new colour palette was applied – using grey rather than black and a more VIVID green. Which is a no-brainer, considering the name!
We also introduced two new colours (navy and orange) which are used for Vivid Green’s corporate offering. This helps to separate their services clearly on the website, e-brochure and social media content.
Original Vivid Green logo
New Vivid Green logo
New colour palette_VG
Easy to decipher…
In line with the website development, Vi’s developers recognised a requirement for a ‘Cypher’ to use as a ‘device’ which in this case replaces the previous leaf icon from the original logo.
Cyphers contain two or more interlaced letters, which are not dependent on each other. The VG cypher is used for graphical purposes but also as a ‘button’ and as a favicon (URL logo).
VG favicon
Working from the Garden Room
88% of organisations, worldwide, made it mandatory or encouraged their employees to work from home after COVID-19 was declared a pandemic in 2020. As a result, a revolution happened meaning large ‘head’ offices now seem to be a thing of the past, with more and more employers choosing to change the way their business operates – for good!
For many, working from home is the ‘new norm’ but although this may seem an enviable choice – remote work brings its own distractions. Vivid Green’s Garden Offices, however, provide the best of both worlds, offering unique, dedicated workspaces.
With this in mind, Vi knew that the key landing pages would need to cater to the market and ensure that users find the right examples from Vivid Green’s vast product offering – when searching for the perfect garden-building provider.
Mobile-first Design
Mobile-first development makes this website equally as eye-catching and effective on mobile devices as it is on desktops.
Call-to-actions are ever-present, making it easy for users to submit an enquiry at any point on their journey across the website. This attractive and contemporary product needed imagery that is crisp at all sizes in order to display it at its best and entice prospective customers.
A fluid website is responsive, but not all responsive sites are fluid…
As 70% of web traffic comes from mobile phones (globally) – we needed to ensure that Vivid Green’s potential customers are able to view their build options, access the price guide, and make enquiries effortlessly, via their mobile devices. Whether that’s via organic search, social media, or digital advertising.
Luxury purchases demand high-quality imagery!
Luckily for us and the client – it’s not difficult to take stunning photographs of their completed garden buildings, as each project that these guys work on is amazing!
It can, however, be more challenging on gloomier days, or if their clients have landscaping works to be completed post the completion of their new garden room. This is where Vi’s digital wizards came in very handy! Photoshop is a wonderful tool (if used correctly) so we were able to make improvements to some of the photography supplied, where necessary.
Eye-catching icons and 3D animated structural renders were also produced by Vi to represent the key features and benefits of Vivid Green’s contemporary buildings.
After all, such a visual product needs to be represented in the best possible way!
Technical Website Features
A forward-thinking, ambitious business like Vivid Green needed the same approach to its bespoke website.
The directors are into their tech… so our in-house web developers incorporated the latest trends into the site design, with feature-rich usability. For example, the Price guideline page has a slider that automatically pulls in the right image when viewing Vivid Green’s size offering, and information in relation to the users’ interests.
Calls to Action (CTA’s)
The main purpose of the website is to gain enquiries. Potential customers can browse examples of Vivid Green’s designs and get in touch, make an enquiry, or request a free site survey on any page by clicking the call button or completing an on-page form. This makes calls to action more effective and accessible on mobile devices – which users are more likely to use on the first visit to the website! These enquiries populate directly into the client’s CRM system, making it easy for them to keep track of and respond to opportunities.
Interactive Diagrams
On Vivid Green’s previous website, important information, such as planning permissions wasn’t visual at all – so our developers wanted to try something different on the new website. (That’s the beauty of bespoke!). We produced interactive Planning Permission diagrams, which allow the user to select the relevant diagram that’s relevant to their dream building. All crucial elements for users who expect to find the information they require, quickly and easily – on their mobile devices.
3D Animations
The Structure page features 3D animated illustrations to show the ‘SIP’ construction method that Vivid Green are renowned for. When you hover over the various sections, the 3D illustrations extend to detail each section of the wall, floor, or SIP panel (for example).
Accordion and Isotope functionality
It can be difficult to make FAQs (frequently asked questions) pages on a website interactive. For Vivid Green, our bespoke developers have used Accordion and Isotope functionality to display ‘frequently asked questions for website users to view. When clicked, each question tile reveals and reforms, with a colour change to indicate which questions have been viewed.
3D diagrams_vivid green
Monthly Case Study Generation
Another aspect of our website maintenance service to the client is monthly case study generation (content marketing).
Producing regular, organic content is a great way of not only keeping your website fresh, but the case studies make great landing pages for SEO.
The client supplies Vi with new imagery of completed buildings periodically, and our team work on a new case study each month, to showcase some of the amazing projects that Vivid Green work on.
These are filtered by building type and the content is created to reflect the many different building uses.
This also feeds into Vivid Green’s monthly Social Media activity, which Vi also manages. New content is important for Social Media marketing, particularly with such a visual product – and it makes sense to share new photography of Vivid’s stunning buildings to keep their followers and prospective customers.
Building for the future
A future that keeps building The new Vivid Green website design is now a robust digital asset for the client, that drives leads and conversions through intuitive navigation and product searching. The strengthened user experience achieves its essential goal: making it quick and easy for visitors to find exactly what they need – the new site structure and capabilities facilitate an appealing user experience. Finally, the elevated site-wide brand storytelling provides trust and credibility for their growing business.
