TF Inspire

I worked alongside the software design team to create TF Inspire, a SaaS tool for customer service, IT service and assets management.

It was the first product of the company, so the challenge was big, not only because we would be entering an already competed market but also given the complex nature of the software and the diversity of tasks that each user profile could carry out.

ROLES

User research and analysis
UX design
UI design
Interaction design
Prototyping

tf-inspire-hero

Research

To gather insights from users of this kind of software tools, we conducted a survey with randomly selected customer service agents managers and technology managers. Here are some of the findings:

Measurability is key. Managers need to react to agents' performance to mitigate critical issues, improve team's operation and comply with contractual service agreements.

Adoption of new tools is hard. Agents feel that using a new software poses a learning curve that interferes with their job.

Software adoption is low. Small businesses don't use a customer service tool or have a limited, in-house developed solution.

There's room to improve communication with customers. 80% said they only use phone or email to communicate with their customers.

Adherence to procedures. Internal customers may skip the service platform and approach agents directly, creating untraceable cases and impacting agents' KPIs.

User personas

We identified three main user roles that would use the software: customer (who creates the tickets), service agent (who attends and solves the cases), and administrator (manager of the service desk and sole user role with access to the configuration module).

Particular efforts were focused on the service agent, given that they would be the user spending most of their time using the software.

tf-inspire-user-persona

Task flow

Taking what we learned from research and competitors, we defined a large number of task flows for each user role to map every step of their interaction required to achieve different goals.

tf-inspire-task-flow

Wireframing

Considering the various interfaces according to task, module, and user role, I sketched different approaches to quickly gather feedback from the team and establish a standardized visual hierarchy and layout. Some iterations were tested with a small group of users.

tf-inspire-wireframe-1
tf-inspire-wireframe-2
tf-inspire-wireframe-3

Prototypes and visual design

After some wireframe adjustments, I created high-fidelity prototypes using Adobe XD. Those prototypes were used to introduce the software to stakeholders and to validate some of the decisions taken during the wireframing stage, which led to further improvements.

tf-inspire-prototype-1
tf-inspire-screen-1-1
tf-inspire-screen-2
tf-inspire-screen-3

Design system

Alongside the finished interface designs, I mapped out the foundational elements and defined their multiple properties to put together a UI kit.

tf-inspire-ui-kit