Summary ✦
Design Focus
Branding, Visual, UX/UI, Prototyping, Motion
Tools
Figma, Adobe Illustrator, Adobe After Effects, Adobe Photoshop
Creation Time
February 2025 [ 20/40 hours ]
Purpose
DESNathon 2025, an annual 40-hour hybrid design event hosted by York University's Design Student Association (DSA)
Contrast is an invite-only event for connecting companies together, to promote eco-friendly and more sustainable practices where they send representatives to connect and find a contrasting partnership.
In collaboration with
Sam Lampano
Roles
Yuki: Lead Motion Designer,
UX/UI Designer, Visual Designer
Sam: Lead of Branding, Lead Researcher,
UX/UI Designer, Visual Designer
Challenge
Circular Connections:
A Campaign or Digital Platform for Unlikely Partnerships
Sorry... Invite Only!
Contrast is an invite-only event connecting companies specializing in sustainability with industries looking to adopt greener practices. Each quarter, exclusive three physical invitations are sent to companies for their representatives, reinforcing the event’s exclusivity. Enclosed in the invitation package is a physical ticket, which grants access to the Contrast app—a key component of the event experience.
The app features three main screens: finding uour contrast, the digital ticket, and the drink menu. The drink menu allows attendees to purchase drinks for themselves, colleagues, or even other company representatives. All drink purchases are covered by attending companies, with proceeds funding future events to keep Contrast operating as a non-profit initiative.
Prototype
Notes on Viewing Prototype
Click anywhere on the screen to see active interactive elements highlighted in blue. Use the arrow keys to manually navigate through the different screens or restart from the beginning. If you have access to a keyboard,press "R" to restart the prototype, this will enable the start app animation (Figma sharing skips it).
Final Screens ✦
Despite tight time constraints, the final screens for Contrast were designed to deliver a seamless and engaging experience.
Splash Page Establishes branding and sets the tone for the app.
Ticket Scanner Allows users to scan their physical ticket for app access.
Profile Setup Gathers sustainability goals and company details for better matchmaking.
Finding Your Contrast Connects attendees with companies that complement their sustainability efforts.
Digital Ticket Provides entry access and event details.
Schedule Organizes meetings and interactions with matched companies.
Menu Enables drink requests for colleagues or other representatives, funded by participating companies.
Promotional Materials ✦
The promotional materials for Contrast ensure a cohesive brand experience across print and digital touchpoints. From event signage and brochures to tickets and invitations, each piece is designed for both function and impact.
Using black recycled cardstock with high-contrast gradients, the materials reinforce a modern, dynamic aesthetic. Clear wayfinding signage, a minimalist event program, and a QR-integrated ticketing system streamline the experience, making Contrast a seamless blend of design, sustainability, and functionality. Enclosed in a custom envelop for that extra brand identity.
Invite Card
Adobe Illustrator
Physical and Digital Tickets
Adobe Illustrator, Figma
Event Program
Adobe Illustrator
Mockup: Adobe Photoshop
Signage
Adobe Illustrator
Mockup: Adobe Photoshop
Visual Design ✦
The vibe of Contrast is bold, modern and high-energy—clean lines, stark contrasts, and vibrant accents come together to create something that feels both polished and dynamic. It’s sleek but not sterile, striking the perfect balance between minimalism and personality. The high-saturation colors pop against deep blacks and crisp whites, giving it a futuristic, high-impact look that commands attention.
It’s the kind of design that feels effortlessly cool and intentional, where every element has a purpose. Whether through typography, colour or motion, Contrast keeps things fresh, sharp, and visually engaging, embodying a confident, contemporary aesthetic that stands out.
Constraints
Understanding the constraints helps influence our design decisions.
Design
Contrasting visuals, leveraging dynamic animations while balancing a sleek, professional feel.
Experience Type
Mobile Experience
Feasibility
To keep the time frame realistic, this project focuses the main user flow.
Challenge
How do we connect different industries together to promote sustainable, unlikely connections?
Visual Identity
Like its name, Contrast embraces stark black and white as primary colors, paired with highly saturated, contrasting hues for accents. This creates a bold, modern aesthetic that reinforces the brand’s identity.
To maintain a clean and polished look, a sans-serif typeface was chosen, ensuring clarity, versatility, and a contemporary feel across all branding elements. The design system balances minimalism with striking color contrasts, making Contrast visually dynamic and impactful.
Motion
Using simple motion animations in Adobe After Effects and interaction animations in Figma, Contrast comes to life through movement, creating an immersive and dynamic visual experience. Motion enhances the design, making interactions feel fluid and engaging while reinforcing the overall aesthetic.
Visual Elements
Using consistent and simple buttons and icongraphy to navigate the user throughout the app for a seamless experience.
Buttons
Iconography
Process Work ✦
Contrast was built from the ground up, starting with ideation, sketches, and brainstorming to refine the concept of opposites attracting, circular design, and unlikely connections. Early wireframes and notes explored ways to integrate these ideas into both visual identity and user experience, shaping the foundation for branding and interaction.
As the project evolved, we transitioned from rough explorations to high-fidelity UI designs, branding elements, and motion graphics, utilizing tools like Adobe After Effects, Illustrator, Photoshop, and Figma. The final execution merges bold storytelling, strategic UX, and seamless motion, creating an engaging and functional experience that reflects the essence of Contrast.
Sketches and Initial Concepts
Procreate, Adobe Illustrator
Preliminary Concepts
Figma, Adobe Illustrator
Reflection ✦
Contrast was both a challenge and a lesson in ideation, innovation, and iteration under a tight deadline. Working alongside my partner, we utilized multiple tools—including Adobe After Effects, Illustrator, Photoshop, and Figma—to bring the vision to life. This project pushed me to think quickly, refine concepts efficiently, and execute with intent, all while maintaining a strong and cohesive visual identity.