Situation

Our client, a leading manufacturer of security solutions, realized that their solutions for governments and enterprises had a heterogeneous user experience. No common standards or guidelines have been defined.

As it is very often the case, our client had previously developed a strong identity for paper-based documents but did not define guidelines for digital solutions. He understood that end-users did not recognize the brand when using their solutions as they confronted different look-and-feels on each solution. Moreover, the client acknowledged development teams often wasted time due to the lack of style guides and reusable components, having to start from scratch each time.

Open Web Technology was approached to define and implement a state-of-the-art multi-screen and multi-platform style guide that could be easily branded and customized on demand.

Approach

Together with the client our team defined a three-step approach to turn his vision into reality: 

  1. Inventory
    The first step focused on interviews of stakeholders to catalog existing applications and style guides as well as identify the users of all applications of our client’s portfolio. The interviews were also used to specify all the devices and technologies targeted. 
  2. Design
    In the second step, our UX specialists drove the iterative design of the style guide with successive workshops to validate the UX and UI, from each component and item to the page level using a specific framework. In addition, a governance model to maintain the style guide was defined. 
  3. Implement and train
    To facilitate the adoption of the style guide, the third step focused on delivering a UX/UI toolbox for web developers. This toolbox allowed developers to efficiently roll-out new applications. Furthermore, trainings were given to engineers, designers and team leaders to efficiently start using the style guide.

Results

In only a few weeks, Open Web Technology successfully defined and implemented the new style for all client’s future applications. 

Based on the multiscreen style guide, our client is now able to provide a state-of-the-art design and feeling across all applications and platforms, while saving energy and time in the design and development phases.