Slide background
Slide background

Super Flexible Layout Builder

Tons of ElementsReal Drag and DropFullscreen OptionUndo/Redo functionallity


Project Contribution Areas

Cross-group Collaboration  |  Product Planning  |  Hardware / Software Integration  |  Interaction Design  |  Visual Design   |   Print/Poster Design   |   OEM Engagement   |   SharePoint Site Development   |   Prototyping   |   User Research   |   UX Leadership

Project Overview

As a PC3 UX designer, I drove or contributed to several RGB, Sensors and UX projects, along with assisting the RGB team in meeting their design and UX needs. PC|3 UX was a small, agile and talented design and research team. For a such small team, we had large acronyms. PC|3 stood for Components, Creation, Collaboration and RGB represented a OEM UX strategy. R is HP, G is Sony and B is Dell. Our team worked from a restricted access studio because of the need to maintain confidentiality between the RGB PM’s and feature teams.

The projects on this page represent examples of the wide-ranging set of design challenges I drove during my 1st year as a full-time Microsoft designer. At performance review time, I was ranked in the top 20% of my peer designers at Microsoft and promoted to the next band as a Designer II. A month later, the PC|3 UX team was reorged into the Windows Design and Research Team. (XDR)

PC|3 UX Team

Marketing and Branding poster I created for the PC|3 UX team to get the word out that we had a new slogan. “People fall in love with PC’s” was a strategic slogan to counter the love that Apple users have expressed for Apple products.

Our approach targeted OEM senior executives responsible for product line performance, brand perception and business unit leadership. The goal was to engage with executives that had credibility and decision-making authority and who understood UX / SW impact on product line performance. PC|3 would provide leadership by guiding stakeholders towards strong UX solutions.

HP Advisor User Channels Deep Dive

HP Advisor is an HP created application and is installed on all HP devices and sits on top of the Windows Operating System. It was designed to give users a way to access HP branded Windows system controls. I was intrigued by the idea that 19 million users see HP Advisor every time they start their devices and realized an opportunity to use the HP Advisor framework to connect 19 million users in some way.

I developed the HP User Channel concept and designed the e2e experience along with the user type and personas for the target user. I wrote the scenarios around mobile computing and home use of the User Channel feature. The User Channel feature would allow HP users to contribute content and submit data that HP could monetize and deliver targeted advertising. The User Channel feature was designed to create a Social Networking Community.

Microsoft PM partners and HP VP’s love the HP User Channel concept, but as we ramped up for Windows 8 planning, PC|3UX was reorged into XDR (Windows Design & Research) and HP’s focus was redirected to other priorities.

HP Advisor User Channels Sketch Wireframe

One technique I use for wireframes is to create a line art outline of the app UI, print that out and sketch in flow details on paper. This allows for rapid concepting and still maintain consistent structure.

HP Advisor User Channels Hi-Fidelity Comp

Higher definition of the HP Advisor app showing the User Channel Social Network feature.

HP Advisor Digital Sketch Style

I developed this sketch style for the HP User Channels scenario visuals using digital photography and Photoshop plugins. This technique allows me to shoot and composite scenario visuals with a lot of flexibility and control.

Whenever I use traditional sketch method’s, I would use photo reference found online or shoot my own reference. My sketching would improve as I progress through the storyboards and then would have to go back and redo the first drawings. It took some experimentation, but once I had the right settings, it was just as efficient to use this sketch composite method as it is to sketch the visuals using traditional drawing methods. I’ve used this approach for many scenarios and storyboards since then, sharing it with other designers and researchers. It always generates a lot of interest and curiosity.

Photoshop plugins are no longer necessary to achieve this visual style. There are a number of IoS and Android apps that do similar image conversations.

HP Discovery Grid Launcher

My goal was to make use of the functionality of the Win 7 taskbar and design a unique interactive user experience that will give the user quick access to key HP application launch icons.

The HP Grid Launcher evolved as a replacement for the HP Advisor task bar. Advisor was developed in WPF and was very slow to load. HP wanted to use the original HP 2 row-multi icon design but we later switched to the single row -minimal icon experience so the user could drag and drop icons as needed. Launcher is now available in all new HP computers.

HP Discovery Grid Launcher Animation Spec (click-through)

Animation can simulate physical properties for elements on the screen. This can help users understand and predict what will happen as a result of their interaction with the system.

I created detailed interactions specs for the animation, a launcher spec “walkthrough” that allowed the developer to step through the animation frame by frame and a written spec detailing the icon position, opacity and transition durations. The developer used the specs to build the initial version of the application.

HP Windows 7 Bios Demo

I created an end- to-end user scenario demo that visually explores the user’s ability to change the Windows boot order from the Windows 7 Control Panel. The demo also explores using the Windows 7 Control Panel to set personal or HP branded desktop “backgrounds” as the Windows boot image. I also created the boot order UI and made innovative use of an early version of the Blend application to build the scenario animations to create a user controlled “play through” of the scenario.

HP reviewed the demo and loved the concepts. The Bios boot order and branded boot image was implemented in 3C09.

HP Advisor Windows 7 Taskbar UI explorations

Wireframe explorations.

HP Advisor Windows 7 Taskbar UX (click-through)

1 Windows 7 taskbar live thumbnail UI as a tabbed interface that mirrors HP Advisor functionality, but on a smaller scale. This concept would give the user easy access to HP applications without the overhead of opening the full HP Advisor app.

2 Applications can be pinned into the Taskbar

  • Pinned apps do not need to auto start in order to be visible – Can have less impact on boot
  • Pinned app can have an HP-branded icon
  • HP can preinstall up to three pinned apps

3 Pinned applications can have an HP-defined jump list

  • A list of pre-set and dynamically updated tasks and target file
  • Jump lists can be accessed with either Right-Click or a Windows 7 touch gesture

4 When applications are running, a switcher preview window can show the application progress even if minimized or obscured under other windows

  • In Windows 7, the switcher window can also include application controls
Sony Scenario Sketches (click-through)

I created the sketch scenarios to visually represent concepts that seem to be outdated today, but I did these concepts a few years ago (note the Sony Walkman and digital picture frame reference;-). Scenarios were part of a Green Team presentation for Sony execs coming in from Japan to discuss PC|3 UX readiness initiative.

  • Taking a photo with camera / phone and use gestures to wirelessly send content to TV, PC, Picture Frame
  • Using phone / Sony Walkman as a remote media controller for TV / PC
  • Using Location services on laptop to find….
  • Using “in-air” gestures (via web cam) to manipulate web pages on screen
  • Proximity detection when user walks up to device. It will transition from standby to desktop
PC3 UX Win 8 EM Brainstorm Sessions

Participated in a series of cross-team meetings to define the process in how to brainstorm multiple problem statements for Win 8 Emerging Markets.

Co-facilitated two brainstorm sessions, which generated multiple concepts for future Windows 8 scenarios for Emerging Markets. Designed and produced the poster and handout assets for the sessions.

PC3UX SharePoint site (click-through)
  • Final site design

  • Wireframe

  • Default SharePoint site structure

  • Site concept

  • Site concept

  • Site concept

As lead designer and site developer for the PC3UX SharePoint website (launched in January 2009), I delivered on a complex site structure that allow users to access relevant content quickly.  By integrating multiple technologies (Flash, JavaScript, CSS,  and other innovative approaches, I developed a dynamic and easy to use environment that helps the user to discover Pc3ux.

This site was designed to promote, evangelizing, market, brand, and provide overviews that help people know what we were doing it and how we did it. After this site went live, I was asked to consult with the team that was developing the SharePoint Designer App. Based on my recommendations, they made changes to SharePoint so users can create compelling custom SharePoint sites with more ease.

The PC3UX site design was also applied to the PC3 Division site for its style, ease of use and feature set.

Consumer Product Comparison Infographic Chart (click-through)

Designed RGB + A (Apple) product comparison chart for User Research presentation based on user purchase drivers; what users say they want and what they buy are not always the same.

Sony product posters (click-through)

Designed and produced a series of Sony product posters for the Green team to mount on the hallways and promote their recently released product line. Sony execs enjoyed seeing Sony products and branding up on our walls.

Bugs just want to have fun!

I designed the poster and planned this Test Team All-hands Design Exercise. The goal was spread UX leadership and presence by engaging with our engineering partners who were asked to do a creative exercise around the slogan “Bugs just want to have fun”. To increase motivation, I partnered with our admin to give unused and out-of-date Mobile PC’s as prizes.

The exercise asked participants to build an amusement park ride for bugs using found objects. This idea is a spin off of the Ant Circus concept from long ago. – Great fun and highly successful!

PC|3UX Hardware influence

PC|3 UX also presented Hardware solutions so partners would see the gain from differentiated UX based on a unique mix of SW / HW.