We Design Extraordinary Things
White Logo 2 copy.png

UI/UX Design Blog

The Inner Workings of an
American UI/UX Design Agency

The Intel Project

A UI UX IXD UCD application Design project

The Intel project took us around 17 months to complete over a 2 year timeframe. It’s now over a decade and a half later since we completed this Windows Desktop Client Application, and it still holds up beautifully after all this time. While glare effects are less in use, the glassmorphic design language we deployed back then is. To give you an idea of where the tech industry was at this time, the first-generation iPhone had just been announced and Microsoft’s Windows Vista had shipped earlier that year. Windows Vista included some Windows Media Player skins and Vista Sidebar Gadgets The Skins Factory designed.

 

Before

In late 2007 we were contacted by an amazing software engineering manager from Intel. We were tasked with designing a brand new desktop client application called the Intel Graphics & Media Control Panel. Yes, that is quite a mouthful. At the start of the process, their engineering team gave us a massive Feature Detail document that clocked in at 218 pages. I can’t stress how much information was contained in the RFP. Here’s a sampling of what we were given:

As you can see, there was a lot of information to examine just to be able to cost out the project. We also received a brand identity style guide and supplemental information documents to view. There’s a saying by Creighton Abrams: “when eating an elephant take one bite at a time.” We follow that advice when it comes to ultra large projects, so we split this project into 2 phases. Splitting the project up between the wireframing and visual design/final art allowed us to give Intel a more accurate production time + cost breakdown. We didn’t cost out Phase 2 until Phase 1 had been completed.

 

 

Phase 1

It’s much easier (and expedient) to work with 2D assets than multi-layered ones. This meant we had to go through the entire 218 page scope of work and prototype the screens before even considering what they were going to look like. We designed hundreds of pages of schematics. Here’s a look at just a few of them:

 

The Schematics

It took us over 1 year to complete all of the Phase 1 schematics. Once this Phase was complete, we began Phase 2: Designing the Visual Design Prototype.

 

 

Phase 2

The Initial Visual Design Prototype

Before starting, Intel gave us a prime directive: “Ignore what came before… reimagine what’s possible.” That’s exactly what we did.

When designing a tactile visual design for a project like this, we typically go low-fidelity. You don’t want to spend too much time on the little details at this point. Details matter, but you need a foundation to work off of. You still have to figure out where everything is going to be placed, how the navigation will work, and make sure the user experience will be intuitive. Remember, at this point we had hundreds of pages of schematics to deal with. The design process for visual comps is usually a back-and-forth between myself and the designer. We give them leeway to take a first stab at the overall design, and then make changes to it if necessary. Here’s a look at some of the early low-fidelity comps we did:

Advanced Visual Design Prototype

“… liquid light dances across a dark, rich glass - the UI gives the impression of a futuristic touch-screen…”
- William B., Senior Designer @ The Skins Factory

By utilizing a complex symphony of reactive animations, The Skins Factory was able to craft an interactive experience that stood out from anything seen before. Entire groups of control assets illuminate as the mouse cursor approaches, dynamically guiding focus and enhancing usability in a truly innovative manner.

 

Iconography Design

Another aspect of the project was designing 3D iconography. Our team came to the conclusion that because we executed a strong, tactile design language for the application, the icons would need to push the limits and stand on their own. The results are a set of highly stylized 3D skeuomorphic icons and they definitely stand out.

 

Windows Vista Sidebar Gadget

The Skins Factory team created this dynamic Windows Sidebar Gadget that shares perfect visual symmetry with the Graphics Control Panel. Designed to monitor GPU temperature, usage, fan speed and more.

 

AFTER

Working with the Intel Engineering and Marketing teams was an amazing experience. What’s also amazing this entire project was accomplished remotely. Both teams on different sides of North America, coming together and designing a spectacular application. Below are the final results of 17 months (across a 2-year time-span) of collaboration. While those image show a small sampling of the final results, they offer a window into what can be accomplished when you engage a dedicated, passionate user interface & user experience design studio like The Skins Factory.

“The entire UI experience was carefully crafted to grant user access to the power of the hardware without having to understand its underlying complexity.”
- William B., Senior Designer @ The Skins Factory

“The user only ever sees what they need to - control assemblies fade in and out of existence as glass panels fluidly resize to accommodate the most efficient desktop footprint.”
- William B., Senior Designer @ The Skins Factory

 


If you want to connect with me on LinkedIn you can reach me here. If you’re looking to get some UI/UX design work done, simply contact us here on our Contact Page.