How a Hackathon Idea Led to a Feed Desktop Redesign

How a Hackathon Idea led to a Feed Desktop Design

Key Goal
Create a larger, more prominent feed to drive higher engagement and make it easier for users to access the information they need.

Key Goal
The goal of the redesign was to significantly improve the user experience of the Azure Cost Management + Billing extension overview page and increase customer satisfaction.

Deliverables
Interaction specifications,
design principles,
hi-fidelity mockups, prototypes

Role and Responsibilities
Design Owner - I was responsible for driving design vision and strategy and prototyping, and creating intuitive designs that aligned with business requirements.

Timeline
April 2022-July 2023
(Project Pause)
January 2023- July 2023

Background

Viva Home, also known as Viva Connections, is an application on the Microsoft Teams platform designed to provide a modern communication experience for the digital workforce. It offers a single, centralized point of entry to access various company resources, such as news, tools, and more. The dashboard displays insights and to-dos, while the feed section shows company news, stories, and campaigns. Additionally, there are links to workplace resources and other apps in the Viva Suite.

The appearance of Viva Home can be customized to support light and dark themes, as well as different iconography and imagery that reflect a specific company's brand. Therefore, Viva Home may look different depending on the company that owns it.

The feed on the Viva Home platform pulls information from multiple Microsoft applications, including Stream, SharePoint, Viva Engage (previously known as Yammer), and the M365 Feed. As the Design Owner of Viva Home's feed, I work together with stakeholders located in Redmond WA, Oslo Norway, India, Germany, and UK, who are responsible for these applications. My responsibility is to ensure that the content in the Viva Connections feed is consistent with the content in their respective applications.

Users

The main users of the Viva Home feed are mobile-first workers, first-line workers, information workers, and communication managers. They need a feed that is easy to access, quick to use, and personalized to their needs. Mobile-first workers require on-the-go access, while first-line workers need quick access to important information. Information workers use the feed for the latest company news and to connect with colleagues, and communication managers need to easily manage company-wide communications.

The Problem

Viva Home's desktop experience has a cramped and limited feed, hindering its potential to connect people with resources. Only 7% of 257k engaged users click on the feed, which is far. below the business goal of 25%. To guide the design process, I created an HMW statement: "How might we improve the feed's visibility and prominence of the feed so that it is more engaging for our customers?"

Proactivity and Strategic Thinking

I saw an opportunity to improve the user experience of the Viva Home feed during the company's quarterly Fix-Hack-Learn (FHL) event. FHL is week-long series of events that happens 3 times a year within Experiences and Devices (E+D) organization at Microsoft. It's an opportunity to fix known customer problems, hack a new idea to become a reality, or learn about a topic you're interested in. I used design thinking to identify the need for a full-page experience on its own tab within Viva Connections. I also explored the layout of the overall platform to provide a more comprehensive and engaging experience for users.

Process

The six key phases of my process typically are discovery, defining, developing, testing and refining, delivery, and tracking. Below I go into more specifics about the methods and techniques I used in each phase of my process to design the full-page feed for Viva Home.

Phase 1: Discovery, Ideation and Initial Research (During Hackathon)

Customer Feedback

My first step in improving the Viva Home feed was to understand the current pain points and needs of our users. To do this, I reached out to our research team, Nicole and Jeremy, to see if they had any insights. They shared a user quote that stood out to me:

“I understand the focus on the Dashboard, but I feel like the Feed is being pushed to the corner. From a desktop perspective, I think the Feed should have more visibility than the Dashboard. The Feed is the communication from the leadership Team, other peers in the company, and also community posts. I'd like to see it at large on the screen”

-Global Viva Home User

This quote confirmed the need for a more prominent and accessible feed experience in Viva Home. With this insight in mind, I started exploring different design options to make the feed more integrated, personalized and rewarding for our users. I aimed to create a feed that was visually appealing, easily accessible and provided users with the information they needed in a timely and meaningful way.

Organizing a Kickoff

As the lead product designer on the project, I organized and led a kickoff meeting with Business and Engineering stakeholders to understand the business goals, customer issues, design deliverables, and success metrics. We identified key problems with the Cost Management + Billing overview, including a lack of clarity about how to pay bills and slow data loading times. I also shared feedback from one of our customer surveys that stood out to the team.

“Billing as a whole is confusing &

needs specialists to manage”

- NPS Verbatim December 2020

Based on this information, we all agreed that a redesign of the Cost Management + Billing overview was needed, and we set a timeline to deliver the designs by the end of the next quarter. We also discussed the scope of the project and the specific deliverables that would be required in order to address the identified customer issues. I created a design brief to document these details and used it as a frame of reference throughout the project.

Crafting design principles

In addition to creating a HMW (How Might We) statement to articulate the main goal of the project, I also developed design principles for the redesign.

Crafting design principles

In addition to creating a HMW (How Might We) statement to articulate the main goal of the project, I also developed design principles for the redesign.

These design principles provided a broad framework for our work and helped me stay aligned on the goals and values that I documented in my design brief. The principles I created were "Simplify the complex," "Built for all," and "Cost transparent." By creating both design principles and a HMW statement, I was able to ensure that my design work aligned with the main goal of the project while addressing specific challenges or opportunities. I explain the principles in more detail below:

Enhance readability: The layout of the feed should be clean, simple, and uncluttered, with a clear hierarchy of information that makes it easy to scan and read. The text should be well-spaced and legible, with a comfortable line length and font size that's easy on the eyes.

Maximize visibility: The feed should occupy a prominent position on the screen, with a clear and bold design that instantly catches the eye. This will make it easy for users to quickly find what they're looking for and to stay up to date with the latest company news and information.

Foster engagement: The feed should be interactive and encourage users to engage with the content. This can be achieved through the use of images, videos, and other multimedia, as well as by including features that make it easy for users to post comments and reactions.

Keeping in mind constraints

During FHL week, I had a week to redesign the Viva Home feed. However, rather than focusing on technical constraints, I used it as an opportunity to explore new ideas and create a compelling vision to improve the user experience. I challenged assumptions, thought creatively, and aimed to make the feed more engaging and personalized for its users.

Keeping in mind constraints

During my design process, there also were several constraints that I had to consider and work within.

One major constraint was that I was unable to design custom components due to limited development resources. This meant that I had to use components that already existed in the Azure Framework Library, which limited the design options available to me and required me to be creative in my use of existing components.

Mid-fidelity Prototyping

I created mid-fidelity prototypes of Viva Home with an improved feed, skipping the wireframing step due to time constraints during the hackathon.

Hi-Fidelity Prototyping

After completing my mid-fidelity mockups, I received feedback from my Product Manager, Graham. He suggested that I create mockup designs for three different scenarios related to Viva Connections. The first scenario would depict the default state of Viva Connections, while the other two scenarios would show how it would look when customized for Relecloud, one of our partner companies, and Nike, as an example of another partner company.

Default Viva Home Feed

Viva Home Feed customized for a fictional company, Relecloud

Viva Home Feed customized for our partner, Nike

Viva Home Feed customized for our partner, Nike

Viva Home Feed customized for a fictional company, Relecloud

Presentation & Feedback

I presented my work to the Partner Design Manager who was impressed and recommended presenting it to PM and Engineering Stakeholders. The presentation was well received by the stakeholders, and they expressed their excitement to allocate engineering resources to build the project in the next semester.

The project was met with excitement from the team, and my Project Manager (PM) and I began initial work on a requirements document. This early planning phase was crucial for setting project goals and scope.

Phase 2: Project Interruption, Adaptation to Product Changes and Engineering Constraints

Navigating Interruption and Changes

However, once the new semester began, work on the project had to be temporarily halted due to external factors such as budget cuts, shifting priorities, and layoffs. The plan was to resume the project in January 2023. During this break, there were several significant changes in the product environment. For instance, Viva Home was rebranded as Viva Connections, the feed was removed due to performance issues, and several other widgets on the page's framework appeared different. The image below provides a side-by-side comparison of the changes.

Responding to Customer Demand

After we removed the feed, our customers expressed their dissatisfaction, and they urged us to bring it back. We took their feedback seriously, as it emphasized the importance of the feed.

Therefore, we decided to redesign it carefully. To meet this demand, my product manager, senior engineers, principal engineers, and I worked closely together to determine the new requirements for the feed.

This process involved balancing customer expectations with practical design and engineering considerations. Additionally, we wanted to incorporate existing designs from the Microsoft 365 feed for the minimum viable product (MVP) of the new Viva Connections feed. We also leveraged the designs I created for the Hackathon as a guide for the new feed. This approach was influenced by the need for technical feasibility and efficiency.

Phase 3: Comprehensive Redesign, Validation, and Testing

Strategic Redesign in New Context:

I worked on a significant overhaul to match the recent changes to the Viva Connections application. The primary goal was to transform a vertical feed into a horizontal one, which would appear on the Viva Connections home page and feature a link to a more extensive feed on a separate dedicated page.

To begin, I created a design for the new feed's appearance on the home page. I followed an iterative design process, which involved incorporating feedback from multiple stakeholders and conducting extensive testing to refine the redesign. I presented two design options to the stakeholders, and they preferred option 1.

Option 1 offered greater flexibility in terms of the amount of new content visible to users and allowed them to interact with multiple news posts simultaneously. In contrast, option 2 only permitted users to view a single news post at a time.

After it was decided Option 1 was the direction we wanted to take, I focused on the detailed interactions within the feed, especially for scenarios with varying numbers of news posts. I also ensured compatibility with dark mode and tailored the design for different clients, including Relecloud, Contoso, and Coca-Cola.

The next step was to create a dedicated feed page, building upon the M365 feed framework. This involved blending elements from both the M365 feed and my earlier hackathon project. The final design featured a user-friendly layout with left-side navigation, a central card section, a dedicated feed tab, and additional cards and widgets on the right, like the 'me' component and trending news.

User Testing, Stakeholder Collaboration, and Design Updates:

After finalizing the design, I wanted to test it with customers. However, our researcher didn't have the bandwidth to conduct a usability study for this project. So, I took it upon myself to prototype and test the design.

With the help of my PM, I facilitated several customer calls to discuss the plans and gather feedback for Viva Connections. The feedback was positive, and customers were excited about the project. However, they pointed out some issues, such as the content on the home page not matching the feed page, which they found confusing. Additionally, they suggested having cards with larger images as the current ones were very text-heavy and not suitable for users who prefer skimming and reacting to more vibrant pictures. They also wanted to add new features, such as a way to engage with Yammer communities.

Unfortunately, we couldn't address the issue home page matching the feed page in our MVP due to a technical limitation. However, I designed cards with larger images and a Yammer communities widget (taken from my hackathon project) that was planned to be developed in the next quarter.

Phase 4: Design Handoff, Implementation and Impact Analysis

Preparation for Engineering Implementation

After testing and refining the design, I prepared the project for implementation with comprehensive documentation, including a detailed accessibility spec for the new feed component and links to components from SharePoint, Fluent, Viva, and Teams Design Systems. This thorough preparation was crucial for ensuring a smooth handover to engineering.

I worked closely with engineering teams to ensure the design vision was accurately translated into the product. This involved addressing technical challenges and confirming seamless integration with the Viva Connections platform.

Ensuring a high bar of craft

Before a feature is ready to be shipped, my team evaluates the usability and functionality of our UI through experience reviews. During these reviews, we use a color-coded system to assess different tasks: red for issues, yellow for concerns, and green for approval. Researchers, content designers, engineers, designers, and PMs attend these reviews to give feedback and vote on the rating of each task. The amount of red, green, and yellow tasks determines whether a feature is ready to be shipped. I worked with our UX researcher to define the tasks we went over. My active involvement in these reviews ensured prompt and effective responses to feedback, and I worked in tandem with the engineering team to refine and perfect the product.

Impact Analysis

Before the launch, only 7% of the 257k engaged users clicked on the feed, which was below the business goal of 25%. However, within one month of the launch, the number of engaged users who clicked on the feed increased to over 15%. And within three months, it had risen to 20%. The increase in user engagement after the launch was a substantial indicator of the redesign's effectiveness, validating our strategic decisions, collaborative efforts, and commitment to quality.

Takeaways

Through this experience, I learned some valuable lessons about proactivity, collaboration, and adaptability that I would like to share:

Proactive Exploration Leads to Innovation: My participation in the FHL hackathon was a step beyond my usual responsibilities. It was this proactive approach that enabled me to identify and capitalize on an opportunity to enhance the Viva Connections feed. This experience taught me that seeking new opportunities and stepping out of my comfort zone can lead to significant innovations and positive impacts on the business.

Embracing Change as a Stepping Stone for Growth: This project underscored the importance of embracing change, not just as a challenge, but as an opportunity for growth and innovation. The shift from Viva Home to Viva Connections, coupled with the need to rethink the feed due to its removal, initially appeared as hurdles. However, these changes became catalysts for creative problem-solving and technical ingenuity. My journey through this redesign taught me the value of viewing changes, not as setbacks, but as chances to reassess, innovate, and improve. This mindset of embracing change and using it as a springboard for growth is an essential takeaway for anyone working in design.

Effective Resource Utilization in Design:: A crucial lesson from this project was the strategic use of existing resources. Faced with redesigning the feed, I found innovative ways to utilize components from established Microsoft design systems. This approach reinforced to me that innovation often involves creatively leveraging available resources, showing that resourcefulness is key to developing solutions that are both impactful and feasible.

Overall, this project was a solid lesson in growth and adaptation. Each challenge was a chance to learn something new, whether it was trying something out of the ordinary, shifting gears when needed, or just being resourceful.

Reflecting on this project, there are several key takeaways that stand out. These insights will inform my approach to future design projects and help me continually improve my craft as a UX designer. Here are the top takeaways from this project:

The importance of usability testing: While we were unable to conduct a formal usability study due to budget constraints, I now see the value in allocating more time for testing and validation with users. This can help identify and address issues earlier in the process, resulting in a more polished and user-friendly final product.
The benefits of low-fidelity designs: In the interest of time, I initially focused on high-fidelity designs. However, I now see the value in exploring low-fidelity work as a way to promote more innovative solutions and receive more feedback.
Differentiating between user and business needs: I learned the importance of clearly distinguishing between these two types of needs and avoiding overlap, as it can negatively impact the results of the design.
The value of collaboration: Working with other designers, such as Jennifer from the Azure Experimentation team, helped bring new perspectives and expertise to the project. I will make sure to seek out opportunities for collaboration in future projects.
The impact of design on business outcomes: The positive results we saw in NPS and CSAT scores, as well as the uptake of similar designs in other extensions, showed me the real-world impact that design can have on business outcomes.

Overall, this project was a great learning experience, and I believe that these takeaways will be valuable for future design work.

Project collaboration highlight ✨

Business Impact

A standout moment in the project was presenting my hackathon work to the M365 feed team in Norway. My discovery work laid the groundwork for a productive exchange between our engineering team and the M365 experts. This collaboration was key – it enabled us to integrate with the M365 platform efficiently, bypassing the need to develop a new feed from scratch. Seeing my initial concepts and research facilitate such a practical collaboration was incredibly fulfilling. It emphasized the importance of teamwork and knowledge sharing in driving innovation and achieving goals.

Our goal was to increase the Net Promoter Score (NPS) and Customer Satisfaction Score (CSAT) for the extension, and I'm pleased to report that we were successful in achieving this. After the redesign was launched, the NPS increased by 6.62% and the CSAT increased by 11.5%, which is a significant improvement.

In addition to improving customer satisfaction, the redesign also had a number of other business impacts. Other Azure extension teams began to implement overview designs that were similar to the one we created, which is a testament to the success of our design. The Azure Billing Overview redesign was also featured on the Microsoft Azure Youtube channel, which received over 11,000 views.

Finally, the Azure Experimentation team used the Billing Overview redesign as a case study to promote the importance of A/B testing and experimentation in UX design. This was an exciting opportunity for me to showcase the value of our work and to share our design process with a wider audience.