my portfolio

Page 1

July 2009


Who

Me, recent background

What

Outline a range of past projects and my roles Problem statements, challenges and UX aspirations A detailed walkthrough the process of the MS Equipt project and my explorations leading to the final solutions

How

50 minutes from me and 10minutes for questions

Why

To provide you with a sense of my background, experience and achievements in UX Design


Senior UX designer at Microsoft, Office Live Born in Madrid, Spain

Years of proven work as a designer Microsoft, Adobe, Frog Design, Viewpoint, MetaCreations Fine arts degree Artist in residence at UMASS Computer Science Department

SIGGRAPH, NY Digital Salon, professional digital artist


The following selected case studies serve as in-depth analysis of various challenges and design solutions.

• Lead and drive the design process • Design the UX and visual interface • Help to conceptualize the project •Build consensus among diverse stakeholders • Contribute to developing the UX framework • Deliver UI components and functional specifications • Oversee the implementation • Launch and Beyond


Senior UX Designer

Microsoft Equipt was an all-in-one subscription service that helped PC users be more protected, productive, and connected. It delivered Windows Live™ OneCare™, Microsoft® Office Home and Student 2007, and Windows Live™ in one easy install.


Unify separate service and product installations into one seamless experience. Introduce the user to the products and services that have been installed, and provide a discoverable, educational, and engaging UI. Provide an extensible framework that supports partner co-branding and localization. Provide a dynamic Web site to allow users to manage their subscription.

Setup installation Created a smooth, engaging and silent setup client experience. Welcome Center Designed a client application that integrated, highlighted, and enhanced the applications installed (Office and Windows Live services); provided a gateway or starter page for Equipt users, and access to information, functions, and services that are relevant to a person's work or personal interests.

Web service Designed a UX that allowed users to manage their subscription and access their bundled online services through single sign-in. Brand Created the new brand attributes, and delivered a unified and seamless user experience across all the products and services.


Senior UX Designer

Microsoft Equipt was an all-in-one subscription service that helped PC users be more protected, productive, and connected. It delivered Windows Live™ OneCare™, Microsoft® Office Home and Student 2007, and Windows Live™ in one easy install.


Unify separate service and product installations into one seamless experience. Introduce the user to the products and services that have been installed, and provide a discoverable, educational, and engaging UI. Provide an extensible framework that supports partner co-branding and localization. Provide a dynamic Web site to allow users to manage their subscription.

Setup installation Created a smooth, engaging and silent setup client experience. Welcome Center Designed a client application that integrated, highlighted, and enhanced the applications installed (Office and Windows Live services); provided a gateway or starter page for Equipt users, and access to information, functions, and services that are relevant to a person's work or personal interests.

Web service Designed a UX that allowed users to manage their subscription and access their bundled online services through single sign-in. Brand Created the new brand attributes, and delivered a unified and seamless user experience across all the products and services.


MS Equipt / Setup experience Functional, full-screen interface with uncomplicated controls Installation experience Clean, smooth, intuitive, extensible, and seamless Product information is discoverable, educational, and engaging Consistent interface Standardized control behavior reduces the learning curve Smooth reflections This is part of the attitude of building harmonic environments


WPF Client application

First run experience aligned the setup makes an smooth and clean transition

Rich animations surface the installed products and makes the UX discoverable, educational, engaging


Fluid page design extensible, dynamic CSS driven containers

Tabbed navigation Dynamic HTML/ CSS

Authenticated page recognizes the user, displays their email address and displays a customized dashboard

Visual design Unified brand identity across product base, aligned with installation and first run experiences

Dashboard shows subscription details dynamically fed with user PC subscription data


Microsoft Equipt is part of the Microsoft master brand, and includes products from two sub-brands: Microsoft Office and Windows Live. Its visual style and personality align with the Microsoft master brand, while reflecting elements of Office and Windows Live. The visual style is clean, open, energetic, smooth, and translucent. The tone of voice is empowering, approachable, inventive, and knowledgeable.



From the opening screen, Equipt introduced itself. The interface is beautiful to look at and informative, letting me know what is being installed and how it will effect my Windows and Online environment. A flawless install on Windows Vista Ultimate took less than 10 minutes, I will restart my computer now and begin use of Equipt. I do like the subscription concept and would use it if I had the need. I have been very satisfied with Live OneCare If this is as good as it looks, I think Microsoft just made a giant leap forward. Combining Office and One Care into easy to use program is great! Thank for the opportunity to beta test this with you! It installed with out a hitch on my Macbook Pro running Vista under Parallels.

First off, Thanks for the invite into this beta! I am vigorously testing this product in and out (on 2 machines) and I am overwhelmed with the ease and bug free installation I have came across. The team has done a excellent job on compiling this together! . Very smooth installation and every program is working flawlessly. Keep up the good work team! Program installed with no problems, so far great program. Good evening, my name is Brad Lake, beta participant for the Equipt beta, just want to write in that it has installed no problems on a gateway laptop running windows vista ultimate sp1. Great job! Interesting install process! Because it was so interesting, I thought it worthwhile to let you know what happened. 3 times during the install, my computer spontaneously rebooted! I was baffled and finally figured out that the fan was blocked and so the machine was overheating. The interesting part of this is that Equipt didn't skip a beat! Each time I rebooted the machine, setup automatically restarted. After it was finally able to go through the whole process without being interrupted, everything installed except Office. It suggested that I reboot one more time. After that reboot, the setup reattempted the Office install and it went without a hitch. Everything is now functional. FYI: Love the Live One Care, It's the best I've ever seen or had. "Go Blue"


Senior UX Designer

A few years ago Microsoft began to release various applications and Office online services. In 2008, the team announced that it was consolidating many of these services OLSB, OLW, OO and Exchange under the then-new Office Live brand. Consistent experience across teams for multiple applications, which otherwise would have been different entities altogether, shift away from a product focus to a unified visual expression.

15


providing a unified, integrated experience between the various Office Live home pages, both unauthenticated (Portal), authenticated (Home) and (Sub-Home pages) pre-populated and post populated. Create an emotional attachment to OL based both on the visual product experience and on what the product enables the user to accomplish. Signal changes in the new Office brand and 014 release: simpler, cleaner, better. Communicate the complementary relationships between the Office, Office Live, Servers, and Windows brand.

Design concepts Created three visual design concepts, each paired with a consistent expression of both OLSB and OLW. Design sample page rendering as way to understand how the visual design concepts might relate to a larger graphic language. UI patterns and Silverlight controls Library Provided creative direction, and delivered common controls libraries, shared patterns, guidelines, and recommendations. Brand experience Rationalized design decisions , visualized explorations, and provided recommendations.


Portal/Home Overview


Subtle curved shapes and perceptions of light create a luminous spectral color and introduce powerful dynamism.


Luminosity and transparency, motion, and gesture, generated by inner energies create organic unity and natural rhythm.


Tonal scale and space-frame pattern, free from the static grid, evoke linear dynamic forces, sense of movement, and solid structure.


OL Unified Header A dynamic yellow-orange color blend functions as a core visual element in all services

Color palette and Materials Maintain an essential consistency of design with Office 14; Cluster to the overall style and character of the Office brand visual expressions. Harmonize with other Live services

Neutral/White (color), clean, matte, porcelain-like

Crisp flat, attractive and lightweight, fresh and calm

Dimensional, light and translucency, motion and gesture



Silverlight XAML Controls Library Rich Flexible Resolution independent Consistent Cross platform Themes

Office Live UI Showing an example of shared UI Silverlight component


Senior UX Designer

Formerly known as the Adobe Video Collection -- Adobe Premiere Pro for video editing, After Effects for motion graphics and visual effects, Audition for professional audio mixing and editing, and Encore DVD for DVD authoring. In 2006 Adobe made major upgrades to each of these four applications, bringing them even closer together as elements of a suite.

24


Design for different kinds of customers with different tastes and preferences. Achieve an overall evolving visual order that can emerge from decentralized decisions from applications on different development schedules, with different evolving priorities. Mitigate aesthetic disagreements and conflicts by establishing design boundaries that recognize some degree of commonality. Allow room for visual innovation and, at the same time, preserve a family resemblance among the individual products of the suite.

Docking panels Designed the new UX model: workspace panels that move together as the user adjusted their size, so there was no wasted space or partially overlapping windows, making it easy to rearrange the layout. Greater visual consistency Created a unified look of the UI, which made each of the applications feel like the users are working with a single product, minimizing disruptions.

UX Cross platform Delivered user controls and implemented a new resolution-independent drawing interface. Brand experience Ensured that brand values and aspirations were surfaced correctly in the video-audio postproduction space.


New interface design of interlocking panels instead of floating windows; no more constant twiddling of window sizes and moving of overlapping palettes

Docking workspaces This design uses docking workspace panels that move together as the user adjusts their size, so there's no wasted space or partially overlapping windows; users can still drag out separate palettes if they want (i.e., to a place on a second monitor), and a new "drop zone" feature makes it easy to rearrange the layout


Visual experience gave the products their personalities and made the user experience intuitive and consistent

Colors and a layering of various materials, smooth and sleek, enhanced the brand Soft gradients Elegant hues Workflow icons Neutral grays


Adobe DVA new generation UX platform key features Descriptive Vector based Flexible Resolution independent Consistent Cross platform

Theme Support based on an xml file that supports keyframes to determine colors at particular brightness slider positions









Principal Designer

HP Halo is a unique teleconferencing environment that looks, sounds, and feels as if colleagues across the world are just across the table. Early versions of Halo had required a dedicated room, but in 2007, frog and HP teamed up to create a model that could be constructed within an existing office space, making it easier for companies to build, maintain, and move their communications system.


Improve usability. Previous Halo interface was confusing with regard to menu icons and organization of the menus and their functions. Improve icon comprehension and visibility, and logically group menu functions.

Redesign the visual style interface: must be lighter, scalable, and appealing. Design the UX of Halo’s new capabilities for sharing material on the collaboration screen in full screen view, and for controlling the volume on connected peripheral devices being shared.

Menus Grouped items in the Manage menu, and relocated functions to a single top-level toggle button in the topology, enabling easy discovery of these functions for all users. Using visual cues in the UI, such as changing color, provided a great advantage over the previous UI. Visual design Redesigned three visual treatments for the interface; tested and rationalized the proposed solution.

Sharing Conceptualized and provided a UX solution in which users had no difficulty discovering how to share the contents.


Corner menus A big improvement was moving the Manage menu to the bottom left corner and the Phone menu to the top left corner; the Phone and Share menus contain primary meeting functions, which are reinforced by being located at the top of the display, while Help and Manage, which are secondary menus, are better located in the lower corners

Grouping Manage menu items into All Studios and My Studio aids user understanding of the functions

Menu icons float in the corners with limited boundaries, reducing visual noise while still encouraging discovery


Visual style Slight hints of dimension and subtle gloss indicated the engaged item and reinforced functionality.

Sharing devices on the collaboration UX Discovering how to share the contents of a laptop or an item on the table. Most participants also were able to correctly describe what participants in other studios were viewing during different “share conditions� (e.g. when participant minimizes the share view to conduct a meeting task, meeting participants in other studios continue to see the share contents).


Halo UX platform key features Descriptive Vector based Flexible Resolution independent


Senior UX Designer

Viewpoint Experience Technology™ was unique technology that delivered rich media over the Internet via Viewpoint Media Player™ (a Web browser plug-in). It made it possible to combine all types of rich media, including 2D photos and drawings, 3D models, animation, Flash™ movies, video, text, and audio to create rich media content. Viewpoint’s technology was bundled in the release of Adobe’s Photoshop 7.0 software, America Online 8.0, 9.0, and IM.

41


Create efficient marketing solutions for clients who leverage the advantages of Viewpoint Technology. Design a web UX for users not familiar with dynamic manipulation of 3D models and navigating 2D images. Create a robust new experience on the AOL service, allowing customization of the interface. Provide solutions that allowed AOL to offer rich content and exciting alternatives to standard online advertising.

Rich web experiences Designed highly interactive experiences that combined the full range of rich media formats – including graphics and text, video and audio, Flash animation, high resolution 2D graphics, and 3D models – all interacting in the same way and integrated in the same window. 2D ZoomView, 3D Hyperview interface Designed and implemented Viewpoint`s ZoomView interface and templates, solutions that allowed users to easily integrate their existing images. AOL 8.0 and AOL 9.0 Designed OL Expression themes and delivered functional specifications to AOL.

42


Hot spots Roll over information text or flash animations

Gestures and mouse interactions by directly manipulate the objects, turning a 3D model or panning in an image

Objects gallery Allow the user to select from different products

Preset animations menu controls to script the behavior of objects, for example, opening the laptop


Navigation controls and templates Graphical user interface that allowed users to navigate and zoom into highresolution 2D images using standard icons


3D Navigation controls and templates Viewing and interacting with 3D data is significantly more complicated than viewing 2D text and graphics. Users needed to examine 3D objects from different viewpoints and navigate through scenes to gain a better understanding of the data The interface provided adequate controls for the user to inspect objects and scenes


Viewpoint graphically enhanced search technology and made searching the Internet more fun, visual, and productive The toolbar uses Yahoo's search engine to produce thumbnail search results in a unique left-to-right display bar, full text results are provided in the browser window below the toolbar. Mouse over any of the thumbnails provides an enlarged page view. Clicking on one of the images loads the full page into the browser window. One click To access to results pages

Load page Control that allowed users to load the result page into a browser window

Thumbnail search results Displayed as images and text

Dog ears User could click on the upper right corner of the preview to mark it


In 2001-2002 America Online worked closely with Viewpoint's engineering and UX team to deliver the user experience and design the new look and feel of the service. AOL 8.0 created a new online experience and set a record with more than 5 million downloads by AOL members in the first two weeks. Self-expression features, allowed members to tailor the appearance of their experience to reflect their personalities and moods.


Windows non-rectangular windows with classical borders and handles

Foreground animation Individual Flash movies each containing similar or different animations

Vector graphics Animated flash vector graphics In the background layer

Procedural soft shadows inspired by the MetaCreations UX

Procedural gradients Linear or radial gradients positioned over the Flash vector art in the background layer



UX Designer

In the late nineties, the creative forces surrounding Kai Krause at MetaCreations gave birth to applications like Bryce, Poser, Soap, and KPT. During this time the Meta UX team worked collaboratively, and all the applications were either conceptualized, inspired, or touched by Kai.

50


Build an emotional attachment to MetaCreations products. and help users experience the joy of creation Create tools that encourage people to explore, experiment and play, trying any combination, either on their own or with the computer’s aid and advice.

Product user interface: KPT 6, Office Advantage, Soap, Painter, Carrara ‌ Collaborative design of the interface that embodied attitudes of cleanness and order, progressive revelation, user education and edification. User controls Collaborative design interface elements, sliders, scroll bars, full screen textures and backgrounds, modal dialogs and other user controls all part of the Kansei attitude of building harmonic environments. Presets libraries Create Preset effects libraries that let the user get started quickly by choosing a predefined set of options.


functional, full-screen interface with uncomplicated control panels, large preview windows

Memory dots store different interface settings; customize tools; store control values and flip between different interface arrangements

Precise numerical controls and real time performance smooth shadow This is part of the attitude of building harmonic environments

Meta windows Windows without classical borders and handles, Drawers, that reveal assets or functionalities on demand




From Planning to Shipping

Microsoft Equipt was an all-in-one subscription service that helped PC users be more protected, productive, and connected. It delivered Windows Live™ OneCare™, Microsoft® Office Home and Student 2007, and Windows Live™ in one easy install.


Create a cross-category suite that addresses Every Consumer Needs to be Protected, Productive and Connected, and deliver an integrated seamless experience for customers In other words‌ Design a Unified Experience at all stages of the UX Lifecycle

Setup Installation Unify separate service and product installations into one experience.

First run Surface the products and services that have been installed and provide a discoverable, educational and engaging UX.

Service Provide a dynamic Web site to allow users to manage their subscription.


Time constraints Small Design team

Technology choices –CSS, WPF, Silverlight Cross team requirements – SX, PCS, WL ID, Marketing, LCA Many features and PMs Parallel development of Client and Web Service Content gathering vs time vs high fidelity wireframe and prototyping Localization, Accessibility, Usability


Analysis and Exploration

Research Observe Understand Analyze Visual Exploration Collect requirements and details from Stakeholders User scenarios Storyboards Collect data from User Research Analyze and compare market research

Build, Test and Development

Handover Designs Visual and Interaction Design Communicate Approval Continue to collect feedback Wireframes and Conceptual layouts Low and high fidelity prototypes Design decisions Resolve implementations issues Reconcile legacy, performance and usability trade-offs Constant communication User test and Recommendations

Deployment and Extension

Deployment Quality Check Accessibility Visual Identity Marketing RTM Refinements Critical issues fixed Recommendations V-next


Analysis and Exploration Analysis and Exploration


Analysis and Exploration

2006 US Consumer Attach MSFT

Simple to setup, fun to use and always useful.

Potential Outcome

Others

MSFT

The express lane to Windows.

Others

Fresh, a sigh of relief.

Office User Base

41%

1% PC Health

Sales

1% 8% Productivity

Much easier, more comfortable than anything else like this I have had before 50%

We need to have simple and intuitive 1%

3%

Value Box Sales 10%

PC Health

Productivity

UX and shield our users from the complexity of the underlying technologies. Clean and simple, it just works. Fits like a glove, tailored to me. High-quality; nothing distracting or disruptive. Seamless experience; Problems solved with little to no worry. I feel safe and secure; I trust it and what it is doing for me.


Analysis and Exploration Ideation Analysis and Exploration

1.

2. 3. 4.

Collect requirements and detail from Stakeholders User goals Create user Scenarios/Processes/Tasks Pain points

Brainstorming Multiple possible designs; as many ideas as possible to move forward Sketch design alternatives


Analysis and Exploration


Analysis and Exploration Storyboard Analysis and Exploration

1. 2. 3. 4.

Conceptualize Visualize User Flow pre-UX; Wireframes Understand the goals of the project and what the business requirements Get technical feasibility feedback

Build Storyboards and Screens Moving from lightweight to high fidelity prototype as needed


Analysis and Exploration


Analysis and Exploration Conceptual UX framework

1. 2.

3. 4.

Develop and create a UX platform that provided an engaging and rich experience Improve usability and flow without harming performance Custom look and custom interaction Immersive, performs specific task and get information

Prototype from lightweight to high fidelity feasibility feedback


Analysis and Exploration

Install UX prototype explorations


Analysis and Exploration Articulation

1. 2.

3.

In this phase we’ve generated comps and concepts that allowed us to translate of verbal attributes into visual, color palettes and visual elements

Develop a design system Provide the creative direction for all further phases in the development and implementation of product user interfaces Align the VB experience with the MS brand and support other Microsoft sub-brands and potential co-brand partners as well

Mind mapping: keywords Mood board development Translation of verbal into visual Theme exploration Begin branding process


Analysis and Exploration


Analysis and Exploration cirrus clouds are composed of ice crystals and are characterized by thin, wisplike strands. Sometimes these clouds are so

extensive that they are virtually indistinguishable from one another, forming a veil or sheet called "cirrostratus" characterized by a composition of ice crystals and often by the production of halo.


Analysis and Exploration Purl A gentle, murmuring sound made by rippling water flowing in a circular current. The sound of purling or swirling water creates an oasis of peace, calm, and tranquility while reducing stress.


Analysis and Exploration Aerial perspective is the art term for how atmospheric conditions influence our perception of objects in the distance. As the

distance between an object and a viewer increases, the contrast between the object and its background decreases. The contrast of any markings or details on the object also decreases. The colors of the object also become less saturated and shift towards blue.


Analysis and Exploration iridescence An optical phenomenon characterized as a lustrous rainbow like play of color caused by differential refraction of light that tends to change as the angle of view changes. Iridescence is caused by multiple reflections from multi-layered, semi-transparent surfaces in which phase shift and interference of the reflections modulates the incident light.


Build, Test and Development


Build, Test and Development Graphic elements and visual library


Build, Test and Development Procedural backgrounds explorations


Build, Test and Development Early First Run high fidelity wireframes showing concept of product and service information boxes


Build, Test and Development First Run WPF explorations


Build, Test and Development Install UX

1- Create an Install experience that is clean, smooth, intuitive, extensible and seamless 2- Provide Product information rotations that are discoverable, educational and engaging

A single direction identified and refined Success was validated with User Research Branding needs met


Build, Test and Development Install UX

Started with the background to frame the install experience


Build, Test and Development Install experience





Build, Test and Development First Run UX

1- Surface the products and services that have been installed and provide a discoverable, educational and engaging UX

A single design direction was identified and refined Success was validated with User Research Completed / branding needs


Build, Test and Development Web Service

Provide a gateway or starter page for the user, access to information, functions and services. Manage subscription, access their bundled online services and to align the design with install and first run experiences

XHTML/CSS page Complex layout with fluid header, sticky footer, dynamic, extensible containers PPT Toolkit Success was validated with User Research Completed / branding needs


Build, Test and Development Home page

Entry point to Web site User can be authenticated or unauthenticated (via WL ID) Unauthenticated page does not have the Dashboard component or personalization. Users must sign-in to continue to use the service. Authenticated page recognizes the user, displays their WL ID email address and displays a customized Dashboard.

Unauthenticated home page


Build, Test and Development Dashboard Dashboard is a series of components that are dynamically fed with user PC subscription data. The number of machines, subscription expiry date and renewal type provide a summary of service.


Build, Test and Development Sign In page Users Sign in via an externally hosted account management tool. The tool is placed in an iFrame and CSS is used to skin the tool to match the look and feel of the Equipt site.


Build, Test and Development Subscription page One page to do everything subscription related. Add/Remove machines and manage subscription.


Build, Test and Development Support page One page to do everything support related. Product specific help topics in FAQs. Support request by product AJAX controls single page experience and loads support request form.


Build, Test and Development Support page AJAX support form loaded after user requests link support. Intellisense pre-populates user email and subject fields. Help tips appear in text field and left column. Form has usability regex functionality and user prompts for field completion


Deployment and Extension


Deployment and Extension

Accessibility – high contrast

Accessibility – zoom


Deployment and Extension

Achieve an harmonious brand experience across UX and marketing materials Alignment with the MS brand and MS sub-brands attributes into the UX visual design to Increase loyalty in the products

Collaborative work with external design firm, to Ensure Visual design and brand consistency


Deployment and Extension Marketing home page

Present Equipt as an all-in-one solution while leveraging the brand equity and understood benefits of the 3 individual products it comprises.

Collaborative work Marketing and 3 party vendor, to provide feedback. Ensure good UX consistency, quality and assist with required elements such as branding, visual design, accessibility, icon set, etc.)


Deployment and Extension

"It was a very difficult decision for us to shut down Equipt but the fact of the matter is there is this higher order need (to offer free antivirus software)“ “The product (Equipt ) had met internal sales goals…” "The decision to end-of-life Equipt was not in any way based with sales performance.“

Group Product Manager Bryson Gordon


V-Next Task Launcher


V-Next First run UX


V-Next Family Planner UX


V-Next Life track UX


Javier Roca Mobil: 206-406-1714 E-mail : jav.roca@gmail.com


Other MS projects Office Live Visual Design Strategy SkyDocs Onesite

Other no MS projects Portfolio Other work


as of 4/27/08

• •

Beta testers invites = 6055 – 4,519 external – 1,536 internal Subscriptions – Total Subscriptions = 1947 – Multiple-Machine = 208 – Total Machine installs >= 2155 Total customer emails/incidents = 274 Bugs filed in Product Studio = 100 – 45 remain Active • 31 related to OneCare (21 pure tracking) – 7 Fixed – 35 Won’t Fix, Not Repro, External, or By Design – 13 Duplicate


UX Work Complete…not quite

unauthenticated subscriber center entry page

sign-in

authenticated refund entry page

validation checks

refund E-form

NFR error message page

2

authenticated 1 subscriber center entry page

refund confirmation page

refund summary page

Notes: 1. page state shows post refund confirmation dashboard if user arriving from refund confirmation page. 2. page shows pre-refund dashboard if user arrives from NFR error message page


envision

design

build

test

deploy


Map design to vision, design tenets, goals and guiding principles Translate conceptual ideas, business needs and user goals into design solutions Build relationships with stakeholders, PM, Dev, Marketing, LCA, Test and Partners Incorporate relevant and recent UX research and data to appropriately inform design decisions Assess data from multiple sources (product requirements, tech constraints, UX research; synthesize it in order to develop efficient user scenarios, navigation systems, design patterns Create and effectively present UX deliverables (wireframes, workflows, prototypes, etc.) to explain and negotiate design solutions to key stakeholders Uphold UX guiding principles and style in project execution

Identify and recommend best practices for using WPF/XHTML/CSS and oversee the design implementation into semantic, validated and W3C compliant XHTML/CSS Meet accessibility guidelines and cross-browser requirements Plan for localization and extensibility


Input to provide key areas for visualizing graphic elements Stakeholders: marketing and creative, product managers and UX leads interviews to identify the core strengths and visual elements of MS identity, tone and voice and VB value proposition

The MS brand values = expressively human openness energetic translucent

VB value proposition to the consumer clean = my PC feels better smooth = my PC works better together intuitive = my PC understand me personalized = my PC is about me

MS tone and voice empathetic responsible passionate and inspirational Signature elements neutral blue horizon


SMOOTH Surface Soft Glass Liquid Bubbles Pudding Chocolate Cream Lens Texture Polished Serene Calm Curved Fine Soft Flexible

Continuous Easy Effortless Equable Even Flat Fluent Fluid Flush Frictionless Gentle Glossy Hairless Horizontal Invariable Mild Suave

Plane Quiet Regular Rhythmic Ripple less Serene Shaven Shiny Silky Sleek Soothing Stable Steady Still Suant Flow Bland

Uniform Uninterrupted Unruffled Untroubled Unvarying Unwrinkled Tranquil Unbroken Undeviating Undisturbed Uneventful Monotonous Peaceful Plain Mirror-like Blur


Dimensions are the ideal size. There is some leeway to crop oversized images but the best aspect ratio is as stated. It is also better if all images follow the same guidelines to maintain a unified look-and-feel. Any supporting text changes should be fixed to a maximum of four lines. More lines can be accommodated (five to an absolute maximum of six) but four is the ideal size. This is to preserve whitespace and maintain a comfortable reading time within the fixed stationary time that each text block is exposed for between each animated rotation. The 1.5.1 delivery timeframe will not allow for adjustments to animation timelines of text string handling; this fix is simply an image swap exercise.


AJAX support form loaded after user requests link support. Intellisense pre-populates user email and subject fields. Help tips appear in text field and left column. Form has usability regex functionality and user prompts for field completion.




MS Equipt Symbol

productive connected

The Symbol

protected

Formal but has a unique flair that provides a modern and familiar look. It reflects the Microsoft Albany value proposition, protected, productive and connected. The triangular shape communicates power and continual activity. The triad of strong colors green blue, orange and blue denotes the family products: Onecare, Office and Windows Live.



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.