company portal

Monster UI application that allows employees to access personalized communication media and settings under their company's KAZOO account.

+
Role
Design Lead
Responsibilities
  • Information Architecture & Planning
  • User Experience
  • Interface Design

[OVERVIEW]

I was tasked with creating an experience that allowed 2600Hz customers (and their customers) to access all work related communication channels in a single, unified environment. Up until the introduction of this app, 2600Hz's suite of telecom apps—known as Monster UI—catered mainly to system or account admins and was largely focused on configuration and management. MUI Company Portal would be the first app that could be accessed by all user profiles (System Admin, Account Admin, and end-user) and would include account details such as call history, voicemails, numbers etc. In addition to the defaults, 3rd party integrations such as messaging (slack , IRC...), email (gmail, outlook...), and company social media feeds (twitter, facebook...) would be available. The main objective was to create the foundation of an app that could continue to scale while allowing for any number of API-based integrations.

[ARCHITECTURE & EXPERIENCE]

After deliberating with other key stakeholders of the 2600Hz product team, we had a base feature-set with technical requirements specified. Features and experiences were mapped to user flows/tasks/objectives, and it was time to start exploring relationships between information and structural hierarchy. My initial focus was on the navigation and dashboard view as these touchpoints would see the majority of daily interaction.

Initial whiteboard brainstorming, information mapping, and block framing for navigation and dashboard
whiteboard planning for company portal app
information architecture and mapping for company portal app
Intitial blockframing iterating on the navigation heirarchy

With structural hierarchy and navigation patterns in place, it was time to wireframe the app in its entirety. This phase focused on fleshing out the full experience for each task/flow/feature and associated views. Using the completed wireframes, a low-fidelity prototype was presented for discussion amongst other project stakeholders.

Wireframing the entire app
High-fidelity wireframe or the dashboard view

[POLISHING THE INTERFACE]

After receiving input and suggestions from my team, I had some revisions and updates to make. With those implemented, it was time to stylize the interface. The majority of focus at this stage was on newly introduced elements that were not already a part of the MUI Library.

NOTIFICATIONS BARReal-time notifications for preferred channels. Shows basic account events by default, and scales as 3rd party integrations such as messaging services(IRC clients, Slack, etc.) and email(Outlook, Gmail, etc.) are enabled on the account.

intitial blockframing for navigation heirarchy

DIRECTORY & SETTINGS DRAWERSThe implementation of side-drawers allows for access to universal components regardless of the user's current location within the app.The company directory allows for real-time communication between employees. Presence(BLF) indicators let co-workers know who is on a call or away, and Click-2-Call allows users to make a phone call with the click of a button.

Side-drawers for Company Portal
Company Portal home dashboard
Company Portal settings side-drawer
Company Portal Voicemails
Company Portal devices and numbers
Company Portal conferences
Company Portal contacts

[PROJECT STATUS]

This application is currently in the development phase, and is scheduled for a Q2(2018) private alpha release to trusted clients for testing and feedback.

2600Hz Team Credits
  • Chris Kerber (Project Management)
  • Karl Anderson (CTO)
  • Jean-Roch Maitre (Front-end Lead)

what's this!?

You wouldn't visit a museum and view the work on display through a small device... why view a portfolio that way?

Snarky jokes aside...a mobile experience is coming soon.In the meantime, here are some things you can view until you get to a larger screen: