Style Guide & Application Redesign
At AgencyMVP I was coming on as the first design hire of a company that just received funding. They had a vision and an ambitious road map so I needed to hit the ground running. My first task was to build out a complete voice over IP (VoIP) phone system.
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.