UX development stages
.png)
.png)
The DEX tool project began with the Nextthink team, who created a basic Windows tool using the WPF framework and MahApps Metro UI design system after an initial discovery and framing session. Their early concept centered around simple click-through icons to check PC updates. However, a UX designer was needed to streamline and improve the user experience, and that’s where I stepped in. This project presented a unique enterprise UX challenge, requiring designs to be both user-friendly and technically feasible given the constraints. I conducted heuristic evaluations and user interviews to understand pain points and worked closely with the DPM and Developer to devise potential solutions.
Through iterative prototyping and user testing, I gathered valuable feedback that helped refine and align the design with user needs and technical constraints. A significant contribution I made was introducing a comprehensive dashboard, utilizing the Syncfusion UI design system to ensure compatibility with the WPF framework. I also conducted old vs. new usability testing, collaborating with the development and project management teams to validate the improvements and ensure a more intuitive user experience. My involvement extended through stage 02 of the product development cycle, setting the stage for further discovery and refinement sessions.
Overview
Role
UX Design
UX Research
UI Design
UX Design
UX Research
UI Design
Team
Me (UX)
Rob (DPM)
Andrew (Dev)
Sumithra (SM)
John (Lead)
Team
Me (UX)
Rob (DPM)
Andrew (Dev)
Sumithra (SM)
John (Lead)
About Dex Tool
The Allstate Digital Experience (DEX) Self-Service tool empowers users to independently monitor their computer's health and diagnose potential issues. Designed with a user-centric approach, DEX offers a comprehensive dashboard that displays every detail of the PC's performance, making it easy to understand system status at a glance. Users can seamlessly take quick actions to fix issues without the need for ATSC intervention, ensuring efficient and effective self-resolution. This tool prioritizes accessibility and simplicity, establishing itself as the first line of support for computer troubleshooting.
After identifying the core challenges faced by employees using the DEX tool—such as high ticket volumes, lack of proactive monitoring, missed policy updates, and delayed password resets—we recognized the need for a more structured approach to identify usability issues and potential design flaws. These challenges highlighted significant areas where the user experience could be optimized, but we needed a deeper analysis of how these issues were manifesting in the interface. To address this, we transitioned into conducting a heuristic evaluation, which allowed us to systematically assess the tool against established usability principles, such as Nielsen’s 10 Usability Heuristics. This evaluation was crucial in uncovering specific design issues that were contributing to the challenges users were facing. It provided an expert review of the tool’s interface to identify areas where users might encounter friction or confusion.
By applying these heuristics, we were able to look beyond just the surface-level problems and assess how well the DEX tool aligned with fundamental usability principles, such as visibility of system status, error prevention, and consistency. This helped pinpoint critical usability gaps, such as unclear navigational structures, excessive complexity in task flows, and a lack of actionable feedback, all of which were contributing to the frustrations of employees. The insights gained from the heuristic evaluation formed the foundation for redesigning key areas of the tool, focusing on improving user autonomy, simplifying complex interactions, and ensuring a smoother, more intuitive experience. This step not only provided clarity on the immediate pain points but also informed our strategy for addressing the broader challenges we had identified earlier in the project.
Challenges
High ticket volume
How can we streamline the DEX tool to reduce support tickets and empower users to resolve issues independently?
No first line monitoring
How can we introduce proactive monitoring that alerts and guides users before issues escalate?
Missed Policy Updates
How can we improve the visibility and comprehension of critical policy updates to ensure timely user adherence?
Password Reset Delays
How can we simplify and speed up the password reset process to enhance user productivity?
Problem statement
Employees face challenges in resolving technical issues independently due to a lack of proactive monitoring, missed policy updates, and delayed password resets, leading to high support ticket volumes and decreased productivity.
I focused on key heuristics to improve the user experience. First, I prioritized "Match Between System and the Real World" by organizing information in a familiar order, similar to standard PC specs pages. I also addressed redundancy, like the "Check Health" button, by automatically displaying health info at app startup with a refresh option, aligning with "User Control and Freedom". Additionally, I followed "Aesthetic and Minimalist Design" to show only essential information, reducing cognitive overload, and applied Hick's Law to simplify choices.
Finally, "Visibility of System Status" was incorporated to display actions based on the PC's status, eliminating unnecessary user input. After evaluating the tool using these heuristics, I collaborated with the UX research team to conduct interviews and validate whether the evaluation aligned with actual user feedback. Based on the insights gathered, I remade a persona that reflected the findings, adjusting pain points and scenarios to better align with user needs and expectations. This helped refine the design and ensured that it adhered to established usability principles.
Heuristic evaluation
.png)
Based on the insights and pain points identified in the persona, I designed the DEX tool as an intuitive, self-service solution for users to resolve PC issues independently. The tool's core functionality centers around a streamlined dashboard offering a comprehensive view of the computer’s health and status. This design enables users to quickly access essential PC details, empowering them to diagnose and fix issues without requiring assistance from ATSC. By providing actionable options within the tool, users can take immediate steps toward resolving problems, reducing dependency on external support.
In the 2nd stage of design, I made key updates based on persona insights to improve usability. These included adding a direct password reset, simplifying PC product name access, and clarifying account versus password status. I removed the WiFi status and kept only the overall network status to reduce clutter. Additionally, users can now perform multiple actions at once, like repairing Acrobat Reader and removing background tasks together, to quickly resolve issues. These changes enhance the troubleshooting experience and empower users to manage devices more better.
Stage 02 design
.png)
In the stage 2 redesign evaluation of the DEX tool, I conducted user sessions with five employees, each from different departments with unique DEX tool usage needs. The sessions focused on whether a dashboard layout could enhance their experience, as opposed to the current UI. Using qualitative research methods, including semi-structured interviews and task-based analysis, I explored how a centralized dashboard might improve visibility, reduce navigation, and streamline access to essential features. Terms like “information hierarchy” and “cognitive load” helped frame discussions around the dashboard’s potential to present key information in a more organized, efficient format.
All five participants agreed that a dashboard design would better meet their needs, indicating a preference for consolidated views where essential data is upfront and actionable items are easy to locate. Their feedback highlighted a clear desire for improved system visibility and task efficiency, aligning with UX principles like “visibility of system status” and “recognition over recall.” This strong support for the dashboard layout provided clear validation for its adoption, as users could better manage system health, quickly access relevant tools, and focus on tasks without distraction. These insights will inform the next iteration, ensuring the DEX tool continues to meet diverse departmental needs.
The DEX tool project began in March 2020 as an experimental product designed to gather and present crucial data to employees about their PC health and NTID account status. Initially, the tool focused on providing essential updates and highlighting issues related to system performance, ensuring that employees had visibility into their devices' health and potential concerns. The tool’s core functionality was to alert users to issues, offering them a centralized platform for monitoring their PC health. After a period of testing, the feedback was positive, indicating that the tool was successful in its goal of empowering employees to stay informed about their systems, but it became clear that the next step was to refine and enhance the user experience.
Recognizing the potential for improving the tool’s design and user experience, the team decided to bring in a product designer to elevate the project in January 2024. The goal was to transform the tool from a functional, informational interface into a seamless and intuitive experience that would provide a unique, engaging environment for employees. As a product designer, I was tasked with creating a user-centric design that would make navigating the tool effortless and enjoyable. This involved redesigning key features, improving the layout, and ensuring that employees could easily take action to resolve issues without feeling overwhelmed. By introducing design elements focused on clarity, simplicity, and accessibility, the aim was to make DEX a valuable self-service resource for employees.
Persona
.png)
Using user research insights, I crafted a persona that reflects users' needs, behaviors, and pain points to inform focused design improvements.
Based on the feedback supporting a dashboard approach, I designed the information architecture to offer a clear, structured view that divides items into two primary categories: Health and Actions. Each section focuses on key areas users need quick access to, arranged by priority for streamlined navigation and usability. The Health category provides at-a-glance insights into OS status, account health, Office 365 functionality, browser performance, application statuses, and hardware and sound conditions. This arrangement allows users to immediately assess the overall state of their system, helping them quickly identify areas that might need attention.
In the Actions section, users have access to tools and options for resolving specific issues. Organized by topic—such as Quick Checks for diagnostics, Knowledge Updates for troubleshooting tips, account settings, and hardware adjustments—this setup supports rapid troubleshooting without excess navigation. Grouping actions related to Office 365, applications, and the browser ensures that users can address app-specific concerns efficiently. By structuring the information architecture this way, the DEX tool provides a holistic dashboard where users can easily monitor and take action, minimizing confusion and maximizing productivity in system maintenance.
Information architecture
.png)
The DEX tool’s layout follows a structured grid-based design to organize information intuitively and maintain visual balance. Using a 12-column grid, this approach adapts well to various screen sizes, ensuring consistency across devices and layouts. Each card within the dashboard serves as a modular information unit, with content distributed to facilitate quick navigation and readability. Cards displaying high-priority data, such as OS health or Quick Checks, are prominently positioned in the top rows, supporting quick access to critical insights. Meanwhile, lower-priority items, like Knowledge Updates, are placed further down in a Z-pattern, aligning with natural reading flow. This hierarchical arrangement helps users easily locate information and respond to critical system alerts or actions with minimal effort.
Each category’s positioning within the grid layout also reflects item priority and task frequency from the IA, as primary actions need to be prominent and easily scannable. The grid system, established on a 12-column structure, allows flexible arrangements of modules based on item count and content complexity, facilitating easy adjustments as new actions or insights are added. This method ensures a balance of functional clarity and aesthetic order, helping users move seamlessly from the overall PC health overview to specific actions, aligned with their information needs and usage patterns. By grounding the dashboard design in a structured IA, users can navigate intuitively, always aware of where to find critical information and how to act on it effectively.
The wireframe
The DEX tool’s layout follows a structured grid-based design to organize information intuitively and maintain visual balance. Using a 12-column grid, this approach adapts well to various screen sizes, ensuring consistency across devices and layouts. Each card within the dashboard serves as a modular information unit, with content distributed to facilitate quick navigation and readability. Cards displaying high-priority data, such as OS health or Quick Checks, are prominently positioned in the top rows, supporting quick access to critical insights. Meanwhile, lower-priority items, like Knowledge Updates, are placed further down in a Z-pattern, aligning with natural reading flow. This hierarchical arrangement helps users easily locate information and respond to critical system alerts or actions with minimal effort.
The modular design employs consistent spacing and padding between sections, which prevents visual clutter and enhances usability by allowing users to distinguish between different categories like Office 365, browser health, hardware, and sound. White space is used strategically, making the interface cleaner and reducing cognitive load. In addition, the grid layout is scalable, accommodating new features or modules as needed without disrupting the overall structure. This approach, combined with a focus on primary actions like Quick Fixes, promotes a progressive disclosure of information, helping users focus first on essential tasks. The resulting design is functional yet visually harmonious, balancing aesthetic clarity with practical user needs in a cohesive dashboard experience.
Stage 03 design
Centralized Health Insights
-
Displays key PC health info in one view.
-
Offers a quick system status overview.
-
Prioritizes critical health metrics for action.
Quick Action Access
-
Minimizes clicks for troubleshooting.
-
Enables instant fixes with one click.
-
Simplifies the user journey.
Clear Information Hierarchy
-
Organizes content by importance.
-
Makes navigation intuitive and efficient.
-
Highlights critical issues first.
Grouped Functionalities
-
Groups related tasks together.
-
Improves task efficiency and flow.
-
Fosters quick access to necessary actions.
Simplified Status Indicators
-
Shows clear account and network status.
-
Eliminates unnecessary redundancy.
-
Uses simple visuals for easy understanding.
Real-Time System Monitoring
-
Updates system health continuously.
-
Keeps users informed with live data.
-
Enables informed decision-making on the fly.
The DEX dashboard design is intricately linked to its information architecture (IA), ensuring a user-centered experience that supports clear navigation and effective problem-solving. By translating the IA into a modular dashboard layout, I created a structure where users can view and act on health metrics without needing extensive navigation. This card-based interface groups relevant data and actions into separate cards, each focusing on a specific category like OS, Quick Checks, Applications, or Hardware. Users can easily scan and select items, as each card provides both summary information and the option to drill down for details, supporting progressive disclosure and reducing cognitive load. The visual hierarchy emphasizes Health and Actions for each item, so users can quickly interpret system health and jump to actions with minimal effort. This layout design follows dashboard best practices, presenting information intuitively and allowing users to address specific PC issues efficiently.
In addition to a structured layout, the dashboard incorporates visual aids such as icons, color-coded indicators, and distinct labels to clarify status at a glance, making insights into system health visually accessible. By applying data visualization techniques like these, the design highlights immediate areas of concern, encouraging quick action where needed. The IA also dictates which details should be prominently displayed on the main dashboard versus those available upon selection, ensuring that primary actions and insights are front and center while secondary information is available if users wish to explore further. This synergy between IA and dashboard design ensures a cohesive and intuitive experience, allowing users to seamlessly transition from diagnosing system health to performing corrective actions, all within a unified, user-friendly interface.
In designing the DEX tool’s transition from light mode to dark mode, I aimed to offer users a flexible, comfortable experience based on their preferences and lighting conditions. The toggle switch allows users to easily switch between modes, giving them full control. In light mode, I used light, neutral backgrounds with dark text to maintain high readability. In dark mode, the background color was darkened with lighter text to reduce eye strain while preserving contrast and clarity. I ensured that key elements like status indicators, buttons, and alerts were clearly visible in both modes.
The color palette was carefully selected to maintain consistent visual hierarchy and to make the tool both accessible and aesthetically pleasing in both modes. I focused on optimizing text and UI components to maintain a smooth and cohesive look. The design adjustments ensure that users can navigate the tool comfortably, whether in well-lit or low-light environments, enhancing overall usability and providing a personalized experience without compromising functionality.
Usability study of
Stage 02 design
Usability study of Stage 02 design
My main focus was uncovering frustrations users faced while using the DEX tool, conducting a usability study to identify pain points and areas for improvement.
Usability study of
Stage 03 design
Usability study of Stage 02 design
-
Task-Based Moderated Testing: Participants performed two PC health tasks on both the old and new DEX tool versions, exploring functionality to gauge task flow and ease of use.
-
Usability Metrics Observed: I tracked task speed, errors, and frustration, finding the new version reduced hesitation and enabled faster, more efficient task completion.
After finalizing the initial designs for DEX, I conducted usability testing to compare the effectiveness of Stage 2 and Stage 3 layouts. Stage 2 showcased a basic layout featuring simple info cards, while Stage 3 introduced a comprehensive PC health dashboard design that integrated key information and actions in a more dynamic, visually organized format. I recruited five participants, each from a distinct department, to ensure diverse feedback reflecting varied use cases and work contexts. Through a series of task-based assessments and think-aloud protocols, participants navigated both versions, offering valuable insights into the intuitiveness, efficiency, and overall satisfaction with each design.
Key findings from usability metrics, such as task completion rates, time-on-task, and user satisfaction scores, indicated a strong preference for the Stage 3 design. The dashboard’s streamlined layout allowed participants to quickly locate essential information and resolve PC issues, while also reducing cognitive load. Many users noted the logical grouping and hierarchy in Stage 3, which helped them prioritize tasks efficiently. Observations from the assessments further validated the preference for Stage 3, as it significantly improved navigation, perceived ease-of-use, and overall engagement compared to Stage 2’s simpler layout. The feedback underscored that the enhanced dashboard design in Stage 3 better aligned with user needs, demonstrating the value of iterative design and real-world usability testing.
During the usability testing, participants consistently found the newer DEX tool significantly more effective and intuitive. They appreciated the structured layout, which prominently displayed essential PC health information and made task initiation simpler. The redesigned dashboard allowed them to identify and resolve issues without unnecessary steps, minimizing cognitive load compared to the older tool. The grouped functionalities, such as network and account actions, allowed quick access and aligned with common user workflows, making the tool more practical for everyday troubleshooting.
The participants also reported reduced frustration in completing tasks, noting that the streamlined design cut down on redundant actions and irrelevant information. The clear labeling and organized information hierarchy helped them locate needed features quickly, improving task accuracy. By observing faster completion times and reduced errors, I confirmed that the new design was meeting its goal of offering a user-centered, efficient experience for handling PC health-related actions. This feedback reinforced the need for an intuitive, consolidated dashboard as an effective design direction for DEX.
Key learnings
Clear Information Hierarchy
Organized content by priority helps users quickly find critical functions.
Task-Based Grouping
Grouping related actions improves flow and efficiency for users.
Real-Time Feedback
Live system updates boost user confidence in troubleshooting.
Iterative Testing
Usability tests revealed frustrations, guiding design improvements.
Next steps
Next, a discovery and framing session will refine the DEX tool, prioritize enhancements, and align it with user needs and goals. Further testing will continue to improve the design.
The DEX tool was developed to offer Allstate employees an accessible, user-centered solution for diagnosing and managing PC issues independently, thus reducing the need for constant ATSC support. Initial persona studies and pain point analyses revealed key usability issues, including user confusion over network versus WiFi status, difficulty in accessing the PC product name, and frustration around the redundancy between account and password status information. I structured the interface around a centralized dashboard design to prioritize clarity and ease of use. By consolidating essential PC health insights, task-based navigation, and real-time system monitoring, the DEX dashboard provides users with a clear overview and actionable insights in one unified view. The design focuses on task grouping—clustered functionalities such as network, account, and application actions—and information hierarchy to support a more intuitive, guided experience, allowing users to easily navigate and resolve issues with minimal effort.
To validate the design’s effectiveness, I implemented staged usability testing with five participants from diverse departments, each representing unique use cases for the DEX tool. Through a moderated usability test, I asked each participant to perform specific tasks on both the original and newly redesigned tool, observing task completion time, ease of navigation, and overall frustration levels. The newer design's structured layout, organized information hierarchy, and minimized redundancy contributed to increased user satisfaction. The dashboard design in Stage 3, which introduced a refined layout with info cards and simplified navigation, received highly positive feedback for offering a more streamlined, task-oriented approach to troubleshooting. By emphasizing clear task flows, reduced cognitive load, and quick action features, the final DEX tool design provides an empowered experience, enabling users to diagnose and fix PC issues efficiently without the need for external support. This design not only aligns with usability and interaction design principles but also ensures a practical and sustainable troubleshooting experience.
.png)
.png)
