AgencyMVP

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.

Team
  • Founder
  • CTO
  • 2 Engineers
My Role
  • Conceptualization
  • Interface Design
  • Usability Testing
  • Dev Handoff
Duration
  • 2 months

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.

communication drawers

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.

full screen modal

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.

VoIP answering and receiving calls
Design System & Style Guide

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.

web style guide components
Back to top