USER EXPERIENCE DESIGNERUX Designer : Jeannine Boone

About meI have been in the design industry for over 15 years and have a great deal of diverse experience: Microsoft Freelance positions through Filter Microsoft Studios Started and run my own photography business Jack Morton Worldwide Imagio Sitewerks Boeing Asymetrix Starwave Real World studios, England Various freelance projects for small businesses and individuals Custom Jewelry design

My areas of expertise include visual design, interaction design, information architecture, motion design. I also do pottery, jewelry, photography and love snowboarding, spending time with my son, and being outdoors.

Design processHere is a rough outline of my basic design process. This of course can vary a little from project to project but the basic principals and steps remain.

Information gathering: First I gather information, ask a lot of questions and get an overall scope of the project. Read a spec document if available. Find out what are the business goals and what are the scenarios for the project: who is the user?

Research: I usually do some research and competitive analysis of similar companies and/or products to get a sense of what’s out there, what is working well and why

Brainstorming: Then comes brainstorming and sketching. I usually have an idea brewing by now and getting together with others and talking about the project gets the juices flowing and gives me a lot of ideas to work from

Wireframes: Next comes grey-boxing or wire framing to get the rough idea down on paper and start work through some of the designs, interactions, and scenarios. I usually try to pick 2 or maybe 3 designs to show initially and after deciding on one, move forward flushing that design out in it’s entirety

Revisions: Now comes the time for revisions and changes. I review the designs with my client or team and gather input and feedback, and based upon that feedback make changes to the designs. This process can go on for a few iterations depending upon the scope and depth of the project

Usability: somewhere in this timeframe usually comes usability studies to get some user feedback and incorporate any changes needed based upon that feedback.

High fidelity: Then it’s high fidelity – or perhaps handoff to development to begin coding. Or even prototyping. Each project is different!

Integration: I then work with development or whoever is building the site/project to ensure that the design I created is the one implemented. This part of the process is essential to getting the design you want out the door.

PROJECT: MY MSNUX Designer : Jeannine Boone

My MSN redesign

Project: • The main object of this project was to update the current version of my

msn. Besides porting it to a new platform (Bedrock), we also wanted to give it a visual and interactive makeover.

Team: • 1 UX designer• 2 PM• 1 User researcher• Team of developers

My role: • interaction design• Art direction• Information architecture

• Collaborate with research/PM on usability testing

Goals and Objectives

Change look and feel to reflect more of MSN.com Add new and exciting content that appeals to new and existing

users Resize capabilities for scaling browser window Have Hotmail have link back to myMSN (new version) Change functionality of gadget windows to be simpler and more

intuitive Have default “MyMSN” home page that is a simple yet personal

version of MSN.com Add new themes to choose from, add dynamic set Have dynamically updating content

Examples of current siteGoing through the current website allowed me to see what features were being used and how. This overview also provided me the opportunity to asses the overall user experience of the site, helping define what needed improving or added.

ResearchAfter a thorough competitive analysis of similar sites and analyzing the user experiences, I made some basic recommendations as a starting point for moving forward in our redesign. These recommendations acted more as a spring board rather than the definitive outcome. Below are the top personalized portals being used today.

iGoogle

PageFlakes

My Yahoo

My AOL

NetVibes

Sketches/Wireframes After numerous designs, here is the basic homepage default layout I

designed after making my recommendations. It shows a very basic layout but includes many of the key features we wanted to include. This also gives a sense of how clean and simplified the homepage would look.

Here’s how drag and drop would work with modules. The cursor would change into the 4 grab arrow icon and you would grab/drag the module and depending upon where you move it, you would see a preview outline appear where it would land.

Sketches/Wireframes

There were many different features that needed to be designed. From changing your theme to emailing your page to a friend.

Sketches/Wireframes

The Add Content Gallery – a new section of the site where you can go research and add content to your page. This was a preliminary design, but the overall functionality and design stayed relatively the same in the final build.

Sketches/Wireframes

Add Content Gallery – module details page had many purposes: to give module preview and information, to give data on how many users etc. , allow people to share modules, allow users to rate and read comments on modules, and to give recommendations of modules based upon what you were viewing at the time. None of these features made it into the new version.

Sketches/Wireframes

Add Content Gallery – Search results page was just one take on how we could display search results from searching the content gallery. The final result can be seen later in the slides.

Sketches/Wireframes

Mockups After the team reviewed and I made multiple changes to the

layout, it was time to do high fidelity mockups of the site. The default color was easy to decide upon since the mandate

for this was to match closely to the msn.com homepage, this tied my msn into the homepage much more closely than before and gave users a sense of familiarity

The changes that were made to the UI for the mockups were minor. One hurdle was the ‘add content gallery’ and how we would display the module previews within the gallery. Specifically how to separate the msn content from content from the web content.

An illustrator was brought on board to help with the theme graphics; this is a significant part of the new look of my msn.

Mockups Here is a first mock up of the default homepage and another showing new

user info balloons to show here new content will appear and where to add content and change your theme and layout

Mockups The customize dialog box and a module detail mockup

Mockups The add gallery page showing a search result separating MSN content and

content from the web. Also a module preview pop-over box which the user gets when they rollover a module thumbnail and click on a ‘preview’ button.

Module Development As soon as the style layout and basic functionality were decided

upon, module development began. The basic module interaction changed from having inline dialog

boxes and input to having edit menus The basic module edit menu remains the same for each module

except the input itself can vary for different modules Each module and it’s interaction were designed by myself and

finalized upon by the team

Modules

Fox Sports Scoreboard was one of the more complex modules.

This is the traffic module and did not require much change.

eBay Auctions was very straightforward.

MSNBC News module is an RSS Feed and only has one change item.

The horoscopes module did not change in functionality.

Movie times module had inline options and one in the edit menu as well.

Final Site After months of conceptual work, design and prototyping the beta build is

nearly done The final beta site is a vast improvement upon the current version of my

msn There are still many bugs in the beta build that have not been corrected Many of the features I proposed did not make it into the new version:

Dynamic themes Unlimited new content and gadgets Module reviews and comments from users Module recommendations Module detail pages Full scalability of site

Final Site

Final Site

Final Site

PROJECT : MICROSOFT ONLINE SERVICES TRIAL SIGN UP

UX Designer : Jeannine Boone

Microsoft Online Services trial sign upProject: • To redesign the sign up process for Microsoft online services – now Office 365.

Team: • 1 UX designer• 2 UA writers• 2 PM• 2 User researcher

My role: • interaction design• Information architecture

• Collaborate with research/PM on usability testing

Original BPOS Trial sign up 8.3

• Trial sign up challenges• 72 Clicks/user inputs far too many• Users were unable to complete sign up and were not signing up for the

service• No immediate access to services or ‘dashboard’

Sign up iterations

Return

User goals and challengesuser goals• Make signup simple. • Protect my privacy and trust – don’t ask for too much information.• Tell me about the specific service, the price, the terms. Don’t assume I

know this information. • Don’t make me wait – let me start using immediately.

challenges / constraints• Provisioning delay required. • Creating a domain is a difficult concept -- both technically and

understanding how this domain will work/conflict an existing domain.• Security unwilling to specify why an unacceptable password doesn’t meet

the guidelines.

• Reduced from 72 user inputs to 21 for Public beta

• Quick sign up (need to only provide key information) and immediate access to services after a short provisioning time.

• Progressive disclosure design (users only see select information at a time) used for the complex sections of the form.

• “New domain name” field label and purpose are clear.

• Information about the specific offer, price and terms is provided. This helps reinforce user selection from the presales marketing site.

• Reinforcement of user’s MOSID on the confirmation page to help users recall it later.

Successes

Office 365 Trial sign up

Office 365 Trial sign up

• Branding: Executive decision to use different brand name in header and MOS ID.

• The Domain name field does not accept special characters including ‘hyphen’ ‘ampersand’ or ‘underscore’, however the current BPOS 9.X experience accepts them.

• Microsoft Online Services ID: This is a New concept to users. Business decision to use this versus WLID.

• Captcha screenshot is complex to read because we have to use the WLID CAPTCHA which has tested very poorly.

• 9.X parity: we had to use the existing BPOS 9.X sign up as a design model however if we were to do this differently ideally would reduce the amount of required fields on this form.

• 20 second provisioning delay on the sign up confirmation page.

Constraints

Quick snap shot of the evolution of Office365 sign up in terms of how many clicks it takes for the user to sign up for the service and how it compares to Google Apps.

Final competitive analysis

PROJECT : MICROSOFT 365 ADMINISTRATIVE SERVICES

UX Designer : Jeannine Boone

Office 365 Administrative servicesProject: • To take the Microsoft Online services portal and the Microsoft Online admin portal

and combine them and design the admin experience of getting started, migration, and getting their services set up

Team: • 1 UX designer• 1 UA writer• 1 PM• 1 User researcher

My role: • interaction design• Information architecture

• Collaborate with research/PM on usability testing

Administrative services

Merging two sites into one. MOCP and MOAC became Office 365.

Create an Architecture• Information Architecture (sitemap + navigation scheme)• Common page types & controls• A framework for problem solving

Consolidated Experiences• Consolidate S & L into a common experience• Build an easy-to-use, comprehensive and high-scale admin experience for

IT Generalists & Specialists• Standardize naming/branding/visuals of admin experiences

Extensible, Consistent Workload Marketing & Management Experience• Workloads can create consistent Service Catalog pages in our catalog• Consistent Deep-link service Settings pages for each service organized in a

common way• Consistent Header link within workloads to return to the central

management console

Administrative Experience Principles

Completely Different UX between “L” & “S”• “S” console is already shipping its R2 in “9.x style”• “L” console exists as wireframes in PPT “W14 style”

Different personas require varying levels of Admin power & flexibility• Small business owner “DIY”: simplicity & minimalism• Mid-market IT Generalists: simplicity, power & flexibility• Enterprise IT Specialists: scale, power, complex deployments

Need to carry-forward the UX vision as presented to the division in July• Consolidation between MOAC & MOCP• Simple Sign-up with EASI ID• Getting Started / Setup Accelerator • Revised IA, Navigation, Page Types, and Common Controls• Incorporating confluence of feedback from workloads, execs and marketing

Administrative Experience challenges

Administrative services getting started principles

Administrative services getting started

Many different iterations done with many challenges and continually changing goals and priorities:• Getting started• Migration• Coexistence• Task-based UX vs. Scenario based

UX• Parity with the IW homepage• Constantly changing visual design

and nomenclature

Administrative services getting started

Getting started custom plan

Exchange MigrationMigration Goals:

• 9x parity• Be a great onramp to Service

teams• Get Service teams to own as

much as possible• Link directly to action whenever

possible• Have Migration be a core

deliverable for BOX

Migration Issues:• Migration is a hard process for

our customers!• Many start states, many phase,

many end states• We are providing information,

not tools• Exchange co-existence setup is

complex• Richest solution but at a setup

cost

General ‘build plan’ model is ask:• What is your current env?• How do you want to transition?• What is your desired end-state?

Rich Co-existence• On-prem and off-prem mailboxes• Full GAL across• Free-busy across

Migration: Rich co-existence

Exchange migration

user expectations• Walk me through the steps I need to take to setup my business,

tailored to my environment (don’t just give me disconnected instructions).

• Make the trial a safe environment; so I won’t loose my business data. And so I can test the entire experience including support.

• Provide admins timely, dynamic, and relevant information. • Admins should feel empowered with their experience vs. the regular

employee experience.• Let them know they have admin privileges, recognize they are in an

admin area.

challenges • We can’t tell which steps are completed• Setup steps are time consuming, spanning over multiple sessions, even

months. • Engineering debate: which setup steps are recommended vs. required?

Administrative services summary

OTHER PROJECTSUX Designer : Jeannine Boone

Reporting tool for usability feedback• This is a tool designed for usability

research (mainly) to view and analyze customer data

• It is customizable and scalable for onboarding services

• Shows direct customer feedback in the original language

• Makes it easy to do comparisons, trend analysis and region analysis over time, role, or service

• The admin can set default settings for the rest of the group

Service health and maintenance Office 365

• New site developed specifically for reporting the Health of the services and show planned outages

• Developed in partnership with the Exchange team who adopted the design

• Design of site was spawned from my work on the Admin home page

• Easily scan able and scalable – top ask from admins

Design patterns

Wizards

Property sheets

Grids

• Designed page patterns for Office 365

• Wizards, Property sheets, and grids• These page patterns are core to the

functionality and usability of the site and services

Domain management

Visual Studio 2005 SDK

The End

For more examples of previous work seewww.jeanninefrazier.com

Photography businesswww.delphenadigital.com

Jewelry and other creative workwww.delphena.com