Hack Canada
Website Development
ROLE
Lead Web Designer User Research 3D and Motion Animation Product Designer
About the project
When I was asked to design the Hack Canada website, I didn’t want it to feel like just another hackathon site. I wanted to create something that went beyond the usual; a digital space that felt like a road trip through Canada, but make it tech. With every scroll, users would journey through a new season: forests, trails, lakes… all rendered in pixels. My goal was to turn the site into an immersive experience, not just a destination.
Research
Prototype and Iteration Process
I built a high-fidelity interactive prototype in Figma, incorporating hover states, smooth transitions, and responsive component variants. I iterated on the design multiple times, using feedback and real user insights to spot pain points, clean up interactions, and improve clarity each version felt smoother and more intuitive.
Collaborated closely with the development team to explain the design component, interaction patterns and design system behavior. I provided detailed documentation and regular weekly check in to maintain visual and functional consistency,
Prototype and Iteration Process
My Learning's
Empathize, Define, Prototype Iteration
I conducted a landscape analysis of hackathon and tech event websites to identify patterns and pain points. Many lacked emotional engagement and a fun, distinct identity, or clear information architecture.
From these insights, I articulated a clear problem statement:
“How might we design a hackathon website that feels welcoming, proudly Canadian, and deeply engaging while remaining accessible, intuitive, and performance-optimized?”
I outlined key user needs; clear navigation, responsive design, visual clarity, and a unique identity as well as business goals like promoting applications and sponsor visibility.
Hack Canada
OVERVIEW
Website Development
ROLE
Lead Web Designer User Research 3D and Motion Animation Product Designer
About the project
When I was asked to design the Hack Canada website, I didn’t want it to feel like just another hackathon site. I wanted to create something that went beyond the usual; a digital space that felt like a road trip through Canada, but make it tech. With every scroll, users would journey through a new season: forests, trails, lakes… all rendered in pixels. My goal was to turn the site into an immersive experience, not just a destination.
Research
Prototype and Iteration Process
I built a high-fidelity interactive prototype in Figma, incorporating hover states, smooth transitions, and responsive component variants. I iterated on the design multiple times, using feedback and real user insights to spot pain points, clean up interactions, and improve clarity each version felt smoother and more intuitive.
Collaborated closely with the development team to explain the design component, interaction patterns and design system behavior. I provided detailed documentation and regular weekly check in to maintain visual and functional consistency,
Prototype and Iteration Process
My Learning's
Empathize, Define, Prototype Iteration
I conducted a landscape analysis of hackathon and tech event websites to identify patterns and pain points. Many lacked emotional engagement and a fun, distinct identity, or clear information architecture.
From these insights, I articulated a clear problem statement:
“How might we design a hackathon website that feels welcoming, proudly Canadian, and deeply engaging while remaining accessible, intuitive, and performance-optimized?”
I outlined key user needs; clear navigation, responsive design, visual clarity, and a unique identity as well as business goals like promoting applications and sponsor visibility.
Hack Canada
OVERVIEW
Website Development
ROLE
Lead Web Designer User Research 3D and Motion Animation Product Designer
About the project
When I was asked to design the Hack Canada website, I didn’t want it to feel like just another hackathon site. I wanted to create something that went beyond the usual; a digital space that felt like a road trip through Canada, but make it tech. With every scroll, users would journey through a new season: forests, trails, lakes… all rendered in pixels. My goal was to turn the site into an immersive experience, not just a destination.
Research
Prototype and Iteration Process
I built a high-fidelity interactive prototype in Figma, incorporating hover states, smooth transitions, and responsive component variants. I iterated on the design multiple times, using feedback and real user insights to spot pain points, clean up interactions, and improve clarity each version felt smoother and more intuitive.
Collaborated closely with the development team to explain the design component, interaction patterns and design system behavior. I provided detailed documentation and regular weekly check in to maintain visual and functional consistency,
Prototype and Iteration Process
My Learning's
Empathize, Define, Prototype Iteration
I conducted a landscape analysis of hackathon and tech event websites to identify patterns and pain points. Many lacked emotional engagement and a fun, distinct identity, or clear information architecture.
From these insights, I articulated a clear problem statement:
“How might we design a hackathon website that feels welcoming, proudly Canadian, and deeply engaging while remaining accessible, intuitive, and performance-optimized?”
I outlined key user needs; clear navigation, responsive design, visual clarity, and a unique identity as well as business goals like promoting applications and sponsor visibility.