Fix Now web app

ROLE: Sole UX Designer & UX Researcher


CONTEXT

The goal was to create a streamlined and intuitive self-help application to reduce IT support tickets and empower non-technical users to resolve common issues independently.

USER STORY

As a non-technical employee, I want a straightforward and easy to use Self-Help application that allows me to resolve my own IT issues, so that I can quickly solve common problems without needing to contact support, reducing my downtime and improving my productivity.

OUTCOME

Fix Now reduced IT support tickets by 35% across over 1 million endpoints, significantly decreasing the burden on support staff and improving response times.

Enhanced self-service capabilities, enabling users to resolve common IT issues independently without requiring technical knowledge.


TOOLS: Figma; Sketch; Maze; Google Analytics


METHODS: Sketching; Personas; Storyboard; Information Architecture; Wireframes; Rapid Prototyping; Interaction Design; User Interface Design; Usability Testing; Interviews; Qualitative Data Analysis


DESIGN PROCESS


 

PHASE I. Research & Discovery

User Interviews & Think-alouds: Conducted interviews and think-aloud exercises with key stakeholders, end-users, and IT support staff to identify common issues and pain points.

Competitive Analysis: Analyzed existing self-help tools and their usability to identify gaps and opportunities for improvement.

PHASE II. Ideation and Concept Development

Personas: Developed detailed user personas to represent the diverse needs and technical proficiency levels of the target audience.

User Flow: Created a user flow diagram to visualize the steps users take to resolve issues and identify potential friction points.

 
 
Figure 1. Initial sketches of the self-help tool

Figure 1. The initial stages of mapping out the user flow, using color-coded sticky notes to organize and identify key steps

 
 

Figure 2. This diagram illustrates the user flow, detailing the decision-making process and outcomes for various user actions.


PHASE III. Wireframing & Prototyping

Low- and Medium-Fidelity Wireframes: Designed low-fidelity wireframes to outline the basic layout and structure of the application.

Interactive Prototypes: Developed interactive prototypes using Figma to simulate the application's functionality and gather early user feedback.

PHASE IV. Usability Testing & Iteration

Usability Testing: Conducted multiple rounds of usability testing with representative users to identify usability issues and gather feedback.

Iterative Design: Iterated on the design based on user feedback, improving navigation, accessibility, and overall user experience.

 
 
 
 

 
 

Figure 3. These screenshots show a medium-fidelity prototype of the app’s core functionality

 

PHASE V: High-Fidelity Design and Development

High-Fidelity Mockups: Created high-fidelity mockups incorporating branding elements, visual design, and detailed interactions.

Collaboration with Developers: Worked closely with developers to ensure the design was implemented accurately and efficiently.

PHASE VI. Implementation and Optimization

Pilot Testing: Deployed the application to a pilot group to test in a real-world environment and gather further feedback.

Performance Optimization: Ensured the application was optimized for performance and accessibility, addressing any technical issues that arose during pilot testing.

Figure 4. This screenshot shows the final design of the Detected Issues page of the self-help app


PHASE VII. Launch and Post-Launch

Full Rollout: Launched the application to the entire user base, providing training and support materials to facilitate adoption.

Continuous Improvement: Monitored usage and feedback post-launch to identify areas for further improvement and ensure the application continued to meet user needs.