Reachable
Don’t describe the value — make it visible.
Reachable pools a team’s collective rolodex to find warm referral paths into sales targets — who on my team already knows the person I’m trying to reach. It worked well as a Salesforce plugin, but its standalone web app was a cumbersome afterthought. My job was to make the standalone product stand on its own — and the hard part was making a tangle of human relationships legible on a single screen.
The best idea was locked in Salesforce.
Reachable pools a team’s contacts to trace warm referral paths into sales targets — the bet that your colleague’s old classmate beats your assigned territory. But it was built first as a Salesforce plugin. The standalone app was an afterthought, and it showed. If you didn’t live in Salesforce, Reachable’s best idea was a door you couldn’t open.
Considered.
The integration got all the care — where the product actually shone.
Bolted on.
Cumbersome and genuinely hard to use — a consolation prize for people without Salesforce.
A product that stands on its own.
Easy to use, easy to understand — good enough to be a product, not a fallback for people who don’t have Salesforce. That resolved into two outcomes the business cared about.
Deeper adoption
Existing customers actually reaching for the standalone platform — not just tolerating it alongside the plugin.
A new segment
A credible product to put in front of an entirely new standalone customer base that never touches Salesforce.
How much of the alpha could we salvage?
Rebuilding is expensive; salvaging is cheap. So I started with an honest audit of what was already there. The answer was uncomfortable — and it reframed the entire project.
~0% of the core UI was reusable.
The connections — the who-knows-whom mapping that is the product — were the exact part that didn’t hold up. I couldn’t reliably tell how two people’s relationship was defined on screen.
From clean-up to redesign.
Not “tidy the standalone app” → redesign the thing it’s actually for.
Making a tangle of relationships legible at a glance.
The central challenge was representing complex, multi-hop human connections so an ordinary user could read them instantly. The case I kept in front of me:
One target, several intermediaries, several paths — and up to five channels per tie (Gmail, LinkedIn, Facebook, an email thread). A single pair might be connected five ways.
Proximity is the hero
Make closeness through the network the hero, not physical territory.
Pooled data is the unlock
One person’s contacts useful to the whole team — without feeling like surveillance.
Instantly recognizable
If a user has to think hard to read a path, the path is worthless.
From a vertical scroll-log to a comparison-first canvas.
I started where a lot of people start with relationship data: a scrollable, down-the-page view — almost like reading a log of how two people were linked. Thorough, and miserable. You couldn’t hold more than one connection in your head, and comparing paths meant scrolling back and forth.
Scrollable log
Thorough — and miserable. One connection at a time; compare by scrolling.
Horizontal canvas
You → target, paths between. Several routes visible at once, comparable at a glance.
That one change — from a vertical log to a horizontal, comparison-first canvas — let a user take in several routes at once and immediately see which colleague offered the strongest way in. It’s the spine of the whole redesign.
The two mirror-image cases that shaped the UI.
To trust the layout I had to know it could hold every real situation. The two cases that shaped the interface most were the mirror-image pair — each needed its own visual treatment, so users never confused “many roads to one door” with “one person, many doors.”
Several of my contacts all route to a single target.
The canvas fans the intermediaries out on one side — every warm path to the same door, laid side by side so you can pick the strongest.
One contact is a hub who knows several of my targets.
The mirror layout — one person on the left, the targets they can reach fanned out on the right — so a single well-connected colleague reads as the asset they are.
Four surfaces that made it a real product.
From there the design filled out into a real product surface rather than a diagram — a filtering layer, a relationship-strength panel, a considered contact card, and the unglamorous error states that decide whether a tool feels trustworthy.
Channel and relationship, as first-class filters.
A filtering layer turned an overwhelming graph into a workable shortlist — narrow 20,000 connections by channel (Outlook, LinkedIn, email, shared groups) and by relationship type (board, C-level, executive) — so a rep starts from “the paths that matter.”
Strength is the whole point of a warm intro.
A relationship-strength panel opens off any path: contact details, a weak-to-strong read in both directions, and recent work history — the context a salesperson needs before spending social capital on the ask.
The atom the whole map is built from.
A deliberate exploration of the contact card itself — person, title, and connection-channel density in one glanceable unit — because every path on the canvas is just these cards, chained.
The unglamorous cases that build trust.
Real error and warning states — a partial-results warning, a genuine empty state with a way forward, a failed-to-load recovery — designed as first-class states, not afterthoughts, so the standalone app behaved like a finished product. A referral tool that fails silently is worse than no tool at all.
Where the wireframes landed: the shipped UI.
The wireframes resolved into a hi-fi product built on the Salesforce Lightning Design System.That wasn’t an aesthetic choice — the internal Reachable tool already ran on Salesforce UI, so building the standalone platform on Lightning let us reuse patterns, components, and engineering effort instead of inventing a second design language. The connection canvas, the filter panel, the relationship-strength record, and the error states all re-expressed in real SLDS.
The comparison-first canvas, in Salesforce Lightning.
The same spine — you on one side, the target on the other, warm paths between — rebuilt with SLDS avatars, cards, and brand-blue connectors, plus a “strongest path” call-out and an intro-request action. It reads as a native Salesforce object, because effectively it is one.
Five screens rebuilt on the Salesforce Lightning Design System — the shipped fidelity above the grayscale wireframes. Reusing SLDS meant the standalone platform inherited Salesforce’s accessibility, data-table, and record-page patterns for free.
The honest asterisk on the whole project.
The premise — that a market existed for a standalone Reachable — was an assumption, not a validated fact. It was born as a Salesforce add-on; “make it standalone” was a door the business wanted to open, not one customers had knocked on. Confirming it sat with marketing, outside my scope — and though I asked to join those conversations, it never materialized.
The deliberate call: a product owner with a clear, opinionated vision made it workable. I designed against his requirements knowing they weren’t backed by data — and named the gap. On a short engagement, you pick your battles and design the best version of the bet you were handed.
From afterthought to a product worth showing.
The redesign reframed the standalone platform around its real value — comparing referral paths at a glance — and gave it the first genuinely considered UX it had ever had, replacing an alpha that even I couldn’t fully parse when I started.
The engagement had target KPIs (more standalone adoption, new standalone customers) but no measured results were captured, so I don’t quote numbers.
Make the value visible. The standalone platform was never a company priority, so support was hard to win in the abstract. Once I showed the work, people saw the value they couldn’t picture before. When a project is fighting for oxygen, show it — don’t describe it.
Know which battles to fight. Not every gap is yours to close in a single engagement. Recognizing the market-validation question as real but out of reach — and designing well against a clear vision while flagging the risk — is what let the project actually ship.
Make the value visible rather than describe it.
The spine of it was a single move: turning a vertical log of relationships into a horizontal, comparison-first canvas — so the strongest way in is obvious at a glance. Reachable’s standalone platform got its first genuinely considered UX, credible enough to put in front of new, non-Salesforce customers.