SecureChat is a customer service portal aimed at increasing remote-assistance use-cases.
1.0 Context
In my capstone apprenticeship at Indiana University, I partnered with Securitas Group to optimize Securitas's remote-assistance workflow. Securitas's tech team identified that 70% of the in-person assistance sessions could have been tackled remotely.
Me and my team conducted user research to identify the root-cause of this problem and proposed a solution "SecureChat" that would tackle this issue, without the need for extensive splurging of resources.
Role
UX Researcher
Product Designer
Duration
September 22 - May 23
9 Months
Tools Used
2.0 The Solution
SecureChat is a customer service portal that allows the Customer and Securitas's Technician to annotate images and send videos, thus assisting asynchronous communication between both using visual indicators.
This is a huge improvement over Securitas's previous method - phone calls - which provided only voice as a mode of communication. Additionally, it lets a single Technician to handle multiple customers at the same time.
The following chart shows how the solution works:
Image: How the Solution Works
3.0 The Design Process
Weeks 1 - 6
Problem Discovery and Definition
Conducted interviews, observations, competitor analysis, thus drafting design artifacts such as personas, user journeys, etc.
Weeks 6 - 8
Ideation & Storyboarding
We utilized brainwriting and SCAMPER method to generate ideas in an in-person brainstorming session. We sketched storyboards to represent each idea.
Weeks 9 - 12
Wireframing, Reviews, Iterations
Created user flows, information architectures and wireframes, utilizing them to gather feedback in design reviews. Based on the feedback we iterated on the solution.
Weeks 13 - 15
Usability Testing & High Fidelity
Conducted usability testing with Technicians and in-house designers to resolve usability issues and then created the high-fidelity prototype using Figma.
4.0 Research Outcome: Core Problems
To understand the problem, we reviewed over 100 call recordings between the customers and TAC agents (technicians that resolve issues), and conducted 5 interviews with TAC agents and our client liaison.
85% cases exhibited a struggle to effectively communicate
Customers struggled to understand the TAC agent's technical vocabulary, and TAC agents often found it difficult to retrieve all necessary details through phone conversations.
This led to frequent escalations to the service dispatch team.
All calls had long wait times & required re-authorizations
The time to connect and internal transfers to the right agent easily costed an average of 15 minutes per user.
This caused a change in customer's tone, indicating fatigue, or tiredness. Call transfers also required re-verification at every instance.
Low network at user locations
Most customers had call drops or network problems. On further investigation through interviews and discussions, it was revealed that this was because majority of Securitas' customers used their security systems in warehouses located at remote locations.
Shortage of trained TAC agents
Due to the lack of skilled labor in this domain, there is a shortage of Service Dispatch and TAC Agents. The cost of employment is high as well thus requiring us to make efficient use of existing resources.
Image: User Journey Map
5.0 Ideating Solutions
We conducted a competitive analysis of 11 companies, using online customer reviews to gain insights into remote service technologies. This analysis informed our ideation process, resulting in 30 ideas.
Using SCAMPER, we quickly narrowed it down to three standout solutions.
Image: Ideation Summary
5.1 Budget, time, and resource constraints
Despite our confidence in the ideas, we encountered constraints during our presentation to clients and TAC agents. The recent acquisition of Stanley Black & Decker Security (we reported to Stanley's team) by Securitas revealed limitations in budget, time, and developer assets.
5.2 An Image-only Chat App Alternative
Consequently, we had to reconsider all three initial ideas. I proposed iterating on Idea 1 to meet these constraints, refining it into an image annotation-only application and converting it to a web app for easier access. This adaptation effectively addressed the project's limitations while tackling the communication gap through image annotation.
6.0 Creating Wireframes
After finalizing the solution, we developed user flows, created information architectures, and designed wireframes to utilize them for initial usability testing. We utilized Balsamiq to create these. Once these were created, we conducted usability testing, and moved on to high-fidelity.
Image: Wireframes
7.0 Adapting Visual Style Guides for High-Fidelity
I adapted Securitas' publicly available design resources to create a visual design system. This ensured our prototype aligned with Securitas' brand identity, even without access to a dedicated design system.
7.1 Typography
Despite our confidence in the ideas, we encountered constraints during our presentation to clients and TAC agents. The recent acquisition of Stanley Black & Decker Security by Securitas revealed limitations in budget, time, and developer assets.
Image: Typography
7.2 Color Palette
SEC Red was purposely left out of our designs. I made this decision as red is associated with danger or error by our users. Instead we used SEC Purple as a key interaction color. White is used in harmony with SEC Navy Blue to ensure brand identity on each page.
Image: Color Palette
7.3 Iconography
Securitas' Iconography uses 2px border radius, internal right angles, and uses a set of master icons to derive other icons. Since access to these sets were limited, and we were short on time, we utilized icons that incorporated similar styles. A key element that characterized these icons were the line breaks - which were selected accordingly.
Image: Iconography
8.0 Usability Testing Wireframes: User Test
We conducted usability testing with two users and two design experts from Securitas' team. We utilized think-aloud protocol to gather qualitative user feedback. The following are some of the key usability issues:
No guidance provided to the user.
In case that the user took some time to authenticate or the agent is busy with other users, the user wouldn't know what to do next.
Added a CTA with help text
This helps guide the customer's next steps, rather than having them to figure out or wait on the agent to tell them what to do.
Lack of Status & Visibility
Once the user joins the chat, there is no indication of who they are chatting to or if they are even present.
Added an Agent Profile with Activity Status
This provides an indication of what is going on, in case there are any delays in the communication. This also provides a sense of authenticity by means of the profile picture, instilling trust.
Too many clicks to browse tickets
Users had to click the back button then select another ticket. This caused additional 'wait time' when the user just wanted to view various tickets to prepare for them.
Panel that shows all upcoming tickets
This provided the users with a way to view tickets without waiting on system loading web pages.
9.0 SecureChat - High-fidelity and Features
As seen above, we made the above changes to our high-fidelity prototype. The entire prototype was created within Figma. I was responsible for creating the mobile prototype and I re-designed the desktop prototype after the project concluded. The following are its features:
9.1 Image Annotation
The image annotation tool empowers both customers and TAC agents to mark images, crop, and add annotations. This functionality enhances visual comprehension for both parties, thereby increasing efficiency and effectively addressing the communication gap.
Video: Feature Demo
9.2 Multi-Customer Management
TAC agents have the capability to manage multiple user chats simultaneously, facilitating a one-to-many relationship and effectively addressing the shortage of qualified TAC agents. This feature enhances efficiency and ensures that customer inquiries are addressed promptly.
Video: Feature Demo
9.3 Semi-synchronous to mitigate low-network problems
As a chat interface operates on a semi-synchronous platform, it mitigates issues such as drops or disconnections in low-network zones. This ensures uninterrupted communication between customers and TAC agents, even in challenging network conditions, enhancing overall user experience and efficiency.
Image: Semi-Synchronous Screen
10.0 My Takeaway: Roadmap for Continuous Improvement
We generated multiple ideas during the project, many of which surpassed the final solution we proposed. I believe we could have offered an improved solution, along with a roadmap to gradually add new features to reach the ideal outcome.
