Intel UDC

Overview

As part of a summer internship with Intel's User Design Center, we set out to create a central website through which to raise awareness of the UDC's abilities, share our approach to User Experience, and document the work the group had done.

This project was a collaboration with Emelyn Baker & Damien Solomon.

Internal Website

Interaction Design & Development

Summer 2012

Understanding the Audience

Coming into the project it was vital to understand what goals we, as a group, wanted to achieve, and why a website could offer valuable solutions.Talking with both team members inside the group and past collaborators, we wanted to understand how UDC was perceived, what interactions between groups were like, and where UDC involvement fit in other development life-cycles. Two key stories emerged.

The group had the skills and motivations to provide a behavioral “why” to other's technical “what”, but to really achieve the best results can be incredibly time intensive. At the same time, there was as strong desire to utilize the “UX” capabilities UDC could offer, but specifics were confusing and rarely was there resources for a large time commitment. It became evident that Clarity and Flexibility were big issues, but could these be helped by a website?

Interview notes from all invested parties were collected and analyzed together to gain insight into overarching needs and values.

Designing the Information

An in progress view of the system's structure. Cyclic navigation tools began to emerge as the site adopted both promotional and educational goals.

Looking at the web presences of successful, experience-oriented firms, we found that the most successful examples really pushed the story aspects of the work. Anything that maintained that human connection, showcasing the intangible value in empathy, was a move in the right direction.

Constructing a sturdy information architecture became crucial to laying a foundation off which different design solutions could be examined. The structure of the website needed to be simple on the surface, but allow for a vast entanglement of shared ideas underneath. Solving this problem was aided by taking a step sideways, and thinking early about the content strategy. Examining how the content itself would be broken down, and later maintained, we were able to take a bottom-up approach in figuring out how to obfuscate complexity.

Prototyping the User Flow

With a foundation in place, sketching wireframes allowed for interface ideas to be easily iterated. At this point, trying out all kinds of ideas was important, in order to uncover what might be the best course of action to pursue.

When the wireframes seemed to be moving in the right direction, we moved on to rapid prototyping the flow between screens at a higher fidelity. Making and testing changes to the prototype during this later stage helped to nail down problems regarding consistency and behavior between interfaces that would not have been as visible earlier with the static paper layouts.

Quick and iterative wireframes were critical to simplifying information displays into digestible chunks.

A prototype of the eventual case study page. Narratives were broken into stages mirroring the capabilities of the design group.

A early prototype of the project listing. The sorting mechanisms proved too confusing for the user and the listing was re-imagined with better contextual information, creating a more natural flow to other sections of the site.

The Results

Complemented by an intense and through investment in branding and identity design, we were able to then build an engaging, informative, and stately internal web presence for the group. In tandem to the site's internal launch, we also set up a quick data visualization, looking at which areas of the site were drawing the most attention.

A case study featuring the "Pocket Dictionary" for domain-specific keywords. An inline pop-up, the dictionary provided an overview and a link to more info and capable team members when a user clicked on a keyword.

The contact page. An ajax-driven two-step from was created to guide aid inquiries in beginning to grasp their project goals and needs, getting the proposal in front of who could be the most help.

The final case study structure. Iterations to the prototype simplified the presentation, allowing the focus to stay on the narrative and supporting media.