Homepage Refresh & Navigation Reorganization
Motion Pictures Association (MPA)
Brand Identity
Design Systems
User Interface (UI) Design
User Experience (UX)
Prototyping
Responsive Web Design
Wireframing
My Role
Designed the updated homepage UI
Established a scalable design system for reusable modules
Led design QA to ensure the build matched design intent
Coordinated dev handoff and supported implementation
Team
Design/UI Lead (me)
Content Strategist (Cassie Boehm and Reilly Knecht)
Web Developer (Alison Phanthavong)
Art Director (Bella Lawoo)
Results
Helped support a future-proof headless infrastructure, allowing MPA’s team to scale content more easily
Achieved a 12% decrease in time to publish, reducing friction for the marketing team
Reduced usability friction for both stakeholders and site visitors through a more streamlined homepage experience
Challenge
The Motion Picture Association’s homepage and navigation had a confusing information architecture and a user experience that didn’t serve its audience. The digital strategy team asked us to identify opportunities to improve usability and strengthen brand alignment—but with one major constraint: we could only redesign the homepage.
A key goal was to support MPA’s visual shift from their iconic blue/green brand elements toward the purple palette introduced in their 100th anniversary campaign. At the same time, their digital strategy, content, and marketing teams needed a site experience that allowed them to publish content independently, while their developers needed clearer structure and guidance for how homepage modules should function and scale.
Another key goal was restructuring their two navigation bars to improve usability and streamline userflow.
A before and after of replacing their color palette to improve accessibility.
MPA had felt that their color palette on their website was hard to work with, hard to see, and conflicted with all the visuals they like to showcase. They wanted to implement their 100th anniversary color palette to create a more modern, cohesive brand presence across their digital channels.
The team and I understood that any branding updates made to the homepage would ripple across the entire site — so we needed to think carefully about how content blocks and visual elements would be affected at scale.
Insights
Updating design system elements will affect the entire site
Because we were only scoped to redesign the homepage, every decision we made had to account for the broader site. Updating typography, color tokens, and component styles on the homepage would eventually influence how the rest of the site looked and behaved — so we approached every change as a system decision, not just a page decision. This meant creating components that were flexible enough to extend beyond the homepage without requiring a full site overhaul.
Simplifying their brand elements
MPA shared that their current website color palette was difficult to work with—both visually and functionally. It often clashed with the media and visuals they wanted to feature, and in some cases created accessibility issues due to low contrast.
Because any branding updates we introduced on the homepage would eventually influence the rest of the site, we had to think beyond a one-off redesign. That meant designing content blocks and UI elements in a way that could scale across future pages without breaking consistency.
What I did
Prioritized responsive usability & accessibility
A major focus of my work was ensuring the navigation and homepage experience worked smoothly across all screen sizes.
To improve discoverability and reduce confusion, I consolidated and reorganized the navigation into more intuitive content buckets, making it easier for users to find what they needed quickly.
I simplified the navigation into a clean black navbar, which sharply improved text contrast and let MPA's visuals and brand accents breathe without competing with the UI. By incorporating the 100th anniversary purple palette more intentionally, we were also able to resolve color contrast issues and create a more modern, cohesive brand presence.
Throughout the process, I collaborated closely with developers to make sure interactive elements were accessible and obvious—for example, ensuring carousel components included arrow buttons rather than relying on swipe-only interaction.
Built a scalable module-based design system
Since MPA wanted their internal teams to be able to publish and update content without heavy dev involvement, I approached the homepage redesign with modularity in mind.
I built a flexible design system around reusable content modules — giving MPA's teams the freedom to build new pages using consistent patterns while still having room to vary layout and content as needed.
Coordinated design handoff + design QA
For the development handoff, I created annotated breakdown screens and style documentation that mapped directly to Drupal 10 functionality. This helped bridge the gap between design intent and CMS reality, especially for modular components.
After handoff, I stayed involved through implementation—reviewing builds, fine-tuning spacing, and ensuring brand assets were applied consistently. The updated homepage UI launched in September 2024.
Results
The redesigned homepage was built to support MPA's headless infrastructure — giving their team a scalable foundation to publish content more efficiently and adapt to evolving digital needs.
By establishing a clearer modular system and improving CMS guidance, we reduced friction for the marketing team and achieved a 12% decrease in time to publish, enabling faster and more independent content updates.
The streamlined navigation and improved information architecture reduced friction across the user journey, creating a more intuitive experience for both internal stakeholders and external site visitors.
Accessibility improvements—including stronger color contrast, refined typography, and updated line height—significantly enhanced readability and overall usability across devices.
The expanded module-based design system gave MPA's development team a clearer framework to build from — laying the groundwork for more consistent, scalable page production going forward.
Helped support a future-proof headless infrastructure, allowing MPA’s team to scale content more easily
Achieved a 12% decrease in time to publish, reducing friction for the marketing team
Reduced usability friction for both stakeholders and site visitors through a more streamlined homepage experience