Skip to content
Contact

Interaction design

Tools · Design

Masonry grid of Haskayne School of Business content cards mixing social posts, video thumbnails, a 'Dean's Message' portrait, and a '1.3 billion in equity value' stat.

We design how interfaces move and respond, so each movement tells people what just happened, what is loading or what they can do next. We prototype in code, where timing and easing can be tried on a real screen.

Make the Month

United Way of Calgary and Area wanted people to understand what living in poverty demands. Make the Month takes a visitor through a month in that position, deciding how to spend a limited income while dealing with food insecurity, unstable housing, health problems and family obligations. Each choice affects their money, their relationships and their wellbeing.

We let the choices make the argument, so a visitor meets each trade-off by making it. United Way supplied the research and lived experience behind the scenarios, and the tool has been adapted for nine regions across Canada, for people exploring on their own and for facilitated group sessions in workplaces.

Make the Month

A month on a low income, told through the decisions a visitor has to make.

Read the case study

Illustrated summary screen titled 'Let's take a look how you did in Ashley's shoes,' with a pink card reading '$329 left at the end of the month' beside a dove-and-money drawing, and a yellow card reading 'You ended the month with poor mental health' beside a glum cat.

Animation for an animation society

Quickdraw Animation Society came to us with new in-house branding and a platform that could not show the animated work defining them. We built a site where video plays smoothly and their team still controls the day-to-day copy and imagery.

The homepage cycles through animated introductions commissioned from community animators. Link cards play a short animation on hover, and on a phone they play as the cards scroll into view. We build and adjust motion like this in the browser, since timing and easing only show their faults on a real screen.

Moving through a place

In the C+E Access Map, visitors move through a 3D model of the Culture + Entertainment District and follow Stories that CMLC writes to guide them through it. On the Transit-Oriented Communities pages, a phase tracker shows where each planned community stands, and the six-step planning process runs as a carousel whose progress bar doubles as the section divider. In both, the movement carries the information, so we design it with the same care as the words.

The C+E Access Map

A 3D model of the Culture + Entertainment District, with access points and guided Stories that CMLC writes and updates.

Read the case study

Selected work

Show more
  • 2026

    2026

    Calgary Municipal Land Corporation Transit-Oriented Communities

    Web design, Web development, Brand implementation, Information architecture, Content modelling, Interaction design

    Web design, Web development, Brand implementation, Information architecture, Content modelling, Interaction design

  • 2024

    2024

    Calgary Municipal Land Corporation C+E Access Map

    Interactive maps, Interaction design, Interface design, Accessible design, Performance and optimization

    Interactive maps, Interaction design, Interface design, Accessible design, Performance and optimization

  • 2021–2023

    2021–2023

    United Way Make the Month

    Interaction design, Platforms and applications, Interface design, Multilingual and multi-region systems

    Interaction design, Platforms and applications, Interface design, Multilingual and multi-region systems

  • 2021–2022

    2021–2022

    University of Calgary 2021 Annual Report

    Editorial design, Web design, Web development, Interaction design

    Editorial design, Web design, Web development, Interaction design

  • 2021

    2021

    StreetSide Developments Sales centre touchscreens

    Kiosks and touchscreens, Interface design, Interaction design

    Kiosks and touchscreens, Interface design, Interaction design

Tools we reach for

  • Motion
  • GSAP
  • Rive
  • Lottie