Portfolio

Thinking like an Engineer

Design

"I know what I need, I just need to find it" - Frequent response from users

Overwhelmingly, customers expressed frustration about how hard it was to find a solution with specific attributes on Small Parts (Amazon’s Industrial & Scientific supply store). When asked how they commonly purchase equipment and materials, they demonstrated that they retrieved their dog-eared catalogs (sometimes with tape marking commonly used pages), ran their finger down the table to the row that matched their criteria, and copied the part number. The part number was then used to purchase the item, or it was relayed with a purchase order for someone else to buy.

There was another aspect, not expected, that arose from our observations; users also used the table to compare several possible solutions, comparing costs and availability.

Paper Catalog Page Example of tools used by customers

Development

Great user experience design does not call attention to itself.

Industrial catalogs have been around for over 100 years. In that time, they’ve honed the compact presentation of millions of variations to a science. Repetition is suppressed; information that cannot be compared clutters the tables and hides important values. To extract the functional aspects of the catalog table, we brought in a collection of different catalogs, laid them out on the table, and examined common layout elements.

Function Mapping A mapping of paper catalog to web table functions

The result? Hundreds of emails from our customers thanking us.

Examining Visual Pickers

Design

"Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away." — Antoine de Saint-Exupery

The use of visual pickers is not uncommon; however, the vast majority suffers from a host of issues stemming from their implementation as block-level links with sprited backgrounds. The challenges of implementing visual pickers on an enterprise scale include, but are not limited to:

• CSS id / class creep
• Extra, non-semantic code
• Images that are only accessible to visual users
• Images that disappear when the page is printed
• States (i.e. active, inactive, hover) need separate images

Development

Building a Better Visual Picker

Rather than try to find Java Script or complex mirror site solutions, I stepped back from the problem and established the following tenets for the final solution:

• All styling had to be reusable (i.e., no unique code for each visual picker)
• The HTML had to make sense to a non-visual browser
• Images needed to be readable by a non-visual browser
• Images needed to be printable
• Only one image per visual picker

After several attempts, the final solution was simple, and when shown to the remaining teams at Amazon, was adopted as the next generation of visual pickers. In deference to Amazon, I cannot share the details of the solution, except that it decreased latency for image-rich pages by over 75%.

Creating a Taste of Asia

Design

It is believed by many designers that we have 1/20th of a second to make an impression.

The design began as pages of thumbnails. I first made a list of page elements and prioritized them. Using a collection of interior design and travel magazines from the library, I sketched combinations reflecting element purpose and priority.

Development

Well-architected, elegant code bespeaks thoughtful planning and reveals the developer's mastery of the tools.

I selected an unconventional design that mimicked traditional watercolors and poetry before the turn of the century. The balanced, but hand-drawn effects were accomplished using a combination of negative margins and PNGs. To achieve many of the other effects without touching Microsoft's HTML, I relied on CSS attribute and carefully - managed cascade selectors.

MIX 08 - full view Full-size view of the MIX08 solution. Note: content has dwindled since the site's creation

Connecting with our Audience

Identifying our Audience

Like all storytellers, designers must first get to know their audience before they can create an engaging experience.

Enlisting the help of our Marketing and Research departments, I identified 7 user segments-the most important group being the healthcare decision-makers. I visited the homes of 5 individuals who fit the demographics and made careful observations of their lifestyles, goals, needs, and distractions.

Using this information, I created a series of Personas, focusing on their goals, rather than just tasks. This approach fosters innovation that can more than simplify tasks, it can eliminate them entirely. In this phase, the focus was on elements in their homes, and commonalities among them.

Comparative Personas A comparison of creative elements found in interviewee homes

Creating the Emotion

Colors

Color is one of the most powerful, yet subtle of the design languages. The challenge is discovering the dialect that will engage your audience.

Using my earlier observations (including magazines they subscribed to and hobbies they enjoyed), I created a series of "mood cards" that could be shared with agencies or decision-makers. Combining these elements and colors with Intermountain's evolving style guide, a soft, non-corporate look emerged. With PR's approval, I created an elegant, muted version of Intermountain's brand palate:

• 1°
• 2°
• 2°
• 3°
• 3°

Typography

Often overlooked, the delicate balance of hierarchy and form in a well-planned type style guide can help audiences comprehend the form and structure of information before they read the first word.

Using scrapbooking and recipe magazines as an inspiration, I employed Georgia as the heading and emphasis fonts, and Verdana as the copy. While not as refined as Helvetica, Verdana tests better in readability (an important consideration with older audiences). To further "decorporatize" the appearance, I increased line-heights to 170%, employed callouts, and reduced variations in weight and color.

Typographic Hierarchy An introduction to the typography of Intermountain Healthcare

Photography

Photography is one of the most engaging of design elements; it reflects the world about us and quickly draws us in.

The photography on Intermountain comes from many content contributors. To reinforce the sense of elegant balance, I chose square aspect ratios for all photography, taught them the "rules of three" and provided Photoshop templates with which they could burn and round the edges.

Iterations

Design is a language, and just as in any conversation, we may not get it right the first time.

Homepages in particular are a unique balancing act between internal politics and user needs. Intermountain's homepage is no different; strong internal requirements to provide a dominant brand canvas and equally emphatic user requests for easy tool access competed for the page real estate. The compromise, a version 2.0, that provides both parties with what they desired. Everyone agreed that this iteration is temporary, and will evolve based on use data as patterns emerge.

Sketches of Intermountain Homepage A collection of early iterations depicting priority balancing

Focusing on our Audience

What are our audience’s goals?

"All I want to do is get in and get out" – Frequent response from users

To ascertain our audience’s goals, I referred to, and extended my earlier design user research. Using the goals results, I revisited several individuals and asked them to describe how and why they fulfilled certain goals (i.e., finding a family doctor, checking up on test results).

Comparative Persona A summary of interview results concerning physician-finding process Primary Persona An example of one of the personas used

How can we help them fulfill their goals?

After compiling and graphing the results, I huddled with our channel managers to merge my findings and their broader strategic business understanding. The result, a map outlining business and user goals that we could now leverage to prioritize our efforts.

Of the goals we mapped, obtaining care was one that spanned both business and primary audience needs. After reviewing priorities and resources, finding a doctor surfaced as an achievable goal.

How can we make it easy?

Our primary personas were not familiar with the complexities of healthcare (i.e. affiliations, specialties), and required a simple, intuitive interface. Our primary internal audiences, while much smaller, used the application more frequently, and needed easy access to additional features.

Initial designs leveraged AJAX-powered map and textual interfaces, allowing easy identification of physicians based on location and specialty. Regrettably, due to resource constraints, compromises were made, and a more traditional, but still information-rich application was developed. During this process of elimination, the challenge was not whether to keep functions or remove them; rather it was finding alternatives that could still fulfill user goals intuitively.

To accommodate both groups, we designed an interface that began with a very basic set of options and presented the expanded feature set in a unobtrusive, but easy to locate manner

Provider Search Wireframe An overview mapping functionality to personas

Architecting UI Standards

How much standardization is needed?

Standardization is most helpful when it is approached as a tool, such as a class in object oriented programming (OOP).

To determine the scope of the project, I met with project managers and developers to determine the types of UI that they commonly employed, and which types of UI’s did they have the most problems with. The teams identified several problem areas which included tables, navigation and forms.

From these discussions, it became evident that:

• UI standards had to be flexible (1-3 columns)
• UI standards had to be 508 compliant
• UI standards had to be extendable
• UI standards had to be cross-browser compliant (IE, FF, Safari)

Developing and testing standards

To create a usable standard, I did the following:

• Rather than reinvent the wheel and introduce non-semantic code, I relied on the w3c standards for form, table, list, and other UI element structures.
• Optional elements, such as table column scopes, were added to exceed 508 compliance
• Element behaviors for each layout scenario were defined, added, and approved by users and programmers
• Element variations and a spectrum of permutations (i.e. overly long titles in navigation tabs) were tested across the major web browsers.
• The UI components' structure, use, and behaviors were posted on an internal WIKI.

Evangelizing standards

Often, brilliant and creative solutions are lost simply because no one bothered to read the memo…

To get the word out, I enlisted the help of others:

• I met with our VP, and pitched the solution and its impact if taken system-wide
• Understanding its possibilities, he assigned the project a high priority, challenged members of our team to set up "brown bags" with outlying teams, and approved time dedicated to supporting projects using the standards

Creating a Microsite

Purpose of Microsites

Microsites can be an IA and designer's dream – they provide an opportunity to break out and experiment.

Ideally, microsites are used to temporarily fulfill a specific audience's narrow range of goals in a straightforward manner. The LiVe website is a prime example of this concept. Unlike the rest of Intermountain's offerings, the LiVe campaign focused on students, helping them make healthy lifestyle choices. To this end, the site had to be engaging, fun, and a bit on the rude side. To see examples of the language and attitude, view the LiVe images.

Design of the LiVe Microsite

The look and feel of LiVe is loosely based on print materials from Faktory Design, who were overseeing the print campaign. To help users connect the online and print campaigns, I extracted colors and title fonts from posters and further integrated the site with the broader television campaigns by integrating the commercial spots into the branding canvas.

Few designs are "spot on" the first time; nor was LiVe. With the assistance of our team, we evaluated about 6 different iterations before settling on the current design.

LiVe Sketches A collection of some of the early LiVe iterations

Keeping Microsites alive

Two things can quickly kill any project, cost and irrelevance.

Many microsites languish in obscurity after a week or so simply because the content becomes quickly out of date. To prevent LiVe from lapsing into irrelevance, I architected its UI’s to leverage our CMS, thus enabling our non-technical content contributors to keep the site fresh and useful.

To keep many of the flash elements up to date, their content was built external to the flash.

Flash Architecture Diagram A breakdown of LiVe flash architecture