YEN STUDIOS WEBSITE REDESIGN

USER TESTING, WORDPRESS, BRICKS BUILDER, GRAPHIC DESIGN

OVERVIEW

YEN Studios is a multidisciplinary creative studio primarily focused on storytelling through personal design, visual art, podcasts, and editorial content; their website allows for the showcase towards these creative forms of media under a cohesive brand identity that is still evolving. During this project, I was responsible for building the digital foundation of their site while adapting to the constantly changing visual direction, integrating some visual and written content to ensure an experience to reflect their creative identity.

EVOLVING BRAND AND UNDEFINED DIRECTION

At the start of the project, YEN’s brand identity was still taking shape. Their aesthetic and philosophy center around creativity across all mediums, encouraging exploration through design, sound, and storytelling. The color palette, typography, and voice were being refined by multiple designers, resulting in shifting visual concepts and overlapping ideas.
My challenge was to design a digital structure that could evolve alongside the brand. A need for flexibility towards new content was a priority to not sacrifice the usability or cohesion with too much personal design implementations.

DESIGN CONSTRAINTS AND ALTERNATIVES

The team envisioned a highly interactive website with rich motion and dynamic visuals. However, their existing setup, using the free version of Elementor on a shared WordPress server hosting multiple sites, could not support that level of animation without significant performance issues.
To address this, I migrated the build to Bricks Builder using my personal license, a lightweight visual editor that generates cleaner code and delivers faster rendering. Alongside this migration, I optimized large media assets and standardized image formats to show a noticeable improvement in site speed and responsiveness.

COLLABORATION & ITERATIVE PROCESS

Each meeting brought new creative ideas, leading to multiple revisions and reevaluations. To improve efficiency and maintain consistency, I introduced structured feedback sessions focused on aligning visuals, content hierarchy, and functionality throughout development.
Originally, YEN’s site relied heavily on page-to-page navigation, with minimal use of the primary navigation bar. This made it difficult for users to understand the site’s overall structure or quickly access different sections.

To address this, I:

  • Created a comprehensive site map that enabled the team to visualize the full information architecture

  • Identified redundant and confusing page paths

  • Clarified the site’s navigation flow

  • Streamlined user movement across different content types

  • Refined typography, spacing, and layout components

FURTHER GRAPHIC DESIGN INCORPORATION

The design system merged YEN’s editorial and digital aesthetics directly to their website. I built clean, magazine formatted layouts for their articles and creative showcases using grid structures to balance imagery and text.


In addition to layout design, I created custom graphic elements to implement across pages. Simple yet expressive visuals that maintained readability while reinforcing YEN’s message of creative freedom and multi disciplinary exploration.

WORDPRESS CLEANUP

When I began development, the existing WordPress site was disorganized and overloaded with unnecessary files, duplicate images, and outdated plugins. To optimize performance, I removed unused assets, updated plugins, compressed large media files, and restructured folders for better organization.

I also guided the client through proper site maintenance practices, ensuring they understood how to manage and upload content without slowing down the server. Hundreds of redundant images were condensed, categorized, and placed in accessible directories to simplify their workflow and improve backend efficiency.

TEMPLATE AND CSS IMPLEMENTATION

To ensure YEN Studios could maintain and expand their site independently, I developed a library of reusable page templates and content modules that can be interchangeable across different pages. I structured these modules to work seamlessly across desktop, tablet, and mobile viewports, ensuring a cohesive experience regardless of device.

Beyond this, I custom coded CSS animations outside of the capabilities of the Bricks Builder options as per the previous usability testing requests to enhance user engagement without compromising performance.

To reduce the risk of data loss and increase in creation performance, I created a temporary backup site using Digital Ocean's hosting services with a greater RAM allocation.

PRIOR UX A/B TESTING

Initial UX and A/B testing towards the original site and my creation revealed that users struggled to differentiate between YEN’s diverse content types. There seemed to lack any consistency in terms of the formatting and the navigation proved to be somewhat unclear for first time art website viewers in the original site.


Through multiple design iterations, I refined the layout hierarchy, clarified labeling, and reduced visual noise to create a more intuitive flow between sections. My revised prototype out performed in both comprehension and navigation with the comparative testing.
Some minor feedback for my version, however, suggested simplifying certain transition effects and scroll interactions, as excessive motion occasionally distracted from the content itself. These insights helped guide the next phase of refinement: focusing on maintaining YEN’s expressive, creative feel while ensuring usability remained at the forefront.

FINAL SITE & FURTHER TESTING RESULTS

The final site showed major improvements in both usability testing and brand coherence. Load times were faster, the visual hierarchy was clearer, and the structure now supports seamless integration of future podcast and editorial content as YEN continues to expand.


User feedback emphasized how the redesigned platform finally felt like a functional yet expressive studio website: a digital space where sound, storytelling, and design could coexist under one cohesive creative identity.

READ MORE COLLABORATIVE PROJECTS

  • Kami Food Truck

    Kami Food Truck App Creation

    A 10-weel collaborative mobile app concept created combining usability testing with visual identity refinement.

    View project

  • EFS Website Redesign

    A redesign of a manufacturing company’s site. Here, my goal was to modernize the interface while maintaining a brand identity.

    VIEW PROJECT

  • Yen Studios Website Redesign

    A six month project involving an evolving identity and the revamp of a studio’s digital foundation to reflect their creative identity.

    VIEW PROJECT