FixVid:
e-learning app for home repairs
Proagent:
Customer service solution
Case study: Design SaaS Web Dashboard.
Goal: Help customer support agents efficiently manage tickets and make insightful reports to improve support team productivity.
Scope: Personal UX | UI Design project.
Role: Solo project where I was responsible for all UX and UI design tasks.
Figma
5 Weeks
Problem context
Customer service is a key part of any company. That's why their teams should work with software that allows them to solve any client's issues efficiently and in a timely manner.
I have a background in customer support and have come across and tested different SaaS solutions for customer service, but they tend not to focus on providing agents with an overview of the ticket's status and a simple way to generate custom plots for personalized reports. The goal of Proagent was to provide a web application that understands the needs of the agents and makes their work easier. A phrase that inspired this project was "happy team means happy customers".
Design process
Research
For the research process, I conducted interviews with people with experience in customer service and that have used customer service software.
My goal was to understand the struggles that agents are facing with this type of software. Are they happy with the features the software offer? Do they miss anything? What could make their work easier?
I also ran a competitive analysis to understand the weaknesses and strong points of the customer service software already on the market and also checked the reviews the customers gave to these services.
Interview insights
- Reports are very rigid and allow little customization.
- Want to have a global vision of the status of the tickets.
- Want to organize customer queries from different channels.
- Customer service software should be easy to explain to new agents.
- Features should be scalable.
- Being able to assign a ticket to multiple people.
- Want visibility on whether someone is already working on a client's request.
- Automation should be easy to set up.
Competitive analysis insights
×
User
Persona
×
Pain Points
Hannah's Pain points targeted
- Not having visibility of what other team members are working on.
- Not being able to make custom reports.
- Handle repeated customer incidents.
- Difficulty setting up chatbot.
- Logging the calls in the support log manually.
Information Architecture
To build the site architecture I used the insights from the competitive analysis to decide the main features and how they should be distributed. From that analysis the following site map and concept sketching were defined:
Key features
- Home page with tickets status overview.
- Reports customization with drag and drop tool.
- Easily configured chatbot through a logic flow.
- Reminders and to do list that allow agents to easily track their pending tasks.
Wireframes
Since this project is a SaaS solution, the design was made for a desktop web application.
User flows
Below is the user flow when Hannah wants to assign a ticket and then review a ticket information:
- 1 - Click on the Assign button
- 2 - Search for the agent
- 3 - Select available agent
- 4 - Assign ticket
- 5 - Go to tickets view
- 6 - Open ticket details
- 7 - Check ticket information and validate if another agent is currently working on it.
×
Testing
The first version of the Wireframes was tested on 5 users. The results helped improve the design and the changes were applied to the mockups shown on the next section. The following tables show the results of the tasks where the users encountered issues or that they enjoyed the most.
New user (Sign up flow)
×
Recurrent user (Sign in flow)
×
UI Design
Color palette
The color palette has lilacs and blue to evoke wisdom and calmness. Customer service can sometimes be stressful for both the agents and the clients, and I wanted the platform to transmit tranquility.
#262626
#0F1C7D
#8189BE
#E0E4FF
#FAFAFA
Fonts
I wanted the web application to have a modern and calm look & feel, so I went for the Serif typeface called Cooper for the main headers (H1) and for the smaller headers and the rest of the text I want with Montserrat since it complimented the other font nicely and has great readability.
Mockups
Prototype
The following gifs shows the interactions for a recurrent user.
Tickets flow
Chatbot and custom plots flows
Outcomes & lessons learnt
- Proagent offers a customer service web application that allows agents to keep track of their tasks, create custom reports and easily configure chatbots. It promotes teamwork and offres a proactive and efficient service to their customers.
- UX Writing needs to be a mandatory part of every project. The main issues found during the testing phase showed that users needed an improved onboarding and explanations of the main features of the service. Users do read the copies provided and using lorem ipsum does not offer a clear understanding of the usability of a service.
- Through this project I learned more about the importance of adding CTAs in the empty states. They improved the overall experience of the users allowing them to better understand the features of the app.
- One of the main challenges discovered during the development of the project was founding a way to show an inclusive product. The use of Illustrations was my attempt to reflect the different types of users the web application might have and giving importance to diversity.
- Next steps:
- Design mobile application. Although agents mostly work on a desktop it's important to offer the mobile alternative, especially for agents that work on night shifts or holidays.
