Work Essentials is a sub-site on Office Online with the goal of providing occupation-specific articles, templates and tools. As lead designer on this project, it was my responsibility to drive the end-to-end user experience. Since the site was hosted on a platform owned by another Microsoft team, I worked in close coordination with their design team to brainstorm, negotiate trade-offs, and drive our unique design priorities, while keeping the larger user experience in focus.
Spanning over a year, I lead this project through the following design process:
User profiles > Requirement gathering > Brainstorming > Scenario generation > Storyboards > Information architecture > Wireframes > Prototypes > Usability tests > Taxonomy development > Visual design > Design production
Charged with developing a vision for what an online productivity service might look like in 3 years, I lead the "OfficeTools" project. While directing visual and interaction design, my predominate challenge came in analyzing online trends to create compelling, yet realistic scenarios.
Features that are common today (AJAX enabled web applications, embedded community features, content syndication and subscription) were still at their infancy at the time. The prototype was well received by the executive staff, despite concerns surrounding monetization and apparent conflicts with Microsoft's investment in client products. Interestingly, many of the concepts that were presented then are, in fact, now a reality. (Live.com, OfficeLive)
A unique feature of this prototype is the inline assistance mechanism. By simply right-clicking the mouse, the next appropriate action is displayed, allowing it to be distributed to those who may not understand the scenario.
Download Prototype (13megs - Self-contained Shockwave .exe)
In the wake of Enron and WorldCom scandals, new legislation was developed that placed additional burden on business executives to monitor and report financial risks. In response to increased compliance demands, Microsoft created a packaged solution, called "Accelerator", which customized and integrated SharePoint Server and InfoPath technologies. I was the sole designer.
The biggest challenge in this project was getting up to speed on the financial jargon and processes. Working with consultants from KPMG, Deloitte and Touche, and KPMG, the lead developer and I worked tirelessly to iterate on functional prototypes to test against constantly evolving requirements.
Design was an instrumental function in the product development process. Constant attention was needed to ensure all elements could be customized to account for varying accounting methodologies. Additionally, many limitations existed due to Version 1 platform technology, so constant communication and documentation between design and the development team was essential.
Sample design specification (.doc)
While this project was complete in 2001, it's an excellent example of a design process that was well executed and has stood the test of time. Working with world-class information architects, taxonomists and librarians, the redesigned site lauded praise from both the Microsoft user community and numerous Intranet design publications.
A team project, I was one of three designers undertaking the enormous task of reinventing an intranet site with massive content catalogs, disparate taxonomies, and an extremely advanced target audience. The goal of the redesign was to improve the delivery of targeted information to employees desktop where users can check out books, scan customized research reports, and access a variety of news sources. Beginning with in-depth user studies, and proceeding through all design phases, my contributions included information architecture, concept exploration, usability testing, visual design, iconography, and HTML production.
To get a feel for my design aesthetic without the constraints I usually face in corporate work, here are few unrelated sample pieces.
I typically favor clean, simple lines and shapes, avoiding undue complexity. Colors are generally limited to simple palettes, with strong areas of central focus.
OfficeLive, Microsoft's online small business offering, is extending their features to include marketing services such as keyword advertising, online coupons and e-mail marketing. As designer responsible for these areas, and brand new to the team, it was important to understand the greater architecture of the current product. I created a diagram of the existing product areas and functionality to aid in conversations about feature discoverability, orientation, and general interaction between feature "silos".
Sample product map (5 megs - .vsd)
Once formal design began, I chose to use PowerPoint to build quick illustrative wireframes to communicate concepts. A benefit of this approach (versus Flash or Director) is that initial designs and interaction templates can be handed to Program Managers, which can be easily modified with tools they are already familiar with. Additionally, new PowerPoint features make the wireframes interactive, thus easily faciliating use in usability testing.
In an effort to establish a common understanding of the Work Essentials target audience, I initiated and drove a project to develop "Ad-hoc User Profiles". Unlike traditional persona development, ad-hoc personas used the collective knowledge of our team, in conjunction with existing user research, to quickly build understanding into the design process.
Kicking off with a two-day moderated exercise of role-play and assumption gathering, a set of 7 user archetypes were derived that allowed us to focus upon features, behaviors, and expectations appropriate for each individual.
TalkEnglish is an online language program that focuses on English speech, as opposed to reading and writing. The site offers inline audio lessons and community features to aid users in connecting and helping each other.
My role on this project was to develop the site architecture, create and produce a visual identity, and deliver HTML prototypes.
I faced a unique design challenge when creating a visual style that appealed to non-western design aesthetics. Competitive reviews of popular Korean sites prompted a more dense, colorful and "busy" design than I would have otherwise created. In the end, however, I feel I delivered a product that delighted my client and didn't offend my personal design sense.
The Tools For Your Job web site had maintained its look and feel for multiple years. In building comps for the next series of feature updates, I proposed some visual changes to project a more refined look. Ample use of photography with embedded text, more content within a single view, and less abrupt color themes were among the suggestions.
This client came to me with existing brand and unprocessed product photos. The request: "Build me a brochure site that is simple, well organized, and something I can maintain myself".
Through frugal code and tedious image optimization, the entire size fits onto a single floppy disk, ensuring speedy online performance.
Whitespace is used to complement cheery and vivid product colors. The navigation is simple, effective, and supported by related product links within the content to support lateral browsing.
The Microsoft Information Services team's mission was to meet the company internal information needs. To this end, my team was tasked with designing a search interface that would scale across multiple content repositories, support varying content types, yet retain common elements to that would ensure a consistent experience for search users. Innovative features, now common today, included editorialized "Best Bets", tabbed results, and inline term definitions.
MSWeb is the primary web-based communications forum for Microsoft employees. In this redesign, the design team's goals was to provide a comprehensive guide to internal events, learning opportunities, knowledge-sharing and key external industry events. By improving the overall "stickiness" of the site, our vision had MSWeb as the single point of access to all corporate information and knowledge sources.
Before redesigning Microsoft's corporate portal, a set of personas and archetypes were developed. This was my first exposure to personas and gave me the opportunity to work with industry-leading experts in this area. A team project, I participated throughout all phases and was responsible for developing all final collateral materials.