{"id":12142,"date":"2023-09-14T12:07:51","date_gmt":"2023-09-14T19:07:51","guid":{"rendered":"https:\/\/cm-edgetun.pages.dev\/insidetrack\/blog\/?p=12142"},"modified":"2025-09-26T08:55:32","modified_gmt":"2025-09-26T15:55:32","slug":"moving-our-popular-employee-experiences-app-to-microsoft-viva-connections","status":"publish","type":"post","link":"https:\/\/cm-edgetun.pages.dev\/insidetrack\/blog\/moving-our-popular-employee-experiences-app-to-microsoft-viva-connections\/","title":{"rendered":"Moving our popular employee experiences app to Microsoft Viva Connections"},"content":{"rendered":"

\"MicrosoftAt Microsoft, we work to create positive, productive experiences for our employees with tools that support professional growth, efficiency in daily tasks, and overall well-being.<\/p>\n

To help us do this, our team in Microsoft Digital built MyHub, an internal employee experiences app that brought all the main things our employees routinely do at work to one place.<\/p>\n

MyHub quickly gained recognition because it gave employees quick, centralized access to tasks that were once disjointed and spread across various interfaces. It was so successful as a go-to productivity app that it became the precursor of Microsoft Viva Connections, a product that we have since launched internally at Microsoft<\/a> and are selling to customers.<\/p>\n

When the Microsoft Viva product team set out to create Microsoft Viva Connections, they were inspired by the foundation laid by MyHub and pulled many of the lessons we learned building and operating it forward with them.<\/p>\n

Microsoft Viva Connections is part of the greater Microsoft Viva<\/a> employee experience platform that boosts employee experience and productivity by curating news, conversations, and other resources across Microsoft 365 services such as SharePoint, Teams, Viva Engage, Microsoft Stream, and more\u2014all in one place.<\/p>\n

It was a wonderful opportunity for us to move the experiences in MyHub that our employees love so much over to the very product that MyHub inspired the company to build. How cool is that?<\/p>\n

\u2014Oubai Bounie, principal software engineering manager, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

Microsoft Viva Connections is unique as a tool. It uses Microsoft Adaptive Cards to personalize the content shown to each user, with a customized dashboard, feed, and curated resources. Adaptive cards serve as a quick, centralized way for employees to do things like check their paystubs, record their sick time, and find out about upcoming paid holidays.<\/p>\n

After Microsoft Viva Connections was built, our Microsoft Digital MyHub and Microsoft Viva Connections team came full circle and was tasked with the challenge of migrating the experiences in MyHub into Viva Connections.<\/p>\n

\u201cIt was a wonderful opportunity for us to move the experiences in MyHub that our employees love so much over to the very product that MyHub inspired the company to build,\u201d says Oubai Bounie, a principal software engineering manager on the MyHub and Microsoft Viva Connections team. \u201cHow cool is that?\u201d<\/p>\n

Turning to Adaptive Cards<\/h2>\n

Bounie and his teammates wanted to make sure none of the experiences that employees loved in MyHub got left behind. This meant the team had to build new cards within the Microsoft Adaptive Cards Framework, which is a JSON schema-based system that Microsoft Viva Connections uses. Adaptive Cards show up as square tabs of information in the Microsoft Viva Connections dashboard, which displays personalized information from a wide swath of sources at Microsoft.<\/p>\n

\"Screenshot
The new MyHub experiences that are being moved to Microsoft Viva Connections are being built on Adaptive Cards like the ones shown here.<\/figcaption><\/figure>\n

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is widely used for transmitting and storing structured data, especially between different systems. It\u2019s supported by many programming languages and has a text-based format that\u2019s easy for humans to read and write and for machines to parse and generate.<\/p>\n

Using the JSON schema-based adaptive card framework enabled Bounie\u2019s team to rapidly build user interfaces and new UIs for Microsoft Viva Connections, but it also introduced a new challenge.<\/p>\n

\u201cWhen we first designed MyHub, we were able to build it however we wanted to\u2014there were no limits on our creativity,\u201d Bounie says. \u201cMoving it over to Viva Connections created an opportunity for us to simplify things, which is something we wanted to do. We intentionally wanted an \u2018out of the box\u2019 experience, because we wanted to use Viva Connections in the same way our customers would use it.\u201d<\/p>\n

Building an \u201cout of the box\u201d UI was challenging but worth the effort, because the team was able show that the product was powerful enough to build the cool MyHub experiences that Microsoft employees love without a lot of customizations.<\/p>\n

\u201cIt took us a few iterations to get the same look and feel that we liked so much in MyHub, but we got there, and it turned out great,\u201d Bounie says.<\/p>\n

Adaptive Cards technology essentially gives you starter components, similar to LEGO\u00ae pieces, to build with, but they don\u2019t match or fit with the building blocks we used when creating the original MyHub. So, the switch between React Native and the adaptive card framework was not one-to-one, there were different design patterns and also technical visibility differences.<\/p>\n

\u2014Nanda Wilson, product designer, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

\"DeAnda,
Rene DeAnda, Oubai Bounie, and JC Martel are on the team that helped moved the popular employee MyHub app to Microsoft Viva Connections. DeAnda is a product manager, Bounie is a principal software engineering manager, and Martel is a software engineer. All three are members of the MyHub and Microsoft Viva Connections team.<\/figcaption><\/figure>\n

This was largely due to the transition from building with React Native to operating within the JSON-based adaptive card framework for Microsoft Viva Connections. React Native is a JavaScript library that is commonly used for building mobile user interfaces, which the team used in the development of the original MyHub platform.<\/p>\n

The React Native capabilities in Microsoft Viva Connections gave the team native control, which meant that the designers and developers had the flexibility they needed while building on the modular, reusable Adaptive Cards code base in Viva Connections<\/p>\n

\u201cAdaptive Cards technology essentially gives you starter components, similar to LEGO\u00ae pieces, to build with, but they don\u2019t match or fit with the building blocks we used when creating the original MyHub,\u201d says Nanda Wilson, a product designer on the MyHub and Microsoft Viva Connections team. \u201cSo, the switch between React Native and the adaptive card framework was not one-to-one, there were different design patterns and also technical visibility differences.\u201d<\/p>\n

To meet the requirements of the Adaptive Cards Framework and the differences between it and the React Native-based MyHub, the team had to be creative and work around some constraints.<\/p>\n

\u201cWhen you write JSON, there is no auto-complete or prompt that tells you\u2014hey, you can\u2019t do this with this component,\u201d says JC Martel, a software engineer on the MyHub and Microsoft Viva Connections team.<\/p>\n

The lack of clear restrictions was one of the things that prompted the team to build a common design language toolkit, to save time for developers and ultimately to create a better user experience.<\/p>\n

So, what happened is different teams started implementing their own experiences, which ended up having a lot of variation in design. My team proposed that we all go back to the design phase, which is what we did.<\/p>\n

\u2014Oubai Bounie, principal software engineering manager, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

\u201cWhen building a common design language, which we called the EX-toolkit, we opted to clearly notify developers about the capabilities and limitations of components to save them time,\u201d says Joel Hoke, a designer on the MyHub and Microsoft Viva Connections team.<\/p>\n

Developing a common design language<\/h2>\n

It wasn\u2019t only Bounie\u2019s team that was building Adaptive Cards to enhance the Microsoft Viva Connections user experience. Many teams, including our Student Hub team and the VC Mobile and Desktop teams, were also building their own Adaptive Cards\u2014and unsurprisingly, there was variation in the design and implementation of these cards across the teams.<\/p>\n

We realized that we were replicating a lot of components\u2014it reminded me of the MyHub common component library. I pushed the idea that we should build a similar library for Microsoft Viva Connections.<\/p>\n

\u2014JC Martel, software engineer, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

\u201cSo, what happened is different teams started implementing their own experiences, which ended up having a lot of variation in design,\u201d Bounie says. \u201cMy team proposed that we all go back to the design phase, which is what we did.\u201d<\/p>\n

The team quickly realized that they could ultimately save time and create a better product by starting anew. The team set out to create a common component library, design language, and a standardized design process for building Microsoft Viva Connections Adaptive Cards.<\/p>\n

\u201cWe realized that we were replicating a lot of components\u2014it reminded me of the MyHub common component library,\u201d Martel says. \u201cI pushed the idea that we should build a similar library for Microsoft Viva Connections.\u201d<\/p>\n

Rene DeAnda, a product manager within the MyHub and Microsoft Viva Connections team, was among those who loved the idea. \u201cWe all decided to go for it,\u201d DeAnda says.<\/p>\n

The key impact of taking the time to establish a common component library, design language, and standardized design process is the consistency of the end-user experience.<\/p>\n

Creating a common design language makes these Adaptive Cards easier to build, and coherent. You don’t want to be looking at 10 different experiences on your dashboard.<\/p>\n

\u2014Rene DeAnda, product manager<\/span>, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

For example, the Microsoft Viva Connections Adaptive Cards for stocks, dining, and taking time off from work will have the same look and feel. \u201cThat\u2019s comforting for users and makes our end-user experience more intuitive,\u201d Martel says.<\/p>\n

Design standardization helps you drive great end-user experiences.<\/p>\n

\u201cCreating a common design language makes these Adaptive Cards easier to build, and coherent,\u201d DeAnda says. \u201cYou don’t want to be looking at 10 different experiences on your dashboard.\u201d<\/p>\n

To make the common design language a reality, the designers and developers across Microsoft Viva product teams worked closely together. The engineers placed all common UI data and their common design practices into a virtual library, consulting each other along the way.<\/p>\n

Altogether, the common design language, component library, and standardized design process have been built into what is called the EX-toolkit. The EX-toolkit morphed into being the common language between designers and developers and contains the library of common components and design processes.<\/p>\n

The toolkit streamlines the development of Microsoft Viva Connections Adaptive Cards, ensuring a consistent and high-quality end-user experience. It also facilitates the onboarding of partners, both internal and external.<\/p>\n

Through the standardization of the design process and the establishment of a common design language, the team has created a versatile solution applicable to any Microsoft team involved in card development for Microsoft Viva Connections.<\/p>\n

We took time to establish regular meetings between designers and developers to share the work being done, and to establish shared goals regarding component needs.<\/p>\n

\u2014Rui Shi, product designer, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

Their standardized design process has been shared with the SharePoint product team and has also been made available to customers through the open-source platform of GitHub, extending the reach of the design solution to external customers who want to build custom Microsoft Viva Connections cards.<\/p>\n

Unexpected insights between teams<\/h2>\n
\"Wilson,
Nanda Wilson, Joel Hoke, and Rui Shi helped design the look and feel of the new MyHub employe app experience in Microsoft Viva Connections. Wilson is a product designer, Hoke is a designer, and Shi is a product designer. All three are members of the MyHub and Microsoft Viva Connections team.<\/figcaption><\/figure>\n

Grouping together the efforts of designers and developers across teams has become a consistent practice with strong benefits for the Microsoft Viva products being built.<\/p>\n

\u201cWe took time to establish regular meetings between designers and developers to share the work being done, and to establish shared goals regarding component needs,\u201d says Rui Shi, product designer on the MyHub and Microsoft Viva Connections Team.<\/p>\n

This collaboration between designers and developers proved to be highly effective for the Microsoft Digital MyHub and Microsoft Viva Connections team. Meeting regularly with other Microsoft Viva teams allowed them to spot new possibilities as well as provide and receive vital feedback about how products are used.<\/p>\n

\u201cThe design sync meeting includes all of the Microsoft Viva teams, and this allows us to spot opportunities we would not otherwise identify,\u201d Shi says. \u201cFor example, our team thought that we could not use tabs as a component within the adaptive card framework. However, another Viva team found a way to make it work. Without the design syncs, we could have missed the opportunity to add a feature that improves the end-user experience.\u201d<\/p>\n

Looking to the future<\/h2>\n

The MyHub and Microsoft Viva Connections team\u2019s solution for a unified design experience when developing MyHub cards for Microsoft Viva Connections encapsulates a much larger goal at Microsoft.<\/p>\n

Microsoft Viva is designed as a platform that centralizes key information and enhances employees’ experiences at work. When employees and customers alike can access the information they need all in one place, it becomes easier to weave cross-team efforts together and achieve the organization\u2019s vision of a simplified, accelerated, and enjoyable employee experience at work.<\/p>\n

The exciting thing about being part of this team is that we support each other. We created a culture where we believe that good ideas can come from anywhere and anyone. We trust one another, and this enables us to recognize when the right idea or opportunity comes along.<\/p>\n

\u2014Rene DeAnda, product manager<\/span>, MyHub and Microsoft Viva Connections team, Microsoft Digital<\/p>\n<\/blockquote>\n

The MyHub and Microsoft Viva Connections team remains committed to integrating feedback into the EX-toolkit and strives to uncover new avenues for enhancing collaboration between designers and developers.<\/p>\n

Looking back on the experience, the team is glad they took the time and effort to build the design solution and make it available externally.<\/p>\n

\u201cThe exciting thing about being part of this team is that we support each other,\u201d DeAnda says. \u201cWe created a culture where we believe that good ideas can come from anywhere and anyone. We trust one another, and this enables us to recognize when the right idea or opportunity comes along.\u201d<\/p>\n

\"Key<\/figure>\n