Alex Sun — UX Director
:root{
–bg:#0f1724; /* dark navy */
–card:#0b1220;
–muted:#9aa6b2;
–accent:#6ee7b7;
–glass: rgba(255,255,255,0.04);
–radius:14px;
–max-width:1100px;
color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{
margin:0;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,”Helvetica Neue”,Arial;
background: linear-gradient(180deg,var(–bg) 0%, #071223 100%);
color:#e6eef6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
line-height:1.45;
padding:40px 20px;
display:flex;
justify-content:center;
}
.wrap{width:100%;max-width:var(–max-width);}
header{
display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;
}
.brand{display:flex;gap:16px;align-items:center}
.logo{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(–accent),#60a5fa);display:flex;align-items:center;justify-content:center;font-weight:800;color:#04212b}
.site-title{font-size:18px;font-weight:700}
.site-role{font-size:12px;color:var(–muted);margin-top:2px}
nav a{color:var(–muted);text-decoration:none;margin-left:20px;font-size:14px}
nav a.primary{background:linear-gradient(90deg,var(–accent),#60a5fa);padding:10px 14px;border-radius:10px;color:#04212b;font-weight:600}
.hero{
display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center;margin-bottom:36px;
}
.intro{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:var(–radius);box-shadow:0 6px 30px rgba(2,6,23,0.6);}
.intro h1{margin:0;font-size:32px;letter-spacing:-0.5px}
.intro p.lead{color:var(–muted);margin:12px 0 18px}
.kpis{display:flex;gap:12px}
.kpi{background:var(–glass);padding:12px;border-radius:12px;min-width:0}
.kpi b{display:block;font-size:18px}
.cta-row{display:flex;gap:12px;margin-top:20px}
.profile-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:16px;box-shadow:0 6px 30px rgba(2,6,23,0.6);display:flex;flex-direction:column;align-items:center;text-align:center}
.avatar{width:110px;height:110px;border-radius:14px;background:linear-gradient(135deg,#0ea5a5,#6366f1);display:flex;align-items:center;justify-content:center;font-weight:800;color:#031319;font-size:28px;margin-bottom:14px}
.name{font-weight:700}
.role{color:var(–muted);font-size:14px}
.profile-links{display:flex;gap:10px;margin-top:14px}
.pill{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:13px;color:var(–muted);text-decoration:none}
/* Case studies */
.section{margin-bottom:36px}
.section h2{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.case{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;transition:transform .25s, box-shadow .25s;cursor:pointer}
.case:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(2,6,23,0.6)}
.case h3{margin:0 0 8px}
.case p{color:var(–muted);font-size:13px;margin:0 0 12px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12px;padding:6px 8px;background:rgba(255,255,255,0.02);border-radius:8px;color:var(–muted)}
/* Resume + contact */
.two-col{display:grid;grid-template-columns:1fr 380px;gap:18px}
.card{background:var(–card);padding:18px;border-radius:12px}
.resume-list{list-style:none;padding:0;margin:0}
.resume-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.meta{color:var(–muted);font-size:13px}
footer{display:flex;justify-content:space-between;color:var(–muted);font-size:13px;padding-top:18px}
/* Responsive */
@media (max-width:1000px){
.grid{grid-template-columns:repeat(2,1fr)}
.hero{grid-template-columns:1fr 320px}
.two-col{grid-template-columns:1fr}
}
@media (max-width:640px){
header{flex-direction:column;align-items:flex-start;gap:12px}
.hero{grid-template-columns:1fr}
.grid{grid-template-columns:1fr}
.profile-card{flex-direction:row;gap:14px;align-items:center;text-align:left}
.avatar{width:74px;height:74px;font-size:18px}
}
/* subtle utilities */
.muted{color:var(–muted)}
.small{font-size:13px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(–accent)}
.btn-primary{background:linear-gradient(90deg,var(–accent),#60a5fa);color:#031319}
/* modal (case study quick view) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px}
.modal.show{display:flex}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.8));backdrop-filter:blur(6px)}
.modal-panel{position:relative;z-index:2;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:22px;border-radius:12px;max-width:900px;width:100%;max-height:86vh;overflow:auto}
Designing cohesive product experiences for scale
I lead product design teams to build strategic, usable SaaS products. I marry quantitative insight with high-fidelity experience design and cross-functional leadership to deliver measurable outcomes.
Featured case studies
Loyalty Platform Migration
Strategy · Product Design · Systems
Merged two large reward ecosystems into a single cohesive product with new interaction patterns and improved onboarding flows.
Short-form Video Editor
Product Design · UX Research · Metrics
Led product and design for an editor focused on speed and composability. Built an extensible component library for editor tools.
Enterprise Onboarding
UX Strategy · Design Ops
Coached product managers and engineers to focus on activation metrics and designed step-based flows with progressive disclosure.
Design System
Design Systems · Accessibility
Established tokens, documentation, and a contribution model for designers and engineers to iterate safely at scale.
Customer Insights Program
Research · Strategy
Delivered reusable research playbooks and established success metrics to inform roadmaps and product OKRs.
Mobile Revamp
Mobile · Performance
Simplified flows, prioritized critical paths, and introduced gestures and shortcuts for power users.
About
I’m a product-minded UX leader with two decades of hands-on design experience. I enjoy turning ambiguous problems into clear roadmaps, building strong design systems, and mentoring cross-functional teams to ship delightful, reliable products.
What I do
- Lead and scale product design teams
- Design system strategy and governance
- User research and experiment design
- Cross-functional leadership with product and engineering
Tools
Contact
Looking for a remote UX Director to join your team or need help with enterprise product design? Tell me about the role, timeline, and budget.
hello@example.com
// small interactions
document.getElementById(‘year’).textContent = new Date().getFullYear();
const cases = Array.from(document.querySelectorAll(‘.case’));
const modal = document.getElementById(‘modal’);
const modalTitle = document.getElementById(‘modalTitle’);
const modalSummary = document.getElementById(‘modalSummary’);
const modalClose = document.getElementById(‘modalClose’);
cases.forEach(c => c.addEventListener(‘click’, ()=>{
modalTitle.textContent = c.dataset.title || c.querySelector(‘h3’).textContent;
modalSummary.textContent = c.dataset.summary || c.querySelector(‘p’).textContent;
modal.classList.add(‘show’);
modal.setAttribute(‘aria-hidden’,’false’);
}));
modalClose.addEventListener(‘click’, ()=>{
modal.classList.remove(‘show’);
modal.setAttribute(‘aria-hidden’,’true’);
});
modal.addEventListener(‘click’, (e)=>{
if(e.target.classList.contains(‘modal’)){
modal.classList.remove(‘show’);
modal.setAttribute(‘aria-hidden’,’true’);
}
});
// keyboard close
document.addEventListener(‘keydown’, (e)=>{
if(e.key === ‘Escape’){
modal.classList.remove(‘show’);
modal.setAttribute(‘aria-hidden’,’true’);
}
});
alexandersun.com 