Case Study

Viva Home

Microsoft Viva had grown into a suite of powerful apps that most people met one at a time. Viva Home became its front door: a single place in Microsoft 365 and Teams to understand what the suite is, find what you already have, and get to it.

Role:Product Designer IITeam:2 designers, 1 PM, 1 researcher, 4 engineersTimeline:6 months, shipped 2023Platform:Microsoft 365 and TeamsScope:Concept to engineering handoff

Key Contributions

  • Took Viva Home from workshops and sketches to a shipped MVP in six months.

  • Defined the four goals the design was judged against: wayfinding, discovery, education, and delight.

  • Explored three competing concepts and argued the tradeoff that set the MVP's scope.

  • Ran the design through exploratory research with information workers and senior leaders.

  • Handed off desktop, mobile, dark mode, high contrast, motion, and edge cases to engineering.

At a glance

Problem

Viva's apps were encountered separately, so people rarely discovered what else they already had access to.

Outcome

A unified hub in Microsoft 365 and Teams that explains the suite and routes people to the apps they are licensed for.

What I owned

Concept exploration, the MVP design, prototype testing, and the specification engineering built from.

Constraints

An aggressive timeline, and a hard requirement not to cannibalize usage of the individual Viva apps.

The challenge

A suite that people met one app at a time

Viva brings communications, knowledge, learning, resources, and insights into the flow of work. But people arrived through whichever single app their organization had rolled out, and formed their entire impression of Viva from it. The usage data showed exactly that shape.

12%

Of monthly users touched more than one app

Viva reached 20 million monthly active users globally in 2022, but only about one in eight of them opened a second app in a given month. The suite was being used one app at a time.

We asked more than 15 customers with 1,000+ licenses what stopped their organization adopting more of the suite. 73% pointed to cost, 61% said the use cases were not relevant enough to their needs, and 55% said the apps were too complex, with discoverability the specific difficulty. Two of those three are design problems, and both are about knowledge rather than capability.

Understanding value

People struggled to say what Viva was for. Asked directly, they described the one module they had used, not a suite.

Discoverability

Even licensed apps were hard to find. There was no single place that showed what an organization had and what it was good for.

"I thought Viva was just Insights and Connections. I feel like I have to look for all the things I have access to."

Research participant

Design process

Six months, listening first

The project ran from workshops to engineering handoff in six months. The arc was simple: learn, explore, decide, test, ship. The sections below walk through it in that order.

01

LearnAbsorbed what partner teams across the org already knew, then ran workshops to define the problem statement and the principles we would hold ourselves to.

02

ExploreSketched, wireframed, and built three competing concepts, with design workshops and critique keeping stakeholders in the loop rather than surprised. Together with leadership, we chose the direction.

03

TestBuilt a prototype of the chosen direction and ran moderated and unmoderated studies on it, gathering qualitative feedback on how people read the page and what they expected it to do.

04

Hand offSpecced the MVP for engineering with the states and edge cases that usually get discovered late, and stayed available through build.

The workshops distilled into four goals, and every concept that follows was judged against them.

Wayfinding

Be the front door to the suite, making it easy to explore licensed apps and feel their value first-hand.

Discovery

Help people find the full range of features available to them, not just the module they arrived through.

Education

Provide resources that let people get the most out of what their organization already pays for.

Delight

Make the experience enjoyable, not merely functional. Motion carried a lot of this weight.

A map of every route into Viva Home across Microsoft 365
Mapping every route into Home before designing the page itself. A front door only works if you know which doors people are already walking through.
Early sketches exploring layouts for Viva Home
Putting pen to paper before pixels.
Desktop and mobile wireframes for Viva Home
Laying it out across desktop and mobile at the same time.

Design explorations

Three ways a front door could work

Rather than refine one idea, I built three that disagreed with each other, so the choice would be about strategy instead of taste. Each went to design, product, and engineering leadership with its own pros and cons, and the next section is the decision we landed on together.

Concept one for Viva Home: a navigation-led page with left-hand navigation, featured content, and insight cards

Navigation-led

Left-hand local navigation with the apps categorized inside the hero, content in cards, and suggested and recommended items throughout. Strong for people who already knew what they were looking for.

Concept two for Viva Home: an action-led dashboard with a daily highlight and a to-do list

Action-led

A top hero dashboard with actions in the hero itself and each section categorized by app. The most immediately useful, and the most likely to duplicate the apps it was supposed to introduce.

Concept three for Viva Home: a visual, education-led page that introduces the suite

Education-led

A thumbnail approach, visual forward, choosing education over action. The weakest at getting something done today and the strongest at answering the question people actually had, which was what Viva is.

Decisions and tradeoffs

Why we chose education

With the three concepts on the table, we and leadership aligned on the education-led direction. Three arguments decided it.

Considered

An action-led dashboard where people complete tasks without leaving Home.

Chose

An education and wayfinding launcher that sends people into the apps to act.

Why

Home is the front door. A front door's job is to get you inside, not to keep you standing in it. The actions belong in the apps that own them.

Considered

Measuring Home's success by the engagement it captured itself.

Chose

Protecting the individual apps' usage as a hard constraint on the design.

Why

A hub that pulled monthly actives away from the apps it fronts would have looked successful while making the suite worse. Home wins when the apps do.

Considered

Designing for people who already knew the Viva suite.

Chose

Designing for people who did not, which the research said was most of them.

Why

Assuming familiarity was the mistake the current experience already made. People described Viva as whichever single app they had been given, so Home had to explain before it could navigate.

User testing

What testing with users taught us

With the education direction agreed, we built a prototype of it and put it in front of people: exploratory sessions with 25+ information workers and 8+ senior leaders across sales, tech, marketing, and HR. We asked whether they understood what Home was for, whether the content enabled discovery, and how the motion made them feel. The direction held. What changed was the detail.

  • First impressions were positive, and the amount of content felt right.

  • Opinions split on which section was most valuable, which told us the page was serving different roles differently.

  • Motion mostly landed, with specific elements people wanted dialed back.

  • People wanted to customize Home for themselves and their organization.

  • Some content read as repetitive and the copy could be more descriptive, which sent us back to fewer, richer cards rather than equal billing for every app.

Impact

What shipped and what moved

10%

Increase in product engagement

Measured after Viva Home shipped as the entry point to the suite.

A front door that holds

Home became the cross-product entry point for the suite in Microsoft 365 and Teams, rather than another destination competing for attention.

Shipped ready for the edges

Desktop, mobile, dark mode, high contrast, motion, and edge cases were specified before build, not discovered during it.

Viva Home as it shipped: the welcome hero with app cards for Engage and Insights
Viva Home as it shipped: the front door greeting people by name and introducing the suite one card at a time.
The engineering handoff package for Viva Home
The handoff: specs, responsive designs, dark mode, high contrast, motion, edge cases, card templates, and a prototype walkthrough.

Looking ahead

What I would have done next

Not long after Viva Home shipped, a reorg moved it to a different part of the company, so this is the direction I would have argued for rather than a roadmap I got to run.

  • Let people customize Home for themselves and their organization, which testing asked for and the MVP could not fit.

  • Bring sound into the experience alongside motion, so delight is not carried by animation alone.

  • Keep researching after launch, since a front door's job changes as the suite behind it changes.

  • Agree a north star for Home, so each release is a step toward something rather than a set of additions.

Viva Home taught me that a hub is a piece of writing as much as a piece of design. The layout only works if the words on each card tell someone why they should care about a product they did not know they had.

Explore more work

People Skills
AI UX Design

People Skills

Led end-to-end design for AI-inferred skills across M365, Copilot, and Viva: trust and transparency patterns, admin controls, and the design system six product teams shipped against.

Virtual Appointments
Enterprise Design

Virtual Appointments

Redesigned scheduling in Microsoft Teams and co-invented Lobby Chat, the U.S.-patented pre-meeting communication feature, cutting no-shows by up to 15% in healthcare and customer service scenarios.

Albertsons Pilot App
Mobile Design

Albertsons Pilot App

Designed the pilot that connected pharmacy guidance with grocery choices. 84% of pilot users reported greater awareness of healthier options, and its findings fed the app Albertsons later shipped.

Saver Fare Experience
UX Research

Saver Fare Experience

Mixed-methods research with 60+ participants that shaped the Saver Fare launch, from renaming 'Choice' to 'Main' to the disclosure patterns that made fare restrictions clear before purchase.