VoIP Design, Design System & Application Redesign
At AgencyMVP I was coming on as the first design hire of a company that had a product but just received funding. They had a vision and an ambitious road map so I needed to hit the ground running.
One of the bigger issues with the product was with the different sources of data and how they flow into the application. Every insurance carrier has different fields, lead sources have different fields as well requiring integrations, and none of it really matches what existed in the current application. There was also another big issue with additional fields where the data wasn't being stored at all.
Integrations take time, so while that work was happening, we needed something that could work now, which we decided on .csv uploads. To allow users to enter multiple entries at once, for existing but especially new customers, that they could match up to our data structure, or most likely, we could have one of our customer service members help with the connection to prevent issues.
After the user uploads the initial file, they can match up the csv columns to our data fields for a smooth integration. Obviously not a great solution long term but something we could accomplished sooner.
The current version of the quoting screen had some issues. While the data might have been correct, the amount of space taken up and the visual hierarchy made the screen a bit of a mess and user feedback validated that sentiment.
We went through a number of different iterations. I wanted to drastically trim down the amount of content visible on the screen but our CEO was adamant it was necessary so we tried a number of different options. Here is one with a slide-out quoting modal. Also, including some new functionality revolving around managing touchpoints and follow-ups.
Another more fleshed out iteration, with a single page member experience, with a prominent contact history on the left, and member/quoting management in the main column. This also shows a call in progress so a user can be working with a customer while completing the quote process.
And here is the quote creation experience, opening into a full page modal. We ran through 4-5 completely different versions and tested with users but had to jump to another project before getting this one complete.
One of the issues with these versions and elsewhere in the application was the lack of a tertiary button style. The dark blue was a little too prominent in some areas for secondary actions like adding a member or vehicle. The color palette could have done better with more than blue and white.
One of my tasks was to build out a complete voice over IP (VoIP) phone system to be implemented into the existing application.
For a minimal viable concept I wanted to start with the essentials, so the basic sidebar design and the calling functionality. I knew that would require the most testing so we planned on building that first.
One of the major first hurdles with this project was the new feature needed to work in the current version of the application built on an older front-end. The front-end was on the roadmap to be replaced along with a redesign, yet this VOIP product needed to launch first, so everything needed to work from a style perspective but also be something that could work in the existing app without having to be rebuilt for the new version. So along with the sidebar and flyout tab menu, the setup screens could also be overlaid on the existing application.
The image below shows some of the features for the phone functionality, such as soft and warm transfers, call recording as well as the various states of an incoming and outbound call.
A quick style guide and component library I put together for all of the form components, tables and basic interactions. Today it's a little easier to start with some prebuilt components in Figma and apply the brand styles and make edits accordingly but for this it was all built from scratch, using existing brand colors but for an improved look and experience, as well as speeding up the development process.
