The Iconography for Microsoft Viva
Designing icons for experiences that empower employees
By Annice Jumani and Rachel Romano
Last year, droves of people quit their jobs amid what became known as the Great Resignation. This year, the trend is “quiet quitting,” aka burned-out or unhappy employees refusing to go “above and beyond” or hustle at work.
The reasons for both vary from not enough money or flexibility to a lack of career growth or sense of purpose, but the catalyst is the same: a global pandemic that upended every system and paradigm we know, including Industrial Era work norms that asked you to keep your nose to the grindstone regardless of working conditions.
It’s within this landscape that we launched Microsoft Viva, a new series of experiences geared toward empowering employees. Viva was deeply informed by the many wake-up calls in Microsoft’s Work Trend Index — a report consisting of a global survey of over 30,000 people in 31 countries and trillions of productivity signals from Microsoft 365 and LinkedIn — including the takeaway that business leaders are faring far better than their employees.
Sixty-one percent of leaders feel they’re “thriving,” which is twenty-three percentage points higher than those without decision making authority. Leaders also cited building stronger relationships with coworkers, higher earnings, and taking full vacation days.
This starkly contrasts with the employees in non-leadership roles. One in five felt their employer didn’t care about their work-life balance, fifty-four percent felt overworked and thirty-nine percent felt exhausted. No wonder folks are saying thanks but no thanks to their jobs, and few current internal tools don’t offer meaningful solutions.
“We shape our tools and, thereafter, our tools shape us.”
That notion, popularized by philosopher John Culkin, encapsulates the opportunity we see with Microsoft Viva to re-shape a new generation of tools. Internal productivity tools currently cause such chaos because the world that shaped them has transformed. We’re in an era where caring is the most important language a manager can speak. Where creativity and collaboration are more valued than efficiency and speed. Meaningful work isn’t just expected by privileged classes.
As such, the internal tools that once promised productivity and collaboration are now constraining us, creating fragmentation and frustration. For product makers, this means rethinking things entirely, otherwise you’ll always be using a hammer to create another hammer.
In the spirit of not doing this, Viva has broken down key elements of the employee experience into distinct modules that are integrated in the flow of work. They’re specifically designed to work horizontally across the M365 suite, creating experiences that are simpler, more balanced, and more purposeful.
At a macro level, it’s about helping people feel a sense of purpose at work, supporting their desire for career growth, and fostering meaningful human connections. At a more micro level, it’s about managing the logistical challenges of hybrid work. Whether it’s a barking dog or a howling toddler, you don’t need a productivity forecast to know there’s a 100% chance of being interrupted while working from home. This makes it less about eliminating distractions and more about acknowledging the inevitability of fragmented attention — and helping you confidently jump back into the flow, knowing you’re on top of things.
Designing from scratch: the making of new iconography
It’s not every day that a company with Microsoft’s legacy has the chance to design something from scratch and the development of Viva brought with it a fun opportunity to create a brand-new set of icons.
How should we visually represent what is a fundamentally different productivity tool? Unlike tools like Office that aim to facilitate content creation, Viva’s outcomes are distinctly human-centered: improved employee wellbeing, managers being able to communicate in the currency of care, facilitating professional growth and learning.
As such, we wanted Viva’s iconography to feel as human as possible, but “human” is a wildly diverse notion. We ended up using multiple human emotional and personality traits to influence the designs and indexed higher on certain aspects of the Microsoft personality and creative principles. We leaned into the “make it personal” creative principle and Approachable and Empathetic personality traits.
To ensure the icons still holistically fit within our broader icon ecosystem, we embraced Fluent’s iconic softened edges and rounded corners, ensuring a friendly and welcoming feel. We also used a Fluent aligned color palette, opting for tones of blue, teal, and purple because they’re emotionally associated with what we hope Viva enables. Universally symbolizing security, trust, loyalty and responsibility, blue has a calming and relaxing effect on our psyche that creates a sense of peace and confidence. Teal also emits a cool and calming feeling, but the green undertones give a boost of positive mental energy that improves concentration and clarifies our mind. And while still on the cooler side of the spectrum, the purple in the Viva icons conveys a feeling of creativity because of its cheerful, whimsical and playful nature.
The embrace of a parent icon
For Viva’s parent icon, we knew we were heading in the right direction when we began hearing unusual feedback from our researchers. While all icon design intends to provoke emotion, the associated feelings with Microsoft icons often live within traditional productivity norms. User research findings would show people associated our icons with feeling efficient, confident, smart, or productive.
With Viva, however, we were hearing terms like kindness and comfort and some of our favorite verbatims were: “this reminds me of a mother hugging a child” and “it feels like a person snuggling under a blanket.” This was affirming since emotional support is a hallmark of the Viva experience — and of new productivity norms.
We’ve created collective muscle memory around seeing people at work, in life. Blurred backgrounds to conceal laundry piles, cat butts in front of cameras, pleading stares with rambunctious kiddos. These glimpses humanized our colleagues in a way that wasn’t always socially acceptable in prior eras, cementing a new kind of professionalism that supports more authentic ways of interacting and allows people to prioritize what matters most to them. As the Great Re-shuffle proved, wanting to find meaning in your work isn’t just for liberal arts majors anymore.
So, with that in mind, we designed the Viva parent icon. The icon itself is representative of this, with a human silhouette in the center and nature-like elements below. They come together to form a more abstract shape and to represent all of the app modules, we created a color blend of blue and teal, with purple as a balancing accent color. This color blend also pays homage to the Office suite icon design, where purple juxtaposes the warmth of orange tones.
Modules and metaphors
The Viva experience is comprised of distinct modules, each addressing key aspects of the employee experience. From a design perspective, however, it was critical that Viva feel like a single, interconnected, and delightful experience and so before fully designing the parent icon for Viva, we chose to focus on the experiences comprising it. When stripped down to their very essence, what metaphors could universally communicate and embody the Viva modules?
Viva Learning: 94% of employees say they would stay at a company longer if it invested in their learning and development, and 79% of CEOs say talent and skills of their workforce is their number one issue. This makes career growth and learning mutually beneficial, and Viva Learning makes it easy to discover learning-centric content, share knowledge with colleagues, and track your learning journey.
To communicate this, we chose an icon representing the turning of pages in a book. Finding metaphors that universally resonate is challenging and our research indicated that a wide majority of cultures associate books with learning and training.
Viva Connections: Connection is harder in hybrid environments, and you’re more willing to bring energy and creativity to work when you feel connected to the people and purpose of an organization. By bringing together relevant news, conversations, and resources, Viva Connections is a one-stop shop to foster cross-org connections and rally teams around a shared vision, mission, and priorities.
To represent this, the primary shapes of the icon form an interlocking mark that represents news, conversations, and resources coming together. For many, it’s reminiscent of a handshake, and the design embodies collaboration, communication, and unity.
Viva Insights: Promoting employee wellbeing and creating a thriving culture is at the crux of Insights. Individual and team reflection is critical and by providing data-driven and privacy-protected insights, we can recognize and shift behaviors that don’t serve (like ineffective meetings), or and amplify the ones that do (like reserving focus work or building in breaks to walk or stretch).
The circular shape at the center of the Viva Insights icon embodies the aspects of humans and knowledge and is supported by the two shapes at the bottom forming a foundation and support mechanism. There is a sense of calm and protection in the icon, evoking comfort and empathy.
Viva Topics: By using AI to automatically organize content and expertise across an organization, Topics makes it easy to find and apply the information that matters most. For this icon, the three circles coming together suggests an integration of diverse ideas and topics to enable seamless collaboration. The shapes also communicate some aspects of atoms and molecules forming together and representing a network as well.
Empathetic evolutions
The great secret of adulthood is that you never really grow up. We’re in a constant state of becoming, continuing to learn who we are and want to be. New jobs and cities, unpredicted world events, loved ones entering or leaving our lives — we keep evolving, finding and losing and finding ourselves anew.
As the world of work continues shifting, Viva will evolve alongside it and we’re currently designing additional modules to support and empower different facets of best-in-class employee experiences. Experiences that enable managers to model empathy, that empower employees to bring their best, authentic selves to work, and that open up new avenues for product designers to meet human needs creatively, ethically, and innovatively.
To stay in the know with Microsoft Design, follow us on Twitter and Instagram, or join our Windows or Office Insider program. And if you are interested in working with us at Microsoft, head over to aka.ms/DesignCareers.
