Speakalytics (September 2017)
Role: UI Design Contractor for Speakalytics
Timeline: October 2017
Key Activities: Requirements Gathering, Brainstorming Activities, Whiteboarding, Wireframing, UI Creation
TL;DR: As a part of a UI design contract, I worked closely with the co-founder/lead engineer on Speakalytics in order to brainstorm and re-create UI to improve the overall user experience. I focused on developing a calling interface page and a business monitoring page.
Speakalytics is a platform that uses Natural Language Processing (NLP) to analyze the audio content of sales calls to improve the effectiveness of sales teams. Applying artificial intelligence to train salespeople can cut down the time and resources to get the team to the same level. I worked with the co-founder and lead engineer to complete this project.
As a part of a freelance contract, I was tasked with designing the second iteration of the main call interface that users would interact with. The stakeholder requested a design that would more clearly suggest action for their users and help them to understand where they could improve in the future. The goal of the design was to create an interface that clearly communicated feedback about each call (i.e. what went good or bad), highlighting key business opportunities.
The process began with a requirements gathering meeting, which was followed up with a brainstorming meeting. Working closely with the stakeholder, I focused on creating an intuitive way of demonstrating the business opportunities visually. Together, we created a timeline-style sketch to depict the expected user flow, which would later evolve into the final interface.
After the brainstorming, I started to generally layout how the components would look in relation to one another with a few sketches before jumping into Sketch. This involved breaking down all of the individual components of the interface and identifying which pieces were most important and how that affected their placement in the UI.
We wanted the player to be at the forefront, so that the user could play the audio while looking at information throughout. Beneath that, we placed the graph that followed a waveform that would visually show where topics were discussed throughout the conversation and where business opportunities appeared. This is important to understand how the call breaks down and understand the structure without having to listen or read the whole conversation. Lastly, there’s a table to get more detail about individual business opportunities.
With the user goals in mind, I designed an interface in which the user could click on different business opportunities throughout the call and listen to them specifically. These calls were organized based on the different topics that appeared throughout the call. I created different states to emphasize how successful a call was and the specific items that determined the success of a call.
You can see the final mockups below:
The stakeholder also provided requirements for a new page for the app called the Business page, which would be used by managers to get a sense of what the calls were about, and other important insights about the sales team as a whole. I developed a mockup of how this information could clearly and easily be laid out:
Following the implementation of the call page that I worked on, Speakalytics entered a startup accelerator in Charlotte, NC. They would later pivot to focus on customer service calls, since there was a larger base of calls to pull from in most companies. Personally, this was a great learning experience and I had a chance to work closely with an absolutely brilliant engineer/co-founder.
I learned a lot in a short period of time. I enjoyed working closely with an engineer and I felt that involving him throughout the brainstorming process as a form of information gathering was a valuable methodology in creating quality designs, since it increased the stakeholder confidence in the process but also made it easy to understand the scope of the project.
I also found the immense value in working with someone who was acutely aware of his lack of experience in design and UI since it made the entire process of making decisions and handing over designs extremely simple. Essentially, he was the ideal client and working with him helped me to understand how I could be more accommodating when working with others.