Loyalty Program Integration for the McDonald's App
User flow for integrating McVIP coupons into the McDonald's app Germany.
Date
2018
Role
UX Konzept
Client
TRACK
Situation
McDonald's Germany was looking to integrate its McVIP loyalty coupons into the existing McDonald's app. At the time, the app already had a basic voucher section for bonus book coupons, but the loyalty landscape was expanding — McVIP, McCafé Sammelpass, and bonus book offers all needed a home, and users had no unified way to discover, manage, or personalize their coupons.
The challenge went beyond just adding a new feature. Multiple coupon types with different access rules — some exclusive to logged-in McVIP members, some locked as incentives to sign up — needed to coexist in a single, intuitive experience. On top of that, the solution had to work across both the app and the McDonald's website, maintaining consistency across platforms.
Situation
McDonald's Germany was looking to integrate its McVIP loyalty coupons into the existing McDonald's app. At the time, the app already had a basic voucher section for bonus book coupons, but the loyalty landscape was expanding — McVIP, McCafé Sammelpass, and bonus book offers all needed a home, and users had no unified way to discover, manage, or personalize their coupons.
The challenge went beyond just adding a new feature. Multiple coupon types with different access rules — some exclusive to logged-in McVIP members, some locked as incentives to sign up — needed to coexist in a single, intuitive experience. On top of that, the solution had to work across both the app and the McDonald's website, maintaining consistency across platforms.
Situation
McDonald's Germany was looking to integrate its McVIP loyalty coupons into the existing McDonald's app. At the time, the app already had a basic voucher section for bonus book coupons, but the loyalty landscape was expanding — McVIP, McCafé Sammelpass, and bonus book offers all needed a home, and users had no unified way to discover, manage, or personalize their coupons.
The challenge went beyond just adding a new feature. Multiple coupon types with different access rules — some exclusive to logged-in McVIP members, some locked as incentives to sign up — needed to coexist in a single, intuitive experience. On top of that, the solution had to work across both the app and the McDonald's website, maintaining consistency across platforms.
Task
As the UX concept designer, I owned the end-to-end concept and wireframe documentation:
Coupon hub architecture: Designing a centralized coupon management system that unifies McVIP, McCafé Sammelpass, and bonus book offers in one place.
User flows: Mapping out all key journeys — from discovering coupons through multiple entry points (direct navigation, push notifications, filters) to redeeming them in-store via QR code.
Access logic & personalization: Defining how the system handles different user states (logged in, not logged in, McVIP member vs. non-member) and how locked coupons create incentive without frustrating users.
Cross-platform consistency: Extending the concept to the McDonald's website with dedicated wireframes and flow documentation.
Detailed specification: Delivering a comprehensive wireframe document that could serve as the blueprint for design and development.
Task
As the UX concept designer, I owned the end-to-end concept and wireframe documentation:
Coupon hub architecture: Designing a centralized coupon management system that unifies McVIP, McCafé Sammelpass, and bonus book offers in one place.
User flows: Mapping out all key journeys — from discovering coupons through multiple entry points (direct navigation, push notifications, filters) to redeeming them in-store via QR code.
Access logic & personalization: Defining how the system handles different user states (logged in, not logged in, McVIP member vs. non-member) and how locked coupons create incentive without frustrating users.
Cross-platform consistency: Extending the concept to the McDonald's website with dedicated wireframes and flow documentation.
Detailed specification: Delivering a comprehensive wireframe document that could serve as the blueprint for design and development.
Task
As the UX concept designer, I owned the end-to-end concept and wireframe documentation:
Coupon hub architecture: Designing a centralized coupon management system that unifies McVIP, McCafé Sammelpass, and bonus book offers in one place.
User flows: Mapping out all key journeys — from discovering coupons through multiple entry points (direct navigation, push notifications, filters) to redeeming them in-store via QR code.
Access logic & personalization: Defining how the system handles different user states (logged in, not logged in, McVIP member vs. non-member) and how locked coupons create incentive without frustrating users.
Cross-platform consistency: Extending the concept to the McDonald's website with dedicated wireframes and flow documentation.
Detailed specification: Delivering a comprehensive wireframe document that could serve as the blueprint for design and development.
Action
Designing a centralized coupon hub The existing voucher section was built for a single coupon type. I redesigned it as a flexible coupon center that could accommodate multiple loyalty programs — current and future. Coupons display in alternating single- and two-column layouts, sorted by category and date, with clear visual labeling (McVIP icon, McCafé badge, bonus book number) so users can instantly identify what they're looking at.
Mapping user flows for every access scenario I designed detailed user flows covering how users reach and interact with coupons from different starting points: browsing the coupon hub directly, tapping a push notification, or arriving via deep link. Each flow accounts for the user's login and membership state — a non-McVIP user sees locked coupons as a teaser with a clear path to sign up, while a logged-in member gets the full experience with personalized offers and QR codes for in-store redemption.
Handling locked coupons as a conversion tool Rather than simply hiding unavailable coupons, I designed a "locked coupon" pattern: users can see what they're missing, creating a tangible incentive to join McVIP or activate McCafé Sammelpass. The concept specifies exactly when and why a coupon appears locked — not logged in, program not activated, or redemption limit reached — and provides a clear action to unlock it.
Building flexibility into the system I added filter and settings options so users can customize their coupon view — sorting by category, hiding expired offers, or showing only specific programs. Push notification prompts were integrated contextually, appearing only for users who haven't activated notifications yet, with a direct link to settings.
Documenting everything for handoff The deliverable was a comprehensive wireframe document (12+ pages) with annotated screens, numbered callouts, interaction specifications, and edge case documentation — detailed enough for visual designers and developers to work from without ambiguity.
Action
Designing a centralized coupon hub The existing voucher section was built for a single coupon type. I redesigned it as a flexible coupon center that could accommodate multiple loyalty programs — current and future. Coupons display in alternating single- and two-column layouts, sorted by category and date, with clear visual labeling (McVIP icon, McCafé badge, bonus book number) so users can instantly identify what they're looking at.
Mapping user flows for every access scenario I designed detailed user flows covering how users reach and interact with coupons from different starting points: browsing the coupon hub directly, tapping a push notification, or arriving via deep link. Each flow accounts for the user's login and membership state — a non-McVIP user sees locked coupons as a teaser with a clear path to sign up, while a logged-in member gets the full experience with personalized offers and QR codes for in-store redemption.
Handling locked coupons as a conversion tool Rather than simply hiding unavailable coupons, I designed a "locked coupon" pattern: users can see what they're missing, creating a tangible incentive to join McVIP or activate McCafé Sammelpass. The concept specifies exactly when and why a coupon appears locked — not logged in, program not activated, or redemption limit reached — and provides a clear action to unlock it.
Building flexibility into the system I added filter and settings options so users can customize their coupon view — sorting by category, hiding expired offers, or showing only specific programs. Push notification prompts were integrated contextually, appearing only for users who haven't activated notifications yet, with a direct link to settings.
Documenting everything for handoff The deliverable was a comprehensive wireframe document (12+ pages) with annotated screens, numbered callouts, interaction specifications, and edge case documentation — detailed enough for visual designers and developers to work from without ambiguity.
Action
Designing a centralized coupon hub The existing voucher section was built for a single coupon type. I redesigned it as a flexible coupon center that could accommodate multiple loyalty programs — current and future. Coupons display in alternating single- and two-column layouts, sorted by category and date, with clear visual labeling (McVIP icon, McCafé badge, bonus book number) so users can instantly identify what they're looking at.
Mapping user flows for every access scenario I designed detailed user flows covering how users reach and interact with coupons from different starting points: browsing the coupon hub directly, tapping a push notification, or arriving via deep link. Each flow accounts for the user's login and membership state — a non-McVIP user sees locked coupons as a teaser with a clear path to sign up, while a logged-in member gets the full experience with personalized offers and QR codes for in-store redemption.
Handling locked coupons as a conversion tool Rather than simply hiding unavailable coupons, I designed a "locked coupon" pattern: users can see what they're missing, creating a tangible incentive to join McVIP or activate McCafé Sammelpass. The concept specifies exactly when and why a coupon appears locked — not logged in, program not activated, or redemption limit reached — and provides a clear action to unlock it.
Building flexibility into the system I added filter and settings options so users can customize their coupon view — sorting by category, hiding expired offers, or showing only specific programs. Push notification prompts were integrated contextually, appearing only for users who haven't activated notifications yet, with a direct link to settings.
Documenting everything for handoff The deliverable was a comprehensive wireframe document (12+ pages) with annotated screens, numbered callouts, interaction specifications, and edge case documentation — detailed enough for visual designers and developers to work from without ambiguity.
Result
The concept delivered a complete, implementation-ready blueprint for McDonald's Germany's coupon integration:
A unified coupon hub that consolidates multiple loyalty programs into a single, scalable section — designed to accommodate future programs without structural changes.
Comprehensive user flows covering every entry point and user state, from first-time visitors to active McVIP members, with clear logic for locked content and conversion paths.
Cross-platform wireframes ensuring a consistent coupon experience across the app and website.
A detailed specification document that served as the definitive reference for visual design and development, reducing interpretation gaps and back-and-forth.
This project demonstrated my ability to take a complex feature integration — multiple coupon types, varying access levels, cross-platform requirements — and distill it into a clear, well-documented UX concept that balances user needs with business goals.
Result
The concept delivered a complete, implementation-ready blueprint for McDonald's Germany's coupon integration:
A unified coupon hub that consolidates multiple loyalty programs into a single, scalable section — designed to accommodate future programs without structural changes.
Comprehensive user flows covering every entry point and user state, from first-time visitors to active McVIP members, with clear logic for locked content and conversion paths.
Cross-platform wireframes ensuring a consistent coupon experience across the app and website.
A detailed specification document that served as the definitive reference for visual design and development, reducing interpretation gaps and back-and-forth.
This project demonstrated my ability to take a complex feature integration — multiple coupon types, varying access levels, cross-platform requirements — and distill it into a clear, well-documented UX concept that balances user needs with business goals.
Result
The concept delivered a complete, implementation-ready blueprint for McDonald's Germany's coupon integration:
A unified coupon hub that consolidates multiple loyalty programs into a single, scalable section — designed to accommodate future programs without structural changes.
Comprehensive user flows covering every entry point and user state, from first-time visitors to active McVIP members, with clear logic for locked content and conversion paths.
Cross-platform wireframes ensuring a consistent coupon experience across the app and website.
A detailed specification document that served as the definitive reference for visual design and development, reducing interpretation gaps and back-and-forth.
This project demonstrated my ability to take a complex feature integration — multiple coupon types, varying access levels, cross-platform requirements — and distill it into a clear, well-documented UX concept that balances user needs with business goals.
