Loading page…
All work
Portfolio · Motion & Interaction
Edward Guillen
A portfolio for a designer whose site had to prove the craft it claims.
- Client
- Edward Guillen — Product Designer & UX Strategist
- Industry
- Design · Personal brand
- Market
- United States — enterprise and Fortune 500 design hiring
- Our role
- Front-end development & motion implementation
- Timeline
- Shipped
- Year
- 2025
edward-livid.vercel.app
ReactViteJavaScriptCSSMotionVercel
5
Enterprise case studies presented
6
Professional roles animated in the hero
15+
Years of career the site condenses
30%
Manual input time cut on the Tenet/Arthe AI project
Figures published by the client. Everything else is measured from the build itself.
The brief
What the project had to solve.
A single-page portfolio for a US-based product designer and UX strategist whose work spans Prudential, Warner Music Group, Cisco, Disney and Tenet Healthcare. The audience is design leadership at large companies, which sets a specific bar: for this visitor the site is not a brochure describing the work, it is a sample of it. Every easing curve, every crop, every alignment is being read as evidence.
The problem
Portfolio sites for senior designers fail in one of two directions. Too plain and the visitor concludes the craft claim is unsupported. Too decorated and the work disappears behind the wrapper. This one also had to carry an unusually wide identity — six professional roles, from UX engineer to motion designer — without reading as unfocused, and had to communicate five enterprise case studies fast enough for a hiring manager skimming between meetings.
The approach
How it was built.
6 decisions that shaped the result — and why each one went the way it did.
A rotating identity instead of a compromise title
The hero cycles the six roles — Product Designer, UX Strategist, UX Engineer, Visual Designer, Founding Designer, Motion Designer — under a fixed "I'm Edward." Range is presented as sequence rather than a comma-separated list, so breadth reads as depth. A gradient treatment on the rotating word makes the motion legible without becoming decoration.
Immediate credibility line
Directly beneath the hero: currently at Prudential, previously Cisco, Warner Music Group, Tenet Healthcare and emerging startups. The strongest qualifying signal is placed above the fold, where a skimming hiring manager will actually see it.
A horizontal case-study rail
Five enterprise case studies — Prudential insurance onboarding, Warner Music Group campaign collaboration, Cisco Security design strategy, a Prudential Figma design system, and an AI clinical-documentation platform for Tenet Healthcare — run as an image-led horizontal rail. Each card carries role and company on the image, so scanning the rail alone communicates seniority and sector range before a single case study is opened.
Outcome-first case study copy
Each case study leads with the change, not the process: the Tenet/Arthe AI platform cut manual input time by 30%; the Warner Music Group build consolidated fragmented marketing communications into one platform and sped up global campaign launches.
Capabilities as a structured grid
Rather than a skills word-cloud, capabilities are grouped into design strategy, research and analysis, technical skills, project leadership, and business impact — a structure that lets a hiring manager confirm the specific competency they are recruiting for in one pass.
Motion held to a designer's standard
Reveal, transition, and rail behaviour were tuned against the designer's own eye rather than defaults — timing, easing, and stagger adjusted until the page felt authored. That review loop is the actual work on a project like this.
What it does
Shipped features
- Animated rotating role titles in the hero
- Horizontal, image-led case-study rail with role and company overlays
- Five enterprise case studies with outcome-led summaries
- Extended About section covering a 15-year career arc
- Capabilities grid across five competency groups
- Résumé download
- Slide-out navigation menu
- Social links (Dribbble, LinkedIn, Spotify)
- Persistent "Get in touch" call to action
- Fully responsive layout
What it runs on
The stack
Front end
- React
- Vite
- JavaScript
- CSS
- Motion / animation
Delivery
- Vercel
- Static single-page build
The result
What the build changed.
Range is communicated as sequence, so six roles read as depth rather than dilution.
The strongest credibility signal — current and past employers — sits above the fold.
The case-study rail communicates seniority and sector coverage before anything is clicked.
Motion quality carries the craft claim that the copy makes.
See it live
Let’s Work Together
Ready to build something fast?
Thirty minutes on what you need and what it would take. You leave with a clear recommendation either way.
Usually replies within a day · No obligation · Fixed-price quotes