The program.

During my time leading the Surface UX Design and Testing programs at Wunderman Thompson, Los Angeles (originally POSSIBLE), I launched several digital web experiences supporting Surface product launches, resulting in many refreshes across Microsoft.com— richer, more dynamic, more modular experiences— more compelling storytelling — but this work represents a very small part of the larger UX and testing program. I focused on improving Microsoft.com overall — design and research, user experience and site stategy, marketing strategy and technology. I would execute this through its sub-brands web properties: Surface, Edge, and Windows, both consumer and commercial properties across 43 markets (lang-locs) worldwide.

I very much built this program from the ground up. When I first took ownership of the work, it had not yet become a program. Budgets were uncertain. Clients would approve individual project work with very little attention given to overall site strategy; and there was a greater emphasis on ad-hoc work— revolving teams resulting in loss of expert and historical knowledge. Everything was slow.

Consumer and commercial properties were managed separately, with separate budgets and, at times— competing resources. Microsoft wasn’t clear on investing into its web properties. That was political.

The work was largely production focused. A new launch meant a new refresh. Maybe a new web page, refreshed supporting pages.

I advocated for more data analysis, more strategy and more research. And we needed a dedicated team. After 5 years, its scope included overall site strategy across both consumer and commercial web properties, UX research and design, testing and experimentation strategy and web production. I demanded more data analysis and research, more user studies, more strategy, more valuable design, greater testing, more dynamic user experiences and better technology—a more nimble CMS and Design System, and more accessibility. I collaborated with Brand Studio and influenced photography and video production, advocating for more premium, diverse imagery, richer media, more movement and animation. We influenced their design studios, inspiring new site features, developing new concepts and prototypes and a refreshed Design System. We grew from $1.5m to $6.5m in bankable agency revenue.

We launched digital experiences both seasonally and yearround, regularly introducing new experiences and conducting research analyses and experimentation to improve existing web experiences along the way. We introduced new features into Microsoft’s design system and worked with Microsoft Brand teams to optimize digital media.

For the client, I:

  • Introduced and delivered new premium web experiences to meet the needs of their customers

  • Built and improved team relationships across BUs and streamlined web process and operations

  • Introduced greater collaboration across business teams and aligned stakeholders on overall goals

  • Collaborated with brand and product teams to deliver richer, more compelling media experiences and story content

  • Introduced site features that improved site performance, usability, user experience and customer engagement.

  • Executed global releases in 43 markets worldwide, ensuring compliance with guidelines and best practices

For the agency, I:

  • Fostered deeper relationships and connections with client stakeholders and agency teams to improve working relationships

  • Amplified client launches, team honors and accomplishments

  • Identified areas of opportunity to better support the needs of the client, improved client relationships creating new scopes of work, proposals and increased revenue

  • Expanded the Surface program to support both consumer and commercial web properties and testing programs, increasing overall program revenue from $1.5m to $6.5m over a 5-year period.

  • Advocated for the relocation of testing programs to consolidate account revenue, increase agency margins and improve site design and performance

 

The Surface Duo assignment.

Surface Duo was an incredible marketing, design and engineering milestone for Microsoft. With its innovative dual-screen and interactive scrolling features, Surface Duo represented a rebirth for a company that had previously introduced failed Window phones.

Surface Duo was marketed as a mobile device, but the product was versatile. It could serve as a phone, a laptop or a pad.

Telling the story was important and providing the users a rich digital experience that could be as dynamic and interactive as the device was important for selling the device. Since customers would not be able to interact with the product in-person due to Covid-19 restrictions, web would have to do all the work.

On an expedited timeline, we needed to design and deliver an immersive, interactive and accessible web experience.

The scope included:

  • Program management

  • Data Analysis

  • Strategy and Planning

  • UX Design

  • Motion Design

  • Production

  • Development and Localization

Result: We launched new experiences and conducted analyses to improve existing web experiences. This effort expanded Microsoft’s existing design system and created the foundation for the creation of more dynamic media. We scaled this work to over 43 markets worldwide.

 
Content.png

Content.

Over the years, I evolved the relationship with the Microsoft client in order to get my team further into content creation. It was important for us to influence the direction of the imagery, animations and videos we would use.

This time we wanted to own it. I advocated for it. We needed to drive the ideation and creation of the content if we were expected to deliver a more dynamic experience.

Technology.png

Technology.

We knew there were challenges with technology going into the engagement. CMS limitations and the rigid design system meant we would need to develop a custom experience. We would need to ideate, design and execute prototypes quickly.

In order to drive towards our MVP, the development team would need to be involved at the beginning and the discovery process would have to be as transparent (and collaborative) as possible. I advocated for close collaboration between both teams.

Testing opportunities needed to be identified and assessed quickly, leveraging existing testing platforms.

Accessibility.png

Accessibility.

We would need to keep accessibility in mind. Defining the requirements for accessibility compliance would need to be a priority.

 
 

The process.

Traditionally, the research, design and production phases of the web experience would follow a more linear, waterfall process. As scrum master, I advocated for a more agile working process to accommodate pivots.

As the program lead, I worked to define the web process, introducing new process improvements as necessary to optimize the efficiency of our projects and overall web performance.

 
 

In launching the Surface Duo experience, we developed a more more collaborative working style, focused on improving efficiency.

  • I worked closely with stakeholders to define requirements, identify priorities and establish our roadmap

  • We quickly executed our ideas using rapid prototyping to drive development

  • We defined the product features most important to customers and analyzed competitive experiences

  • We met quickly and often to align on new priorities

Accelerated Design Web Development Process.png
 

The recommendation.

Our proposal to the client and other stakeholders included several recommendations at various staffing and pricing levels. All proposals required team alignment on the foundation of the project:

  • We proposed a custom web experience leveraging new, more dynamic design modules

  • We recommended condensed product copy to shorten the length of the page. In previous analyses, we discovered that users typically consumed only 20-30% of the page before dropping off into the buy flow (or leaving the page), so keeping the page short was important.

  • To create efficiency and provide stability, we descoped selling modules, leveraging out-of-the-box white label experiences where possible

  • Getting customers to connect directly with their provider was important; we proposed designing a custom buy-flow that would simplify the buying process, allowing customers to purchase their selected device from Microsoft.com or their preferred 3rd party reseller, as allowed by their provider, directly from the site

  • We did away with static assets and pushed for more robust collaboration with Product Marketing and Brand Studio to define the shot list needed to tell a more cohesive, dynamic story, and advocated for more diverse models for greater representation

  • We collaborated with Brand studio to create richer media and more dynamic animation and video content to allow the product story to be told in a more immersive way

 
 

The result.

The launch of the Surface Duo mobile device was a huge moment for both the client and the agency. The experience launched with great engagement.

Customers responded warmly to the Surface Duo device, completely wiping out inventory within just a few days of launch. Modules developed during this exercise were incorporated into the client’s broader design systems. Design solutions were championed by senior leadership and celebrated by stakeholders. This engagement opened the door to continue to introduce custom design solutions.

 
Increase.png

Getting gains.

We saw huge gains for our client with a 16% increase in web traffic, a 50% increase in web revenue, and 71.5% and 83.5% in overall page engagement across Consumer and Commercial users.

Custom.png

Customization with purpose.

By building this custom experience, we were able to create custom modules and make them reusable. We influenced the design system and broader design library, and scheduled future optimizations.

ProofofConcept.png

Proof of concept + business opportunities.

Due to the high visibility nature of this launch, we were able to push for more ownership of the content creation, setting the team up for more design opportunities. The launch of this page experience served as proof of concept for more interactive web design.