Design Portfolio Review

Jon Kerr

for Getty Images

Jon Kerr

for Getty Images

Hello there! I’m Jon, Interdisciplinary Designer & Consultant with 7+ years helping organizations strategize, build and scale their digital experiences.

Hello there!

I’m Jon, Interdisciplinary Designer & Consultant with 7+ years helping organizations strategize, build and scale their digital experiences.

Experience

Accenture

Lead Product Designer | Consultant

2022 - 2025

Clearmatter

Principal Designer | Consultant

2020 - Present

CIBC

UX Designer

2019 – 2020

University of Toronto

Graduate Research Student

2019

First Canadian Title

UX Designer

2017 – 2018

Ministry of Economic Development

Research Analyst

2016

University of Waterloo

Visual Designer

2016

Prica Global

Marketing & Sales Associate

2015

Education

University of Toronto

Master of Information Science

2018 - 2020

HCI - Design & Data Science specializations

University of Waterloo

Bachelors, School of Planning

2013-2018

Urban Design & HCI specializations

Charles III University of Madrid

Erasumus

2017

Business & Film specializations

Let's get into design

Tim Hortons Digital

Transforming the current loyalty and ordering app with an 8M+ user base into a digital ecosystem that provides compelling value to users in order to drive daily touch points to 5+ times a day.

Client

Restaurants Brand

International (RBI)

Restaurants Brand

International (RBI)

Year

2022-23

Role

Design Lead

Team

1 Design Director
1 Design Lead
2 Junior Designers
1 Copywriter
Engineering
Product (PO / PM)

The Task

Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.

Design System

Establishing a design system that aligns to the digital experiences new branding & visual guidelines.

Homepage

Redesign the homepage experience & information architecture to improve the navigation of the app.

Performance

Improving the performance of offers & gamification of challenges to increase sales.

Onboarding

Lower barrier for entry with a seamless account creation & onboarding process.

Scan & Pay

Optimize the scan and pay feature that allows users to seamlessly utilize the app.

Features

Establish the foundation for fast-follow features: financial service, games centre, community page, & eCommerce shop.

Establish the foundation for fast-follow features including: financial services, games centre, community page, and eCommerce shop

Key Results

Increase in performance of offers (activation & use)

10%

Increase in purchases within 6 months of launch

Increase in eCommerce sales - 650k more orders

+2350

Successful sign-ups within 1 month of launching

Increase in performance of offers (activation & use)

10%

Increase in purchases within 6 months of launch

+2350

Successful sign-ups within 1 month of launching

The Approach

My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.

Discover

Tasks

20+ client co-creation sessions
30+ user research sessions & analysis
2 team members onboarded

Outputs

Define business goals & product vision
Current state heuristic evaluation
Landscape research findings & opportunities deck

Define

Tasks

Feature prioritization session; business + user benefits, technical feasibility
Define roadmap & scope

Outputs

4 customer mindsets created
5 design principles identified
7+ current state user flows & journey maps
5 features prioritized for MVP

Design + Test

Tasks

2 Week sprints
35+ usability testing sessions
Deploying DesignOps across pods

Outputs

100+high-fidelity mockups & prototypes
5 future state user flows
1 site-wide information architecture map
Design doc templates, testing protocol, insights synthesis, & minutes template.

Deliver + Measure

Tasks

Weekly QA sessions with 1:1 design & dev
Tagging UI assets to measure performance on Amplitude.

Outputs

226 design bugs resolved pre-launch
Streamlined enterprise design & delivery process
New design system
Backlog of fast-follow features.

Discover

Tasks

20+ client co-creation sessions
30+ user research sessions
2 team members onboarded

Outputs

Define business goals & product vision
Current state heuristic evaluation
Landscape research findings & opportunities deck

Define

Tasks

Feature prioritization session; business + user benefits, technical feasibility
Define roadmap & scope

Outputs

4 customer mindsets created
5 design principles identified
7+ current state user flows & journey maps
5 features prioritized for MVP

Design + Test

Tasks

2 Week sprints
35+ usability testing sessions
Deploying DesignOps across pods

Outputs

100+high-fidelity mockups & prototypes
5 future state user flows
1 site-wide information architecture map
Design doc templates, testing protocol, insights synthesis, & minutes template.

Deliver + Measure

Tasks

Weekly QA sessions with 1:1 design & dev
Tagging UI assets to measure performance on Amplitude.

Outputs

226 design bugs resolved pre-launch
Streamlined enterprise design & delivery process
New design system
Backlog of fast-follow features.

The Design System

The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.

Component Composition

Figma's component system empowered our designers through features like master components, variants, tokens, spacing and boolean properties.

Creating well-structured components with thoughtful variant sets and boolean switches allows for flexible, consistent design implementation.

This approach reduces redundancy and enables rapid prototyping while maintaining design cohesion across the project.

Figma's component system empowered our designers through features like master components, variants, tokens, spacing and boolean properties.

Creating well-structured components with thoughtful variant sets and boolean switches allows for flexible, consistent design implementation.

This approach reduces redundancy and enables rapid prototyping while maintaining design cohesion across the project.

Figma's component system empowered our designers through features like master components, variants, tokens, spacing and boolean properties.

Creating well-structured components with thoughtful variant sets and boolean switches allows for flexible, consistent design implementation.

This approach reduces redundancy and enables rapid prototyping while maintaining design cohesion across the project.

Interaction Documentation

Comprehensive documentation is the backbone of any effective design system.

Well-crafted documentation serves as a single source of truth that aligns team members and accelerates onboarding.

Include detailed component specifications, usage guidelines, and implementation notes that bridge design and development. Documented component behaviours, responsive considerations, and state changes to ensure consistent implementation.

Comprehensive documentation is the backbone of any effective design system.

Well-crafted documentation serves as a single source of truth that aligns team members and accelerates onboarding.

Comprehensive documentation is the backbone of any effective design system.

Well-crafted documentation serves as a single source of truth that aligns team members and accelerates onboarding.

Accessibility

WCAG compliance requires meticulous attention to accessibility details in component design.

This includes maintaining color contrast ratios of at least 7:1 for normal text, ensuring keyboard navigability for all interactive elements, and providing multiple ways to access content.

Components should include proper semantic structures, sufficient focus indicators, and text alternatives for non-text content to create truly inclusive experiences.

WCAG compliance requires meticulous attention to accessibility details in component design.

This includes maintaining color contrast ratios of at least 7:1 for normal text, ensuring keyboard navigability for all interactive elements, and providing multiple ways to access content.

Components should include proper semantic structures, sufficient focus indicators, and text alternatives for non-text content to create truly inclusive experiences.

WCAG compliance requires meticulous attention to accessibility details in component design.

This includes maintaining color contrast ratios of at least 7:1 for normal text, ensuring keyboard navigability for all interactive elements, and providing multiple ways to access content.

Components should include proper semantic structures, sufficient focus indicators, and text alternatives for non-text content to create truly inclusive experiences.

Design System Foundations

Homepage

Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.

Participants engaged in research studies

50+

Collaborative sessions were held with stakeholders

55+

Low fidelity wireframes were developed to experiment

20+

High fidelity concepts were created to finalize vision

The Problem

The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.

Best Practices

Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).

Risks to Consider

Feature Demotion

Bottom navigation might force the demotion of certain function and features that are bulk grouped into the "more" tab.

User Engagement

Need to monitor decrease in user engagement for core features that will be affected by homepage redesign (e.g., Offers and challenges, mobile order & pay, loyalty). Decrease of more than 2% will be considered 'at-risk' and alternate solutions will need to be considered.

Research & Usability Testing

A large overhaul of the app navigation will require user research and usability testing to validate our decisions since we are moving core functionality without user consent (e.g., removing offers from the bottom navigation).

Exploration

Benchmarks and problem statements considered during co-creation sessions

Personalization

How Might We:

Personalize an experience for users and make their time in-app more convenient?

Recommendation:

Create an initial personalized navigation model leveraging onboarding + mindsets. Further refine the experience for the user through their behaviour + leveraging value drivers.

Engagement

How Might We:

Drive users to new experiences and increase engagement?

Recommendation:

Shift users’ mental models to adapt to this new navigation pattern, layering in additional functionality over time.

Navigation

How Might We:

Modify our current navigation patterns to create an immersive experience some moments and provide firm navigational clues at others?

Recommendation:

Define a set of rules that allow for the bottom navigation to appear or disappear and rely on top bar navigational elements to enable navigation through a series of hierarchical screens.

Personalization

How Might We:

Personalize an experience for users and make their time in-app more convenient?

Recommendation:

Create an initial personalized navigation model leveraging onboarding + mindsets. Further refine the experience for the user through their behaviour + leveraging value drivers.

Engagement

How Might We:

Drive users to new experiences and increase engagement?

Recommendation:

Shift users’ mental models to adapt to this new navigation pattern, layering in additional functionality over time.

Navigation

How Might We:

Modify our current navigation patterns to create an immersive experience some moments and provide firm navigational clues at others?

Recommendation:

Define a set of rules that allow for the bottom navigation to appear or disappear and rely on top bar navigational elements to enable navigation through a series of hierarchical screens.

Initial Wireframes

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.

High Fidelity Mockups

To develop the high fidelity designs for our app, we followed a thorough process of testing and improvement over 4 months.

We conducted multiple rounds of user testing and gathering feedback from client stakeholders to simply processes, clean up the UI, and account for possible edge cases. This helped us create a user-friendly experience and fix any issues that users may encounter prior to release.

Finally, with the improved designs in place, we successfully launched the app, providing users with an intuitive and enjoyable experience of their favourite that led to a 16.4% increase in purchases since 6 months of launch.

Design Research and Validation

Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.

Moderated usability testing:

Participants completed 4 tasks from the home page and answered follow-up questions.

Task completion: could users still perform key tasks effectively?
User perception: how did users react to the new navigation structure?

Participants completed 4 tasks from the home page and answered follow-up questions.

Task completion: could users still perform key tasks effectively?
User perception: how did users react to the new navigation structure?

Unmoderated usability testing:

Participants interacted with 4 versions of the home page with pre-determined and AI-generated prompts.

Home page preference: which version of the home page do participants prefer?
Tims+ interaction: does the swipe-up drawer design feel intuitive and useful to users?

Participants interacted with 4 versions of the home page with pre-determined and AI-generated prompts.

Home page preference: which version of the home page do participants prefer?
Tims+ interaction: does the swipe-up drawer design feel intuitive and useful to users?

Synthesizing Insights

To distill key findings, we leveraged data-driven synthesis techniques:

Task difficulty assessment:

Participants rated tasks on a 1-7 scale, revealing usability friction points and areas for improvement

AI-powered analysis:

Testing sessions were transcribed and tagged in Dovetail, allowing us to extract key pain points, user behaviors, and recurring feedback

Pattern recognition:

Through affinity mapping, we categorized insights into themes, enabling a clear roadmap for design iteration.

This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.

Rethinking interaction: when swiping didn’t work

During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.

This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.

During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.

This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.

During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.

This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.

Additional Insights

So overall, I feel like the homepage is very straightforward, not complicated, even for a first time user, I feel like it can easily navigate it. It offers a really good experience.

Usability testing participant — 2023

My favorites could be kind of interesting. I can save my favorite offers or my favorite orders. Which is neat, you know, if I'm always a double, double and everything bagel kind of morning, I can just have that in there and press it. And it's a fast checkout.

Usability testing participant — 2023

I really like seeing the rewards being kept track of, I like seeing the specials and I also like the personalization of [the app] addressing me personally and having a for you section makes me feel like it's more of a personal type of experience. I also like the offers [card]. Anything with images, the icons, I like that.

Usability testing participant — 2023

Payment Methods

Redesigning scan and payment methods for seamless transactions

Majority of Tim Hortons app users used the in-app 'Scan' feature to redeem activated offers and earn rewards points, while a very low percentage used the payment methods feature that allows them to load a credit/debit card for mobile order purchases, opting to pay at the store with cash or card.

Our goal was for users to spend less time at checkout in-store by using our new scan & pay feature that allows users to add a credit/debit card to the app and then scan their QR code once to earn reward points and pay at the same time.

Majority of Tim Hortons app users used the in-app 'Scan' feature to redeem activated offers and earn rewards points, while a very low percentage used the payment methods feature that allows them to load a credit/debit card for mobile order purchases, opting to pay at the store with cash or card.

Our goal was for users to spend less time at checkout in-store by using our new scan & pay feature that allows users to add a credit/debit card to the app and then scan their QR code once to earn reward points and pay at the same time.

Majority of Tim Hortons app users used the in-app 'Scan' feature to redeem activated offers and earn rewards points, while a very low percentage used the payment methods feature that allows them to load a credit/debit card for mobile order purchases, opting to pay at the store with cash or card.

Our goal was for users to spend less time at checkout in-store by using our new scan & pay feature that allows users to add a credit/debit card to the app and then scan their QR code once to earn reward points and pay at the same time.

Cleaning up the current state and rolling out a new feature

While brainstorming what the Scan page should look like for users to easily understand how and why they should use the new 'Scan & Pay' feature, it was clear that the payment methods page, where customers add and manage credit/debit cards and gift cards, would need overhauling.

The push to launch the Scan & Pay feature and redesign the current payment methods page came from a desire to increase mobile order & pay by 7% in the next year. We knew that to make this happen, we needed to make adding and using payment methods intuitive and accessible on the app.

Our first challenge was to map out all the places in the app that related to payments, designing universal components for payment methods that could be used across the app, and designing a new UX/UI for the payment methods page specifically.

In addition to rigorous ideation and iterations, my team underwent usability testing of a few Scan & Pay options to understand:

Do users see the benefit of Scan & Pay and will they use it themselves on a daily basis?
Are users able to easily navigate and activate Scan & Pay?
Are users able to efficiently add a new credit/debit card to the account to use the Scan & Pay feature?

While brainstorming what the Scan page should look like for users to easily understand how and why they should use the new 'Scan & Pay' feature, it was clear that the payment methods page, where customers add and manage credit/debit cards and gift cards, would need overhauling.

The push to launch the Scan & Pay feature and redesign the current payment methods page came from a desire to increase mobile order & pay by 7% in the next year. We knew that to make this happen, we needed to make adding and using payment methods intuitive and accessible on the app.

Our first challenge was to map out all the places in the app that related to payments, designing universal components for payment methods that could be used across the app, and designing a new UX/UI for the payment methods page specifically.

In addition to rigorous ideation and iterations, my team underwent usability testing of a few Scan & Pay options to understand:

Do users see the benefit of Scan & Pay and will they use it themselves on a daily basis?
Are users able to easily navigate and activate Scan & Pay?
Are users able to efficiently add a new credit/debit card to the account to use the Scan & Pay feature?

While brainstorming what the Scan page should look like for users to easily understand how and why they should use the new 'Scan & Pay' feature, it was clear that the payment methods page, where customers add and manage credit/debit cards and gift cards, would need overhauling.

The push to launch the Scan & Pay feature and redesign the current payment methods page came from a desire to increase mobile order & pay by 7% in the next year. We knew that to make this happen, we needed to make adding and using payment methods intuitive and accessible on the app.

Our first challenge was to map out all the places in the app that related to payments, designing universal components for payment methods that could be used across the app, and designing a new UX/UI for the payment methods page specifically.

In addition to rigorous ideation and iterations, my team underwent usability testing of a few Scan & Pay options to understand:

Do users see the benefit of Scan & Pay and will they use it themselves on a daily basis?
Are users able to easily navigate and activate Scan & Pay?
Are users able to efficiently add a new credit/debit card to the account to use the Scan & Pay feature?

Design validation

2 final concepts ready for unmoderated A/B testing to validate that we were making the right changes.
Six user groups were identified for our round of testing to understand the behaviour of customers who make routine purchases and how we can increase the mobile app usage based on patterns we identify.
It was confirmed in all test groups that current Tims app users will add a credit card to use the new Scan & Pay feature.
Majority of Tim Card users, chose to prefer using this function over adding a payment method. This helped us get closer to our end goal of wanting to introduce a new feature with minimal mental model shifts for our guest with added convenience.

Key insights from user testing

Participants were very likely to use their mobile app with Scan & Pay toggled on

Participants successfully activated the scan & pay feature in prototype B whereas all users successfully completed it in prototype A

Tim Card only users prefer to continue using Tim Card as their payment method of choice in-store and for mobile purchases

Participants prefer prototype A with a separate tab for Tim Card, equally preferred regardless of current payment preference (in-store or mobile)

Participant Feedback

Frictionless

I wont forget to earn points when paying with a card from now on

Known Behaviour

QR usage has become more familiar during the pandemic, i don't see an issue with this approach

Ease

Taking a 2 - step process into a single-step process is going to make my day better

Save Time

" It's just faster, that's a no-brainer. I don't know why Tim Hortons hasn't done it already "

Prioritizing for Impact

Redesigning the payment methods page and UX flow was a secondary outcome of introducing the new Scan & Pay feature. With little time to deliver on our MVP vision, we had to determine what would have the greatest impact on helping users manage their stored cards more efficiently, add cards faster, and provide a new UI that aligns with the new Tims branding.

High-level goal this iteration:

Simplify the user experience of adding and managing payment methods on the Tims app using new DS components with minor UX upgrades.

Notable Changes:

Remove editing defaults on the payment methods page as there is low traction of users coming to this page to set their default card (approx. 0.9% of users perform this action in the current state).

Instead, keep last used payment method as the user's default card for scanning and mobile orders. Most users (less than 5%) are actively known to change default settings, and if they were to change defaults, they would most likely be changing it during a transaction flow such as in the checkout or scan page.

Adding smart defaults such as defaulting to Apple/Google pay during checkout will reduce cognitive load on users.

Post-launch considerations

Measure user satisfaction on setting defaults through transactions (scan or mobile order) vs. on payment method settings. Revisit design of not showing defaults on payment method settings if >2% of users are reporting confusion via feedback.

New payment methods prototype

For the new UI and UX, our goal was to keep it simple and introduce interactions with expandable bottom sheets. The bottom sheets were used to focus the action of adding or managing a payment method while also giving the user flexibility to close out of a flow if desired. The sheets were designed to support expanding content with defined medium and full detents, and be ergonomic by allowing easy single-finger navigation.

Key Reflections

The most memorable aspects of this project that taught me about team-building and identifying user behaviour to improve business metrics includes:

Operational Transparency

We helped Tims step up their game by allowing customers to see a live status and real-time updates of pickup or delivery mobile orders. Delightful animations were also included to keep users engaged during the wait-times which were well received during testing. The impact of this feature led to less customer service calls regarding order wait-times and increased user understanding of what's happening in the backend to process their order.

Known Behaviour - Gamification

People tend to work harder and faster when they're given artificial advancements for an incentive, think of it as a promise of a future reward. To gamify the old school challenges present on the app, we used this behaviour tool to design a progress tracker on the challenge card to motivate users to work harder and faster to finish a challenge and earn points.

This design change led to users being able to see a jump start towards achieving their goal, easily track their progress, and understand how much commitment is required. Overall, the holistic changes made to offers & challenges in the app contributed to the 2% increase in offer performance.

DesignOps

Starting with just an idea and 1 Figma file, I slowly introduced DesignOps approaches to integrate design into the larger product management pods within the client team. Design developed a voice at the table and we not only built a product but we built a functioning ecosystem to successfully continue launching products in the future.

HBT Design System

HBT is the foundation of CMHC for elevating beautiful, standardized, and accessible designs and front-end digital products from our communities into reusable elements, promoting autonomous and collaborative culture to nourish a unified design system.

Client

Canada Mortgage and

Housing Corporation (CMHC)

Year

2024

Role

Principal Designer

Team

Design Director

Principal Designer

2 Senior Designers

2 Junior Designers

Product (PM / PO)

Engineering

Overview

Create HBT library to support launch of new internal tools

In 2024, the client initiated the revamp of the CMHC Connect platform. In the readiness phase, I structured the Figma enterprise architecture to enable dedicated workspaces for various product teams and access to foundational, component and extended libraries.

I led the development of the HBT design & token library to uphold the new design standards, establish consistent components and a unified design style compatible with the latest framework.

HBT was developed and first adopted by the Operations, Mortgage Lender Insurance, Portfolio, & Servicing product teams for production. I worked within the delivery pods, in addition to managing the libraries.

Create HBT library to support launch of new internal tools

I led the development of the HBT design & token library to uphold the new design standards, establish consistent components and a unified design style compatible with the latest framework.

Create HBT library to support launch of new internal tools

I led the development of the HBT design & token library to uphold the new design standards, establish consistent components and a unified design style compatible with the latest framework.

Create HBT library to support launch of new internal tools

I led the development of the HBT design & token library to uphold the new design standards, establish consistent components and a unified design style compatible with the latest framework.

Products using HBT

HBT Design System

How we did it…

Design Scope

Shaping how designers work

As CMHC transitioned from Sketch to Figma, I scaled the enterprise workspace and led the 0-1 creation of their new design system while aligning it with their evolving brand identity— developing new foundational & component libraries, design tokens, and comprehensive guidelines.

In addition, CMHC was transitioning towards an agile methodology, to further assist the transition I developed documentation outlining best practices for working with designers, developers, and QA teams, ensuring smooth collaboration and integration within the new workflow. This foundational work established a scalable, unified design ecosystem for the organization.

Design Ops Playbook

Figma libraries to support
web & mobile components

Web (React) & Mobile Libraries

Web and Mobile libraries were created, delivering multiple benefits to designers, including reduced file size, a well-structured library for focused design needs, improved analytics tracking, and an optimized variant panel.

+90

Custom components & variables

+40

Digital users leveraging library

Implementing comprehensive
design guidelines for all

Hundreds of digital teams use HBT on a daily basis, including product designers, developers, BAs / PMs and QA. Providing comprehensive documentation is critical towards ensuring the design system can be implemented effectively, and improves comprehension between the partnering team members who use it. Our guidelines include detailed specifications about the master components, variants, property specifications, spacing, types / states, rules, and accessibility.

Designing for accessibility & inclusitivity

Focus State

Button

Keyboard Controls

Tab

Shift

Colour Contrast

WCAG AA: Pass

Screen Reader

HBT upholds high accessibility standards to ensure our digital products are usable by all user groups across Canada. To meet the latest requirements our design system team collaborates closely with a dedicated accessibility SME throughout the system’s development.

Accessibility within the design system encompasses various aspects, including adequate colour contrast ratios, keyboard navigation, screen reader compatibility, and focus states. To promote accessible design practices, HBT integrates accessibility criteria directly into Figma documentation for each component, providing clear guidelines to enhance awareness and adoption.

Governance & scaling the system

Collaboration Process

Token Library

The design team leverages a contribution model to scale up the design library among designers and developers when the need arises. This methodology allows our team to bridge the gap between existing and proposed components to meet our teams needs.

As the HBT teams resources are split between design systems and product delivery, this methodology allowed us to be an extension of the product teams ensuring that system governance and quality is met, rather than being the sole individuals who build and maintain the library. Setting up collaboration processes and contribution guidelines enables more teams to participate and scale up the design system as the organizations needs grow.

To further scale the library, a token library was created allowing for the management of different themes and branding elements than can be centrally managed. As various lines of businesses have evolving branding and customized styling elements - it can be scaled easily by the design team.

Collaboration & community

Weekly retro
Design team stand ups
Weekly demos
Developer Sync

MS Teams channel
Accessibility SME
Design system onboarding

The HBT team established various design rituals and resources to coordinate efforts strategically across product teams. The team hosted daily stand ups to align on tasks, blockers, and brainstorm solutions to work. In addition, our team held onboarding and training sessions to ensure new team members had the resources to be successful on the project.

Cross collaboration and communication with the development team was crucial to ensuring successful implementation of HBT. Our team regularly organized developer sync touch-points and demos to stay informed on our partners work and answer any questions that arose.

A teams channel was created to offer designers & developers continuous cross-functional support and the ability to quickly get in contact with team members or set touch points. The team used Azure DevOps to ensure transparency and access to to any information throughout the project.

Example Template

Any Questions?

Design Portfolio Review

Design Portfolio Review

Experience

Experience

Education

Education

Tim Hortons Digital

Tim Hortons Digital

Tim Hortons Digital

Transforming the current loyalty and ordering app with an 8M+ user base into a digital ecosystem that provides compelling value to users in order to drive daily touch points to 5+ times a day.

The Task

The Task

Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.

Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.

Design, test, and develop the complete redesign of Tim Hortons core app experience for the 4.5+ million monthly users. The design team focussed on 6 key areas to build a new ecosystem.

Key Results

Key Results

The Approach

The Approach

My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.

My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.

My design approach involved understanding the problem through researching, defining personas, iterating and prototyping designs with usability testing and collaborating with cross functional teams to deliver a redesign of the mobile ecosystem.

The Design System

The Design System

The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.

The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.

The design team & I applied the atomic design methodology to create scalable, accessible, and visually appealing components for the design system. The library is utilized in high-fidelity designs ensuring visual cohesion across all the digital experiences.

Design System Foundations

Design System Foundations

Homepage

Homepage

Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.

Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.

Our redesign prioritized the homepage as both the entry point and navigational hub for mobile app users. User interviews revealed the need for a clean interface that clearly communicates value upfront, avoiding the endless scrolling caused by oversized media cards in the current design.

The Problem

The Problem

The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.

The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.

The current state experience navigation is restrictive in that there is no room to add new destinations, forcing an over-reliance on homepage tiles that compete for user attention.

Best Practices

Best Practices

Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).

Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).

Best practices dictate the bottom navigation is king. It is the most ergonomic and exists as a known pattern for navigating primary destinations across both iOS & Android. It is best used to help users quickly “understand the functionality an app provides” (Apple HIG).

Risks to Consider

Risks to Consider

Exploration

Exploration

Benchmarks and problem statements considered during co-creation sessions

Benchmarks and problem statements considered during co-creation sessions

Benchmarks and problem statements considered during co-creation sessions

Initial Wireframes

Initial Wireframes

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage. ​

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage. ​

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage. ​

High Fidelity Mockups

High Fidelity Mockups

Design Research and Validation

Design Research and Validation

Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.

Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.

Moderated and unmoderated research via Usertesting.com conducted over 2 months validated that customers understood the purpose of the new homepage, how to navigate to the core features, and how to seek help if needed.

Synthesizing Insights

Synthesizing Insights

To distill key findings, we leveraged data-driven synthesis techniques:

To distill key findings, we leveraged data-driven synthesis techniques:

To distill key findings, we leveraged data-driven synthesis techniques:

This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.

This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.

This structured approach transformed raw user data into actionable design decisions, ensuring a research-backed evolution of the app experience.

Rethinking interaction: when swiping didn’t work

Rethinking interaction: when swiping didn’t work

During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.

​

This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.

During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.

​

This unexpected insight challenged our design assumptions and led to a key redesign (see concept B below on the right): introducing a visible tap to open "Tims+" CTA on the bottom navigation bar, making the feature more discoverable and significantly improving user interaction.

During testing, we anticipated that users would intuitively swipe up to access the Tims+ drawer, but the reality was different. Instead of swiping, most users instinctively tapped, treating it as a standard button interaction. Some missed the feature entirely, reducing engagement with Tims+ offers.

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.

Following multiple co-creation workshops and focused ideation sessions, we produced and refined our initial wireframes for the homepage.