At 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.
To help us do this, our team in Microsoft Digital Employee Experience (MDEE) built MyHub, an internal employee experiences app that brought all the main things our employees routinely do at work to one place.
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 and are selling to customers.
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.
Microsoft Viva Connections is part of the greater Microsoft Viva 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—all in one place.
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?
—Oubai Bounie, principal software engineering manager, MyHub and Microsoft Viva Connections team, MDEE
Microsoft Viva Connections is unique as a tool in that 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 what the upcoming paid holidays are.
After Microsoft Viva Connections was built, our MDEE MyHub and Microsoft Viva Connections team came full circle and was tasked with the challenge of migrating the experiences in MyHub into Viva Connections.
“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,” says Oubai Bounie, a principal software engineering manager on MDEE’s MyHub and Microsoft Viva Connections team. “How cool is that?”
[Create an engaged and productive workforce with Microsoft Viva. Unpack deploying Viva Connections internally at Microsoft. Explore Viva la Vida! How work life is better at Microsoft with Viva.]
Turning to Adaptive Cards
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.
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’s supported by many programming languages and has a text-based format that’s easy for humans to read and write and for machines to parse and generate.
Using the JSON schema-based adaptive card framework enabled Bounie’s team to rapidly build user interfaces and new UIs for Microsoft Viva Connections, but it also introduced a new challenge.
“When we first designed MyHub, we were able to build it however we wanted to—there were no limits on our creativity,” Bounie says. “Moving it over to Viva Connections created an opportunity for us to simplify things, which is something we wanted to do. We intentionally wanted an ‘out of the box’ experience, because we wanted to use Viva Connections in the same way our customers would use it.”
Building an “out of the box” 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.
“It took us a few iterations to get the same look and feel that we liked so much in MyHub, but got there, and it turned out great,” Bounie says.
Adaptive Cards technology essentially gives you starter components, similar to LEGO® pieces, to build with, but they don’t 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.
—Nanda Wilson, product designer, MyHub and Microsoft Viva Connections team, MDEE
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.
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
“Adaptive Cards technology essentially gives you starter components, similar to LEGO® pieces, to build with, but they don’t match or fit with the building blocks we used when creating the original MyHub,” says Nanda Wilson, a product designer on the MyHub and Microsoft Viva Connections team. “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.”
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.
“When you write JSON, there is no auto-complete or prompt that tells you—hey, you can’t do this with this component,” says JC Martel, a software engineer on the MyHub and Microsoft Viva Connections team.
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.
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.
—Oubai Bounie, principal software engineering manager, MyHub and Microsoft Viva Connections team, MDEE
“When 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,” says Joel Hoke, a designer on the MyHub and Microsoft Viva Connections team.
Developing a common design language
It wasn’t only Bounie’s 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—and unsurprisingly, there was variation in the design and implementation of these cards across the teams.
We realized that we were replicating a lot of components—it reminded me of the MyHub common component library. I pushed the idea that we should build a similar library for Microsoft Viva Connections.
—JC Martel, software engineer, MyHub and Microsoft Viva Connections team, MDEE
“So, what happened is different teams started implementing their own experiences, which ended up having a lot of variation in design,” Bounie says. “My team proposed that we all go back to the design phase, which is what we did.”
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.
“We realized that we were replicating a lot of components—it reminded me of the MyHub common component library,” Martel says. “I pushed the idea that we should build a similar library for Microsoft Viva Connections.”
Rene DeAnda, a product manager within the MyHub and Microsoft Viva Connections team, was among those who loved the idea. “We all decided to go for it,” DeAnda says.
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.
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.
—Rene DeAnda, product manager, MyHub and Microsoft Viva Connections team, MDEE
For example, the Microsoft Viva Connections Adaptive Cards for stocks, dining, and taking time off from work will have the same look and feel. “That’s comforting for users and makes our end-user experience more intuitive,” Martel says.
Design standardization helps you drive great end-user experiences.
“Creating a common design language makes these Adaptive Cards easier to build, and coherent,” DeAnda says. “You don’t want to be looking at 10 different experiences on your dashboard.”
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.
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.
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.
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.
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.
—Rui Shi, product designer, MyHub and Microsoft Viva Connections team, MDEE
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.
Unexpected insights between teams
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.
“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,” says Rui Shi, product designer on the MyHub and Microsoft Viva Connections Team.
This collaboration between designers and developers proved to be highly effective for the MDEE 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.
“The design sync meeting includes all of the Microsoft Viva teams, and this allows us to spot opportunities we would not otherwise identify,” Shi says. “For 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.”
Looking to the future
The MyHub and Microsoft Viva Connections team’s solution for a unified design experience when developing MyHub cards for Microsoft Viva Connections encapsulates a much larger goal at Microsoft.
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’s vision of a simplified, accelerated, and enjoyable employee experience at work.
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.
—Rene DeAnda, product manager, MyHub and Microsoft Viva Connections team, MDEE
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.
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.
“The exciting thing about being part of this team is that we support each other,” DeAnda says. “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.”
- Ensuring a consistent, high-quality end-user experience sometimes means taking a step back to move forward—which the MyHub and Microsoft Viva Connections team did when building their design standardization solution.
- Developing Microsoft Viva Connections adaptive cards meant that engineers had to build within certain restrictions in a JSON schema-based framework. Regular design-developer syncs across teams helped them overcome restrictions to create a quality user experience.
- The MyHub card design solution is available internally and externally for customers interested in building Microsoft Viva Connections adaptive cards.
- Microsoft Viva Connections is a one-stop shop, keeping key updates, documents, and team communications easily accessible across large teams and companies, streamlining communications and saving time
Try out Microsoft Viva Connections at your company.
