Role: UI Design Contractor for Speakalytics
Timeline: October 2017
Key Activities: Requirements Gathering, Brainstorming Activities, Whiteboarding, Wireframing, UI Creation
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. I worked with the co-founder and lead engineer to complete this project.
As a part of a freelance contract, I was tasked with redesigning main call interface that users would interact with. The stakeholder requested a design that would 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.
I was designing this interface for sales people who are familiar with CRMs like Salesforce. Unfortunately, I had to rely on my client’s experience with these users to inform most of my decisions.
Since this was a quick redesign for the UI, there was not a full design process. There was simply requirements gathering, brainstorming, wireframing, mockup design and iteration. This left no room for research and the team was simply me and my client.
How Do We Emphasize 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.
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.
The player was placed at the forefront so that the user could play the audio while looking at information throughout. Beneath that, we placed the graph to show where topics were discussed throughout the conversation and where business opportunities appeared. 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 with different states to emphasize how successful a call was and what made that call successful.
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.