GigRadar CRM

Role
Product Designer
Type
Full-time
Client
GigRadar.io
Platform
Web app, desktop and mobile
Timeline
Jan 2025 to Sep 2026

TheProblem

Managing several Upwork accounts meant constantly switching accounts or leaving the browser to check alerts and team messages. Replies arrived in different places, so the team could not see the client, job and conversation together when it was time to respond.

That fragmentation broke the continuity from first reply to closed deal. Responses were missed, follow-ups depended on memory, client interest was difficult to compare, and nobody had one view of each lead's stage or the performance of the whole pipeline.

TheSolution

Put every Upwork account in one inbox where a reply lands in seconds, with the client, the job and the stage on screen before anyone types, so the first reply goes out in minutes rather than hours and the AI can send it in the agency's voice when nobody is awake.

Make the pipeline a by-product of the conversation: ten stages, private notes, meetings booked in the chat, and a dashboard the whole team reads, on a component system that lets settings, the paywall and mobile ship from the same parts.

TheProcess

Design
Step 01

Brief

A CRM for agencies running 2 to 30 Upwork accounts, and the single profile that leaks the same way. GigRadar already wins them the reply; the CRM had to be where the reply becomes a deal.

  • 2 to 30 accounts
  • One inbox
  • AI first reply
Step 02

Research

Ten long term agencies were moved onto the CRM and one number was tracked: first reply time. One inbox and an alert on every message took it from about 4 hours to about 44 minutes by hand, and the interviews set the rest of the requirements.

  • 10 agency pilot
  • First reply time
  • Cohort of 59,339 proposals
Step 03

User flow

A reply lands, Laziza or a teammate answers, a call is booked inside the chat and the stage moves. Leads that say not now go to Contact Later with the next message scheduled, and come back when it is time.

  • Reply to booked
  • Ten stages
  • Revive the other 93
Step 04

Design system

One blue for every action, SF Pro Display from 24px headings to 12px captions, a neutral ramp for text and surfaces, and five pale tints that carry the stage without competing with the accent.

  • Variables
  • Stage tints
  • 4 8 16 32 spacing
Step 05

Components

Nav items, list rows, settings cards, plan cards and badges drawn as component sets with every state, so the inbox, settings and paywall are assembled from the same parts.

  • Default, hover, selected
  • Plan cards
  • Stage badges
Step 06

UI design

Four surfaces on one shell: the three column inbox, the dashboard with its funnel and task feed, the settings rooms, and the paywall, each with locked, loading and mobile states.

  • Inbox
  • Dashboard
  • Settings
  • Paywall
Step 07

Go to market

The file carries a three tier ladder, Basic, Pro and Unlimited, with a trial and an API key rent. The product launched as one plan, GigRadar CRM Pro, with a 10 day trial and a discount for agencies bringing their own key.

  • Three tiers designed
  • One plan shipped
  • 10 day trial
Build and Development
Step 08

Auth

Each teammate connects their own Upwork account through OAuth 2.0 in one of ten slots. The safety notice sits beside the button, because logging into a colleague's account is what gets agencies suspended.

  • OAuth 2.0
  • Ten slots
  • Official Upwork API
Step 09

Ship

Live on gigradar.io with 43 agencies in the beta. A reply lands in 1 to 3 seconds through Business Manager and the first connect backfills 90 days of history.

  • 43 agencies in beta
  • 1 to 3 second sync
  • 90 days backfilled

DesignSystem

The CRM is read for hours at a time, so the system is tuned for long sessions rather than a first impression: one interactive blue, SF Pro Display at four sizes, a quiet neutral ramp, and stage tints pale enough to sit under a dense list.

Typography

Heading H4

Leads Dashboard

SF Pro Display · 1.5rem / 24px · Regular, -0.8 tracking

Paragraph L

Your Funnel for all team

1rem / 16px

Paragraph M

Client & Job Details

0.875rem / 14px

Paragraph S

Chat started on April 25, 2025, at 18:20

0.75rem / 12px

Colour

Cerulean Blue 600

#216BEF

The one interactive blue, every action resolves to this

Badge

#378AFA

Text

#2D323E

Description

#525F7B

NavBar text

#6C82A4

Background

#F5F8FF

Background 2

#E7EFF6

Border

#C3CBD3

Laziza

#FA8C16

Success

#00B67A

Meetings

#27AE60

Schedule messages

#9B51E0

Stage: New

#DFEFFF

Stage: Interested

#D9EFEE

Stage: Contact Later

#E3E9EF

Stage: Qualified

#BEF2C7

Stage: Not Interested

#F7B8B8

Spacing

4pxXXS
8pxXS
16pxM
32pxXL
12pxRadius M

ClientFeedback

I had the pleasure of working with Joseph for almost 2 years at GigRadar. His thoughtfulness and eye for aesthetics result in products that are pleasant to use, while his R&D approach and design system result in designs that are pleasant to work with.Joseph's design has given our product a new face, and his design system set a new standard for all future UI work.Salman Rizqi FatihSalman Rizqi FatihGigRadar CRMView on LinkedIn
GigRadarGigRadar CRMWemmGoPeta Daerah TrackingJumpponyBeriHarusFocusRentalin

What's upOn Socials

An aircraft wing above a bank of cloud
Playing five-a-side football on a floodlit pitch
Standing above the clouds at Mount Bromo at sunrise
A black carbon padel racket held up against the court net
Sunrise over flooded rice terraces in Bali

Follow along on social media