Reading Time: 2 minutes

Colt provides communications services to information intensive businesses across Europe, Asia and North America.

The Challenge

A fresh emphasis on connecting partners with products in a heavily componentised pattern library to play nicely with Beaver Builder in WordPress.

Colt’s WordPress site needed a new Information Architecture and a re-skin to bring it up-to-date and iron out usability and user experience problems. The delivered design patterns created need to work seamlessly with Beaver Builder, their landing page creation tool of choice.

Part of the design challenge was to create a more visual experience, in a way that was light weight and easy to achieve using WordPress and stock imagery. This had to be achieved without diluting the main teal/black/grey brand colours, introducing secondary brighter
colours without becoming overtly colourful.

Another major challenge was the product selection and details pages. This was wire-framed extensively to ensure the categories were reduced and clear, and that Live Chat and help was available as prominently as the product data on the details page. This included a desire for more prominent
video content.

Design Work

  • Initial stakeholder research and user journey mapping
  • Design of graphical user journey maps (example below)
  • Creation of an HTML wire-frame to demonstrate IA and UX
  • Design mock-ups to illustrate design direction
  • Navigable responsive design prototype of key site pages, designed in HTML/CSS/
Home page
Product Landing
Product Description
Case Study
German home page
Interactive HTML wire-frame demonstrating live filters and drop-down navigation
One of multiple User Journey graphics