Skip to content
Prashant Kumar Singh
Book a call

Freelance project · SaaS

CallConnect

Make, take and route business calls from the browser

CallConnect is a cloud calling system that lets teams make and receive business calls in the browser, route incoming calls and keep every conversation logged. It’s for support and sales teams who need a phone system without desk phones or complex set-up. I designed the dialler, call handling, routing and call history, and released the design as an open community file.

Role
Product design
Type
Freelance
Platforms
Web
Scope
UX, UI design

01The problem

What needed solving

Business phone systems are usually configured by one admin and used by everyone else, and both sides find them confusing. Agents need calls to be quick and never interrupted, while admins need to set up routing without a technical background. CallConnect had to serve both in one product.

Who it’s for

  • Support and sales agents

    Handle calls quickly and keep notes without switching tools.

  • Team leads

    See who is available and how calls are moving through the team.

  • Workspace admins

    Set up numbers, hours and routing without technical help.

02The main flow

Handling an incoming call

The moment in blue is the one the whole design is built around.

  1. 01

    Call rings in browser

  2. 02

    See caller context

  3. 03

    Answer and talk

  4. 04

    Transfer or resolve

  5. 05

    Wrap up with notes

03Structure

How CallConnect is organised

Everything has one home. Getting this right first keeps every screen simpler.

Calls

  • Dialler
  • Call bar
  • Incoming call
  • Voicemail

History

  • Call log
  • Call details
  • Notes and outcomes

Team

  • Availability
  • Live calls
  • Queues

Admin

  • Numbers
  • Business hours
  • Routing rules
  • Users

04Key decisions

Choices that shaped it

What I considered, what I chose, and why.

Decision 01

A call bar that never leaves

In many web phone tools, moving to another page minimises or hides the active call, and agents lose track of hold or mute.

Considered

A full-screen call view the agent has to leave to look anything up.

Chosen

I designed a call bar docked to the top of the app on every page, holding the caller, timer, mute, hold, transfer and end.

Why it works

Agents often need to look up records mid-call, so the call has to follow them. It takes a strip of screen while a call is live and collapses when idle.

Decision 02

Wrap-up before the next call

If the next call can ring straight away, notes and outcomes get skipped and the call history turns thin.

Considered

A separate notes page agents can fill in later.

Chosen

When a call ends, the call bar becomes a short wrap-up panel for outcome, notes and follow-up, and the agent marks themselves ready when done.

Why it works

Capturing details while they’re fresh gives the team a usable history. It adds a short pause between calls, which team leads can tune in settings.

Decision 03

Routing rules as plain sentences

Routing set-up is usually a maze of nested settings, and admins can’t easily tell what will happen to a call.

Considered

A node-based visual flow builder.

Chosen

I designed routing as a list of readable rules, such as “During business hours, ring Sales; if no one answers, send to voicemail”, each built from simple dropdowns.

Why it works

Sentences can be read and checked by anyone on the team, not just the admin who wrote them. A visual builder offers more power, but the sentence form covers the common cases and stays readable.

05What’s inside

Key features

Browser dialler

Make and receive calls in the browser, with no desk phone.

Persistent call bar

Mute, hold, transfer and end a call from any page.

Team availability

See who is free, busy or wrapping up at a glance.

Plain-language routing

Set routing rules that read like sentences.

Call history and notes

Every call logged with its outcome, notes and follow-ups.

06Outcome

What was delivered

Delivered

  • A call state map covering ringing, hold, transfer, missed and wrap-up
  • Dialler, incoming call and persistent call bar designs
  • Call history and call detail screens with notes and outcomes
  • Admin screens for numbers, business hours and routing rules
  • A component set with every call state, released as an open community design file

What I learned

  1. 01

    Mapping every call state before drawing screens kept the design consistent once things got complicated.

  2. 02

    Admin screens deserve the same care as the main product, because a confusing set-up is felt by every caller.

More work

All work

Freelance project · SaaS

Course Marketplace

Find the right course fast

LinkSaver: Smart resource manager

Own product · SaaS

LinkSaver

Smart resource manager

Freelance project · SaaS

LinkedIn Lead Enricher

Prospect lists in seconds

Next step

Tell me what you're building.
I'll tell you how I'd ship it.

Pick a time that suits you. You'll leave the call with a clear next step, whether we work together or not.

Book a free call

Free · 30 minutes · No commitment

Prefer email? prashantkumarsingh.work@gmail.com

Book a free 30-min call