Agency Chat Landing Page

Roles: UX Designer • UX Researcher • Agile Planner

Duration: 6 months

“The goal for this project was to create a dedicated page on our technology portal site to help agents dealing with technology related issues. This page will be filled with self-guided resources to help resolve their queries independently. Providing these resources will have two effects: reducing the load on the tech support employees responding to issues through chat, and to promote self-sufficiency among agents.”

Problem

Agents utilizing the Technology Portal criticized the inability to start a conversation with tech support when typing in “chat” in the search box. After discussing this with developers, they stated that adding this functionality would not be something they could do. Therefore, an alternate solution had to be made to mitigate this issue agents were facing.

Solution

Over the span of six months, I collaborated with developers to display a dedicated page to users when they search for “chat” on our Tech portal. I utilized Figma and Mural to brainstorm, prototype the UI, and to perform end-user testing. The end user testing ensured the page’s effectiveness and friendliness to all technology skill levels. This solution enhances the overall user experience of our portal, and saves employees valuable time.

Design Process

Research

To help design our new resource page, I decided to analyze the technology support pages of Apple, Amazon, and Best Buy. While researching each site, I realized the majority was structured in a way to promote self-solving options before enabling direct chat support. We selected to take the majority of our design inspiration from Apple’s support page because it provided the most seamless user-experience that matched our needs.

Ideation

User Stories

We brainstormed with the client about the user's goals and how achieving these goals would improve the overall user experience of the portal.

  • As a user, I would like to receive technology help when I search “chat”, so I will not be frustrated with my issue.

  • As a user, I would like this page to be intuitive, so that I understand how its purpose and how it can benefit me.

Goal

We created a solution for not being able to implement a live chat when “Chat” is searched on our Technology Portal. We decided to create an intuitive page for agents to allow them to resolve their technology issues.

LO-FI Design

Using the user stories we brainstormed, I sketched my initial design ideas using Figma.

Design

Style Guide

Since the chat landing page was another segment of the Agency Technology portal, we made sure that the colors, icons, and fonts matched Allstate’s brand. We also carefully selected colors and icons to make the design visually appealing and cohesive.

Design Changes

1. Introducing categories and icons: Streamlined navigation for users to quickly locate their specific issues.

2. Implementing guided navigation: Aiming for a smoother user experience by guiding agents through the search process, ensuring efficient problem-solving for technology related issues.

High-Fidelity Designs

While incorporating the style guide and design changes, I created a prototype using Figma to showcase the new design.

Usability Testing

After finalizing our prototype, we conducted a virtual user testing session with eight agents via Zoom.

Test

Topics asked during each user session

  • First Impressions

  • Displaying icons with each category

  • Thoughts on guided navigation

User Testing Questions

Card Sorting Feedback

The feedback was overwhelmingly positive, with agents praising the new design and guided navigation. They particularly appreciated the modern visual design, icons, and subcategories for self-guidance, affirming the success of our enhancements.

Reflection

Results

After incorporating the feedback received from user testing, we integrated the prototype into the technology portal. Collaborating with developers, we mapped out stories in the backlog for production. The page was officially launched in January 2024, with a total of 1495 visits since its release.

Things I learned

Through this design process and user testing, I've learned to embrace constructive criticism. Initially, I considered each iteration complete and felt like no improvements could be made, but feedback from fellow designers and user testing sessions taught me the importance of detachment from my designs. This flexibility enabled me to further refine the user experience of the product and implement new changes based on feedback I received. Embracing constructive criticism and adapting to change are pivotal for my professional growth as a designer.