Studio Marsh — UI/UX Designer Portfolio

<nav class="ux-nav" data-rv>
  <a class="ux-brand" href="#top">Elena <b>Marsh</b></a>
  <div class="ux-links"><a href="#work">Case studies</a><a href="#process">Process</a><a href="#tools">Tools</a><a href="#research">Research</a><a href="#book">Book a call</a></div>
</nav>

<header id="top" class="ux-hero">
  <div class="ux-hero-inner">
    <span class="ux-badge" data-rv>● UI/UX &amp; Product Designer</span>
    <h1 data-rv>Designing calm,<br>human interfaces.</h1>
    <p data-rv>I'm Elena — a product designer who turns messy problems into clear, beautiful, usable products. 8 years across fintech, health and SaaS.</p>
    <div class="ux-hero-btns" data-rv><a class="ux-btn ux-btn-dark" href="#work">View case studies</a><a class="ux-btn ux-btn-line" href="#book">Book a call</a></div>
    <div class="ux-hero-tiles" data-rv>
      <div class="ux-tile" style="--c:#f9a8d4"></div><div class="ux-tile" style="--c:#a5b4fc"></div><div class="ux-tile" style="--c:#6ee7b7"></div><div class="ux-tile" style="--c:#fcd34d"></div>
    </div>
  </div>
</header>

<section class="ux-marquee" data-rv><div class="ux-mq-track"><span>FIGMA ✦ PROTOTYPING ✦ DESIGN SYSTEMS ✦ USER RESEARCH ✦ ACCESSIBILITY ✦ MOTION ✦ </span><span>FIGMA ✦ PROTOTYPING ✦ DESIGN SYSTEMS ✦ USER RESEARCH ✦ ACCESSIBILITY ✦ MOTION ✦ </span></div></section>

<section id="work" class="ux-sec">
  <div class="ux-head" data-rv><span class="ux-kick">Selected work</span><h2>Case studies</h2></div>
  <div class="ux-cases">
    <a class="ux-case" data-rv href="#"><div class="ux-case-art" style="background:linear-gradient(135deg,#fda4af,#f9a8d4)"></div><div class="ux-case-meta"><span>Fintech · Mobile app</span><h3>Reimagining a banking app for clarity</h3><p>Redesigned onboarding and transfers; task success rose from 68% to 94% in usability testing.</p><span class="ux-case-link">Read case study →</span></div></a>
    <a class="ux-case ux-case-rev" data-rv href="#"><div class="ux-case-art" style="background:linear-gradient(135deg,#a5b4fc,#818cf8)"></div><div class="ux-case-meta"><span>Healthcare · Web platform</span><h3>A patient portal people actually use</h3><p>Cut support tickets by 41% with a new information architecture and guided flows.</p><span class="ux-case-link">Read case study →</span></div></a>
    <a class="ux-case" data-rv href="#"><div class="ux-case-art" style="background:linear-gradient(135deg,#6ee7b7,#34d399)"></div><div class="ux-case-meta"><span>SaaS · Design system</span><h3>Building a scalable design system</h3><p>120+ components, full a11y coverage, adopted by 4 product teams in one quarter.</p><span class="ux-case-link">Read case study →</span></div></a>
  </div>
</section>

<section id="process" class="ux-sec ux-sec-soft">
  <div class="ux-head" data-rv><span class="ux-kick">How I work</span><h2>My design process</h2></div>
  <div class="ux-steps">
    <div class="ux-step" data-rv><span class="ux-step-n">01</span><h3>Discover</h3><p>Stakeholder interviews, user research and competitive audits to frame the real problem.</p></div>
    <div class="ux-step" data-rv><span class="ux-step-n">02</span><h3>Define</h3><p>Journey maps, IA and success metrics that align the team before a pixel is drawn.</p></div>
    <div class="ux-step" data-rv><span class="ux-step-n">03</span><h3>Design</h3><p>Wireframes to high-fidelity prototypes, tested with real users and iterated fast.</p></div>
    <div class="ux-step" data-rv><span class="ux-step-n">04</span><h3>Deliver</h3><p>Polished specs, design tokens and dev hand-off — then measure and refine in production.</p></div>
  </div>
</section>

<section id="tools" class="ux-sec">
  <div class="ux-head" data-rv><span class="ux-kick">Toolkit</span><h2>Tools I design with</h2></div>
  <div class="ux-tools">
    <div class="ux-tool" data-rv><b>Figma</b><span>UI &amp; prototyping</span></div>
    <div class="ux-tool" data-rv><b>FigJam</b><span>Workshops</span></div>
    <div class="ux-tool" data-rv><b>Maze</b><span>Usability testing</span></div>
    <div class="ux-tool" data-rv><b>Framer</b><span>Motion prototypes</span></div>
    <div class="ux-tool" data-rv><b>Notion</b><span>Research repo</span></div>
    <div class="ux-tool" data-rv><b>Storybook</b><span>Design systems</span></div>
  </div>
</section>

<section id="research" class="ux-sec ux-sec-soft">
  <div class="ux-head" data-rv><span class="ux-kick">UX research</span><h2>Evidence, not opinions</h2></div>
  <div class="ux-research">
    <div class="ux-res-stats">
      <div class="ux-res-stat" data-rv data-count="240"><b>0</b><span>User interviews run</span></div>
      <div class="ux-res-stat" data-rv data-count="38"><b>0</b><span>Usability studies</span></div>
      <div class="ux-res-stat" data-rv data-count="94"><b>0</b><span>Avg. task success %</span></div>
    </div>
    <div class="ux-res-card" data-rv>
      <h3>Before &amp; after</h3>
      <div class="ux-ba">
        <div class="ux-ba-col"><span class="ux-ba-tag ux-ba-before">Before</span><div class="ux-ba-box ux-ba-old"><i></i><i></i><i></i><i></i></div><p>Cluttered, 7 steps to pay</p></div>
        <div class="ux-ba-arrow">→</div>
        <div class="ux-ba-col"><span class="ux-ba-tag ux-ba-after">After</span><div class="ux-ba-box ux-ba-new"><i></i><i></i></div><p>Focused, 2 steps to pay</p></div>
      </div>
    </div>
  </div>
</section>

<section id="testimonials" class="ux-sec">
  <div class="ux-head" data-rv><span class="ux-kick">Kind words</span><h2>What teams say</h2></div>
  <div class="ux-tests">
    <figure class="ux-test" data-rv><blockquote>"Elena has a rare gift for making complex flows feel obvious. Our activation rate jumped 22% after her redesign."</blockquote><figcaption><span class="ux-av" style="background:#f9a8d4">RN</span><div><b>Rita Novak</b><em>Head of Product, Finbank</em></div></figcaption></figure>
    <figure class="ux-test" data-rv><blockquote>"She doesn't just deliver screens — she delivers reasoning. Every decision was backed by research the whole team trusted."</blockquote><figcaption><span class="ux-av" style="background:#a5b4fc">TM</span><div><b>Tom Meyer</b><em>VP Design, Curely</em></div></figcaption></figure>
    <figure class="ux-test" data-rv><blockquote>"The design system Elena built is still the backbone of our product two years later. Worth every penny."</blockquote><figcaption><span class="ux-av" style="background:#6ee7b7">AL</span><div><b>Anja Lind</b><em>CPO, Stacklane</em></div></figcaption></figure>
  </div>
</section>

<section id="book" class="ux-book" data-rv>
  <div class="ux-book-inner">
    <h2>Have a product worth designing?</h2>
    <p>I take on a handful of projects each quarter. Tell me about yours.</p>
    <form class="ux-book-form" onsubmit="return false">
      <input type="text" placeholder="Your name">
      <input type="email" placeholder="Email address">
      <button class="ux-btn ux-btn-dark">Book a discovery call</button>
    </form>
    <p class="ux-book-alt">Or email <a href="mailto:hello@elenamarsh.design">hello@elenamarsh.design</a></p>
  </div>
</section>

<footer class="ux-foot">
  <div class="ux-foot-inner">
    <div><a class="ux-brand" href="#top">Elena <b>Marsh</b></a><p>Product &amp; UI/UX designer · Berlin</p></div>
    <div class="ux-foot-social"><a href="#">Dribbble</a><a href="#">Behance</a><a href="#">LinkedIn</a></div>
  </div>
  <div class="ux-foot-bottom"><span>© 2026 Elena Marsh</span><span>Made with <a href="https://convertatlas.org" target="_blank" rel="noopener">convertatlas.org</a></span></div>
</footer>

*{box-sizing:border-box}
body{margin:0;background:#fbf7f4;color:#1c1a26;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.ux-btn{display:inline-block;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.94rem;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .15s ease}
.ux-btn-dark{background:#1c1a26;color:#fff}.ux-btn-dark:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(28,26,38,.25)}
.ux-btn-line{border:1.5px solid #1c1a26;color:#1c1a26}.ux-btn-line:hover{background:#1c1a26;color:#fff}
.ux-kick{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#c026a3}
.ux-brand{font-size:1.15rem;font-weight:500}.ux-brand b{font-weight:800}
.ux-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:18px 34px;background:rgba(251,247,244,.8);backdrop-filter:blur(12px)}
.ux-links{display:flex;gap:28px}.ux-links a{color:#5b5667;font-size:.9rem}.ux-links a:hover{color:#c026a3}
.ux-hero{padding:140px 34px 70px;max-width:1100px;margin:0 auto;text-align:center}
.ux-badge{display:inline-block;background:#fff;border:1px solid #ecdfe6;color:#c026a3;border-radius:999px;padding:7px 17px;font-size:.84rem;font-weight:600;margin-bottom:24px}
.ux-hero h1{font-size:clamp(2.8rem,7vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;margin:0 0 18px}
.ux-hero p{color:#5b5667;font-size:1.15rem;max-width:540px;margin:0 auto 28px}
.ux-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ux-hero-tiles{display:flex;gap:14px;justify-content:center;margin-top:46px}
.ux-tile{width:120px;height:150px;border-radius:18px;background:var(--c);transition:transform .3s}
.ux-tile:nth-child(2){margin-top:24px}.ux-tile:nth-child(3){margin-top:-12px}.ux-tile:nth-child(4){margin-top:18px}
.ux-tile:hover{transform:translateY(-8px) rotate(-2deg)}
.ux-marquee{overflow:hidden;border-top:1px solid #ecdfe6;border-bottom:1px solid #ecdfe6;background:#fff;margin:30px 0}
.ux-mq-track{display:flex;gap:40px;white-space:nowrap;padding:14px 0;animation:uxRoll 22s linear infinite;font-weight:700;color:#c026a3;font-size:.92rem;letter-spacing:.08em}
@keyframes uxRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ux-sec{max-width:1100px;margin:0 auto;padding:70px 34px}
.ux-sec-soft{background:#fff;border-radius:34px;margin-top:30px;margin-bottom:30px}
.ux-head{text-align:center;margin-bottom:44px}
.ux-head h2{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:800;letter-spacing:-.03em;margin:8px 0 0}
.ux-cases{display:flex;flex-direction:column;gap:26px}
.ux-case{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center;background:#fff;border:1px solid #ecdfe6;border-radius:26px;overflow:hidden;padding:26px;transition:.25s}
.ux-case:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(28,26,38,.1)}
.ux-case-rev{grid-template-columns:1fr 1.1fr}.ux-case-rev .ux-case-art{order:2}
.ux-case-art{height:240px;border-radius:18px}
.ux-case-meta span{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#c026a3}
.ux-case-meta h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:8px 0 10px}
.ux-case-meta p{color:#5b5667;margin:0 0 14px}
.ux-case-link{color:#1c1a26;font-weight:700;font-size:.92rem}
.ux-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ux-step{background:#fbf7f4;border-radius:20px;padding:26px;transition:.22s}
.ux-step:hover{transform:translateY(-5px)}
.ux-step-n{font-size:2rem;font-weight:800;color:#f0c5e0}
.ux-step h3{margin:10px 0 8px;font-size:1.2rem}
.ux-step p{color:#5b5667;font-size:.9rem;margin:0}
.ux-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ux-tool{background:#fff;border:1px solid #ecdfe6;border-radius:16px;padding:22px 24px;transition:.2s}
.ux-tool:hover{border-color:#c026a3;transform:translateY(-3px)}
.ux-tool b{font-size:1.15rem}.ux-tool span{display:block;color:#5b5667;font-size:.86rem;margin-top:3px}
.ux-research{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;align-items:center}
.ux-res-stats{display:grid;gap:14px}
.ux-res-stat{background:#fbf7f4;border-radius:16px;padding:20px 24px}
.ux-res-stat b{font-size:2rem;font-weight:800;color:#c026a3}.ux-res-stat span{display:block;color:#5b5667;font-size:.86rem}
.ux-res-card{background:#fbf7f4;border-radius:22px;padding:28px}
.ux-res-card h3{margin:0 0 18px}
.ux-ba{display:flex;align-items:center;gap:18px}
.ux-ba-col{flex:1;text-align:center}
.ux-ba-tag{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 12px;border-radius:999px;display:inline-block;margin-bottom:10px}
.ux-ba-before{background:#fee2e2;color:#dc2626}.ux-ba-after{background:#dcfce7;color:#16a34a}
.ux-ba-box{background:#fff;border-radius:12px;padding:14px;display:grid;gap:7px;min-height:110px;align-content:center;border:1px solid #ecdfe6}
.ux-ba-box i{height:12px;border-radius:4px;background:#e9d5e4}
.ux-ba-new i{background:#bbf7d0}
.ux-ba-col p{font-size:.82rem;color:#5b5667;margin:10px 0 0}
.ux-ba-arrow{font-size:1.6rem;color:#c026a3}
.ux-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ux-test{margin:0;background:#fff;border:1px solid #ecdfe6;border-radius:20px;padding:26px;transition:.22s}
.ux-test:hover{transform:translateY(-4px);box-shadow:0 20px 50px rgba(28,26,38,.08)}
.ux-test blockquote{margin:0 0 18px;font-size:.98rem;line-height:1.7;color:#3a3647}
.ux-test figcaption{display:flex;align-items:center;gap:12px}
.ux-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.84rem}
.ux-test figcaption b{display:block;font-size:.92rem}.ux-test figcaption em{font-style:normal;color:#5b5667;font-size:.82rem}
.ux-book{max-width:760px;margin:30px auto;padding:0 34px}
.ux-book-inner{background:#1c1a26;color:#fff;border-radius:30px;padding:54px 40px;text-align:center}
.ux-book-inner h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.ux-book-inner p{color:#b9b3c4;margin:0 0 26px}
.ux-book-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.ux-book-form input{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:12px 20px;color:#fff;font-family:inherit;outline:none;min-width:200px}
.ux-book-form input::placeholder{color:#8b8597}
.ux-book-alt{font-size:.9rem;color:#b9b3c4}.ux-book-alt a{color:#f9a8d4;font-weight:600}
.ux-foot{max-width:1100px;margin:0 auto;padding:40px 34px}
.ux-foot-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;padding-bottom:22px;border-bottom:1px solid #ecdfe6}
.ux-foot-inner p{color:#5b5667;font-size:.88rem;margin:6px 0 0}
.ux-foot-social{display:flex;gap:20px}.ux-foot-social a{color:#5b5667;font-size:.9rem}.ux-foot-social a:hover{color:#c026a3}
.ux-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;color:#8b8597;font-size:.85rem}
.ux-foot-bottom a{color:#c026a3;font-weight:600}
@media(max-width:860px){.ux-case,.ux-case-rev{grid-template-columns:1fr}.ux-case-rev .ux-case-art{order:0}.ux-steps,.ux-tools{grid-template-columns:1fr 1fr}.ux-research{grid-template-columns:1fr}.ux-tests{grid-template-columns:1fr}}
@media(max-width:600px){.ux-links{display:none}.ux-steps,.ux-tools{grid-template-columns:1fr}.ux-tile{width:74px;height:96px}}
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');if(e.target.hasAttribute('data-bar')){e.target.querySelectorAll('[data-w]').forEach(function(b){b.style.width=b.getAttribute('data-w')})}if(e.target.hasAttribute('data-count')){var t=+e.target.getAttribute('data-count'),el=e.target,s=null;requestAnimationFrame(function st(ts){if(!s)s=ts;var p=Math.min((ts-s)/1500,1);el.firstChild.textContent=Math.floor((1-Math.pow(1-p,3))*t).toLocaleString();if(p<1)requestAnimationFrame(st)})}io.unobserve(e.target)}})},{threshold:.18});
document.querySelectorAll('[data-rv],[data-bar],[data-count]').forEach(function(el){io.observe(el)});