dart-imac-mockup
Project overview
Company
Comcast

Product Owner
Central Division Tech Support Team

Date
2022
Introduction

DART is an internal-facing web application used by Comcast employees and vendors to process customer work orders. The tool retrieves data from a variety of sources to help consolidate work order status and help to avoid unnecessary on site field technician visits.

Design Problem

Re-design the existing sight to improve customer support agent efficiency and user experience by leveraging user research insights.

Design Solution

Collaborated with web developer team to clean up the UI layout and design. Improved the information architecture and visual hierarchy to emphasize content that users find more important.

Design Process

 

UX Design Process

User Research

There was primarily a single type of user: Technical Support Agent. They use the tool for about 90% of their shift, this makes it very important to understand their workflow and pain points.

My research included shadow sessions and user interviews with Support Agents and Supervisors. A total of 5 employees were interviewed. Interviews were conducted via video calls and the surveys by sending a questionnaire via email.

Research Findings
  • Agents spend a vast majority of their work day using DART, up to 90% in some cases
  • Some agents open multiple instances of the tool, and switch back and forth to save time
  • After exiting the work order details screen agents had only a few seconds to click on “Send SMS” button, before the screen gets automatically refreshed
  • Agents are on the Campaign, Outage and Ring Fence pages 90% of the time
  • The "Outage" tab label is misleading, makes more sense to call it "Manual"
Personas

DART Persona

user Journey

DART- User Journey Map

User Flows

As a result of the user interviews and shadow sessions, the most important task flows were identified. The most common task for tech support agents was to select a work order and check if the customer’s issue could be resolved over the phone.

dart-user flow-campaigns
dart-user flow-campaigns
« 2 of 2 »
Information Architecture

Based on the business requirements and user feedback, high level content categorization and taxonomies were identified.

DART Configuration Content map
DART Configuration Content map
« 1 of 2 »
Low Fidelity Wireframes

After the information architecture was finalized, the next step involved translating the diagrams into low fidelity wireframes.

DART Home Page Wireframe
DART Home Page Wireframe
DART Home Page Wireframe
« 1 of 5 »
High Fidelity UI Mockup

The wireframing step required several iterations due to user feedback. After the wireframes were accepted by the team, high fidelity UI mockups were designed

DART Problem Code Modal Window
DART Problem Code Modal Window
DART Problem Code Modal Window
« 2 of 5 »
My Role

UX Researcher
Product Designer
UI Developer

Design Tools

Axure RP
Adobe Photoshop
Visual Studio Code
CSS
HTML

UX Activities/Deliverables

User Interviews
Information Architecture
Site Map design
Low fidelity Interactive Prototype/Wireframe
UI and UX design
High Fidelity Mockup Design and Asset Management
Design concept presentations to project team and management