ROLE
UX/UI Designer, Graphic Designer
TIME
March 2025 to September 2025
TOOLS
Bricks Builder, Wordpress, Figma
TYPE
Evolving Web Redesign
PROBLEM
Craftsmanship Without Clarity
YEN Studios needed a digital home that could hold everything they do without feeling cluttered or directionless. Their existing Elementor setup on a shared server could not support the level of interactivity they envisioned.
Navigation relied heavily on page-to-page links with minimal use of the primary nav, leaving users without a clear sense of where they were or where they could go. For a studio built on creative expression, a site that felt structurally confused was holding the brand back.
ROLE
From Concept to Handoff
Design
Full site architecture, graphic design, and visual direction handled independently to keep the build cohesive and on brand
Build
22+ custom components developed with responsive layouts, custom CSS animations, and full mobile compatibility across all viewports
Handoff
Delivered written instructions and a walkthrough video so the team could manage and expand on their own
USER GROUPS
Creatively Inclusive
YEN Studios did not have a narrowly defined user base. Their content spans multiple creative mediums, naturally drawing a broad range of people. The clearest common thread was young adults, curious and creatively inclined, but beyond that the audience was intentionally open.
This made designing for clarity especially important, since the site needed to feel immediately navigable to anyone who landed on it regardless of why they came.
SITE MAPPING, NAVIGATION FLOW
Mapping Things Out
STEP-BY-STEP
Building the Foundation
After assessing the limitations of their existing setup, I recommended migrating to Bricks Builder, a lightweight visual editor that generates cleaner code and faster rendering. To further reduce risk during development, I set up a backup environment on Digital Ocean with higher RAM allocation, providing a faster and more stable workspace.
Key decisions included:
01 — Magazine
layouts
Clean grid structures were built for articles and creative showcases to balance imagery and text
Simple but expressive visuals were created specifically for the site, reinforcing YEN's message of creative freedom without getting in the way of readability
03 — Custom CSS
Elements
Coded by hand to fulfill requests from usability testing, adding expressive motion without compromising performance
04 — Reusable
Components
Built 22 components as resettable templates so the team could freely duplicate and edit pages without risking the overall structure
05 — Full Response Build
All modules tested and optimized across desktop, tablet, and mobile viewports
USABILITY TESTING/RESULTS
Does it Actually Work?
Two rounds of testing with 7 participants shaped the final build. A/B testing against the original revealed clear gaps in content differentiation and navigation. The revised prototype outperformed the original in both areas, with minor feedback around transitions and scroll interactions guiding the final phase.
All 3 comparative testing participants preferred the redesign, a 100% preference rate
Across 27 total responses, feedback split 22 positive, 4 mixed, and 1 negative
Pre-final testing passed 7 out of 10 criteria across phone and tablet, with 3 areas flagged and addressed
The hero animation earned a 3.5 out of 4 approval rating