Telecommunications Client
Project Overview
Synopsis
At a large enterprise telecommunications company, I collaborated with four scrum teams to provide comprehensive design support for the customer service tablet application utilized by employees in the client's retail stores. This involved the design and implementation of several new features, the most complex of which being the "Block Preferences" feature. This enabled employees to efficiently manage 5 different block types on a singular screen—both at the account level and individual line level, for thousands of lines.
In addition, I managed UX error handling for all 35 API services across the application, designing a documentation system that allowed testers and developers to easily access the error information they needed.
Finally, I worked to conceptualize the future state of the product, referencing iOS 16 guidelines to consolidate massive amounts of data currently displayed across 6 screens, to 2 screens.
Problem
My client’s retail store employees were required to navigate multiple applications to complete customer service tasks such as account audits and device upgrades. The central application that consolidated the majority of this information faces usability challenges and technical difficulties arising from a high volume of API requests. These issues necessitated regular updates, addition of features, and an eventual complete redesign.
My Role
UX Designer
Timeline
10 months
Completed in December, 2022
Team
Myself, alongside Product, Development, and Consumer Group teams
Tools
UXPin, Figma, Adobe Illustrator
Retail Service App Redesign
“Block Preferences” Feature
Retail Service App Redesign Mockups (5)
Information redacted to maintain client confidentiality.
1. Subscribers - Current Device
2. Subscribers - Tasks
3. Subscribers - Equipment Installments
4. Subscribers - Warranty Information
5. Subscribers - Usage Details
“Block Preferences” Feature Mockups (4)
Information redacted to maintain client confidentiality.
1. Manage Block Preferences - View
2. Manage Block Preferences - Edit
3. Manage Block Preferences - Edit (All Block Types Displayed)
4. Manage Block Preferences - Edit (All Blocks Applied to Account)
Design Process
Retail App Information
2. “Block Preferences” Feature
Requirements & Scope
Iterative Wireframing Accessibility Review
Prototyping
3. Retail Service App Redesign
Information Architecture
Design Inspiration
Wireframing & Prototyping
4. Error Handling Enhancements
Old Documentation
Guerrilla Interviews
Prototyping
1. Background Information
Retail Customer Service App
The client’s native retail customer service application consisted of 3 dashboards—Account Summary, Device Dashboard, and Billing Dashboard—each with various tabs containing account-level, as well as line-specific, information. A large amount of user research was conducted to ensure that the key data points employees need to service an account are displayed on these screens.
That said, many accounts, specifically business accounts, consist of thousands of lines, and the application only allows employees to view/service 10 lines at a time. Additionally, employees still must navigate out to additional applications to complete certain tasks and find more niche account information.
One of my primary responsibilities was to design new features that incorporated these tasks into the native application, simplifying them for users and streamlining the overall customer service experience.
Table of Contents2. “Block Preferences” Feature
Requirements & Scope
Our Consumer Group stakeholders identified that Account Takeover fraud is a widespread issue occurring for customers of many telecommunications companies today. As such, they proposed a “SIM Change” block feature that would allow users to block all SIM changes to their account and associated lines. This included large business accounts with thousands of lines would need to be able to manage the block for each and all lines.
Through additional discussions, the UX Design team discovered that five other types of blocks would eventually be added to the feature post-MVP. Therefore, we modified our requirements to reflect a design that would easily accommodate multiple block types. The feature was then split into two different functionalities: setting the block, as well as implementing the block when a user attempts to change a blocked SIM.
Design Inspiration
Iterative Wireframing
Iterations and Change Log
Accessibility Review
After creating my initial designs, I met with the client’s Accessibility Resource Center stakeholders. The screens underwent a full accessibility review, and as a result, I made various visual adjustments to the screen, as well as included notes to developers for screen reader functionalities.
High Fidelity Prototype
You may view a demo video of the prototype or reference the High Fidelity Mockups above for all screens.
3. Retail Service App Redesign
Information Architecture Restructuring
As part of an effort to refine the product and shift from a fully custom design system to a SwiftUI based iOS system, UX Design was enlisted to envision a fully reimagined vision for the product. To begin, I focused primarily on consolidating the large information architecture and many screens.
Data Audit of Current Interface
I took an audit of all the data points that were currently displayed across the product, as well as which screens they appeared on. This allowed me to identify redundancies and form a full understanding of all the data that would need to be accounted for.
Affinity Diagrams
After eliminating redundancies, I plotted the data points on an affinity diagram and organized them into two categories: Account-level data and Subscriber-level data. From there, I further organized the data points into smaller groupings and was able to create a general structure for two screens: Account and Subscribers.
Design Inspiration
iOS 16 Guidelines
Before creating my design, I did extensive research on iOS 16 human interface guidelines, as well as on SwiftUI component alteration. In particular, I leveraged inspiration from the introduction of iOS 16’s 3 column layout: navigation in the left column, the root level of the data hierarchy in the middle, and the deepest level of the data hierarchy on the right.
Wireframing & Prototyping
Iterative Wireframing
High Fidelity Prototype
You may view the prototype in Figma or reference the High Fidelity Mockups above for all screens.
4. Error Handling Enhancements
Old Documentation System
Across the product, more than 35 APIs were called to populate data on each screen. Consequently, handling errors for each API became a complex task. When I began work on the project, developers and QA testers were leveraging a very large, convoluted Excel spreadsheet for error handling documentation. This caused a lot of confusion and time wasted, so I decided to redesign the documentation and provide our team with a more visual resource.
Old Documentation - API Listing Spreadsheet
Old Documentation - Device Dashboard Details API Information
Guerrilla Interviewing
To begin, I set up interviews with two of my product teams’ front end developers, as well as 2 QA Testers. I set up 15 minute chats with each of them, asking a series of questions to understand the scenarios in which they used the error handling spreadsheet; then, I watched them open the spreadsheet and walk me through their process for referencing it. I was able to glean insights on which data points they found unnecessary and which were most crucial.
Key Findings
Users would like to see where on the screen the API is being called
Users would like to understand the context in which the API is being called
Users would like to clearly view all error codes
Users would like to be able to copy and paste error message
Users would like to know which UI component to use for each error
Updated Documentation System Prototypes
Leveraging the data from my guerrilla interviews, I created an updated visual documentation system using UXPin. For easy referencing, I created a Table of Contents organizing each of the 35 APIs by screen. By clicking on a given API, users were directed to a full screen with details on the API, including visuals of where in the product it is called, and the necessary messaging for each possible error scenario.
Impact
As a result of this updated documentation system, the Front End Development and QA Testing teams reported they were able to complete their workflows significantly more quickly and efficiently.
Updated Documentation - Error Handling Table of Contents
Updated Documentation - Device Dashboard Details API (102 Response)
Updated Documentation - Device Dashboard Details API Information
Updated Documentation - Device Dashboard Details API (400 Response)
