Surface_00-min (1).jpg

Microsoft PixelSense

 

Surface_01-min.jpg

One year before the iPhone was introduced to the world, Microsoft released, PixelSense. An interactive surface computing platform that allows one or more people to use and touch real-world objects, and share digital content at the same time. PixelSense is designed primarily for use by commercial customers to use in public settings. People interact with the product using direct touch interactions and by placing objects on the screen. I was the third designer hired on the team and worked on PixelSense for five years as a design lead. I saw the table evolve from an Ikea prototype to the final hardware design released five years later. The following examples are a small sampling of the work that I conducted over those five years.

MY ROLE

  • Design lead for Photos and Home.

CHALLENGES

  • In a commercial environment, how to design a solution for navigating, presenting and organizing an unlimited amount of personal, digital content that a variety of user types would understand, right away.

  • Every user is a first time user and the home screen needed to present itself in a way that felt inviting to touch. Remember this table came out before the iPhone. One year before.

IMPACT

  • Created three design solutions that were presented to the Surface design team. “Pod + Bar” was chosen as the final design solution. I’m only sharing the final design on my website.

Below, are the design tenets I wrote for PixelSense.

Artboard-min.jpg
Task flow for the Photos application.

Task flow for the Photos application.

 
“Pod + Bar” organizes photos and videos by date; most recent at the top of the stack. The mental model of a stack of photos is not overwhelming to the user. They do not have to “learn” a new interaction framework in order to enjoy their photos. The …

“Pod + Bar” organizes photos and videos by date; most recent at the top of the stack. The mental model of a stack of photos is not overwhelming to the user. They do not have to “learn” a new interaction framework in order to enjoy their photos. The most recent photo is at the top of the stack. The user understands instantly, that since the most recent is at the top, then the oldest photo must be at the bottom. The stack is a timeline. The canvas is uncluttered, clean and approachable. Their focus is on one photo when photos first appear. Multiple people can interact with the stack. Content can be rotated by each user for their specific orientation. This design solution became a core, common control for the Surface SDK for any content type that needed to be organized, say music for example.

I created visual direction comps for the visual design team so that they understood the importance of minimal chrome and transparent containers.

I created visual direction comps for the visual design team so that they understood the importance of minimal chrome and transparent containers.

Surface_05-min.jpg
Surface_06-min.jpg
 
Version 2.0 visual design language.

Version 2.0 visual design language.

Hub_Screen_16-min.jpg
 
CHALLENGECreated a commercial friendly navigation system that enables third party developers and designers to gain optimal screen real estate for their applications and accommodates multiple users at the same time.SOLUTIONCreated Surface “Access Poi…

CHALLENGE

Created a commercial friendly navigation system that enables third party developers and designers to gain optimal screen real estate for their applications and accommodates multiple users at the same time.

SOLUTION

Created Surface “Access Points”. By designing the access points (actuates the app menu) to live in the four corners of the screen, app developers and designers could utilize the bottom center of the screen (which is optimal screen real estate) for their app UI. Access points were on all four corners in an active app. Two access points in the orientation of the user who actuated the menu. The four corners reduced accidental activation of the app menu.