sites and systems: UI Style Guide

Home page

The style guide includes a lot of material. It started small and kept growing. We tend to add something when it looks to be of general utility or when it's important for the collective memory of the organization. A general guideline is, if it looks like it could be used by two or more projects in the company, it belongs.

The content is alternately accessible from the home page or the left navigation pane. Most of our applications have the same structure, which helps system users around the globe easily understand the options available to them.

popup calendar

One of the more challenging components I worked on was a popup calendar for data entry pages that could be localized into multiple languages. The Arabic version displays the Gregorian calendar in right-to-left format. The calendar is a client-side component, but the style guide has documentation and examples of how to load and configure it from within Java. Most of our web applications at Expeditors are JSP-based.

If you're curious, the date shown is November 24, 2004, the day before Thanksgiving. The calendar component is pretty open-ended about localization. I've done Japanese, Korean, Swedish, Spanish and a few other languages so far. Oh, and it works in English too.

sample app

The style guide contains a handful of different sample layouts and pages, and also several entire sample applications that developers can use to get a head-start on a new project. The sample apps typically include a couple of search pages with results, an edit page or two, plus examples of tabs, twisties, popup windows, calendars and other little odds-and-ends that take time to implement.

The sample app templates also simplify the process of creating a design prototype or demo, which we tend to do a lot of in our group. Sometimes the best way to show a new design is to mock it up and then let the decision-makers push buttons for a few minutes. Much better to find out early that some wild new thing won't work than after you spend weeks building it out to a production level.

icons

The logistics industry is fabulously complex, and shipping professionals must be mindful of many odd variables at once. One way we do this is through grid displays that alternate small actionable icons with textual data. So, for instance, some key value might be in text, but a status display and edit or detail view options could be represented as icons to save space.

Our design group collaborates to define icons that work together well and are easily understood by our customers. We spend a lot of time getting them right. The current standard icon images, including rollovers and grayed disabled-state images, are grouped together in the style guide. This image shows a few of them.

tree control

The tree control is one of the more complex components in the style guide. The component was designed by Sam Hranac; I got to have the fun of building it. The component was created for a particular system, but needed to be documented prior to handoff, so we wrote up the example for the style guide and hoped someone else might need it. Other designers and developers liked the look of a flexible selection tree with checkboxes, so variations pop up every so often.

About Expeditors International

Expeditors International is a global logistics provider headquartered in Seattle. The company employs some 8,000 people in locations spanning the globe. Think of Expeditors as a "travel agent for freight". The company enjoys a reputation for great customer service and professionalism. Pretty nice people to work with too - check out the careers page at Expeditors.com.