Primary Role: UX Design Lead

Time frame: Nov. 2024 - Jan. 2025

About the Project

Our client, a company developing advanced tech for self-driving cars, faced a challenge: their large technical support team needed a boost in efficiency. Our team was tasked with creating an Al chat-bot widget that could seamlessly integrate into their existing ticketing platform and provide Al-powered solutions to speed up troubleshooting for their technicians. It was an exciting challenge, and we were eager to dive in.

"The goal of the product is to help technicians speed up their troubleshooting decisions by the assistance of chat-bot agents."

The Kickoff

First things first, the team needed to understand the context. I prepared a set of questions about   their current ticketing system, how users interacted with it, and whether they had any existing design guidelines we could follow. I also started exploring AI tools like ChatGPT and Gemini to get a feel for what was out there.

Dreaming Up the Design

Our team leads got the ball rolling with some initial wireframes, giving us a rough outline of what the product could look like. This sparked a wave of brainstorming and collaboration, with everyone throwing in their ideas on how to improve the design. One of our developers even took the initiative to create a wireframe based on how she envisioned the front-end Ulf which got us thinking about implementation early on.

More ideation sessions

We were still waiting on access to the client's ticketing system, which was slowing things down a bit. But we're no strangers to tight deadlines, so we turned to market-tested ticketing platforms like Zendesk for Ul inspiration. After all, the heart of the project was the Al chatbot widget, so we focused on incorporating common ticketing system elements like job order lists and status groupings.

Refining the Vision

As we moved forward, we had to decide whether to stick closely to the initial wireframes or draw inspiration from conventional UI designs that users were already familiar with. I dove into the user flow, mapping out the journey from customer issue to technician troubleshooting. Given that the product would be deployed on the client's internal website for testing, I suggested using Material UI, a design system developed by the client's parent company.

Teamwork Makes the Dream Work

Being the sole designer on a cross-functional team, I wanted to make sure everyone felt involved in the design process. We may not all be designers, but we could all put ourselves in the users' shoes. I'd chat with each team member, present them with a scenario, and ask how they'd interact with the product. It was like role-playing, but for UX design! This not only gave me valuable insights but also helped the team understand the user's perspective.

Experimenting with the UI

I started playing around with different looks for the chat window, testing out various header titles, background colors, and chat bubble styles.

The team was particularly fond of the gradient background using the client's branding colors - it added a touch of personality.

Building a Design System from Scratch

We were still hoping for comprehensive product brand guidelines from the client, but we couldn't wait forever. So, I took the initiative to create a set of Ul guidelines and interactions based on the limited references we had, like the client's logo and website.

Handing Off the Design

Once the design and interaction guidelines were complete, I worked closely with the front-end engineer to ensure every Ul component and interaction was implemented correctly.

Putting the Product to the Test

Our small but effective team members had diverse responsibilities. The team consisted of a Project Manager, a Front-end developer, a Machine Learning (back-end) developer, and a UX Designer. Since there were no dedicated testing engineers, everyone shared the testing workload.

I usually do design post-implementation reviews after deployment, ensuring the deployed version exactly matches the Figma design mock-ups. For this project, I also tested the GenAl-driven app, which was a first for me. I'd feed the Al questions, compare its responses to the training data solutions, and document my findings. It was fascinating to see how the AI handled different questions, even the irrelevant or ambiguous ones. It even responded in the same language I used — I asked in Portuguese, it answered in Portuguese!

The Client's Verdict

As of writing, all final deliverables have been submitted and reviewed by the client. We've received positive feedback throughout the project, despite a few bumps in the road like onboarding delays and holiday breaks. We're hopeful that the client will see the value in our work and move forward with a larger-scale implementation.

Lessons Learned

This project has provided me valuable experience and insights, emphasizing the importance of trustworthy Al interfaces and user confidence. It highlighted the power of collaboration and provided hands-on experience with Al models, including their strengths, limitations, and biases. This experience has solidified my passion for user-centric Al applications and a desire to contribute to the future of AI.