Speakeasy
Speakeasy is a conference calling web application made for the performance-driven inside sales professional. It helps sales execs streamline their workflows across multiple areas of their domain, including calendaring, meeting prep, voice conferencing, note-taking, leveraging data insights, and logging captured data from their calls. Most of the products in this space do a subset of the aforementioned- the challenge here was to include multiple facets of functionality in a single interface. The result of Speakeasy's innovation is a user workflow that saves time, eliminates friction and speeds up the average sales cycle.
User Research
We crafted a generalized user journey based on recurring patterns (mostly qualitative feedback) we gathered from a set of 7 interview subjects pulled from 5 different customers with differing workflows when performing a sales call. We distilled the insights from this research and arrived at a set of phases and steps across each journey, some of which we visualized for easy reference and alignment across design, product & engineering. Everyone shared this same basic story, and we all focused on serving the same set of user needs over the course of a call.
Low-Fidelity Wireframing
We examined a variety of screen layouts across key parts of the user journey. This helped us visualize the experience as a whole, from end to end during a typical sales day. We reached a point where we could tell how making a change in one part of the UI or UX would impact other parts, and whether tradeoffs should be prioritized, backlogged, or scrapped for whatever reason. Decisions were usually based on what actions we thought were most important during key phases & moments of the call. We examined questions about what actions & information to prioritize, and what to tuck away.
We ideated more than 50 layouts during this phase, here is a glimpse from the in-call experience:
Demo of our prototype showing the flow of starting a sales call
High-Fidelity Mockups
After we settled on which layouts we thought would be optimal, and validated some of those decisions through additional customer feedback, we set out to evolve them into high-fidelity mockups so that we could answer more detailed questions about user interactions & visual design.
Here are some from the out-of-call experience (before a user starts a sales call):
And here are some from the in-call experience:
Mobile app
The mobile app is a companion to the web product, which focused on the needs of an on-the-go sales professional, as opposed to the one sitting at his or her desk. Primarily, the user’s goal was to help sales reps join their upcoming calls on time and without hassle. Also to encourage more engagement on the call using in-app features like chat and screen sharing. The app was featured in the Productivity section of the Apple app store in July 2016.
Here's one of our board members talking about "contextually aware" mobile apps, using Speakeasy as an example.
High Fidelity
A lot of the low-fidelity designs were done on whiteboards. Once we were happy with the user stories in low-fidelity, we listed out critical moments and transitions we knew users would experience frequently, then mocked them up and sometimes prototyped them:
Prototyping
We identified certain important user interactions, moments and transitions and prototyped them for the dev team whom we worked with closely to achieve the desired result:
Logos & Brand Guidelines
We created guidelines on logo usage, colors and type for our web presence & social media.
