Designed a centralized dashboard that seamlessly integrates Microsoft’s productivity tools, offering users a clear, comprehensive view of everything they need in one place.
Category
Passion Project
My Role
Product Designer
Timeline
June - November 2024
Impact
Microsoft WidgetHub transformed how users interact with Microsoft’s tools by providing a centralized, intuitive platform. With clear navigation and thoughtfully designed widgets, we bridged the gap between Microsoft’s features and user needs, delivering a seamless and empowering desktop experience.
Enhanced focus by reducing app-switching or tab-switching fatigue. Centralizing tools helps users stay focused by minimizing distractions from switching between apps or tabs.
Boosted productivity by providing real-time insights and easy access to key tools. Real-time updates and easy access to tools enable users to work efficiently and complete tasks faster.
Microsoft Widget-Hub
No more clutter, no more friction — just seamless productivity and intuitive collaboration.
1. Stay Informed at a Glance We created widgets that show real-time updates, like news, notifications, or calendar events, so users can quickly see what’s important without jumping between apps.
2.Start Your Day Stress-Free Widgets are designed to prioritize key updates, helping users avoid feeling overwhelmed first thing in the morning and start their day with confidence.
IMAGE
A screen displaying real-time updates, helping users stay up-to-date all at once.
2.Quick and Easy Access WidgetHub brings all tools and information into one place, making it easier for users to find and access everything they need in seconds.
IMAGE
A screen highlighting quick and easy actions directly from the interface.
3. Effortless Company-Wide Announcements We created an easy-to-use feature for sharing company-wide updates, making it effortless for admins to manage and exciting for users to stay informed.
IMAGE
A customizable widget for admins to make announcements to all employees.
My Design Approach
My design strategy is to balance user needs with business goals while leveraging Microsoft’s design system to deliver a cohesive, intuitive, and productive dashboard experience.
Aligning User + Business Needs Learned to balance user feedback and business goals, ensuring the dashboard addressed user pain points while driving productivity improvements
Applying Existing Design Systems Gained expertise in leveraging Microsoft's design guidelines to create a cohesive and intuitive user experience while maintaining brand consistency.
Context & Challenge
Microsoft users often feel overwhelmed by the vast array of features and tools, struggling to find what’s most relevant to their needs.
Microsoft users often face an overwhelming number of features and tools, making it difficult to find what’s most relevant to their needs. This disconnect can lead to confusion and underutilization of Microsoft’s capabilities, limiting the user experience.
Understanding Microsoft
Productivity is a key priority for Microsoft Teams.
From Microsoft's vision and mission, it's clear they focus on empowering people and organizations with intuitive and accessible tools to boost productivity and foster meaningful connections.
IMAGE
Microsoft’s vision and mission statement.
S.W.O.T.
Microsoft Teams thrives on integration but faces complexity challenges.
While Microsoft Teams excels in integration and task management, its complexity and ecosystem dependency pose hurdles, even as remote work and emerging technologies offer growth potential.
IMAGE
Microsoft’s S.W.O.T. analysis.
Interview & Survey
Teams delivers collaboration wins but struggles with usability.
Users appreciate Microsoft Teams' collaboration features for remote work but find the platform overwhelming and difficult to master due to its complexity and steep learning curve.
IMAGE
Highlights from user feedback captured during interviews and surveys.
Understanding User Behaviour
Users of Microsoft products are often driven by: a need for productivity, efficiency, and seamless integration in their work.
Microsoft’s core audience—tech-savvy professionals and corporate employees—rely on its tools to achieve reliable, innovative, and integrated solutions that streamline both work and personal tasks.
IMAGE
Microsoft user demographics and psychographics.
Looking into 2025 Trends: redefining how we collaborate, stay productive, and maintain a healthy workplace culture.
As we move towards 2025, workplace dynamics continue to evolve. Microsoft Teams supports this transformation by enabling flexible remote work environments, promoting employee well-being through work-life balance features, and driving efficiency with AI, automation, and data analytics.
IMAGE
Key work culture trends shaping user behavior in 2025.
Market Research
By analyzing competitors like Slack and Google Workspace, I aimed to identify strengths, weaknesses, and opportunities. This research helps pinpoint areas where Teams can enhance usability, address user challenges, and stay competitive in an evolving market.
Microsoft Teams offers robust features but struggles with user experience compared to competitors
Users appreciate Microsoft Teams for its strong integration, file sharing, and security. However, competitors like Slack and Google Workspace provide a smoother user experience with easier learning curves, better video conferencing, and higher satisfaction, making usability a key challenge for Teams.
IMAGE
A market analysis checklist comparing Microsoft Teams with competitors like Slack and Google Workspace.
Improving Microsoft Teams’ user satisfaction through enhanced usability and well-being features
To boost user satisfaction, Microsoft Teams needs a more intuitive interface and greater emphasis on employee well-being and DEI. By addressing these areas, Teams can complement its strong integration capabilities and better meet user expectations.
IMAGE
User satisfaction analysis for Microsoft Teams, Slack, and Google Workspace.
Design Patterns
We first want to organize and synthesize the data collected from our research. By clustering related ideas and insights, we aimed to identify patterns and themes that would inform the design and development of Microsoft Teams, ensuring that features and improvements align closely with user needs and preferences.
IMAGE
Clusters of research data showing patterns and themes to guide design improvements for Microsoft Teams.
Key Takeaways
Simplified Navigation
Users need a streamlined experience that allows easy access to key features, helping them quickly locate tasks, documents, and tools without feeling overwhelmed by excessive options.
Self-Management Center
Providing an organized environment where users can manage their tasks and documents efficiently will improve productivity and reduce cognitive load, allowing them to focus on high-priority work.
Promoting Mental Well-being
Offering features that encourage breaks, focus, and stress management can help reduce burnout and enhance productivity. This ensures users maintain a healthy work-life balance while staying engaged in their tasks.
Enhanced Collaboration Without Clutter
By focusing on essential collaboration tools and minimizing unnecessary features, users can work more effectively with their teams, improving communication and project outcomes without distractions.
Problem Statement
How might we simplify Microsoft Teams' learning curve to enable seamless navigation of its complex environment?
Ideation
Prioritizing features to enhance Microsoft Teams while avoiding common pitfalls
Each feature idea was evaluated based on its feasibility, potential impact on user engagement, and alignment with Micrsoft’s core values of authenticity and community support. User feedback sessions and prototype testing will further inform which features are most effective and appreciated by our users.
IMAGE
Feature ideas evaluated against priorities and potential pitfalls to guide decision-making.
Solution Statement
Create a centralized dashboard within Microsoft Teams that consolidates tasks, documents, and collaboration tools in a single view.
Impact
The existing flow overwhelms users with notifications, emails, and chats, leading to confusion and stress. The improved flow introduces a simplified widget-board for prioritization, allowing users to focus on key tasks and achieve better organization and productivity throughout the day.
IMAGE
The existing user journey when first opening Microsoft Teams.
From overwhelmed to focused: simplifying the user workflow for better productivity
By meticulously designing and refining these flows, we can ensure a user-friendly experience that meets the needs of our diverse user base, ultimately leading to higher satisfaction and retention rates.
IMAGE
The improved flow showcasing a more streamlined and intuitive user experience.
Exploration
Unlocking the benefit of Bento layout design
Inspired by Japanese bento boxes, the bento grid provides a structured and elegant way to organize content. This layout trend, often seen in SaaS dashboards and websites, simplifies navigation, showcases product features clearly, and enhances user experience by making information easy to digest.
IMAGE
Inspiration from a real bento box showcasing its organized layout.
IMAGE
The bento box concept translated into a grid design.
Visual Balance and Hierarchy The grid structure naturally provides a balanced layout, organizing information into digestible, modular blocks, enhancing readability and navigation.
User Engagement The visually appealing design encourages users to explore content interactively, creating a dynamic user experience.
Customization and Flexibility It supports varying block sizes, allowing designers to highlight important content or adapt layouts to different screen sizes, making it mobile-responsive.
Content Clarity By segmenting information into well-defined sections, it reduces cognitive load and helps users quickly locate what they need.
Scalability The modular approach allows for easy updates or expansions without disrupting the overall design, ideal for growing SaaS platforms.
Wireframing
Users prioritize widgets that streamline daily tasks, with calendars, notifications, chats, and Teams channels ranking highest.
Based on my survey, features like emails, to-do lists, and documents are also essential but secondary. Lower-priority widgets include quick calls, status updates, and company announcements. This insight helps focus design efforts on the most valuable widgets for productivity and efficiency.
IMAGE
A bar chart showing survey results prioritizing essential features.
We started with low-fidelity wireframes to quickly translate the feature ideas generated during the ideation phase into tangible, visual drafts that can be easily understood and iterated upon. This approach allows us to explore the usability and effectiveness of different design concepts before investing in more detailed development. It also facilitates rapid changes and enables quick feedback cycles with team members. During this phase, key interface elements and user flows are outlined to represent the app's functionality without detailed aesthetic design elements.
IMAGE
Low-fidelity wireframes exploring grid layouts for widget organization.
Design System
By leveraging insights from Microsoft Fluent UI, the Teams UI Kit, and the Windows 11 UI Kit, I developed a comprehensive approach to branding, layout design, and widget creation. This unified strategy ensures consistency, usability, and a modern experience that meets user needs and expectations.
Microsoft Fluent UI provided the foundation for consistent iconography and branding.
Its design principles helped ensure visual clarity, cohesion, and a modern aesthetic that aligns with Microsoft's brand identity.
IMAGE
Thumbnail of Microsoft Design System UI Kit 5.0.
The Microsoft Teams UI Kit guided the organization and structure of content.
It offered valuable insights on creating intuitive, user-friendly layouts that support collaboration and streamline navigation.
IMAGE
The Microsoft Teams UI Kit used to structure and organize content effectively.
Overall Understanding of Widgets with Microsoft Windows 11 UI Kit.
The Windows 11 UI Kit served as inspiration for designing widgets. It demonstrated how to build engaging, functional widgets that enhance productivity and seamlessly integrate into the user interface.
IMAGE
Examples from Windows Widgets.
Microsoft Widget-Hub
No more clutter, no more friction — just seamless productivity and intuitive collaboration.
1. Stay Informed at a Glance We created widgets that show real-time updates, like news, notifications, or calendar events, so users can quickly see what’s important without jumping between apps.
2.Start Your Day Stress-Free Widgets are designed to prioritize key updates, helping users avoid feeling overwhelmed first thing in the morning and start their day with confidence.
IMAGE
A screen displaying real-time updates, helping users stay up-to-date all at once.
2.Quick and Easy Access WidgetHub brings all tools and information into one place, making it easier for users to find and access everything they need in seconds.
IMAGE
A screen highlighting quick and easy actions directly from the interface.
3. Effortless Company-Wide Announcements We created an easy-to-use feature for sharing company-wide updates, making it effortless for admins to manage and exciting for users to stay informed.
IMAGE
A customizable widget for admins to make announcements to all employees.
Conclusion
Microsoft WidgetHub transformed how users interact with Microsoft’s tools by providing a centralized, intuitive platform. With clear navigation and thoughtfully designed widgets, we bridged the gap between Microsoft’s features and user needs, delivering a seamless and empowering desktop experience.
Moving Forward
Create customizable dashboards Allow users to personalize their workspace for easier access to essential tools and information.
Enhance widget functionality Develop widgets that provide real-time insights and streamline task management.
Let’s Connect
Learn more about the projects I worked on?
Schedule a talk with me at feliciasugiartaa@gmail.com to talk more in depth on how to I can turn your complex ideas into intuitive experience.
-1.png)
-1.png)
-1.png)
