Diversified UX Case Study

Context

Overview

Diversified, a leading global corporation dedicated to driving progress through technology, entrusted us with the task of reimagining their internal project management system. With a vision to empower their workforce with intuitive tools for seamless collaboration and efficient project execution, Diversified sought to revolutionize their existing platform to meet the evolving needs of their dynamic organization.

At the core of this endeavor was the aspiration to cultivate a culture of productivity and agility, where every employee could harness the power of technology to unleash their full potential. Guided by Diversified’s ethos of continuous improvement and customer-centricity, we embarked on a journey to not just redesign an app, but to redefine the way work gets done.

Visit site

My Role

  • Site Architecture
  • User Flow
  • Visual Design
  • Motion Exploration

Platform

  • Web App

Year

  • 2022

Challenges

The Diversified UX redesign project presented several noteworthy challenges that demanded creative problem-solving and strategic thinking.

  1. Legacy Layout Overhaul: The existing app’s layout was outdated and cluttered, hindering user navigation and task completion. Reconciling the need for modernization with preserving familiarity posed a significant challenge.
  2. Complex User Requirements: Diversified’s internal project management system catered to a diverse range of users with varying roles and responsibilities. Balancing the complexity of functionalities with simplicity in design was a delicate balancing act.
  3. Integration with MudBlazor Design System: While leveraging the MudBlazor design system promised consistency and efficiency, integrating it seamlessly into the project without compromising on customization and user experience posed a unique challenge.
  4. Maintaining Accessibility: Ensuring accessibility for all users, including those with disabilities, without sacrificing aesthetics or functionality, required careful consideration and implementation of inclusive design principles.

Solutions

Addressing the challenges head-on, we devised innovative solutions that aligned with Diversified’s objectives and user needs.

  1. User-Centric Redesign: Through user research and iterative design, we developed a revamped layout that prioritized user-centric navigation and task flow. Clear hierarchies, intuitive labeling, and streamlined workflows were implemented to enhance usability.
  2. Persona-Based Design: By creating user personas representing different roles within the organization, we tailored the UX to meet the specific needs and preferences of each user group. This approach ensured relevance and efficiency in functionality while accommodating diverse user requirements.
  3. MudBlazor Integration: Leveraging the MudBlazor design system, we achieved a harmonious balance between consistency and customization. Custom components and branding elements were seamlessly integrated, maintaining visual coherence while allowing for flexibility and scalability.
  4. Accessibility Features: Implementing accessibility features such as keyboard navigation, screen reader compatibility, and high-contrast options ensured inclusivity without compromising design aesthetics. Regular accessibility audits were conducted to identify and address potential barriers.
1. Recreating Site Architecture or Sitemap

To enhance Diversified’s project management system, we meticulously redesigned the site architecture, aiming to improve clarity, navigation, and task flow. By simplifying content hierarchies and optimizing information structure, we aimed to create an intuitive user experience for efficient navigation and task completion.

Decreased bounce rate due to improved navigation and content discoverability.
Increased average session duration as users could easily find relevant information.
2. Insightful Dashboard

We enhanced the dashboard functionality within Diversified’s internal project management system to provide users with a centralized hub for accessing key project insights and metrics at a glance. With customizable widgets, interactive data visualization, and personalized dashboards, users can efficiently monitor project progress, track milestones, and identify areas requiring attention, empowering them to make informed decisions and drive project success.

Decreased decision-making time by providing users with real-time insights and actionable data on the dashboard.
Increased data accessibility by enabling users to access relevant project information quickly and easily.
3. Effective Progress Tracking Experience

We focused on enhancing progress tracking experiences within Diversified’s internal project management system, ensuring users can monitor tasks and projects efficiently. By implementing intuitive progress tracking features, including milestone tracking and visual progress indicators, we aimed to provide users with clear insights into project status and advancement, fostering accountability and facilitating informed decision-making.

Decrease in time spent on status updates.
Increase in task completion rate, better visibility into project milestones and deadlines.
4. Powerful Resource Manager Monitoring and Reporting

We implemented robust resource manager monitoring and reporting capabilities within Diversified’s internal project management system to optimize resource allocation and utilization. By providing comprehensive insights into resource availability, workload distribution, and project dependencies, users can make informed decisions to maximize efficiency and mitigate bottlenecks effectively.

Decreased project delays by proactively identifying and addressing resource constraints and dependencies.
Increased resource utilization by optimizing resource allocation based on real-time insights.
5. Multiple Office Locations Support

We introduced support for multiple office locations within Diversified’s internal project management system, enabling seamless collaboration and coordination across geographically dispersed teams. This feature allows users from different office locations to access and contribute to projects, fostering a culture of inclusivity and teamwork regardless of physical distance.

Decreased communication barriers by enabling teams monitoring from different locations.
Improved project outcomes and efficiency.

The Process

1. Research

2. Ideate

3. Design

4. Prototype

1. Research

In the research stage, we delved deep into understanding the needs, preferences, and pain points of Diversified’s employees. Through online interviews and technical requirement documents that provided by the client we gained valuable insights into their workflow, challenges, and aspirations. Armed with this knowledge, we were able to identify opportunities for improvement and shape the direction of the project. From uncovering user personas to analyzing competitor offerings, every research endeavor was aimed at informing our design decisions and ensuring alignment with Diversified’s objectives.

2. Ideate

Brainstorm and ideate potential solutions based on the research findings. Develop the site architecture by mapping out the hierarchy of pages and content. Create user flows to visualize the navigation paths users will take to accomplish their goals on the web app.

3. Design

In the design phase, we leveraged the MudBlazor design system (as the client request) to breathe life into the project. Drawing inspiration from Diversified’s brand identity and design principles, we meticulously crafted interfaces that not only adhered to MudBlazor’s guidelines but also reflected the essence of Diversified’s vision. From selecting harmonious color palettes and typography to integrating cohesive iconography and imagery, every design element was thoughtfully curated to elevate usability and evoke a seamless brand experience. Through iterative design iterations and feedback cycles, we honed each detail to achieve a perfect synergy between MudBlazor’s framework and Diversified’s unique aesthetic, ensuring a visually stunning and user-friendly outcome.

Dashboard

Dashboard - Tab2

Dashboard - Tab3

Dashboard - Tab4

Dashboard - Hide Sidebar

Projects

Projects - List

Projects - Single

Projects - Single Error

Projects - Single Tab 2

Offices

Office - Single

Office - Single - Tab2

Office - Single - Tab2 List

Office - Single - Tab3

Users

Users - List

User - Single

User - Single - Tab1

User - Single - Tab2

Resource Manager

Resource Manager - Tab2

Project Office Schedule

My Profile

4. Prototype

The prototype stage marked the culmination of our efforts as we transformed static designs into interactive experiences for user testing and validation. Leveraging prototyping tools and techniques, we simulated user interactions and workflows to gather feedback and iterate on design refinements. User-centricity remained at the forefront as we observed user behaviors and preferences, refining the prototype based on real-world usage scenarios. By iterating and refining the prototype iteratively, we ensured that the final product met the expectations and needs of Diversified’s employees, setting the stage for successful implementation and deployment.

Summary

The Diversified UX Case Study encapsulates a journey of transformation, collaboration, and innovation. From the initial stages of research and ideation to the meticulous wireframing, design, and prototyping phases, every step was guided by a shared commitment to excellence and user-centricity. Leveraging the MudBlazor design system, we seamlessly integrated modern design principles with Diversified’s brand identity, culminating in a visually stunning and intuitive internal project management system.

Through powerful features such as enhanced dashboard functionality, resource manager monitoring, and support for multiple office locations, we endeavored to empower Diversified’s workforce with tools for seamless collaboration and efficient project execution. The success metrics speak volumes, from increased collaboration and productivity to decreased project delays and communication barriers.

The Diversified UX Case Study stands as a testament to the transformative power of design thinking and collaboration, showcasing how thoughtful UX design can drive tangible business outcomes and elevate the employee experience.