My work merges brand, visual and interactive design with electronic form and function. Fixing the world one pixel at a time.
-
Microsoft Snip
Show and Tell
-
Microsoft Snip brings image clipping right up to date with this fresh, new and powerful image snipping tool.
This is a cool, startup type project with agile process and rapid fail fast approach to design. Snip was launched through Microsoft Garage.
-
-
Microsoft Office Mix
Interactive PowerPoint
-
Microsoft Office Mix brings a new digital file format to interactive media. Mix allows users of PowerPoint to create dynamic ink and narration, add screen recording and export this new media type to mp4 and as a full Mix experience. Users can also add interactive content, such as quizzes, polls and simulation labs and content from MOOCS, such as PHet and Khan Academy. Design challenges abound with this project from interoperability with PowerPoint, to providing cloud services, web portal and analytics design, including visual, interaction and brand considerations.
Office Mix has powerful analytics that allows teachers and students to share vital data on student performance and understanding in the classroom.
I used RITE to quickly test prototypes of controls and features. This was a test of several interactive tutorial panels.
The editing panel is modern and lightweight, and is sympathetic to the PowerPoint presentation mode, bringing a uniformity of look and feel to the Mix interface.
-
-
Microsoft Fresh Paint
Simple, magical and fun
-
Microsoft Fresh Paint is a simple, magical and fun digital painting application on the Windows 8.0, 8.1 and Windows 10 platforms.
Fresh Paint is hugely successful and is the flagship Windows application that brings paint to life in a dgital environment.
Realistic mediums of oil and watercolor, plus the mixture of skeuomorphic and bauhaus design styles bring the app to life.
Brushes had to have a realistic footprint so the paint was deposited as the user expected.
Realistic color bleed gives the brushes a special effect that adds realism to the brush behavior.
Millions of colors add vibrancy to the brushes and feel real.
The UI had to be self explanatory and there were to be no tooltips or help files. This was an early experiment in visual language.
Brushes, pencils and crayons were realistic, and juxtaposed against a clean, minimalist container, to accentuate the magic of the tool.
Color picker early version 2 concept, pre user testing. Designed for right thumb manipulation as most users were painting on a Surface device.
Early floating palette concept.
-
-
Microsoft 3D Builder
3D Modelling and Printing
-
3 D Builder supports all mainstream modelling files, such as 3MF, STL, OBJ, PLY, and VRML. The design had to allow the modeller to merge, intersect, or subtract objects from each other, or slice them into pieces, as well as provide auto corection and the abilty to print any 3D model.
3D Builder is really popular and available through the Microsoft App store.
The cool challenge with this project was how to design a three dimensional control that enabled modellers to work in plan, azimuth and elevation. It was also a great agile BXT project and brand exercise.
-
-
Microsoft TAG
Recognition Technology
-
TAG brings together various recognition technologies, from QR Codes to the current Tag barcodes, and to the next generation in mobile, Near Field Communication (NFC)
My first project when I joined SBG was to lead the design effort the deliver TAG.
Although short lived, we did graduate TAG and learnt valuable lessons in delivering and reporting analytics.
-
-
Microsoft Startup Business Group
BXT Modelling
-
Microsoft Startup Business Group worked with Microsoft MSR to develop new technologies that provide transformative opportinities within Microsoft's business divisions.
The SBG design studio comprised of mixed skilled User Experience designers that conducted user research, developed user scenarios and concepted user-centric solutions. Skills ranged from EP, industrial design, 3D modeling, visual and interactive design for software platforms, applications, services, Win store apps and Web based solutions.
SBG used the agile BXT model for a user-centric approach to design.
A 16 week, two phase, cadence kept projects on track with fail-fast iterative methodologies.
By week 8 check in these are the core problems that have been solved.
My SBG projects included TAG, big data visualations, 3D printing, Fresh Paint, Education SIS for O365 and Office Mix.
The Experience brief was a key document that focused the team and provided a reference anchor.
-
-
bluetooth ux process
design is planning
-
Having a UX Process is essential for the success of any project, no matter how small. Here you see the process that I introduced into the Bluetooth SIG. It was instrumental in delivering on time and to budget the new Bluetooth Consumer Web portal.
UX Process - Flexible, toolbox approach to design mangement. This model can be both waterfall and iterative, and supports projects of any complexity.
-
-
-
bluetooth.com
consumer web portal
-
Bluetooth.com is a consumer facing Web portal built on the SharePoint 2010 technology platform. The design challenge was to design a unique, compelling user experience, without making the site look and feel like a SharePoint entity. Also, the site had to be new, refreshing, open and richly visual, inticing engagement with the user, and replace the old, dated, confusing and non-relevant SharePoint 2007 site.
Technical jargon, confusing and dense information in the old site's product information page.
Confusing navigation, poor terminology, dense linking and poor layout in the old site's technical zone.
NEW Bluetooth.com home page is bright, fresh, visually rich, with spacious, clearly targeted information, and compelling links and teasers.
Beautiful imagery, user friendly language, whitespace for separation, redesigned navigation all combine to add clarity and make this a compelling, relaxing and exciting user experience.
-
-
bluetooth ux process
design is planning
-
Having a UX Process is essential for the success of any project, no matter how small. Here you see the process that I introduced into the Bluetooth SIG. It was instrumental in delivering on time and to budget the new Bluetooth Consumer Web portal.
UX Process - Flexible, toolbox approach to design mangement. This model can be both waterfall and iterative, and supports projects of any complexity.
-
-
-
bluetooth personas
user segmentation
-
Identifying users for diverse consumer and technocrat targeted audiences is paramount in understanding the needs and desires of diverse services and technology applications.
Wireless Living - Olivia
Technology Enthusiast - Josh
Perspective Technology Developer - Ethan
Globalization persona composite for APAC and EMEA
-
-
mozy mobile
mobile cloud services
-
Mozy's series of cloud services is extended in to the mobile smart phone area with an iPhone application.
MozyMobile welcome screen on the iPhone 4.
MozyMobile home screen for a signed in user showing rich device specific icons on the iPhone 4.
MozyMobile iPhone app with the camera function selected and showing the option menu.
MozyMobile iPhone app showing an image capture, prior to upload and sync.
MozyMobile iPhone app showing an image capture preview and upload progress to the mobile sync folder. Sharing options are shown on a simple UI below the activity pane.
MozyMobile iPhone app showing document sort and sharing options.
-
-
mozy life
personal data management
-
Mozy Life is a cloud based data agregation application, which allows users to access, manage and share all of their personal data.
Mozy Life Home Screen showing the 'First Run' user experience.
Mozy Life Tutorial screen showing video UI.
Mozy Life personalized experience showing pre-populated sample data and 'shelf' facited content concept.
Mozy Life screen showing the initial device added to the application and device backup in progress status.
Mozy Life screen showing the post 'First Run' MyLife personalized 'shelf' user experience. The users devices are also shown along with cloud storage usage and upgrade call to action.
Mozy Life screen showing the user's images stored on their main device and in their cloud. Images are identified by file extension and filtered and viewed as lists or shelves.
Mozy Life screen showing the user's music collection. Filters, in place controls to play music and the ability to create custom playlists allow flexibility and provide a powerful music experience.
Mozy Life screen showing the user's documents. These can be filtered, sorted and viewed in many different ways. The user can also share documents and create document collections.
Mozy Life screen showing the user adding, through 'drag and drop', an image to a custom photo album.
Mozy Life html concept screen capture. This shows alternate branding, page layout and CMF treatments to the basic concept model.
-
-
msn
Technology and Incubation
-
MSN has a number of channels, one of which is the MSN US home page. This Silverlight module was designed to provide a rich interactive Winter Olympics news feed from the Vancouver games in 2010. The component sat at the top of the Canadian home page, but here you can see the module as designed for the US market channel.
Vancouver Winter Olympics 2010 Silverlight Splash screen.
After the splash introduction the companent opens with ticker-tape news feed, interactive image thumbnails and show-hide spoiler control.
Clicking on a thumbnail image opens an associated news article and reveals a link to the full story. Scrolling and thumbnail controls allow the user to move through articles or return to a thumbnail view.
-
-
msn
Entry Points Manager
-
MSN has a huge editorial database of articles, images and general data. The Entry Points Manager is a Silverlight application that allows MSN US home page editorial staff to leverage smart technology indexing engines to compile images and articles in an automated, highly targeted and structured way to populate news pages.
Entry Points Manager showing a clean, data query panel, results pane and articles added to a candidate pool for editors to select for publication. The design had to take complex indexing, sorting and filtering and build that into a simple, compact and easy to use UI.
The MSN US home page editor can preview a rich compilation of potential candidate pool articles before publication with this full page preview UI design. Before this design the editor had no idea what a published article would look like in context of the rest of the host page.
Clicking on a thumbnail image opens an associated news article and reveals a link to the full story. Scrolling and thumbnail controls allow the user to move through articles or return to a thumbnail view.
-
-
-
msn
Autos Channel Concept
-
As part of an interview process back in 2008 I had to design a replacement MSN Auto home page in two days. This was the result of 16 hours exploration, asset gathering and design implementation. The use of large engaging images and soft gradients, with strong text accents make the design still look fresh today! I got the job, too, although I never got to redesign the autos channel home page!
I used sliding panels, accordions and other space saving interaction components to maximize the huge amount of data that had to be retained on this page. The car finder, news and model guides components used facited search and expanding/collapsing containers to keep the users focus above the 'fold'.
-
-
-
equipt welcome center
WPF Application
-
The Equipt Welcome Center is a WPF application that delivers the install experience for new Equipt subscribers. The WC is highly interactive and delivers a rich user experience, showcasing the Microsoft product suite that is included in the Equipt package.
Welcome Center landing page
Close-up of product flyout panels
Windows Live Messenger flyout panel
-
-
Equipt Design Library
graphic design
-
The Equipt design library is an iterative palette of the visual interpretation of Equipt's design tenets. It is a living body, reflecting design and direction of the Equipt and Microsoft brand over time.
Translucent, open, light, peaceful, soft - these are descriptors that identify the gradients that you see in Equipt.
This series of color blocks represent flat gradient and accent colors.
Whitespace, logical, uncluttered and simple information delivery.
The influence of these gradients can be seen in the Microsoft Equipt Subscriber Support Center Web site.
Two-tone subtle, non-glass reflective blocks are used to identify product brand colors and button effects.
Complex gradient composites and opacity can create beautiful effects. This is the WPF background from the Welcome Center install experience.
A combination of translucent, vibrant and diffused light and theme threading detail the Equipt branding image without the need for a logo.
-
-
-
conceptual planning tool
interactive design
-
WPF and Silverlight have been used to create an interactive planning tool model, which allows users to research, plan, collaborate, share, track and manage an infinite number of projects.
The LiveTrack interface uses rich graphics and animations to display the users active or archived workflow projects.
LiveTrack shows a detailed summary of any specific workflow without the user opening the full application.
This end-to-end tool is a first of its kind to use intellisense, Live Search, personal profile information and peer-to-peer interaction through an extensible one-stop application interface.
-
-
-
equipt moodboards
graphic design
-
The ValueBox/Albany/Equipt design process was started over a year ago with exploration of surfaces, textures, color, light and mood. A series of moodboards were created to reflect the juxtaposition of creative elements within the defining framework of the Equipt identity.
Clean moodboard
Translucent moodboard
Smooth moodboard
-
-
-
early ui concepts
graphic design
-
Following the exploration of surfaces, textures, color, light and mood a series of UI experiments included an exploration of the carousel.
A classic oval plane carousel as seen in fair ground rides.
A plane carousel
A circular carousel
A carousel in an arc
-
-
-
equipt project
graphic design
-
The ValueBox/Albany/Equipt design process was started over a year ago with exploration of surfaces, textures, color, light and mood. A series of moodboards were created to reflect the juxtaposition of creative elements within the defining framework of the Equipt identity.
Clean moodboard
Translucent moodboard
Smooth moodboard
-
-