Microsoft Advertising Rebrand & redesign
In 2019, Bing Ads announced a rebranding and redesign effort to become Microsoft Advertising. This change was inspired by rising changes in the market as Facebook Ads and Instagram Ads began to inspire the future of ad management experiences; additionally, Google Ads presented a full redesign of their product utilizing Material Design with a new focus on navigation changes and mobile.
Team
2 designers
1 researcher
4 program managers
2 content strategist
​
Role
Designer
​
Year
2020
Design question
"How might we provide our advertisers with a modern and accessible ad management experience utilizing Microsoft's Fluent design while maintaining familiarity with users from Google Ads?"
Research
There were several factors that inspired Bing Ads to pursue not only rebranding itself as a product, but to also undergo a complete overhaul of the front end experience; first and foremost, the competitive landscape. Our surveys illustrated that our users don't readily associate Bing Ads as a Microsoft product; this finding was compared with services like Facebook Ads and Google Ads where their product branding directly tied to the companies that they serve. Microsoft Advertising was a needed change for not only our users on the Bing platform, but also to begin opening up our service to integrate into more Microsoft products across our ecosystem. Through this effort, I worked closely with our marketing & content strategy partners to create new help support and onboarding material for our advertisers. As the design lead for the account & billing space, I scoped this work into several design phases in which we would make incrimental change to the design without disrupting our advertisers' ability to run their business.
The rebrand was coupled with the company-wide push to adopt a Fabric/Web Fluent design system that many Microsoft products (such as Office and Windows) had already been using. This design system allowed for uniformity and consistency across Microsoft and opened the doors for more cross-platform collaboration in the company. This was a win not only for our product, but for the future of Microsoft Design. Google Ads introduced Material design to their experience in 2018 which brought amazing insight into our own design process. For one, we knew that a majority of our Microsoft Advertising users also use Google Ads. This has always been a driving force in keeping a familiar feeling within our approach to design so that we could ensure our users (from small business owners to high-spending agencies) that they would not have to relearn a new product when jumping between the two.
However, we simply could not follow Google down the path of Material design. What we could do, was study primary workflows and features to extrapolate primary user journeys within the product. For instance, Google Ads reorganized their navigation in 5 major ways that inspired our heuristics: Primary campaign management/navigation, secondary navigation, contextual awareness, account switching/search/tools access, and grid data management.
Ideate / prototype
This was an exciting time for Microsoft Advertising because while Google Ads was unveiling a new approach to ad and account management, Microsoft products across the company also started to shift to Fabric/Fluent design which fell in line with our business goals and UX framework. Not only were our competitors making strategic and potentially risky changes to their products, but now it was a chance for Microsoft Advertising to do the same by further differentiating itself as a leading provider in this market. Adopting web Fluent meant peeling back the layers of our product and rebuilding with accessibility and responsiveness in mind. With a product-wide shift to focus on accessible and inclusive design, we knew that we needed to first tackle this problem at the component level.
We began to audit our entire product, at every level, so that we could find gaps of inconsistencies, areas of improvement, and overall functional failures. I, along with another designer, lead the effort in driving action for alignment across our design guidelines and building a process in which we could more easily share assets within our team and with our developer partner teams. Using an atoms, molecules, & organisms approach to design, we reevaluated our human interface guideline documentation and updated our content so that our cross-channel teams could collaborate with us more efficiently. With inclusive design, it not only meant taking a look at color contrast, but it also meant we needed to provide robust interactive states for keyboard tabbing and screen readers, reformatting content for reflow and responsive scenarios, provide aria labels for images/content, and host usability studies with an aim to recruit participants with accessibility needs. I drove presentations and knowledge-sharing around how we could keep accessibility in mind as we build; this ultimately helped us reduce churn and duplicative work in our design process.
Evaluate / results
​The feedback was clear, and we delivered on these benefits:
​
-
Better tools to help improve effectiveness and save time
-
Test campaign changes with confidence
-
Drive customers to immediate action
-
Give clearer insights on ad performance with prominence metrics
-
Multi-account management with clear, contextual, actionable notifications
-
Making it easier to fix any payment problems
-
Keeping accounts healthy with AI-powered recommendations
Before
After
Tools such as the date picker gained a refreshing Fluent design look and feel which allows the user to quickly gain reporting insight on their campaign performance. Not only is this component crucial for our external users to navigate our product, but it also allows for our internal account managers to better support and assist our customers worldwide by further illustrating their periods of ad spend and goals. This component was designed with accessibility at the forefront, allowing for quick and easy navigation through keyboard inputs and clear visual indicators of user selection. This saves our advertisers time and money by allowing them to quickly find the insights they need.
"Easier access to my campaigns and their results!"
"This redesign represents a new, principled design approach that is centered on customer feedback and contributes to an open, cross-platform design system. The redesigned Microsoft Advertising will be a member of the Microsoft Fluent design community, allowing the product to continuously maintain the newest, most modern design principles for our customers."
​
- From Microsoft Blog: Achieve More With The Redesigned Microsoft Advertising
