A nationwide lawyer-to-lawyer referral network I helped start in 2022. I built the brand, turned our whiteboard sessions into the product design, and built and still own the React frontend.
View a live code example ↓
Overture is a lawyer referral network. When a firm takes on a case outside its expertise, instead of turning the client away it can hand the matter to a trusted colleague through the platform and ethically share the fee. It is a two-sided product: the attorney sending a referral and the one receiving it both have to trust it completely, and their shared client has to be able to follow along without ever seeing the machinery.
I have been with the parent company since 2018. In 2022 the leadership wanted to test a new idea, and I was the design and frontend half of a five-person founding group, alongside the CEO, the VP, the director of technology, and one backend developer.
I built the brand from nothing. I ran our whiteboard sessions into UI mockups, walked the team through several rounds, then built the entire React frontend from my own specced designs. I have owned that frontend ever since.
The referral lifecycle is the piece I have iterated on the most. A single referral moves through many states and passes between two attorneys who have never worked together, while their shared client watches from outside and needs to know where things stand without a tour of the platform.
Overture only earns when the work stays on the platform, so the flow needs guardrails against a quiet handshake deal offline. Designing something that keeps three parties oriented, moves the referral forward, and protects the business model without feeling like a cage is an awkward problem.
More recently the role stretched into growth. I have built technical SEO and content campaigns aimed at the different reasons an attorney joins: some want a professional community, some want to send referral work, some want to receive it.
One directory SEO initiative I proposed and built took the site from roughly 50 organic search clicks a day to around 550, and it now brings in a steady flow of new signups on its own.
Owning one product for this long changes how you work. You stop shipping things you will regret, because you are the one who has to maintain them. A referral network lives or dies on trust, so the frontend has to feel dependable first and clever second.
Before any of the frontend existed, Overture was a brand style guide: a type pairing, a deliberately restrained palette, and a logo mark built from a simple geometric lockup. Two motion studies below came out of that same design pass: the preloader, still running in production today, and a network globe that once ran on the marketing site's About page.
Logo process sketches
Final logo
Typography & color
Overture
DM Serif Display, for headings
Overture
Gilroy, for body copy and UI
Color was deliberately left out of the UI system. It was reserved for photography, not chrome.
A motion aesthetic that ran on the About page for a while, hand-written with custom graphics, HTML, JS, and SCSS. It's no longer live, but this is a capture of it in motion.
The trusted-network map mentioned above never shipped as a win, but it's some of the most involved frontend work I did on Overture: an animated US map, live state highlighting, and an info panel that tracked mouse position and network data at once. Since the original relied on Overture's live Redux store, what's mounted below is a decoupled rebuild running on fake data, fed by the same components and styles shown in the tabs underneath it.
The animated map is disabled on smaller screens. It's interactive on desktop, the code driving it is below.
import React, { useState, useEffect, useMemo } from "react";
import Background from "./Background";
import CAMX from "./CAMX";
import USA from "./USA";
import InfoBox from "./InfoBox";
import StatCounter from "./StatCounter";
import { useSelector, useDispatch } from 'react-redux';
import { useMediaQuery } from 'react-responsive';
import Loading from "../../../components/Loading";
import { setMemberStatesToUpdateOnMapAction } from "../../../redux/actions/network";
import { Link } from "react-router-dom";
import usStateData from "./USA/USState/state-keys.json";
const CoverageMap = ({
loading,
}) => {
const dispatch = useDispatch();
// don't use useSelector(state => state.network), otherwise this rerenders every time there is a change in
// any property of state.network. We only need to update when the properties we need to know about update.
const networkMembers = useSelector(state => state.network.networkMembers);
const disableAnimation = useSelector(state => state.network.disableAnimation);
const networkStates = useSelector(state => state.network.networkStates);
const networkStatesCount = useSelector(state => state.network.networkStatesCount);
const memberStatesToUpdateOnMap = useSelector(state => state.network.memberStatesToUpdateOnMap);
const networkMembersAdded = useSelector(state => state.network.networkMembersAdded);
const { user } = useSelector(state => state.user);
const [ prevNetworkMembers, setPrevNetworkMembers ] = useState(networkMembers);
const [ currentStateCoverage, setCurrentStateCoverage ] = useState(false);
const [ statesCount, setStatesCount ] = useState(0);
const isMobile = useMediaQuery({ maxWidth: 767 });
useEffect( () => {
dispatch( setMemberStatesToUpdateOnMapAction({
new: [],
existing: []
}) );
}, []);
useEffect( () => {
if ( networkMembers && networkMembers.length > 0 && networkMembersAdded.length > 0 ) {
if (networkMembers.length !== prevNetworkMembers.length) {
let networkMembersStates = networkMembers.filter(x => x.model_name == "NetworkMember").flatMap( y => y.practice_states);
let newStates = [];
let existingStates = []
const prevNetworkStates = prevNetworkMembers.filter(x => x.model_name == "NetworkMember").flatMap(y => y.practice_states);
const lastAddedNetworkMember = networkMembersAdded[networkMembersAdded.length - 1];
const addedPracticeStates = lastAddedNetworkMember.practice_states ?? [];
if (networkMembers.filter(x => x.model_name == "NetworkMember").length == 1 && lastAddedNetworkMember.model_name == "NetworkMember") {
newStates = lastAddedNetworkMember.practice_states;
}
if (networkMembers.filter(x => x.model_name == "NetworkMember").length > 1) {
existingStates = addedPracticeStates.filter( x => prevNetworkStates.includes(x));
newStates = addedPracticeStates.filter( x => !prevNetworkStates.includes(x));
}
dispatch( setMemberStatesToUpdateOnMapAction({
new: newStates,
existing: existingStates
}) );
setTimeout( () => {
setPrevNetworkMembers(networkMembers);
}, 3000 );
}
}
}, [networkMembers, networkMembersAdded]);
useEffect( () => {}, [networkStatesCount]);
return (
<div className="coverage-map">
{ loading &&<Loading visible={true} variant="mini-centered" /> }
{ !loading &&
<>
{ !isMobile && <InfoBox /> }
<div className={ `coverage-map__globe ${ disableAnimation ? "animation-disabled" : "animate-in" }` }>
<div className="coverage-map__north-america">
<USA />
<CAMX />
</div>
</div>
<Background />
</>
}
</div>
)
}
export default CoverageMap;
import React, { useState, useEffect } from "react";
import usStateData from "./state-geometry.json";
import { useSelector, useDispatch } from 'react-redux';
import { setUserInnerCircleHoveredAction } from "../../../../../redux/actions/network";
import { classify } from "../../../../../utils/helpers.js";
const USState = ({id, name}) => {
const dispatch = useDispatch();
// don't use useSelector(state => state.network), otherwise this rerenders every time there is a change in
// any property of state.network. We only need to update when the properties we need to know about update.
const disableAnimation = useSelector(state => state.network.disableAnimation);
const networkMembers = useSelector(state => state.network.networkMembers);
const memberStatesToUpdateOnMap = useSelector(state => state.network.memberStatesToUpdateOnMap);
const currentState = usStateData.filter( x => x.id == id)[0];
const [ randomAnimationDelay, setRandomAnimationDelay ] = useState(0);
const [ isActive, setIsActive ] = useState(false);
const [ isExisting, setIsExisting ] = useState(false);
const [ key, setKey ] = useState(0);
const [ isAdded, setIsAdded ] = useState(false);
const animationTimeout = 3000;
useEffect( () => {
if ( memberStatesToUpdateOnMap ) {
if (memberStatesToUpdateOnMap.new && memberStatesToUpdateOnMap.new.length > 0) {
if (memberStatesToUpdateOnMap.new.indexOf(name) > -1 ) {
setIsAdded(true);
}
}
if (memberStatesToUpdateOnMap.existing && memberStatesToUpdateOnMap.existing.length > 0) {
if (memberStatesToUpdateOnMap.existing.indexOf(name) > -1 ) {
setIsExisting(true);
setKey(key + 1);
setRandomAnimationDelay(0);
}
}
}
}, [memberStatesToUpdateOnMap.new, memberStatesToUpdateOnMap.existing]);
const checkIfActive = () => {
if (disableAnimation) {
setIsActive( networkMembers.filter( x => x.practice_states !== undefined && x.practice_states !== null ).some(y => y.practice_states.some( z => z == name)) );
} else {
setTimeout( () => {
setIsActive( networkMembers.filter( x => x.practice_states !== undefined && x.practice_states !== null ).some(y => y.practice_states.some( z => z == name)) );
}, animationTimeout );
}
}
const getRandomInteger = () => {
return Math.floor(Math.random() * 1001)
}
useEffect( () => {
checkIfActive();
setRandomAnimationDelay(getRandomInteger());
}, []);
useEffect( () => {
if ( networkMembers ) {
checkIfActive();
}
}, [networkMembers]);
const handleMouseOver = () => {
dispatch( setUserInnerCircleHoveredAction( currentState.name ) );
}
const handleMouseOut = () => {
dispatch( setUserInnerCircleHoveredAction( null ) );
}
useEffect( () => {}, [disableAnimation]);
if (currentState) {
if ( currentState.id != "DC" ) {
return (
<path key={key}
onMouseOver={isActive ? handleMouseOver: handleMouseOut}
onMouseOut={handleMouseOut}
style={{ animationDelay: `${ randomAnimationDelay }ms` }}
id={ id }
d={ currentState.svgData }
className={` ${ classify("coverage-map__USA__state", {
"selected": isActive && !isAdded && !isExisting,
"added": isAdded && !isExisting,
"existing": isExisting,
})} coverage-map__USA__state--${ id }`} />
);
} else {
return (
<circle onMouseOver={isActive ? handleMouseOver: handleMouseOut}
onMouseOut={handleMouseOut}
style={{ animationDelay: `${ randomAnimationDelay }ms` }}
stroke="#ffffff"
strokeWidth="2.33731"
cx="975.29999"
cy="351.79999"
r="5"
className={` ${ classify("coverage-map__USA__state", {
"selected": isActive && !isAdded,
"added": isActive && isAdded,
"existing": isExisting,
})} coverage-map__USA__state--${ id }`} />
)
}
}
}
export default USState;
import React, { useEffect, useState, useRef } from 'react';
import { useSelector } from 'react-redux';
import { plurify } from "../../../../utils/helpers.js";
const InfoBox = () => {
const hovered = useSelector(state => state.network.hovered);
const networkStates = useSelector(state => state.network.networkStates);
const [attorneys, setAttorneys] = useState([]);
const [position, setPosition] = useState({ top: 0, left: 0 });
const [loadedImages, setLoadedImages] = useState([]);
const [ subText, setSubText ] = useState("");
const [ iterableAttorneys, setIterableAttorneys ] = useState([]);
const [ coordinates, setCoordinates ] = useState();
const infoBoxRef = useRef(null);
useEffect(() => {
document.addEventListener('mousemove', handleMouseMove);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
};
}, []);
useEffect( () => {
if ( hovered && coordinates && infoBoxRef.current ) {
positionInfoBox();
}
}, [hovered]);
const positionInfoBox = () => {
const infoBox = infoBoxRef.current;
infoBox.style.left = coordinates[0];
infoBox.style.top = coordinates[1];
}
const handleMouseMove = (e) => {
if (infoBoxRef.current) {
const infoBox = infoBoxRef.current;
const mainHeaderWidth = document.querySelector('.header.main-layout__header').offsetWidth;
let xCoordinate = e.pageX - mainHeaderWidth - 40 + 'px';
let yCoordinate = e.pageY - infoBox.offsetHeight - 30 + 'px';
setCoordinates([xCoordinate, yCoordinate]);
}
};
useEffect( () => {
if ( coordinates && infoBoxRef.current ) {
positionInfoBox();
}
}, [coordinates]);
useEffect( () => {
if ( attorneys ) {
if ( attorneys.length === 1) {
setSubText(attorneys[0].full_name);
}
else if ( attorneys.length > 1 ) {
setSubText(`Including ${ attorneys[0].full_name } and ${ attorneys[1].full_name }`);
}
else {
setSubText("");
}
if (attorneys.length > 3) {
setIterableAttorneys( attorneys.slice(0,3) );
} else {
setIterableAttorneys( attorneys );
}
}
}, [attorneys]);
useEffect( () => {
if ( hovered && hovered !== null && networkStates) {
let focusedState = networkStates[hovered];
if (focusedState.length) {
setAttorneys(focusedState);
}
}
}, [hovered, networkStates]);
const handleImageLoad = (i) => {
setLoadedImages((prevLoadedImages) => [...prevLoadedImages, i]);
};
if (hovered) {
return (
<div ref={infoBoxRef} className="coverage-map__info-box" id="info-box" style={{ position: 'absolute', top: position.top, left: position.left, zIndex: 100 }}>
<div className="coverage-map__info-box__wrapper">
<h3 className="coverage-map__info-box__title loose-caps">{ hovered }</h3>
{ ( attorneys && attorneys.length ) &&
<div className="coverage-map__info-box__attorneys">
<div className="coverage-map__info-box__attorneys__img-wrapper">
{ iterableAttorneys.map( ( x,i ) => <img onLoad={() => handleImageLoad(i)} className={ `coverage-map__info-box__attorneys__img ${loadedImages.includes(i) ? 'animate-in' : ''}` } key={`attorney-coverage-${i}`} src={x.image}/> ) }
{ ( iterableAttorneys.length < attorneys.length ) &&
<div className="coverage-map__info-box__attorneys__img coverage-map__info-box__attorneys__img--overflow animate-in">+{ attorneys.length - iterableAttorneys.length }</div>
}
</div>
<div className="coverage-map__info-box__attorneys__count">
{plurify("%d Attorney", attorneys.length)}
</div>
<span className="coverage-map__info-box__attorneys__list">{ subText }</span>
</div>
}
</div>
</div>
)
} else {
return <></>
}
}
export default InfoBox;
import React, { useState, useEffect, useMemo } from "react";
import CountUp from "react-countup";
import { useSelector } from "react-redux";
import { plurify, classify } from "../../../../utils/helpers.js";
const StatCounter = ({
}) => {
const { disableAnimation, networkMembers, networkStates, networkStatesCount } = useSelector(state => state.network);
const [ displayStatCounter, setDisplayStatCounter ] = useState(false);
const [ pulsate, setPulsate ] = useState(false);
const [ prevNetworkStatesCount, setPrevNetworkStatesCount ] = useState(0);
const [ prevNetworMembersLength, setPrevNetworMembersLength ] = useState(0);
const statesWithoutDcCount = useMemo(() => {
if (networkStates['District of Columbia'] && networkStates['District of Columbia'].length > 0) {
return networkStatesCount - 1;
} else {
return networkStatesCount;
}
}, [networkStatesCount]);
useEffect( () => {
if (statesWithoutDcCount > 0 || networkMembers.length > 0) {
setPulsate(true);
setTimeout( () => {
setPulsate(false);
setPrevNetworkStatesCount(statesWithoutDcCount);
setPrevNetworMembersLength(networkMembers.length)
}, 3000 );
}
}, [statesWithoutDcCount, networkMembers]);
useEffect( () => {}, [pulsate]);
return (
<div className={ `inner-circle-search__stat-counter ${ disableAnimation ? "animation-disabled": "animate-in" }` }>
<div className="inner-circle-search__stat-counter__wrapper">
<div className={`${classify( "inner-circle-search__stat-counter__stat", { "states": true, "pulsate": pulsate, "none": statesWithoutDcCount == 0 } )}`}>
<CountUp className="inner-circle-search__stat-counter__stat__countup" start={prevNetworkStatesCount} end={statesWithoutDcCount} duration={2.5} />
<span>{plurify(" State", statesWithoutDcCount)}</span>
</div>
<div className={`${classify( "inner-circle-search__stat-counter__stat", { "attorney": true, "pulsate": pulsate, "none": networkMembers.length == 0 } )}`}>
<CountUp className="inner-circle-search__stat-counter__stat__countup" start={0} end={networkMembers.length} duration={2.5} />
<span>{plurify(" Attorney", networkMembers.length)}</span>
</div>
</div>
</div>
)
}
export default StatCounter;
import React from "react";
import { useSelector } from 'react-redux';
const CAMX = ({}) => {
const { disableAnimation } = useSelector(state => state.network);
return (
<div className={ `coverage-map__canada-and-mexico ${ disableAnimation ? "animation-disabled" : "animate-in" }` }>
<img alt="Canada and Mexico" src={ window.staticPath + "imgs/inner-circle/ca-mx.svg" }/>
</div>
)
}
export default CAMX;
.coverage-map {
$this: '.coverage-map';
$USA: '#{$this}__USA';
$state: '#{$USA}__state';
$animation-speed: 5s;
position: relative;
overflow: hidden;
background: transparent;
height: 60rem;
@include media('<=tablet') {
display: none;
height: 50rem;
}
@include media('<=phone-size-lg') {
height: 46rem;
}
&__globe {
width: 133.9rem;
height: 116.5rem;
background: linear-gradient(to bottom, #d2d2d2ff 0%, #ffffff 39%);
position: absolute;
border-radius: 72.9rem 72.9rem 0px 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
background-repeat: no-repeat;
background-position: 0% 100%;
background-size: 100% 200%;
bottom: -71rem;
opacity: 0;
&.animation-disabled {
background-position: 0% 39%;
background-size: 100% 100%;
bottom: -59rem;
opacity: 1;
@include media('<=tablet') {
bottom: 0;
}
}
@include media('>tablet') {
@include animate-in($animation-speed, $delay: 2s) {
0% {
background-position: 0% 100%;
background-size: 100% 200%;
bottom: -71rem;
opacity: 0;
}
100% {
background-position: 0% 39%;
background-size: 100% 100%;
bottom: -59rem;
opacity: 1;
}
}
}
@include media('<=desktop') {
width: 112rem;
}
@include media('<=tablet') {
@include spring(100%);
background: linear-gradient(to bottom, #d2d2d2ff 0%, #ffffff 100%);
border-radius: 0;
height: 100%;
bottom: 0;
}
}
&__background {
@include spring(100%);
background: linear-gradient(to bottom, #f8f8f8 0%, #ffffff 100%);
background-repeat: repeat;
background-size: auto;
background-repeat: no-repeat;
background-size: 100% 0%;
&.animation-disabled {
background-size: 100% 100%;
}
@include animate-in($animation-speed) {
0% {
background-size: 100% 0%;
}
100% {
background-size: 100% 100%;
}
}
}
&__north-america {
}
&__canada-and-mexico {
opacity: 0;
&.animation-disabled {
opacity: 1;
}
@include animate-in($animation-speed) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@include media('<=tablet') {
display: none;
}
img {
@include spring(151rem);
height: 100%;
object-fit: contain;
position: relative;
top: -2.6rem;
@include media('<=desktop') {
top: -2rem;
}
}
}
&__USA {
@include spring(151rem);
height: 100%;
object-fit: contain;
position: absolute;
top: -4.85rem;
z-index: 1;
opacity: 0;
@include media('<=desktop-size-xl') {
top: -8.18rem;
}
@include media("<=1560px") {
top: -16.7rem;
}
@include media('<=desktop') {
top: -23.2rem;
}
@include media('<=tablet') {
top: 0;
height: auto;
}
&.animation-disabled {
opacity: 1;
}
@include animate-in($animation-speed) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
&__svg {
@include spring(100%);
position: relative;
z-index: 10;
@include media('<=tablet') {
height: 100%;
}
}
&__ak-hi-border {
position: absolute;
width: 100%;
top: 2rem;
z-index: 0;
@include media('<=desktop-size-xl') {
top: 5rem;
}
@include media('<=1560px') {
top: 14rem;
}
@include media('<=desktop') {
top: 21rem;
}
@include media('<=tablet') {
display: none;
}
}
&__state {
fill: #c9c9c9;
transition: all 125ms;
cursor: pointer;
position: relative;
@include pseudo {
@include size(2rem);
background-color: green;
top: 0;
left: 0;
}
&:hover {
@include media('>tablet') {
fill: #5cb1ff;
}
}
&--selected {
fill: #c9c9c9;
@include animate(250ms) {
0% {
fill: #c9c9c9;
}
100% {
fill: $link-blue;
}
}
// animation-delay: 0ms !important;
&:hover {
// fill: #5cb1ff;
@include media('>tablet') {
opacity: .9;
}
}
}
&--added {
fill: #c9c9c9;
stroke-dasharray: 0%;
stroke-opacity: 0;
stroke-width: 0px;
stroke: transparent;
@include animate(1.5s) {
0% {
stroke-opacity: 0;
stroke-width: 5px;
fill: #c9c9c9;
stroke: transparent;
}
50% {
stroke-opacity: 1;
stroke-width: 5px;
stroke: $white;
fill: #c9c9c9;
}
80% {
stroke-opacity: 1;
stroke-width: 5px;
stroke: $white;
fill: #e2e2e2;
}
100% {
stroke-opacity: 0;
stroke: transparent;
stroke-width: 5px;
fill: $link-blue;
}
}
&:hover {
@include media('>tablet') {
opacity: .9;
}
}
}
&--existing {
@include animate(1.5s) {
0% {
stroke-opacity: 0;
stroke-width: 5px;
fill: $link-blue;
stroke: transparent;
}
50% {
stroke-opacity: 1;
stroke-width: 5px;
stroke: $white;
fill: $link-blue;
}
80% {
stroke-opacity: 1;
stroke-width: 5px;
stroke: $white;
fill: $link-blue;
}
100% {
stroke-opacity: 0;
stroke: transparent;
stroke-width: 5px;
fill: $link-blue;
}
}
}
}
&__region {
fill: #c9c9c9;
}
}
&__info-box {
@include spring(30rem);
height: auto;
background-color: $white;
position: absolute;
top: 0;
left: 0;
padding: 2rem 2rem;
opacity: 0;
@include generateShadow('lite');
@include animate(125ms, $delay: 200ms) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
&:hover {
display: none;
}
&__wrapper {
text-align: center;
@include perch('+==');
}
&__attorneys {
@include perch('+==');
@include spring(100%);
&__img-wrapper {
@include spring(13rem);
@include perch('-+-');
overflow: hidden;
}
&__img {
@include size(4rem);
min-width: 4rem;
border-radius: 50%;
overflow: hidden;
position: relative;
opacity: 0;
left: 50%;
transform: rotateY(70deg);
@include when('adjacent') {
margin-left: -10%;
z-index: 1;
}
@include animate-in(325ms, $delay: 150ms) {
0% {
opacity: 0;
left: 50%;
transform: rotateY(70deg);
}
100% {
opacity: 1;
left: 0%;
transform: rotateY(0deg);
}
}
&--overflow {
@include perch('-+-');
background-color: $light-grey;
color: $link-blue;
font-weight: 700;
font-size: 1.5rem;
}
}
&__count {
@extend %loose-caps;
color: $white;
background-color: $link-blue;
font-size: 1.2rem;
border-radius: 1.5rem;
padding: .5rem 1.5rem;
margin-top: .5rem;
@include spring(15rem);
}
&__list {
@include spring(20rem);
font-size: 1.55rem;
color: #9a9a9a;
margin-top: 1rem;
display: block;
line-height: 1.1;
}
}
}
}
Shown as originally written for Overture's production app. The Redux hooks and internal helpers referenced here were swapped for local state in the rebuild above, since this demo doesn't ship with Overture's store.
You have an ability to make everything look extremely polished, top-of-the-line, and just flow perfectly. You have always gone above and beyond, rapidly adapting to changes at impressive speed, juggling multiple projects and tasks expertly under tight deadlines.
Alex Lopez, Backend Developer at Overture
// a few screens