top of page

Microsoft

Bringing AI to life

Interactive, responsive website that delivers a compelling story of innovation

OVERVIEW

  • My role: Content designer, UX writer, project manager

  • Other team members: 1 product manager, 2 designers, 1 developer

  • Timeline: 4 weeks

​

Desktop and mobile screen of AI Microsoft project

CHALLENGE

Microsoft wanted a comprehensive way to facilitate the customer journey and drive interest in Microsoft products. Considering the new, remote Future of Work, Microsoft needed to make their approach digital.

​

SOLUTION

  • Provide virtual customer experiences that mimic Microsoft in-person experiences

  • Develop an interactive website

  • Illustrate a compelling story of innovation

  • Provide actionable customer insights​

PRODUCT DEMO SCRIPT

When I joined the team, I created an outline and storyboard based on UX writing and storytelling best practices. Over 4 weeks, we iterated on the designs based on client/customer feedback.

I wrote the demo script, which was a recommended story path that aligns with the “day-in-the-life” of a customer storyline. It included guidelines, talking points, and navigation instructions. 

Interactive demo.png
Interactive Demo Script

To maintain professional integrity, some parts of this project have been blurred or replaced with placeholder content.

UX RESEARCH

Competitive audit and customer conversations

I outlined the competitors’ strengths and gaps and used the audit to help narrow down the customer’s differentiated brand identity. We held customer meetings and asked:

  • What’s your objective?

  • What do you want the audience to think, feel, or do after the story?

From there we determined that Microsoft liked something more interactive. They wanted fewer words to summarize the experience. They wanted a self-guided demo to provide just enough information for the user to understand the solution.

Table of competitors' websites, features, and brand identities

Personas

We did several iterations of this project. The first was super-fast, but since then, we were able to do some additional research and created personas.

We had a storytelling workshop where we asked a room of experts about their experiences.  The Microsoft Chief Storyteller and Product Manager led the conversation. This was an internal meeting with key stakeholders and customer account managers. We wanted to make sure to involve stakeholders in our research, and I wanted answers to questions like:

  • How long have users been in their role?

  • Who do they report to? Who reports to them?

  • How is their job measured?

  • What skills are required in their job? What tools do they use?

  • What are their biggest challenges?

  • What does it meant to be successful in their role?

Persona of Jody, a business decision maker

VOICE AND TONE

Brand style and voice

I used the takeaways from the customer meetings and personas to determine how to speak to the user. Microsoft has existing content style guides, and I created mini style guide for this project specifically. The signature elements were practical, possible, and inspirational. I also included what to say and what not to say to ensure consistency across the content system.

Three slides of Microsoft signature style elements and brand voice requirements

Voice mapped to the user journey

I mapped the tone to the user journey. For this project, we implemented a range of conversational to informative. This helped to make sure using brand voice and tone that is consistent across the entire content system. The entire project was a mix of content influencing design and design influencing content .To beginning the journey, talked about the farmer challenges in a more conversational tone to promote the inspirational voice. Microsoft technology was more informative, the overall industry transformation.

MOCKUPS, PROTOTYPES, AND DEVELOPMENT

Creative and experience design

I collaborated with the designers and engineer to explore illustrative and pictorial options for the website that focused on the client’s needs, context, and goals. This was used to gain stakeholder buy in and better understand the client’s design expectations and preferences. The digital prototype illustrated the common user flows to test and validate how our client might interact with the website. It made it easy to share, edit, and collaborate on the design to help our client visualize the final deliverable. I wrote and edited copy, buttons, and icons in Adobe XD.

Product development and quality assurance

The team's engineer used web browser-based, client-rendered HTML with static assets loaded from a central web server using JavaScript framework to create the website. It loaded page, text, image, and video to follow user control by scrolling with the mouse wheel or keypresses. 

Because of the fast timeline, the developer also started a website in week 2 where we could view the website in real time, edit/provide feedback, and conduct Q/A. Also, I created a Planner board to track progress and copyedited the final website before it was published to our client's site.

Planner board redacted.png

WEB ANALYTICS

We used a behavioral analysis tool to help us understand the user interaction with the website. It provided unique insights for our client, and I also used the analytics (e.g., how long a user hoovered in a certain area, how long it took a user to find the desired button or CTA, dead clicks, and active time) to update the UX/UI copy.

Clarity Analytics.png
  • LinkedIn

©2024 by Nicole Woodson

bottom of page