The right people, connected
Gathered disconnected data into one platform for knowing who to sell to, work with, or invest in.
The context
Five companies, one new platform
Altrata formed from a merger of five data companies, unifying into one product: Project Euler, a people intelligence platform. Supercharge ran the 9-month Discovery and Design phase, figuring out what the MVP should be, then designing it.
Client: Altrata, via Supercharge
Role: UI Designer
Scope: Interface Design, Design System
Duration: 9 months
Project Euler: one profile, and behind it everything five companies knew about a person.
The problem
Everything existed, nothing connected
Everything needed to connect the right people (who to sell to, who to work with, who to invest in) existed, just scattered across five legacy platforms instead of one place.
The goal
Whole, not stitched together
Design an MVP that puts all that scattered intelligence into one coherent interface, dense with data but digestible enough to act on, and intuitive enough to use without a second thought.
Where I picked it up: the wireframes from the product strategist. Everything below this point is what happened after.
My part
I worked with a PM and a product strategist, who turned the research into wireframes, and I continued from there with the UI.
As the UI designer, I turned the grey wireframes into live UI: real layouts, real components, and content placed so that all that density stays digestible. I also built the design system that came with it.
The challenge
The real brief, underneath everything: the amount of information was enormous. Executives, companies, networks, wealth data, donations, news. Every screen was a negotiation between content and air, and the user should never feel the weight.
The final product
Individual profile
Company profile
Home
Search
Lists
The main surfaces of the MVP
Some of the mobile screens
The decisions
Why these choices
Everything in thirds
People were juggling tabs to research one person. I split the screen into thirds: your last step on the left, your focus on the right, so the interface held onto where you'd been.
The densest screen, tamed by testing
The individual page (Alison Ford): everything about one person, one screen. Testing showed people needed the full picture at a glance, so widgets group data tightly enough to read as one thing.
Given colors, built a system
The brand gave three colors and no usable palette. I built out shades of each, so pink, mint, and navy could each work as a button, a tint, or a quiet supporting state.
The system
Everything in thirds
One rule, many layouts: the left third holds search or your last step, the right two-thirds holds whatever you're focused on. The same split reuses across devices, which is why a hundred screens feel like one product.
Anatomy of widgets
Every widget shares one skeleton: title top left, filters top right, primary content before secondary. Learn one widget and you've learned the whole page. That's what kept ten kinds of data readable at a glance.
Tags describe, chips filter
Tags describe the content, chips filter it. One strict distinction, kept everywhere, so people can cut through an enormous database and always know what they're looking at.
Color theory
Bold color, used deliberately: dark blue, mint and white carry the large surfaces; pink is the loud one, for moments that need attention.
Pink means action, its pastel marking what's touched. Mint stays supporting, its pastel covering bigger areas.
Main structure & Content blocks
Grid & Gutters
Content sits in panels with 16px gutters and 8px gaps: enough air to breathe, tight enough to stay dense.
Spaces
Everything snaps to a 4 and 8 point rhythm. When spacing is a rule instead of a feeling, a hundred screens space themselves.
Shape language
Rectangles with a 4px radius, everywhere: data wants order. The one soft shape is the fully rounded button, so anything clickable announces itself before color even has to.
Outcome
Handed over, and it kept going
The Discovery and Design phase wrapped after 9 months: the MVP screens, the design system, and a North Star roadmap for where the platform could grow. I know the project continued for a while after I moved to a different company, but beyond that, I can't speak to what eventually shipped. Still, that says something on its own: what we built held up well enough for someone else to keep building on it without me in the room.
What it taught me
The design was in the rules
Writing guidelines changes how you design: every decision has to survive being explained. And with data-heavy products, the design isn't really in the screens. It's in the rules that keep a hundred screens coherent. Funny enough, my next big project asked for the exact reverse: stepping into someone else's rules without leaving a trace. That's the MOL story, one click away.
Previous case study