Graphical Utility Strip (GUS)

Our client approached us to design a responsive feature called a Graphical Utility Strip (GUS) that would appear at the top of all their web subsites (also known as web properties). This feature was intended to:

• unite their web properties together under one, common, navigational header
• promote stronger brand recognition between each of their properties
• provide stronger linkages between each property
• give another avenue for promotion of their products and events

Four web properties were to be included in the GUS and it had to be designed in a scalable way so that it could be fully responsive and also serve up different content for different regions. This meant that web property links, ads, and events needed to be hidden or shown based on regional restrictions.

After I led a detailed, requirements gathering and validation process, we iterated on a set of user stories with our client to ensure we were capturing all the requirements that the GUS needed to satisfy, from both the user's perspective and the administrator's perspective behind the scenes. Once we were satisfied with the requirements, I started hand-sketching potential layouts and designs for the GUS, iterating collaboratively with our visual designers to set an overall design approach while they started thinking about the visual design approach.

We iterated on the initial sketches internally to create our initial design direction which were then developed into detailed, annotated, wireframes in OmniGraffle. The designs were responsive to ensure that the GUS would adjust its presentation based on the available space on the user's screen size. We iterated on these designs with our project contact before presenting them to their larger group of stakeholders for design approvals. We not only captured the user's perspective visiting the site, but also made sure we captured the administrator’s experience behind the scenes setting up the GUS for each region.

The administrator's interface was controlled by a content management system (CMS) and out of scope for visual design, but I felt we needed to capture the data model for the management of how the elements of the GUS should show up for each region. These administrator wireframes stirred up some much needed discussion with our client and drew attention to the administrator’s experience, which can often get overlooked.

This led our client to exclaim:

“These are the best wireframes we’ve ever seen”

The GUS is live and in production, allowing users to freely navigate to each of our client’s web properties no matter which device and region they are viewing the sites from and our client is delighted with the results. Our foresight to consider the administrator's experience brought to light several key challenges in the management of the GUS from the back end and we were able to design thoughtful ways to address those challenges.