UI library: before and after
Four recipe apps that are live on the site, each shown as built (before) and as a copy updated to the newest Trayo GTM UI library (after). Screenshots are framed at the size of the recipe cards on trayo.ai/recipes. Click any card for the full-length page.
The data in each app is unchanged. The live site and the original apps are untouched; the updated versions are separate local copies.
Salesforce
Prospect to list · row 1
- Header: 40px title in a brand band, with the list name above it and the run counts beside it.
- Four stat tiles replaced by one headline number (8 of 15 accounts have a contact) with a column chart, next to an industry breakdown.
- Contacts: persona mix as a ring and a per-account breakdown that also filters the cards.
- How it was built: a four-step flow of counts in place of plain text.
Accounts (home)
Before
After
Contacts
Before
After
How it was built
Before
After
Ramp
Stakeholders at a company · row 7
- Header: 40px title in a card with the account line above it.
- Five stat tiles replaced by a funnel (18 screened, 6 shortlisted, 6 emails, 5 phones) and a persona-coverage bar beside the table.
- Table drawn with large rows and 64px faces; email and phone merged into one column to fit.
- Persona list rebuilt as a library breakdown; the method text became a short flow of counts.
Committee (home)
Before
After
Account brief
Before
After
Deel
24 Post to pipeline · row 28
- Header: 40px title in a Deel-lavender band.
- Source post shown as a post card with a large author face, beside a funnel (10 pulled, 5 passed, 4 emails) that replaces the four stat tiles.
- Worklist uses large rows with real photos, and the fit score is a meter against the pass mark.
- Filtered out: a passed-versus-dropped bar. Post & method: the scoring weights as a share strip.
Worklist (home)
Before
After
Filtered out
Before
After
Post & method
Before
After
Supabase
03 Social listening · row 30
- Header: 40px title "Competitor gripe radar" in a Supabase-green band with the search counts beside it.
- Four stat tiles replaced by one headline number (20 gripes kept) with posts per week as a one-colour column chart.
- "Where the gripes land": six multi-coloured bars replaced by competitor tiles with logo, count and share, which also filter the table.
- Below the table: the method as a flow of counts, and the freshest hot post as a post card.
Gripe radar (home)
Before
After
Competitor set
Before
After
