--> « Back

Overview

Most teams that I have worked on were short of resources and as the sole User Experience Designer was also the de facto visual designer. I started out in graphic design before changing to software; trained in the fundamentals of visual design as an undergraduate the transition to interaction/interface design was a natural one. I already knew about grids, standards, color theory and progressive display of information. "Form follows function" had always been my adopted motto so visual considerations for software have always supported user tasks.

Luckily for me, most of my work has been for SAAS or other on-demand browser accessed applications and the flexibility of the presentation layer offers many more choices than client-side application toolkits for windows.

 

Header

While part of Yahoo! Ad Systems I supported multiple product teams. The look and feel of the different tools was overwhelming and confusing. As more products and tools were being created and revised every month a new, consistent, look and feel was sensible. I designed the header based on then current Yahoo! consumer page standards and modified where appropriate for the enterprise application world. My goal was to design a clear and simple header that was attractive that did not call attention to itself.

Yahoo! Ad Systems Header

 

Style Guides

When engineering teams get large enough that direct communications between designers and developers is not always possible it is often advisable to create some kind of style guide. This tool, whether online or in paper form, aids propagating a consistent user experience across the many pages of complex tools and between modules or products in suites. Yes, they can take time from design but with a good style guide designers and developers can answer some questions themselves, improve interaction consistency and help with consistent branding also.

This images is of the style guide I created for Yahoo! Ad Systems tools. The visual components were specified and illustrated.

Yahoo! Ad Systems Visual Styleguide

This next example is part of a Clarify style guide that was use for the final visual style, as well as used when creating Visio documentation. Designers on the team could copy the layout, pate into their document and use the guidelines to facilitate design.

Clarify window specification

 

Redesign

My role at Bizgenics included significant visual design in addition to interaction and interface work. The first significant assignment was the redesign of the product's look and feel. One goal was to regain screen real estate taken by the left side navigation panel. The panel was popular with users but it did increase scrolling and decreased horizontal data vision. The solution I proposed was to allow the user to hide the panel. To make it appealing and more discernable than an instant change I specified an animation so that the panel appeared to retract into the header.

 

Logo

Having used the Egyptian Eye of Horus since the company's inception management felt that the original logo was out of sync with the changing strategic focus. Updated branding was important to support evolving marketing efforts and new strategic vision. After review of competitive branding and trends in other verticals a simple logotype was considered the best option. Adding the arrow starting and ending at the "I" connoted the cycle of information retrieval and organizational feedback.