Mobile App . Quantitative & Qualitative Research . Design Audit . Redesign
Fostering belonging through Data driven Insight
A non-profit initiative by the Institute for Canadian Citizenship, designed to help newcomers explore Canada through free and discounted access to cultural, historical, and recreational experiences.
“Facilitated back end database migration for Web and Mobile apps to Flutter flow, unifying the digital assets for the platforms
Client
Team
Platform
My Role
Institute of Canadian Citizenship
Design Lead, UI Designer
IOS & Android Mobile App
Product Designer (UX/UI)
The Problem : Downloads but no engagement
“Despite a growing user base, Canoo faced a deeper challenge:
users were signing up, but not fully engaging.”
The Canoo team approached us with four core challenges that needed to be addressed. These challenges were to be resolved through deep research, analysis, and a focused design phase aimed at delivering practical solutions.
1
Increased member usage
Many users struggled to understand how Canoo worked once inside the app, particularly non-native English speakers.
2
Improve control over offer redemption and fulfilment
Offer redemption happened outside the app, limiting visibility into user behavior and fulfillment data.
3
Balance traffic accros partners
Traffic was concentrated on a few popular attractions, leaving many partner experiences underutilized.
4
Increase promotional space
Limited promotional real estate reduced Canoo’s ability to highlight time-sensitive or high-value offers.
Rather than jumping straight into design changes, we paused to ask a more important question:
Are we solving the right problems — or just the most visible ones?
This became the foundation for a research-first approach !
Reframing the Challenge Through Research
“ If Canoo wants to become part of user’s everyday planning, not just a last-minute redemption tool,
We need to understand how, when, and why people actually use it.”
Instead of treating Canoo as a “feature optimization” problem, we reframed it as a behavioral and decision-making problem, we structured research plan combining in-app quantitative data with deep qualitative interviews, allowing us to validate assumptions at scale before redesigning anything.
We conducted white-boarding sessions with the client to deep dive into each core problem, one by one, and analyzed:
Pain-points
Quick fixes to the problem
Ideas that needed to be validated through Quantitative and qualitative research
Future scope
Research Goals that guided every decision!
We defined five research goals that shaped both the survey design and subsequent interviews:
Personalization Interest
Would tailored recommendations, notifications, and onboarding would meaningfully improve the Canoo experience?
1.
Personalization Interest
3.
Social Sharing and Community
2.
Onboarding and Check-In Clarity
4.
Usage pattern & decision making
Onboarding and Check-In Clarity
How clearly the app communicates its purpose, features, and check-in flows — especially for first-time users?
5.
Trip-Planning Tool
Social Sharing and Community
How often do users recommend Canoo and whether community-driven discovery could strengthen engagement?
Usage pattern & decision making
Is Canoo used for inspiration, planning, or simply redeeming offers users already know about?
Trip-Planning Tool
How are users engaging with maps, curated content, and destination-based discovery before and during trips?
Research Plan:
Recruitment criteria, Survey, Research themes, Interview, Analysis
Before diving into metrics or feature redesigns, we stepped back to define how we wanted to learn — and who we needed to learn from. Given Canoo’s diverse user base, a single research method wouldn’t surface the full picture. Instead, we designed a multi-phase research plan that allowed us to move from broad behavioral patterns to deeper human insights, and finally into validated design decisions.
Our approach followed a clear progression:
Research Plan:
Recruitment criteria, Survey, Research themes, Interview, Analysis
Before diving into metrics or feature redesigns, we stepped back to define how we wanted to learn — and who we needed to learn from. Given Canoo’s diverse user base, a single research method wouldn’t surface the full picture. Instead, we designed a multi-phase research plan that allowed us to move from broad behavioral patterns to deeper human insights, and finally into validated design decisions.
What We Measure
Who We Recruit
What We Explore
How We Design
→
→
→
Step 1) Recruitment Criteria : Designing for diversity, not averages
Canoo serves a wide spectrum of users, from recent newcomers navigating a new country, to families planning weekend outings, etc. To avoid designing for a narrow subset, we defined recruitment criteria that reflected real usage diversity across:
🏠 Residency Status
51% Permanent Residents
48% Canadian Citizens
👤 Gender Balance
Aim for equal representation of male & female users
👪 Parental Status
~50% are parents
Include a survey question to identify parents.
🎂 Age Range
Target: 25–48 years
Represents working individuals & active parents
🌍 Nationality
Ensure diverse backgrounds
High representation from: India, China, Philippines
📍 Province
National coverage
Focus on: Ontario, Alberta, BC
Outcome: A balanced, representative sample that grounded next step in reality.
Step 2) Quantitative Survey : Capturing behaviour at scale
We launched an in-app quantitative survey to capture high-level patterns across Canoo’s user base, in alignment with the five research goals. Number of responses- 391.
The survey helped us :
Validate assumptions surfaced during stakeholder discovery
Identify recurring pain points and opportunities
Measure interest in personalization, discovery, and planning features
Rather than long-form questionnaires, users were shown short, objective questions directly within the app, allowing us to capture feedback in context, during real usage moments.
Outcome: We understood user’s behaviour, what they do on the app, what they notice, and where friction appears most often.
Step 3) Survey Analysis : Using quant insights to shape interviews
We derived key research themes from the Quantitative survey to dig deeper and validate the insights through Qualitative Interviews.
Patterns and contradictions from the survey helped us:
Identify where behavior and perception didn’t align
Spot areas that required emotional or contextual understanding
Refine hypotheses before speaking directly to users
Based on these findings, we crafted targeted interview guides focused on:
Decision-making moments
Mental models around discovery vs redemption
Perceived value of personalization and curated content
Emotional drivers behind repeat (or drop-off) usage.
Step 3) Survey Analysis : Using quant insights to shape interviews
We launched an in-app quantitative survey to capture high-level patterns across Canoo’s user base, in alignment with the five research goals. Number of responses- 391.
The survey helped us :
Validate assumptions surfaced during stakeholder discovery
Identify recurring pain points and opportunities
Measure interest in personalization, discovery, and planning features
Rather than long-form questionnaires, users were shown short, objective questions directly within the app, allowing us to capture feedback in context, during real usage moments.
Outcome: We understood user’s behaviour, what they do on the app, what they notice, and where friction appears most often.
Design System
To achieve design consistency across the Mobile App & website within a tight timeframe, our team leveraged the Material Design system. This pre-built library provided a foundation of reusable components like navigation drawers, toggles, and buttons, which we then customized to align with Military star’s guidelines. This approach not only ensured a cohesive user experience but also accelerated the development process.
Schedule One Time Payment
The feature allows users to schedule one-time payments on both platforms. Users can select from two bank accounts, choose a payment date, and set the amount. We redesigned the screen by improving the original layout from screenshots, enhancing button hierarchy, accessibility, and content organization.
For Website, We designed responsive screens - For web, Tablet and mobile resolution.
Success Screen
Confirmation Popup
Mobile App- One time payment screens
One time payment
Development Handoff & Reviews
The development handoff was done via Figma Dev Mode, ensuring a smooth and efficient transition of the design to the developers.
The process followed a sprint-based approach where we worked closely with the development team, ensuring clear communication and proper documentation to avoid any misalignment. Key steps and consideration include:
Collaborative Walkthroughs: For each sprint, we held walkthroughs with developers to explain the design and address any questions, ensuring clear communication and a shared understanding.
File Hygiene & Organization:
We maintained a clean, well-structured Figma file with properly named layers and components.
The file was divided into sprint-based sections, with flows and components color-coded to simplify navigation and promote focus.
Each version was saved and labeled for clarity, ensuring developers had the latest design
Detailed Annotations:
Specific interactions (hover, selected, swipe) were annotated to provide developers with clear guidance on various user behaviors and conditions.
Screen Linking with Figma Autoflow:
Screens were linked to show navigation and interactions, helping developers understand the app’s flow and facilitating quick prototyping.
Demo Sessions & Feedback:
We attended developer-led demos to ensure design consistency, providing feedback on any visual or experiential discrepancies to refine the final product.
Our Impact
The project initially began with a straightforward "lift and shift" approach, migrating the original mobile and web platforms to Flutter Flow. However, despite its apparent simplicity, the client overlooked several critical nuances that we highlighted throughout the process.
Our intervention and constant explanation of the decisions we made during the redesign created the following impact :
Enhanced User Experience: We addressed the gaps identified during the audit and created a more intuitive experience across both platforms. This streamlined navigation for users and contributed to a notable decrease in drop-off rates.
Unified Features and Functionality: The original platforms exhibited significant differences in visual components, verbiage (UX copy), and overall experience. We successfully identified and resolved these inconsistencies, resulting in a more cohesive user experience across both platforms.
Consistent Visual Elements and Branding: We observed discrepancies in iconography and branding across the platforms. By leveraging Material Design principles and securing necessary approvals, we established a consistent design language for both Platforms
Prioritization of Features: Given the tight timeline for the Phase 1 release, we collaborated to create a "must-have" and "nice-to-have" feature list for future expansion. This helped establish a clear roadmap for the platform's ongoing development.
Project Reflection & Key Takeaways
Clear Communication is Key: Throughout the process, we maintained clear and concise communication, presenting our suggested changes effectively. This helped the client understand the importance of each decision, backed by data and facts, ensuring alignment at every stage.
Leveraging a Standard Visual Library: Utilizing a standardized visual library allowed us to design faster and more consistently, which in turn facilitated a smoother development process.
Understanding Business Logic: Working with this project, helped us recognize the slower approval process typical of a credit card company. Due to strict regulations, compliance, and security concerns, even minor changes require thorough review. This ensures legal and financial accuracy, explaining why some updates were deferred to the backlog for future implementation.
Collaboration with Development: This project underscored the importance of close collaboration with the development team. Designing for both the user interface and its implementation in Flutter Flow allowed us to quickly identify and resolve any issues that arose during front-end and back-end development.