// my role
project manager
UX strategist
UI design
// client
Cyrano.ai
// summary
I led a team of six talented students to design and build a customer service demo that would provide helpful, actionable data to its users.
// problem statement
Cyrano combines artificial intelligence with emotional intelligence to help users have more natural conversations — even when they’re not face-to-face. They already had a case study for how it could improve car sales, but they wanted a prototype to show how it could improve customer service as well.
// project goals
Identify the pain points and needs of ‘live chat’ customer service agents
Design the potential ways Cyrano could address those pain points to showcase to investors
Visualize the data in an actionable useful way to the agents, who often don’t get extended training of their tools
Design and build the functioning prototype in 20 weeks for Cyrano to display on their website and showcase to investors
// ux methods
Since Cyrano wanted the demo to be system agnostic, we focused on modularity to let potential investors envision the system customized to their needs.
We performed stakeholder interviews with Cyrano and their potential investor’s customer service management. We created personas, user stories, and storyboards surrounding our users and their needs. We went from paper sketches to InVision prototypes to high-fidelity mockups in Sketch, getting feedback from stakeholders and the system’s users at every step of the way.
// key focus areas
What are our customer service agent’s favorite and least favorite parts of their jobs?
What are some of our agent’s customers’ pain points, and how can we alleviate them using Cyrano’s technology?
What kind of our metrics do potential investors care about and want to see?
How can we make Cyrano’s data actionable and helpful to our agents?
How can we show Cyrano’s value to potential investors without lengthy explanation?
// ux solutions
freedom to choose how much data is being analyzed
A big challenge was how to visualize a person’s emotional change over time. In most cases, we found our agents were only interested in data from a the last few sentences, but occasionally wanted the freedom to look farther back.
Here, I pushed to let the slider count words rather than messages — this was to account for people with different messaging styles. We found from our research that some tended to send long paragraphs all at once, where as other sent their messages a few words or small sentences at a time.
Visualizing a conversation’s passage through time
We found that our agents were often talking to multiple people at once, and sometimes needed to scroll back up to reference something the customer said early on. We ended up taking a UI underdog and giving it a unique makeover: the scrollbar. Inspired by frame scrubbing for videos, we wanted a way to glance at the entire conversation at once — without it overwhelming your screen.
The bubbles correspond to the messages’ length, creating a visual representation of the conversation and which part you’re looking at. This will help reduce cognitive load for our users and give them a better mental model of where they are in their conversation.
Showing off how Cyrano can help your business
We knew that Cyrano wanted to keep their demo platform agnostic. Instead of trying to get super specific to one company, we opted for a sampler tray — and analyzed data using 3 different algorithms to show off Cyrano’s endless potential.
One such algorithm was the Learning Styles algorithm. Some people prefer to learn in different ways, so this may help your agent decide if their customer would prefer a video over a written guide; just one of the many datapoint Cyrano could cater to the company. We made sure this was easy for the agent to understand and act upon by coloring and labeling the graph, and adding additional word prompts below to get the agent started.
// outcome
Cyrano.AI’s CEO (Scott Sandland) and CTO (Dan Paris) are currently using our demo to showcase Cyrano’s capabilities to investors. See a video Scott made using our prototype here.
What we learned going forward
My team and I learned so much about information overload. Given the chance, we would have liked to spend more time meeting with and studying customer service agents and diving even deeper into their needs and goals. We had a so-what moment halfway through the project when we realized the data displayed wasn’t actually that helpful to the agents. We ended up pivoting and changing the entire right side of the system to make it easier to digest and more useful for our end users. We learned how to push back on our stakeholders, standing by our design choices using heuristic principles and usability tests to back up our decisions. We learned to not be afraid to point out any potential consequences of their requests, like hiding most of the information within menus upon submenus. I got a lot of experience in project management, UX/UI design, and strategic UX thinking — ping ponging between the stakeholder’s needs, the investor’s needs, and the theoretical agent’s needs. Ultimately, this project taught me to always keep the user at the forefront of the design before it can slip away from you.
//feedback
““Nessa is a pleasure to work with. I was often impressed with how quickly she could iterate on design ideas and mock up what was being discussed in real time. She then had the ability to turn it around into high res mock ups and provide options that showed real thought going into the UX. Nessa understood her role on the team and worked well with the other people incredibly well.””
““Nessa is truly an insightful problem solver. With her in-depth understanding of UX theories and methodologies, Nessa is able to produce consistent and thoughtful design solutions that are context-specific. I love working Nessa especially because of her incredible work ethic. She can rapidly adapt to changing requirements and move her designs forward using the best practices, instead of opting for quick and easy fixes.””