Optima, a global provider of glass partitioning solutions, have always made it their priority to present their products and services in innovative and industry-leading ways, to help engage with their client base, stay ahead of the competition and showcase the high quality and innovation of their own products and services.
Consequently, with smartphone market penetration and mobile browsing on the rise and much of the work in the construction industry taking place on-site rather than in the office, they felt the need to revamp the Optima website (www.optimasystems.com). Optima’s key objectives for the website redevelopment were:
• To ensure that visitors using almost any device get the best possible user-experience
• To better showcase their previous projects
• To educate visitors about Optima and how it’s differentiated from its competitors
• To present their products and services in a modern, user-friendly and visually gratifying interface
• To add character and a ‘human face’ to the Optima brand
Fulfilling these objectives required a truly engaging user experience, across devices of all sizes. The website also needed to meet Optima’s overall business objectives, which were to maintain their status as a leading partitioning expert and to expand their customer base.
As digital agency Cyber-Duck (www.cyber-duck.co.uk) had been successfully working with Optima since 2008, creating solutions such as a website, an iPad application, a mobile game and a viral campaign, Optima commissioned Cyber-Duck to renovate their website.
The website was planned using Cyber-Duck’s proven user centred methodology. This methodology combines a user-centred design process, that aspires to optimise the user experience across all devices, with scrum and agile project management. Consequently, each stage of the build is reviewed and tested from a user’s perspective. Furthermore, Cyber-Duck selected a Responsive Website Design (RWD) so that the website could be cost-effectively adapted to various different screen-sizes, without Optima having to create and manage different content versions for different devices.
Cyber-duck spent a lot of time working closely with Optima to plan the website hierarchy and flow in a ‘kick-off workshop’. One of the most effective methods was a simple card sorting technique, whereby users can organize and arrange the information that would appear on a website to prioritise it and start visualising critical user journeys. It was vital that Optima remained actively involved throughout the design process even when producing paper prototypes of the key website interfaces and how they would appear on various devices.
Based on what Cyber-Duck learnt during the workshop the agency mapped out the best logic flow and information architecture for the new website. Cyber-Duck then wireframed the key page templates with content provided by Optima, including all-important calls to action as part of the design. The wireframes served as a guide to the website’s layout and functionality, enabling the developers to begin coding in parallel to the graphic design process. As mobile and tablet compatibility was so central to the brief, Cyber-Duck also wireframed the page templates for the following device / screen widths:
i. 768 wide – iPad portrait
ii. 480 wide- iPhone landscape
iii. 320 wide – iPhone portrait
Next, Cyber-Duck produced the website art direction based on the layout defined in the wireframes. Once the art direction was agreed with Optima, a style guide for the website was produced, built in HTML to help speed up development and reduce cross browser testing time. The pages were also designed in the variety of widths to accommodate the Responsive Web Design strategy selected to optimise the site for various devices.
Optima were also able to stay true to their brand identity by using their own brand typefaces on the website. This was made possible with Web Fonts, one of the many HTML5 techniques utilised during the site’s design and development.
The website was future-proofed for content and modules being bolted-on as it was designed specifically to be flexible so that Optima can add new content without the design being compromised.
Notable improvements were also made to the member’s area, enhancing the user-experience for registered Optima customers including making it easier to order products directly online as well as being able to find and download exclusive content such as CAD drawings.
Cyber-Duck also applied some valuable enhancements to help the user drill down to the content relevant to them, such as implementing filters throughout the website where the user can define what type of content they are interested in, be it news, projects or products. The filters on the homepage are automatically remembered so the user gets a more tailored experience every time they visit the Optima website.
The final stages of the build involved rigorous quality assurance testing, before the site was launched. As part of the user-centred methodology, Cyber-Duck also ran extensive usability testing. This ensured that there were no issues that may have been overlooked during the design and build stages.
Optima have continued to embrace mobile traffic. Over nine per cent of their total visitors now come from mobile devices (compared with 4.5 per cent in October 2011, and 1.9 per cent in October 2010), with a significant split between mobile and tablet visitors.
From the analytics we can see that bounce rates from mobile users has declined whilst mobile traffic continues to increase. Engagement of mobile users has also increased with mobile users on average spending a minute longer on the website than they did in 2011 when the website was not responsive.
Since the launch of the new website Optima representatives have praised the website for its professional appeal, user engagement and easy accessibility on any device.
These results are early indicators that Optima have taken a wise decision in producing a responsive website as all the data suggests that mobile and tablet traffic is only going to increase and companies that ignore this, do so at their own peril.