Securechat
Securechat is a customer service portal (mobile web app and dashboard) to increase remote-assistance use-cases.
In my capstone apprenticeship at Indiana University, my team partnered with Securitas Group to optimize remote resolution of customer-reported device issues, 70% of which could be solved remotely. Initially, Securitas relied on phone calls to resolve these issues. We identified the root causes, conducted usability testing, and designed a solution focused on quick, feasible implementation.
Problem
How might we increase the remote assistance use-cases for Securitas?
Outcome
We designed a chat-based customer service portal with a pictorial mode to enhance remote assistance by improving problem comprehension.
Role
Product Designer
Duration
9 months
Tools Used
Figma, FigJam
Team
Veena M - Designer
Apoorva N - Designer
The Design Process
As a part of the capstone experience at Indiana University, we had 9 months to work on our client's project. We created & followed this roadmap to meet our deadlines.
Weeks 1 - 6
Problem Discovery and Definition
To understand the problem, we conducted multiple interviews and observations, along with client briefings. This was followed by competitor analysis, and drafting artifacts such as personas, user journeys, etc.
Weeks 6 - 8
Ideation & Storyboarding
With the help of previous artifacts, we utilized brainwriting and SCAMPER method to generate ideas in an in-person brainstorming session. We generated storyboards to represent each idea.
Weeks 9 - 12
Wireframing, Reviews, Iterations
We 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 Prototype
We conducted usability testing with TAC Agents and in-house designers to resolve usability issues and then created the high-fidelity prototype using Figma.
The 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%
of failed remote assistance 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.
100%
of calls had Long wait times
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, especially when time for internal call transfers was higher as this 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.
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.
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 by Securitas revealed limitations in budget, time, and developer assets.
A 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.
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.
Usability Testing
We conducted usability testing with two users and two design experts from Securitas' team. We utilized think-aloud protocol to gather qualitative data, and provided each participant with a SUS survey to measure the user perceived usability.
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.
Adapting Visual Style Guides
As the lead for high-fidelity prototyping, 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.
Typography
Since we had limited access to the company's resources, we searched google, and tinkered with a font closely matching the letters to match as close to the Securitas Pro Typeface. This font was Acronym.
Icons
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.
Colors
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.
Outcome: SecureChat
SecureChat is a customer service portal that allows the customer and TAC Agent to annotate images and send videos, thus assisting communication between both using visual indicators.
Feature 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.
Feature 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.
Feature 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.
System Usability Score
Usability testing involved three experts from the client's team. Two experts conducted an informal expert evaluation, while the third expert assumed dual roles as both the agent and the user, conducting a think-aloud test based on personas and experience.
The main objective of the usability testing was to assess the interface and assign a usability score based on the feedback gathered.
Some of my takeaways
Importance of a Design System
The adapted visual design system was helpful for remote work, but we ended up creating inconsistent button designs. When we aligned them together, I realized this could've been avoided by scoping out common components and building a small design system library.
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.