Gift with purchase website

AMAZON PRIME

Superman Offer

Collaborated on a promo microsite for the Amazon Prime x Warner Bros “Gift with Purchase” campaign, giving Prime users early access to the new Superman movie via Fandango. Designed a seamless login flow using Amazon’s API, co-led UI design within brand guidelines, iterated based on feedback, and contributed HTML/CSS for a responsive, fan-focused experience.

CLIENT KICKOFF

CLIENT KICKOFF

The project began with a kickoff meeting to align with the client and key stakeholders on the campaign’s goals, requirements, and overall vision. We discussed the user experience, technical requirements for Amazon API integration, brand guidelines, and the promotional flow connecting Amazon Prime members to Fandango. This initial collaboration helped establish project expectations, identify potential challenges, and define a clear direction for the design and development process, ensuring a seamless and engaging experience for users.

UI DESIGN

The visual design process focused on creating a seamless, engaging experience while maintaining consistency with Amazon Prime, Warner Bros., and Fandango brand guidelines. Using Figma, I developed high-fidelity mockups that brought the Superman campaign to life through bold visuals, thoughtful typography, and intuitive interface elements. I used Figma’s Auto Layout, reusable components, component variants, and shared styles to create a cohesive design system that streamlined updates and maintained visual consistency. I also utilized interactive prototyping, Smart Animate, and responsive constraints to demonstrate key interactions and ensure a cohesive experience across desktop and mobile devices. Through collaborative design reviews, Figma comments, and multiple rounds of iteration, I refined the interface based on stakeholder feedback while balancing creative direction, usability, and technical requirements to ensure a smooth transition into development.

SITEMAP & WIREFRAMES

The process began by developing a sitemap to establish the site's structure and map out the user journey from Amazon Prime authentication to accessing the Superman movie promotion through Fandango. Using Figma, I created low-fidelity wireframes to explore page layouts, content hierarchy, and key interactions. I incorporated Figma’s prototyping tools to demonstrate user navigation, interactive elements, and transitions throughout the experience. These early concepts helped align stakeholders, identify usability challenges, and establish a solid foundation before moving into visual design.

HANDOFF & DEVELOPMENT

To ensure a smooth transition from design to development, I utilized Figma's Dev Mode, Inspect panel, and component libraries to provide developers with detailed design specifications, including spacing, typography, color values, and responsive layout guidelines. I organized design files with clearly labeled components, variants, and reusable styles to streamline the handoff process and maintain consistency throughout development. Working closely with the development team, I helped translate high-fidelity designs into functional front-end code, contributing HTML and CSS to build responsive layouts and interactive UI elements. I also collaborated on troubleshooting styling issues, refining responsive behavior, and ensuring the final implementation accurately reflected the approved designs while delivering a seamless user experience across devices.