Muse Media, UI/UX Designer Internship
Redesigning a student fashion publication to improve content discoverability and editorial clarity.
Role
UI/UX Designer
Teammates
Irene Kang
Katie Yoon
Sunny Tian
Tim Shim
Tools
Figma, FigJam
Timeline
June 2024 - Jan 2026
Outcome
Created a clearer, scalable website experience for a student-run publication by improving homepage focus, and standardizing content patterns across desktop and mobile.
Scope
UX Audit
Information Architecture
Wireframing
Responsive UI Design
Content Hierarchy
Design System Thinking
Overview
Preserve personality, facilitate easier navigation and maintenance.
Muse Media is a student-run fashion and identity publication at the University of Washington. Its website serves as an editorial platform and a welcome for contributors and prospective members.
As the UI/UX designer on this project, I redesigned key parts of the experience across the 2024 launch redesign and a 2026 iteration. While the site had a strong visual identity, the experience lacked consistency in hierarchy and content structure. This meant approaching the visual refresh as a systems problem of discoverability and long-term usability.
Challenges
Addressing inconsistently structured content.
Through review of the existing experience, I identified three primary problems weakening one of the site's most important goals: helping readers discover and engage with Muse's stories.
Unclear homepage hierarchy
Multiple sections competed for attention at once, making it difficult for users to understand what was most important or where to begin.
Inconsistent content patterns
The homepage, archive, and blog used different visual and structural logic, which made the browsing experience feel fragmented.
Readability issues
Some text treatments and layout decisions made content harder to scan, especially in places where editorial styling took priority over legibility.
Design Approach
Fixing the surface vs. structure.
The existing site had a workable structure but weak execution. The older site featured a centered nav that included a defunct "Shop" feature instead of "Archive", a hero with no clear text hierarchy, and no consistent reading entry point. The first task was deciding whether to patch existing issues or take the opportunity to redesign with editorial intent.
For the homepage, the redesign established a clear visual priority order:
large hero image anchored to the current issue
3-column featured article grid with consistent image ratios
chronological Latest feed below the fold
oversized footer wordmark as a brand signature
Keep the centered wordmark and nav, fix spacing and typography inconsistencies, swap "Shop" for "Archive." Faster to ship, but the layout's weak hierarchy remains.
Wordmark flush left, move nav flush right. Anchor issue title and CTA bottom-left, establishing a clear reading entry point. Introduce a "Featured" content section.
Since the centered hero text with no dominant anchor had no reading hierarchy, a website visitor's eye had nowhere obvious to go first. This did not stem from a spacing problem, but rather a layout decision that needed to be remade. Option B then became the foundation for every subsequent decision regarding the nav structure, hero layout, content grid, and the template system, that was built to sustain it all as the team turned over annually.
Research and Inspiration
Understanding Muse's definition of editorial at the right scale.
Muse is a student-run university publication, with its distinction from other editorials shaping everything about the research phase. I drafted a comprehensive mood board of popular fashion publications for reference to balance the aesthetic of editorial ambition with practical constraints.
Feedback from the Editor in Chief.
The team assembled a reference board pulling from different magazine websites:
Dazed Digital (large category tiles, image-dominant grid)
W Magazine (clean left-aligned nav, clear hierarchy)
Stack Magazine (independent publication positioning, stacked issue library)
fashion labels Hyein Seo and Chogiseok (minimal, white-space-driven)
Vogue and Chanel (lightly referenced or used as counterpoints to not design for features that did not exist)
Early in the process, I reviewed annotated design feedback from Somi Park, our Editor in Chief. Her notes directly shaped structural decisions:
The hero section should be swappable to promote the current issue, recruitment, or any campaign.
Thumbnails need a consistent aspect ratio so any staff photographer's image fits the card grid.
Navigation should stay simple: About, Archive, Blogs.
I treated the brand guidelines as active design constraints, especially the personality keywords clean, cohesive, and timeless. This meant no unnecessary decorative ornamentation design, and that the intentional use of space was brand-accurate rather than an aesthetic preference. Much of the design system was already established, so my job was to apply it more rigorously to the site.
Defining the System
Mapping the structure before designing the surface.
Before wireframing any pages, I mapped the full information architecture to understand how the site's content was organized and where users were likely to get lost or confused.
Site structure mapped before any pages were designed: Home → Archive, Blogs, About, with all sub-pages.
The sitemap revealed several structural decisions to resolve, as the top-level nav didn't necessitate a redesign, but sub-navigation needed clearer signposting. The distinction between "Current Issue" and "Past Issues" under Archive wasn't obvious, and the four editorial pillars (Fashion, Lifestyle, Culture, Identity) under Blogs needed to be surfaced earlier in the browsing flow rather than hidden after scroll.
The digital issue needed to feel like a clear destination instead of just a PDF link, which influenced how we designed the Archive page. The About page also needed to accommodate annual team growth across 2023–2026, which was solved with a photo-grid-by-year approach where each cohort receives equal visual weight.
Wireframes and Iterations
Building a consistent system page by page.
Blog page directory.
The Blogs page leads immediately with the four editorial pillars (Fashion, Lifestyle, Culture, Identity), fulfilling a key piece of feedback that category navigation should not be buried below the fold.
Blog page by category.
Suisse Int'l 45pt headers, Suisse Works 19pt body, 6-column grid. A system any future designer can follow.
Template applied to a sample article.
One of the earliest and highest-leverage decisions was standardizing the blog post template, since it is the most frequently produced artifact on the site. The template established a clear typographic hierarchy:
Suisse Int'l Semi Bold at 45pt for article titles
Suisse Works Regular at 19pt constrained to a 6-column grid for body text
Read More footer section with 3 article cards
With multiple writers producing content each quarter, a well-defined template meant design quality would not degrade as team membership changed year over year.
Archive page.
The Archive page treated past issues as collectible objects worth revisiting. The two most recent issues display larger, with older ones in a tighter 4-up grid, communicating recency and desirability without explicit labeling.
High-Fidelity Redesign
Designing for devices Muse's readers actually use.
Much of fashion media is consumed on phones, shaping our every layout decision from the start.
On desktop, the nav sits right-aligned with the Muse wordmark flush left. On mobile it collapses to a hamburger with the wordmark centered, the same pattern used by Dazed and Highsnobiety, which feels native to editorial media on a small screen. The landing page's asymmetric hero and sidebar layout translates to a 2x2 photo grid on mobile, making the four editorial pillars immediately tangible and touch-friendly.
Mobile landing.
Mobile blog directory.
Mobile blogs.
Mobile blog.
Mobile staff.
Mobile archive.
All article thumbnails were standardized to a single aspect ratio that works at both desktop card size and mobile full-width. This was a deliberate system constraint, since any staff photographer's image should fit cleanly without custom cropping at either breakpoint.
Body text at Suisse Works 19pt on a 6-column desktop grid naturally translates to single-column mobile at a comfortable line length, with no additional mobile-specific overrides needed. The Meet the Staff grid uses a 2-column portrait layout on mobile, maintaining the community feel of the About page even at the smallest viewport.
Responsive and Mobile Thinking
Every design decision was a brand decision.
One of the clearest signals that a redesign has succeeded is when someone familiar with the brand looks at the new designs and says this feels like us, but better, which was the standard I held every decision against. Rather than introducing anything new, I worked to apply the existing system more rigorously with consistent sizing, weight usage, and alignment. In turn, the brand identity felt stronger.
The primary palette of near-black, warm white, and off-white is a constraint that most student publications would push against. It feels plain until you see it working with Muse's photography, where the images provide all the color the pages need. The brand guidelines explicitly call out intentional use of space, so that generous margins and tight content grids are the visual equivalent of the publication's editorial voice.
Nonetheless, the single highest-impact brand decision in the entire redesign was the oversized, partially-cropped Muse wordmark in the footer. It turned a functional element with a copyright notice and social links into a signature moment that reads as confident and distinctive.
Community-first as mission statement leads and staff roster follows
Brand Alignment
What shipped, and what the numbers showed.
The 2024 redesign launched at musemediauw.com and has served as the publication's web presence through Issue 06 (2024) and Issue 07 (2025), with Issue 08 currently in production for Spring 2026. The 2026 iteration extended the system further, refining the About page, updating the staff roster to accommodate four years of team photography, and sharpening the homepage editorial focus.
What shipped across both cycles was the result of a comprehensive design process:
redesigned homepage with clear hero hierarchy and a consistent article grid
standardized blog post template system adopted by the full editorial team
Archive page with a photo gallery
responsive mobile experience across all pages
blog post guidelines documentation
About page with roster-first thinking
A month after launch, the website's click-through rate increased by 32%. 7 distinct page types were redesigned across 2 full design cycles. The blog post template system was deployed across 4 editorial pillars and maintained through 3 annual team transitions with design resilience. The site supported 2 complete issue launches and is actively supporting a third, with zero major visual regressions between cycles, a direct result of the template-first approach.
Outcome
Designing for launch, but more importantly longevity.
Since Muse is a student organization with a design team that turns over every year, that circumstance shaped the most important lesson I took from this project: a design that cannot be maintained or extended is a design that will eventually be abandoned.
The blog post guidelines document, the consistent template system, and the brand constraints treated as features rather than limitations were both good design practice and insurance that the visual quality of the site will survive my departure and the departure of every designer who follows.
Still, If I were starting over, I would invest more time upfront in documenting the design rationale, not just the specifications. Showing the why behind the 6-column body grid or the footer wordmark makes those decisions more justifiable across team transitions. The most durable decisions I made were not the most visually interesting ones, but were the ones easiest to understand and replicate without me in the room.
Reflection
What I'd do differently.
Looking back across both design cycles, there are two opportunities I would approach differently from the beginning.
First, document the rationale earlier and more thoroughly. I produced specifications (type sizes, grid measurements, component behavior) but could have done a better job capturing the reasoning behind each decision. The 6-column body grid, the swappable hero, and the footer wordmark were deliberate, but their logic lives mostly in Figma comments and my own head. A simple design decision log, maintained alongside the Figma file, would have made those decisions more justifiable across team transitions.
Second, invest in an intuitive design handoff protocol from the beginning. Every year, new contributors join the Muse design team. The blog post template guidelines I created were helpful, but they were created reactively, after the first cycle had already surfaced gaps. Starting with a documented onboarding resource for incoming designers would have preserved system fidelity more robustly from the first transition onward.
Both of these are fundamentally the same insight that the best design for a student organization is as much about knowledge transfer as it is about visual craft.