Redesigning Universal Movie Deals Store to Increase Purchases
I led the redesign of NBCUniversal’s Digital Movie Deals site, reducing the checkout from 7 to 3 clicks and increasing purchases through a scalable mobile-first design system. By rethinking navigation, hierarchy, and visual clarity, we created a frictionless experience that engaged new users and encouraged repurchases.
Timeline
Sep 2022 – Dec 2022
Contribution
UX Research, UI Design, Design System, Prototype Testing
My Role
UX and Visual Designer
Main project view - Final design
Overview
NBCUniversal’s Digital Movie Deals site struggled to convert and retain users due to complex flows, low visual hierarchy, and outdated navigation. I redesigned the site’s full experience to simplify decision-making and optimize the buying flow, especially on mobile.
Through a clear structure, visual hierarchy, and updated flows, we improved purchase rates, increased user engagement, and introduced a unified design system that scaled across screen sizes.
The Challenge
The original site had long, unclear purchase flows, weak UI hierarchy, and no account system to support returning users. This led to low engagement and short session duration, high drop-off during purchase steps, a decrease in new user conversions and poor retention due to lack of purchase history. We aimed to:
- Increase new user purchases
- Reduce the checkout process to under 3 clicks
- Improve visual clarity and hierarchy
- Build a flexible design system to support future iterations
Before and After
Before
After
Process and Solution
My approach involved a comprehensive design process:
Research and Discovery
We conducted competitive analysis, user behavior research, and flow audits. We identified the main blockers across login, purchase, and registration. Key insights included:
- Scroll-heavy UI with unclear navigation
- CTAs lacked visual hierarchy and urgency
- Users couldn’t track purchases or account activity
- Layout inconsistency across screen sizes
Information Architecture
We reorganized core sections to follow a visual hierarchy optimized for mobile.
Navigation was cleaned up to reduce visual clutter, and we restructured how categories and movie covers appeared to guide users more intuitively.
Wireframing and Prototyping
I tested multiple layout variations for login, registration, and product pages to minimize cognitive load and remove unnecessary steps. Key improvements included:
- Optimized login and sign-up screens
- CTA positioning and labeling for mobile
- Streamlined product page layouts to avoid scrolling
Visual Design
We created a new design system, built with consistent spacing, typographic rhythm, and updated iconography. I preserved the brand palette while ensuring accessibility and visual balance. Design decisions focused on:
- Increased CTA visibility
- Readable text sizes for accessibility
- Mobile-first scaling principles
- Label consistency and action clarity
Results and Impact
Reduced in checkout
Engagement through mobile-first flows
Visual clarity with consistent spacing, labeling, and hierarchy
A scalable Design System for future implementation
The redesign led to a better experience for new and returning users, simplifying the journey and making purchasing intuitive across devices.
Learnings and Takeaways
- Simplifying visual and interaction flows had a significant impact on reducing drop-off.
- Prioritizing mobile-first and content hierarchy made the site more intuitive.
- Designing with responsiveness and consistency in mind helped establish trust and repeat usage.
- Early collaboration with engineers ensured design feasibility across platforms.
Continue Exploring