1. User experience designer UX Designer : Jeannine Boone

2. About me I 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.

3. Design process Here 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.

4. Project: my msn UX Designer : Jeannine Boone

6. 2 PM

7. 1User researcher

9. Art direction

10. Information architecture

12. Examples of current site Going 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.

13. Research After 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. PageFlakes My AOL iGoogle My Yahoo NetVibes

14. 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.

15. Sketches/Wireframes 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.

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

17. 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.

18. 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.

19. 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.

20. 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.

21. 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

22. Mockups The customize dialog box and a module detail mockup

23. 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.

24. 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

25. Modules MSNBC News module is an RSS Feed and only has one change item. This is the traffic module and did not require much change. Movie times module had inline options and one in the edit menu as well. Fox Sports Scoreboard was one of the more complex modules. The horoscopes module did not change in functionality. eBay Auctions was very straightforward.

26. 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

27. Final Site

28. Final Site

29. Final Site

30. Project : MICROSOFT ONLINE services trial sign up UX Designer : Jeannine Boone

32. 2 UA writers

33. 2 PM

35. Information architecture

37. 72 Clicks/user inputs far too many

38. Users were unable to complete sign up and were not signing up for the service

41. Protect my privacy and trust – don’t ask for too much information.

42. Tell me about the specific service, the price, the terms. Don’t assume I know this information.

44. Creating a domain is a difficult concept -- both technically and understanding how this domain will work/conflict an existing domain.

45. Security unwilling to specify why an unacceptable password doesn’t meet the guidelines. Return

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

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

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

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

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

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

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

55. 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.

57. Project : MICROSOFT 365 Administrative services UX Designer : Jeannine Boone

59. 1 UA writer

60. 1 PM

62. Information architecture

65. Common page types & controls

67. Build an easy-to-use, comprehensive and high-scale admin experience for IT Generalists & Specialists

69. Consistent Deep-link service Settings pages for each service organized in a common way

72. Mid-market IT Generalists: simplicity, power & flexibility

74. Simple Sign-up with EASI ID

75. Getting Started / Setup Accelerator

76. Revised IA, Navigation, Page Types, and Common Controls

78. 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

79. Administrative services getting started

80. Getting started custom plan

82. Be a great onramp to Service teams

83. Get Service teams to own as much as possible

84. Link directly to action whenever possible

86. Many start states, many phase, many end states

87. We are providing information, not tools

88. Exchange co-existence setup is complex

90. How do you want to transition?

92. Full GAL across

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

96. Provide admins timely, dynamic, and relevant information.

97. Admins should feel empowered with their experience vs. the regular employee experience.

99. Setup steps are time consuming, spanning over multiple sessions, even months.

102. It is customizable and scalable for onboarding services

103. Shows direct customer feedback in the original language

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

106. Developed in partnership with the Exchange team who adopted the design

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

109. Wizards, Property sheets, and grids

110. These page patterns are core to the functionality and usability of the site and servicesGrids Property sheets

111. Domain management

112. Visual Studio 2005 SDK

113. For more examples of previous work see www.jeanninefrazier.com Photography business www.delphenadigital.com Jewelry and other creative work www.delphena.com The End