After conducting some research on the existing site and scoping an initial site map, we sat down with the client and discussed their customers user journey through the site. It was at this point that we realised that their current guidelines were not geared towards delivering a visual user experience as they had a very limited colour palette and a logo which would not work at every touch point (especially when it comes to multi-language).
We therefore conducted a brand audit and determined that there was some work required to update Geotech’s brand to work across multiple devices and social media. We started with the logo which up to this point had a separate ‘G’ from the wordmark which meant the brand was diluted as it reduced down to mobile. As we were at a point where we were designing a brand new responsive website, now was the logical time to address this issue.
We incorporated the ‘G’ into the wordmark which meant a better size relationship and made the logo more legible. As the relationship with Landtec was no longer required, we decided to remove the strapline to make it easier to position and overall gave the logo balance.
Next, we created a new icon for the ‘G’ which allowed this to be used separately from the wordmark where appropriate. This meant the icon could be used as part of the design language on the new website and on social media. The icon was designed in line with existing iconography which meant it could easily sit alongside calls to actions and product icons. As part of the design for the site, we introduced some of the illustrated characters from the recent product and service videos we had produced for Geotech to sit alongside these icons in the footer to give the site some personality.
We then proposed introducing an ‘accent’ colour to make call to actions stand out. This allowed us to use colour without over utilising the existing red or the blue (which was to be used on the new product support and service centre areas).
We also looked at their product offerings and compared to the current logo, the typefaces were inconsistent. Rather than change the font of the logo which is already established and has brand equity, we decided to bring all associated product lockups and headers in existing literature in line with the logo. That allowed us to keep the body copy of the website and literature in the existing font.
Finally, we introduced a new, distinct proposition statement. This represented a promise of value to be delivered. It gives a prospective customer a reason to choose Geotech rather than a competitor. It needed to clearly state what they had to offer in as few words as possible. It is also useful to have this value proposition available in the header of the new website from an SEO perspective.
Once we had agreed the new site map and refined the branding, the next stage was to wireframe the site to establish the initial page layout and map out the user journey. From this process, we were able to draw up a list of core components that would run throughout the site. These included links to the new service centre and product support areas, product carousels with built in filters and a worldwide distributor map with filters that can pinpoint distributors based on territory, country, products and service agents.
The next phase was to design the page templates which included designing the core components as individual blocks that can be dropped into the templates. The design had to be flexible to not only account for the layout to be responsive for all devices, but also to allow for the site to be translated into a wide-range of languages including EU alphabets such as simplified Chinese. We also needed to consider how to build in existing features such as the service tracker, product literature, software downloads and certifications and video animations as well as new features including product explore lightboxes, product FAQs and the distributor map. As part of the design, we also incorporated the map and a quick enquiry form into the footer so it could be accessed anywhere within the site.
Once the designs and user interface dashboard were completed and signed off it was time to build.
From conducting our research, we found that product servicing and aftersales support are two of the most common reasons customers visit the Geotech website. So we needed to make these new sections easily accessible. Which is why we built in sticky tabs to the left hand side as quick links to these sections. We also made these stand out using red for the service centre and blue for the product support area which also changes the header colour to show you are specifically in those sections. This is where our new accent colour comes into play. The CTA links and buttons are clearly visible as you go through the pages of the site and because of how we have scoped the site you are never more than two clicks away from the home page.
We then built in a product search filter that runs throughout the site as a carousel. Typically search engines on product websites that allow visitors to select options will only provide the ability to select a single category at a time. As this is a technical website we felt it important for visitors to have the ability to be very specific about their requirements, thus hone in on the best product for their needs very quickly. The resultant filter updates the products displayed automatically as selections are made providing a seamless user experience.
Once you are on a product page there are clear icons showing which specific gases the product analyses, what sector they are typically used in and what types of applications. You are also able to quickly access product datasheets and literature as well as accreditation certificates. There is also quick access to the product support and service centre as well as a distributor map which is pre-filtered for that particular product. The product page also includes links to other related products and a list of case studies from different territories.
The product support area again uses a product filter. Once selected the user has access to product downloads, operating manuals and multi-language videos. There is also a comprehensive FAQ section with a categorised collapsible menu system so you only need to click on the question that’s relevant to your query rather than having to scroll through a load of text. Also within the product support area, there is the ability to create and manage decision trees so that customers are able to perform self-diagnosis by answering a series of simple yes/no questions.
The service centre has a wide range of options for you to choose from. Product returns and FAQs feature prominently along with a clear CTA to hire an analyser while yours is in service. There are also options to track the progress of an existing service, view the types of service packages that are available and access to warranty information. Along with service videos and the worldwide distributor map, the end result raises the overall level of service provided by Geotech online greatly from their previous website.
Phase 2 will officially launch the multi-language translator and we will be rolling out more exciting new developments as and when new products are launched.
Geotech are a UK based firm who manufacture and supply a range of gas analysers and environmental monitoring equipment.