ui/ux design — 2024
mls portfolio
solo ui/ux designer
timeline
6 weeks
deliverables
branding, IA, web design, user flow, microinteractions, webflow build
introduction
Many artists evolve faster than their websites. Michael’s original portfolio no longer reflected the sophistication or presence he brings to contemporary percussion. I redesigned his site from the ground up—blending branding, UX, and Webflow development—to create an experience that finally matches his artistry.
problem
Michael’s existing portfolio felt outdated, generic, and visually disjointed. It didn’t communicate his personality or artistic voice — and for someone applying to grants and showcasing professional work, that disconnect mattered.
the goal
How might we create a portfolio experience that feels inviting, visually inspiring, and easy for users to navigate—so they naturally want to learn more about Michael’s work?
solution
I reframed Michael’s portfolio from a static collection of information into a curated experience — something closer to an artistic universe.
The redesign emphasizes clarity, emotion, and presence through:
Strong visual hierarchy
Full-bleed photography and performance media
Refined typography and rhythm-inspired layout choices
Microinteractions that feel subtle and intentional
A structure that guides users through his story, work, and sound
research
To understand what wasn’t working, I conducted user interviews and evaluated Michael’s current site through annotated usability reviews.
Key insights included:
Cognitive Overload — Walls of text felt intimidating and caused users to drop off quickly
Performance Over Static Visuals — Imagery and videos of Michael performing were far more engaging than static photos
First-Impression Drop-Off — Users clicked away when nothing caught their attention immediately
Identity Mismatch — The tone felt generic, outdated, and inconsistent with Michael’s artistic identity
Unclear Navigation Pathways — Navigation felt uninviting, lacking a clear path to explore his work
Together, these insights clarified what the portfolio needed to communicate: presence, personality, and an immediate sense of who Michael is.
explorations
I explored multiple landing page compositions, testing how different layouts shaped the first impression.
The questions guiding this phase were simple:
What should people feel in the first three seconds?
What content deserves to be above the fold?
What visual rhythm reflects Michael’s artistic style?
How do we invite people to keep scrolling?
Early concepts included varied image scales, bold versus quiet typography, and different narrative starting points. The full-bleed imagery approach won out because it matched user preferences while highlighting Michael’s presence and craft.
final design
The final portfolio spans four core pages — each carrying the same design system and emotional tone:
Landing Page — Immersive full-bleed imagery, elegant type, and immediate clarity about Michael’s artistic identity.
About Page — A balanced blend of narrative and visuals, cutting down unnecessary text and highlighting what matters most to users.
Project Detail Pages — Clean layouts showcasing performances, works, and media with supportive typography and thoughtful pacing.
Media Page — A polished hub for videos, recordings, and photography — bringing Michael’s sound and movement to the forefront.
Microinteractions — fade-ins, line animations, hover states — help the site feel alive without overpowering the content. Everything is built responsively and faithfully from Figma into Webflow.
reflection
This project pushed me to bridge design and development — not just imagining the experience, but building it.
1. Bringing Designs to Life
Learning how to translate Figma files into a fully functional Webflow website pushed me to think more critically about structure, responsiveness, and accessibility. It taught me how design decisions play out in real implementation.
2. Elevating Craft Through Motion
Experimenting with Lottie animations, microinteractions, and transitions helped me understand how subtle movement can add emotion and sophistication without overwhelming the experience.
3. Designing for Elegance and Usability
This project stretched my ability to balance aesthetics with clarity. Building for a real artist forced me to refine visual decisions, define a confident brand voice, and ensure the site remained easy to navigate.
special thanks to chris becker! (ㅅ´ ˘ `)
