The MBNA Secure Banking Experience initiative aimed to elevate MBNA’s digital presence—on both responsive web and the native mobile app—by empowering users with intuitive security controls, seamless access, and clearer spending insights.
I co-led design and research for MBNA’s security and transactions suite—shipping the Lock/Unlock Feature and designing features like Biometric Login, Digital Collateral (paperless), an improved Balance Transfer flow and Spent Alert flow.
Product Overview
Our objective was to introduce a Fractional Shares feature across both platforms, allowing users to invest in fractions of a share. This new functionality addresses the growing demand for flexible investment options—enabling users to diversify their portfolios without committing to full share purchases. The goal was to create a best-in-class fractional trading experience by lowering the barriers to trading high value stocks/ETFs, while helping investors confidently create the investment portfolio they want.
Project Overview
When TVO ILC set out to create a smoother, more engaging experience, I knew this was a chance to make a real impact. The platform was ready for an update—not just a facelift, but a thoughtful redesign that also introduced a new online payment feature for course application fees. This feature was essential in making the payment process seamless, ensuring that students could easily enroll in courses without any hassle. Working on this project allowed me to blend creativity with practicality, turning complex challenges into simple, user-friendly solutions.
MBNA, a credit card product of TD Bank, offers secure and convenient credit solutions. The MBNA Secure Site is a protected online platform where users can manage accounts, track transactions, and make payments, ensuring a seamless and secure banking experience.
WebBroker is TD’s comprehensive online trading platform that makes investing accessible by offering real-time market data, research tools, and portfolio management. Meanwhile, TD Easy Trade is designed as a simplified, user-friendly interface for everyday investors. Together, they empower users to buy and sell stocks, ETFs, options, and mutual funds.
When homework battles and disengaged classrooms became the norm, TVO answered with TVOlearn—a free, digital platform revolutionizing Ontario’s K-12 curriculum into interactive quests. Imagine algebra reimagined as a puzzle to solve, history unfolding as a time-travel adventure, and science experiments that spark genuine “Whoa!” moments. TVOlearn isn’t just a tool—it’s an invitation to experience education in a whole new, immersive way.
In this project, I expanded TVOlearn by adding a Kindergarten course preview and integrating Kindergarten into the main navigation at www.tvolearn.com. Key contributions included:
• User-Centered Discovery: Engaged with parents and educators to tailor the design for young learners and families.
• Intuitive Design: Created a dedicated entry point with playful, accessible elements for early learning.
• Seamless Integration: Ensured the new section blended effortlessly with the existing curriculum, enhancing overall engagement.
• This integration reinforces TVOlearn's commitment to transforming education into an accessible, delightful adventure for every family.
Project Overview
Project Overview
In this project, I expanded TVOlearn by adding a Kindergarten course preview and integrating Kindergarten into the main navigation at www.tvolearn.com. Key contributions included:• User-Centered Discovery: Engaged with parents and educators to tailor the design for young learners and families.• Intuitive Design: Created a dedicated entry point with playful, accessible elements for early learning.• Seamless Integration: Ensured the new section blended effortlessly with the existing curriculum, enhancing overall engagement.• This integration reinforces TVOlearn's commitment to transforming education into an accessible, delightful adventure for every family.
Project Overview
Our objective was to introduce a Fractional Shares feature across both platforms, allowing users to invest in fractions of a share. This new functionality addresses the growing demand for flexible investment options—enabling users to diversify their portfolios without committing to full share purchases. The goal was to create a best-in-class fractional trading experience by lowering the barriers to trading high value stocks/ETFs, while helping investors confidently create the investment portfolio they want.
Project Overview
The goal was clear: transform the digital banking experience into one that is not only seamless and secure but also deeply intuitive and reliable. To do this, we set out with key objectives:
• Building Trust: Crafting an experience where users feel safe managing their finances online.
• Improving User Experience: Simplifying interactions and creating a platform that’s accessible for all users.
• Developing an Internal Design System: Establishing a cohesive set of design patterns to streamline collaboration and ensure consistency across future updates.
• Supporting Business Growth: Enhancing customer satisfaction and engagement to drive the continued growth of MBNA’s digital services.
The goal was clear: transform the digital banking experience into one that is not only seamless and secure but also deeply intuitive and reliable. To do this, we set out with key objectives:
• Building Trust: Crafting an experience where users feel safe managing their finances online.
• Improving User Experience: Simplifying interactions and creating a platform that’s accessible for all users.
• Developing an Internal Design System: Establishing a cohesive set of design patterns to streamline collaboration and ensure consistency across future updates.
• Supporting Business Growth: Enhancing customer satisfaction and engagement to drive the continued growth of MBNA’s digital services.Project OverviewMBNA, a credit card product of TD Bank, offers secure and convenient credit solutions. The MBNA Secure Site is a protected online platform where users can manage accounts, track transactions, and make payments, ensuring a seamless and secure banking experience.
After joining the product, we kicked off our work by defining a clear design process that aligns four key disciplines(see image below). Our process is agile by nature—a flexible roadmap that adapts to the complexity of each feature and evolving stakeholder needs. This approach enables us to move quickly while maintaining a user-focused mindset.
To design a solution that truly resonated with MBNA’s diverse customer base, we first established a strategic user segmentation framework. This matrix categorized users into four key segments—Credit Optimizers, Travel Enthusiasts, Credit Newbies, and Small Business Owners—based on their financial behaviors, digital maturity, and core banking needs. Each segment was mapped with demographic profiles, behavioral patterns, key pain points, and conceptual design opportunities, aligning our work with both user value and business impact.
To translate our user-centered insights into a clear development roadmap, I facilitated a workshop with the Product Manager to plot every opportunity from our segmentation and persona research onto an Impact vs. Effort matrix. Before this session, we validated each opportunity against support-call volumes, login-failure rates, and feature usage analytics to focus on the most impactful problems. For example:
• Security Controls: “How do I freeze my card?” queries made up 25% of all fraud-related calls.
• Access Friction: 12% of mobile login attempts failed, contributing to app abandonment.
While the matrix included a wide range of potential enhancements—like card lock, budget notifications, and advanced filtering—we prioritized features that not only addressed the most frequent pain points, but also aligned with technical feasibility and stakeholder readiness for launch.
To ground our prioritization efforts in real user needs, we conducted 16 in-depth, moderated interviews with MBNA cardholders, representing diverse usage patterns and life stages with the product. The objective was to validate assumptions surfaced from early segmentation and analytics, and to explore the end-to-end digital experience from a user perspective.
Sessions focused on critical user flows—including registration, card activation, digital self-service, and transaction visibility—surfacing friction points, behavioral patterns, and expectations across mobile and web platforms.
This generative research uncovered gaps between user expectations and current functionality, clarified emotional triggers behind service-related behaviors, and revealed recurring usability issues. The insights directly informed the Impact vs. Effort feature prioritization matrix, ensuring we focused on what truly mattered to users—balancing feasibility with value.
Problems
Imagine a user checking their credit card account and spotting an unfamiliar charge—they need to act quickly to secure their account. However, the original experience made this urgent action unnecessarily difficult. The lock card function was buried deep within the platform, requiring users to either fill out a lengthy form or call customer service. Worse yet, there was no immediate feedback or confirmation after taking action.
This disjointed experience created a sense of uncertainty for users during a high-stress moment, and it significantly impacted our operations. Customer service teams were overwhelmed with lock/unlock-related calls, which not only delayed resolutions but also drove up support costs.
Design Challenge
How might we enable users to instantly lock or unlock their card within the secure site—providing clear, real-time confirmation—while minimizing steps and reducing support load?
Solutions
We reimagined the card locking experience to be fast, intuitive, and reassuring—built around moments of urgency and user control.
Impact
• Adoption: Since October 2024 to March 2025, over 90,000 MBNA customers have used the feature, directly reducing the same number of customer service calls.
• Operational Efficiency: Achieved savings equivalent to 1.9 Full-Time Equivalents (FTE) and reduced average handling time by 8,604 seconds.
• Strategic Value: Recognized as a key element in MBNA’s digital-first strategy—enhancing security and trust while delivering a superior user experience.
Market Scan: Biometric Login Best Practices
To understand how MBNA Secure Site could stand out, we analyzed biometric login implementations across seven leading banking apps (TD, RBC, BMO, CIBC, Capital One, American Express, and our own MBNA). Our audit covered everything from enrollment flows and UI feedback to fallback strategies, device compatibility, and support mechanisms.
Problems
Based on our Competitor Audit Table and discovery interviews, many users expressed frustration with the multi-step login process—especially when they had to reset passwords or couldn’t access their accounts quickly.
• Login friction: MBNA required multiple steps to log in, unlike competitors offering one-tap biometric access.
• Outdated experience: All six competitor apps supported biometrics—MBNA didn’t, falling behind user expectations.
• User frustration and drop-off: Support logs and reviews showed frequent login complaints, leading to lower engagement.
Challenge
How might we deliver a faster, secure, and seamless login experience for returning users—while navigating tight development timelines, integrating with legacy authentication systems, and working within the constraints of an external SDK that limits UI customization?
Design Solution
To address user frustrations around MBNA’s login friction and to close the gap with competitors, we designed a biometric login experience that’s fast, secure, and thoughtfully integrated into the end-to-end onboarding journey—all while working within the limits of our legacy systems and SDK constraints.
1. Biometric Setup Integrated into Onboarding
We introduced a “What’s New” page after login to highlight the new biometric feature—explaining its speed, security, and convenience with simple language and visuals.
Right after, users are guided through biometric setup as part of onboarding. The flow is:
• Optional but visible, respecting user control
• Device-aware, showing Face ID or Fingerprint based on platform
• Lightweight, with minimal steps to reduce drop-off
2. Frictionless Biometric Login Experience
Once enabled, users see a biometric login option prominently on the login screen, with platform-specific icons and fast, secure authentication (typically under 1 second).
Fallbacks include:Immediate switch to password or PIN if biometric fails
Clear messaging like “Face not recognized—try again or use password”
Project Overview
In this project, I expanded TVOlearn by adding a Kindergarten course preview and integrating Kindergarten into the main navigation at www.tvolearn.com. Key contributions included:• User-Centered Discovery: Engaged with parents and educators to tailor the design for young learners and families.• Intuitive Design: Created a dedicated entry point with playful, accessible elements for early learning.• Seamless Integration: Ensured the new section blended effortlessly with the existing curriculum, enhancing overall engagement.• This integration reinforces TVOlearn's commitment to transforming education into an accessible, delightful adventure for every family.
Problem
TVOlearn originally served grades 1-12, delivering a transformative digital curriculum for older students. However, this focus inadvertently left a gap in resources for our youngest learners. Without a dedicated Kindergarten course, families and educators lacked a tailored, engaging entry point into interactive learning during those crucial early years. This gap not only limited early exposure to digital learning but also missed an opportunity to spark curiosity and wonder, essential to a lifelong love of learning.
Ideation & Site Mapping
To effectively integrate the new Kindergarten category, I conducted a card sorting exercise to test two possible navigation structures—sorting courses by grade vs. by subject. This process allowed us to determine the most intuitive way for users to navigate and discover Kindergarten content within the existing framework of TVOlearn.
With insights from card sorting, I developed a refined site architecture to seamlessly integrate Kindergarten while maintaining a structured, user-friendly experience. The updated navigation ensures that parents and educators can effortlessly find and explore Kindergarten resources, creating a clear, engaging, and accessible learning journey from the very first interaction.
Card Sorting and Site Architecture
Optimizing the Learning Journey
The Core Challenge
With our Kindergarten content ready, we faced a critical UX dilemma: How might we help 5-year-olds independently explore while giving adults quick access to curriculum-aligned resources? Traditional K-12 navigation patterns felt too rigid for play-based learning.
The Experiment: Two Pathways Tested
Option 1: Traditional Top-Nav FlowHome → [Grade Selector] → Four Frames → Resource Page✅ Familiar: Matched existing K-12 patterns
❌ Friction:Felt like "homework mode" to kids
The Core Challenge
With our Kindergarten content ready, we faced a critical UX dilemma: How might we help 5-year-olds independently explore while giving adults quick access to curriculum-aligned resources? Traditional K-12 navigation patterns felt too rigid for play-based learning.
The Experiment: Two Pathways Tested
Option 1: Traditional Top-Nav FlowHome → [Grade Selector] → Four Frames → Resource Page✅ Familiar: Matched existing K-12 patterns
❌ Friction:Felt like "homework mode" to kids
Testing & Decision
Presented both flows to educators, parents, and product teams via interactive Figma prototypes.
Key Feedback:
• 78% preferred Option 2 for its thematic approach:
• “This feels like natural exploration, not a syllabus.” – Kindergarten Teacher
• Parents noted Option 2’s visual activity thumbnails helped kids choose independently.
Key Design Enhancements
• Added a Kindergarten Category in the Top Navigation – This ensured a clear, intuitive access point for users to begin their Kindergarten learning journey directly from the main menu.
• Introduced a Kindergarten Section on the Homepage – Featuring a prominent CTA, allowing users to discover and enter the Kindergarten experience right from the landing page.
• Designed a New Notification Bar – Positioned at the bottom of the page, this announced the availability of new Kindergarten course resources, improving visibility and user engagement.
TVOLearn Homepage
• Developed a Kindergarten Frame Selection Page – This bridge page guided users to choose a frame before previewing available course materials, ensuring a structured and intuitive flow.
Kindergarten Landing (Strand) Page
• Customized the Kindergarten Course Page – Enhanced with playful design elements in the top banner and learning activities background, making the experience fun, engaging, and age-appropriate for young learners.
Other Design Enhancements
Designed a Grade 1-12 Subject Page
• To ensure consistency across TVOlearn, I designed a Subject Page for Grades 1-12, appearing after users select a grade from the top navigation.
• Structured Learning Path – Helps users navigate subjects efficiently, aligning with the existing Kindergarten Frames Page structure.
• Seamless User Experience – Provides a clear, intuitive entry point, guiding parents and educators before accessing course materials.
• New Subject Label – Introduced a "New" tag to highlight recently launched subjects, improving visibility and engagement.
Unveiling Insights—The Post-Launch Exploration
After launching the new Kindergarten category on TVO Learn, I conducted a data-driven evaluation using Hotjar heatmaps and user behavior analytics. By analyzing click maps, scroll maps, and move maps, I uncovered valuable insights that informed key design refinements.
TVOLearn Heatmaps
Key Insights & Design Adjustments
Homepage
• Low CTA engagement (email & support webbing). → Improved visibility, refined copy, and A/B tested new button text.
Elementary & High School Course Pages
• Users struggled with navigation, leading to drop-offs. → Optimized hierarchy, repositioned key sections, and improved mobile layouts.
Resource & Learning Activity Pages
• Mobile users frustrated by unavailable learning activities. → Added clearer messaging and optimized layouts.
• High engagement but inefficient navigation. → Enhanced structure for better content discovery.
High School Course Detail Page
• Low engagement with “Explore More Courses” CTA. → Introduced a slider and improved CTA placement.
• Mobile users struggled with course lessons. → Redesigned card-based layout for better usability.
Data Conclusion Table
Marketing Campaign
To ensure parents and educators were aware of the new Kindergarten learning resources, we launched a targeted marketing campaign across multiple platforms.
Observed Impact
During the 2022-2023 school year, TVOlearn's new Kindergarten section became one of the platform's top three most visited areas, demonstrating strong product-market fit. Our user tests revealed 85% of 4-6 year olds could independently navigate to activities using the new strand-based system - validating that our play-first approach resonated with young learners.
The redesign drove meaningful adoption in classrooms across Ontario, with educators reporting weekly use of the resources in their lesson plans. We also delivered crucial accessibility wins, including:
• Voice navigation support for pre-readers
• High-contrast visual design for low-vision users
• Perhaps most rewarding were the parent testimonials we collected:"For the first time, my child asks to 'do learning' instead of watching cartoons - the animal math games feel like pure play to him."
Alignment with Human-Centered Design Process
To design the fractional share feature, we used a human-centered design process to make sure we were solving real user problems.
End to End Design Process
Expected Impact
Biometric login transforms a tedious login into a fast, seamless experience. We expect:
• Faster access – Log in with a touch or glance
• Happier users – Fewer complaints, better reviews
• Less support load – Reduced password reset requests
• Stronger positioning – Catching up with key competitors
Our MVP-first approach delivers quick value while leaving room to iterate based on real feedback.
When we reviewed MBNA’s mobile& web transaction table, we noticed a major friction point: users with a high volume of transactions had to scroll excessively to find specific records. This was particularly challenging for credit card users who frequently check past spending and payments.
Additionally, the existing Activity tab lacked consistency with MBNA’s web platform, leading to user confusion. Unlike industry standards, the table also did not provide a balance column or total amounts after filtering, making financial tracking less transparent.We turned to competitor analysis, examining how other banks structured their transaction tables. These insights shaped our redesign strategy and helped gain stakeholder buy-in.
To create a smoother experience, we introduced several key enhancements:
• Replaced the Activity Tab with a dedicated Transaction Table, ensuring consistency across platforms.
• Added a Filtering Bottom Sheet, allowing users to quickly refine searches without excessive scrolling.
• Integrated a Balance Column & Total Debit/Credit Summary, providing financial clarity at a glance.
• Designed a Custom Onboarding Page, ensuring users could navigate the new system effortlessly.
Adopting a product mindset, we built an internal MBNA design system aligned with TD’s Design System to drive consistency and efficiency across MBNA’s digital products. By auditing the global color library, we identified gaps in accuracy and accessibility. This system now serves as a solid foundation for faster, unified design iterations across future features.
Balance Transfer
Streamlined and secured the balance transfer process, transforming a complex task into a user-friendly experience. By simplifying steps and reinforcing security, we made transferring balances quick and hassle-free.
Digital Collateral
Enabled users to opt for paperless statements by consenting to receive e-documents and e-statements seamlessly. This feature not only enhances convenience but also supports MBNA’s move towards a more sustainable, digital-first strategy.
Each of these features was designed with a product mindset—balancing user needs with business goals and technical feasibility, ensuring a cohesive and engaging digital banking experience.
To reimagine the MBNA mobile credit card app experience, we developed a series of exploratory wireframes as a testing ground for innovative layout and flow concepts tailored to on-the-go banking. These initial sketches focused on simplifying the information architecture—providing quick access to account details, secure transaction tracking, and streamlined feature interactions—all critical for a mobile credit card app. Even without extensive external research, our product-focused approach, guided by internal insights and strategic objectives, enabled us to challenge existing paradigms and identify key opportunities to optimize the user journey.
What are Fractional Shares?
Fractional shares let investors buy a portion of a stock, making it easier to diversify even with small amounts of money.
Why Fractional Shares?
We looked at competitors like Wealthsimple, Robinhood, and Charles Schwab to learn how they positioned their offerings.
From this, we concluded three key benefits:
• Lower Barriers to Entry: Users can invest with as little as $1, making the market accessible to beginners.
• Fine‑Grained Portfolio Control: Experts can rebalance in precise increments, optimizing allocation without buying whole shares.
• Market differentiation – Unlike U.S.-focused platforms like Robinhood and Schwab, TD has the opportunity to lead in the Canadian market with a flexible, customer-first approach.
Understanding User Needs Through Concept Testing
To validate the demand for fractional shares and refine the design, they were 15 remote moderated usability sessions with TD’s diverse investor base:
• 5 beginer investors (EasyTrade audience)
• 5 active traders (WebBroker audience)
• 5 long-term investors (mixed platform use)
Each 60-minute session combined:
• Cognitive walkthroughs of mobile prototypes (Observing how users navigated fractional vs. whole share flows).
• Semi-structured interviews (Uncovering emotional reactions and unmet needs).
Open to View More
This phase mapped to the Research and Evaluation stages of TD’s framework:
• Research: Uncovered latent needs (e.g., frustration with toggles).
• Evaluation: Prototype A’s success validated the hypothesis that fractional trading should be implicit, not a feature toggle.
Integrating Fractional Shares into Flows
Order Ticket
We added fractional share capabilities to both buy and sell workflows while maintaining WebBroker&Easy Trade's existing interface patterns.
Order Ticket to Order Status Flows
.png)
Order Ticket (Partial Wireframe Example)
Buy/Sell Flow Enhancements:
• Additional a new fractional trading feature on order tickets Market Buy/Sell
• Dollar-to-share auto conversion (up to 5 decimals) for smoother input
• Clear display of fractional quantities on the review screen
• Visual cue when a stock/ETF supports fractional shares
• Only available during market hours to align with execution rules
Buy Flow - Prototype (Webbroker)
Sell Flow - Prototype (Webbroker)
Edge Cases - Partial Example (Webbroker)
Order Ticket (Easy Trade)
Unified Improvements
• Consistent fractional formatting across all order flows
• No big changes to core trading workflows
The implementation delivered fractional trading functionality without disrupting familiar user behaviors, making it accessible while maintaining platform stability.
Entry Point & Onboarding Experience
The Challenge
When designing the entry point and onboarding flow for fractional shares, we asked: How might we educate both beginners and experienced investors without overwhelming them? Through multiple rounds of iteration with our design lead and product manager, we aimed to balance clarity, discoverability, and user needs across different experience levels.
Solution
We designed a layered onboarding experience based on user familiarity:
• Beginners saw an educational page and tooltips that explained the benefits of fractional shares in context.
• Advanced users received light prompts like badges and coach marks, allowing them to explore at their own pace.
To improve discoverability, we added entry points across the homepage, order ticket, help center, and portfolio—making the feature easy to find throughout the journey.
1. What’s New" Page
Easy Trade - What's New
WebBroker - What's New
2. Just-in-Time Education (Dedicated Page)
Broke content into digestible chunks:
"What" (Definition with interactive pie charts)
"Why" (Benefits like "Buy Amazon for $10" with real stock examples)
"How" (Embedded videos/real life screenshot of the actual trade flow)
WebBroker - Educational Page
3. Guided Discovery (Coach Marks)
We implemented a time-sensitive, non-intrusive coaching system that balanced education with workflow preservation:
First-Launch Exclusive
• Coach marks appeared only once for post-launch
• Triggered exclusively on users' first visit to the order ticket after the feature release
Easy Trade - Coach Mark
Easy Trade - Portfolio
Handoff & Design Documentation
To ensure smooth implementation, we provided detailed design specs with annotations, covering functionality, interactions, and edge cases. Below is an example of how we handed off the fractional shares input field for development.
Results: Laying the Foundation for Accessible Fractional Trading
Although our team involved during the early stages of this project, our foundational work set the direction for a successful launch. Together with my team, I helped shape the core experience and user flows that made fractional investing more intuitive and inclusive:
• For Beginners: We designed early concepts that lowered the financial barriers to entry, and also provided clear, bite-sized fractional guidance with several accessible entry points.
• For Experts: We ensured the design supported advanced use cases like portfolio precision and control.
• For TD: This feature contributed to strengthening TD’s position in offering flexible, user-centric investing tools.
One thing I’m especially proud of—we also created a reusable coach mark component that was added to the design system. This not only supported this feature, but became a useful asset for cross-functional teams moving forward.
We repositioned the sustainable speaker brand by highlighting its eco-friendly features and sound quality. A unique brand proposition informed a cohesive visual identity, elevating the brand as a leader in sustainable consumer electronics.
To tackle the TVO ILC’s pain points, we started by diving deep into the user experience. Through NPS reviews, stakeholder interviews, and competitive research, we mapped frustrations and identified gaps between TVO ILC and leading educational platforms.
The takeaway:
TVO ILC wasn’t just behind competitors—it was failing to meet basic user expectations. Users needed a modern, inclusive platform that mirrored their real-world needs: simplicity, transparency, and flexibility.
We created a user persona using insights from online research, student feedback, competitor analysis, and customer service conversations.
How We Built It:
• Gathered user feedback from NPS reviews, forums, and direct conversations.
• Consulted customer service to identify key frustrations, like navigation issues, unclear course details, and a manual application process.
Key user groups:
• Students: OSSD students, international students, high school students, graduates, homeschool learners, First Nations, Métis, and Inuit students.
• Parents: Low-income, high-income, helicopter parents.
• School teachers, tutors, adult education instructors, guidance counselors, special education staff.
We rolled up our sleeves and mapped the entire student journey—from discovering TVO ILC to starting their first lesson—using sticker paper on a wall-sized canvas. This collaborative approach let us:
• Break down every step: Course discovery, enrollment, payment, and onboarding.
• Spot friction points: Where users got stuck (e.g., manual payment steps, unclear document uploads).
• Refine the flow: Simplify complexity and inject moments of clarity (e.g., progress trackers, instant payment confirmations).
To tackle the fragmented enrollment experience, we launched a collaborative sprint using the “Crazy 8” brainstorming method—sketching eight rapid ideas in eight minutes—to push creative boundaries. This fast-paced approach let us explore radical solutions while grounding ideas in user needs uncovered during research
To fix the fragmented enrollment process, we focused on three fixes:
• Visual timelines eliminated confusion by showing users their current step and what’s next.
• Personalized checklists adapted to profiles (e.g., simplified docs for different user groups).
• Guided course selection used filters, previews, and skill-matching tools to speed up decisions.
We overhauled the TVO ILC’s information architecture to fix critical flaws:
• Simplified menus: Grouped actions by goals (Courses, About, Offer, Contact).
• Enhanced course discovery: Sort by grade, subject, language, or type.
With core solutions defined, we translated ideas into low-fidelity wireframes, focusing on two critical journeys: engagement (discovering courses) and payment (completing enrollment).
Engagement-First Design:
• Course discovery: Explored layouts (grid vs. list views) and tested filters (subject, grade, language) to prioritize clarity for users juggling 144+ courses.
• Personalized paths: Designed dynamic forms that adjusted requirements based on user type (e.g., graduated students saw simplified steps, high school students saw OSSD requirements).
Frictionless Payments:
• Transparent pricing: Integrated costs upfront and broke down fees (tuition, materials) to avoid surprises.
• Guided steps: Reduced payment screens with a progress tracker showing “You’re almost done!”
With our initial designs in place, we moved into a rigorous feedback loop—collaborating with stakeholders and users to ensure the design aligned with business goals and real-world needs.
Key Stakeholder Workshops:
• Presented the wires and prototype to stakeholders, educators, IT teams, and ministry reps.
• Maintained TVO’s educational tone while modernizing visuals (e.g., accessible typography, inclusive imagery).
• Technical feasibility: Audited payment API integration and legacy system limitations to ensure realistic timelines.
Solutions
To validate our prototypes, we conducted 1:1 interviews with 8 students and deployed a task-based survey to 30+ users. Our goal: identify gaps in the enrollment flow and simplify complexity.
Key Findings:
• Users struggled to determine if they qualified for enrollment, leading to confusion.
• Users were unsure about required documents, causing delays.
• Users had difficulty locating the document upload section.
• Users felt lost navigating between steps in the application process.
Survey Insights: 78% rated the new flow “simpler” than the old process.
In the visual design process for TVO ILC, we transform wireframes into interactive prototypes by integrating UI elements, real content, and user flows. We conduct usability testing and perform responsive design checks to gather user feedback and ensure consistency across devices.
we took a mobile-first approach to ensure seamless usability across devices. On the course list page, for example, we simplified the course cards for mobile by removing images and using a distinct color-coded system for grade levels. This not only made the list more scannable but also reduced visual clutter, helping students find relevant courses faster.
To ensure consistency and scalability, we developed a custom design system tailored to TVO ILC’s unique needs. This system became the single source of truth for designers, developers, and stakeholders, streamlining workflows and reducing redundancy.
Key Components
• Typography: Defined a clear hierarchy (e.g., headings, body text) using accessible, student-friendly fonts like Rubik.
• Color Palette: Established a brand-aligned color system with WCAG-compliant contrasts for readability (e.g., primary green for CTAs, different gradient colors for subject catagories).
• Reusable Components: Built modular UI elements (e.g., buttons, cards, dropdowns) to ensure consistency across pages like course listings and enrollment forms.
Subject-Based Gradient System
The gradient color system played a key role in building a cohesive and engaging visual identity across the platform. By assigning a unique gradient to each subject and applying it consistently—from subject icons and course covers to mobile views and detailed pages—we not only enhanced visual recognition but also created a more dynamic and organized learning environment. This thoughtful use of color helped users quickly associate content with specific subjects, reduced cognitive load, and added a layer of warmth and personality to the overall experience.
Animated Elements
We designed animated icons to highlight TVO ILC’s benefits on the homepage, showcasing flexible learning, accessibility, and self-paced courses. The smooth animations made the page more dynamic and engaging, helping users quickly grasp key features.
After launching the site, we conducted a comprehensive data analysis to assess user behavior and identify areas for improvement.
Using Hotjar, we closely examined user interactions through various analytics tools, including:
• Scroll Map – Tracked how far users scrolled to determine if key content was reaching them.
• Click Map – Analyzed which elements received the most clicks, particularly CTAs, to evaluate their effectiveness.
• Move Map – Observed cursor movements to understand navigation patterns and user focus areas.
We brought together a cross-functional team for a data-driven brainstorming session, using Hotjar insights to analyze how users interacted with the site—where they clicked, how far they scrolled, and which sections they ignored. Beyond analytics, we also gathered direct feedback through face-to-face surveys with students to understand their challenges firsthand. The tech team shared backend limitations, customer service highlighted common user frustrations, and stakeholders provided business priorities.
We compiled the heat map results, mapping findings page by page, section by section into a conclusion table to identify key patterns. We then passed this to the project manager, prioritizing high-impact improvements to enhance the user experience efficiently.
After prioritizing the conclusion table, we began developing low-fidelity wireframes to directly address the pain points identified during brainstorming.
• Improve CTA visibility: By making key "Add Course} buttons "sticky," we boosted user engagement and conversions.
• Enhance content hierarchy: We restructured how course details were presented, resulting in better comprehension and user engagement.
• Simplify the checkout flow: By reducing form fields and streamlining the payment process, we minimized drop-offs.
Retested after two month:
• Click Map Analysis“Add Course” CTA Performance:
Mobile: After relocating the CTA to a sticky footer” clicks increased by 35% in the first month.
• Scroll Map Insights
Homepage Engagement:
Below-the-Fold Content: After restructuring the layout to surface key actions (e.g., enrollment deadlines, course previews), 48% of users scrolled to the bottom of the page—up from just 24% pre-launch.
This project also involved developing marketing campaigns, including email marketing and social media initiatives.
• Enrollment Confirmation – A clear, engaging confirmation email to reassure students of their successful registration.
• Course Start Guide – A step-by-step instructional email to help students navigate the platform and begin their courses smoothly.
The results were immediate and impactful:
• Increased Enrollments: Mobile enrollments jumped 35%—not because the button was prettier, but because it worked.
• Reduced Support Inquiries: Support calls dropped 55% in 6 months.
• Improved Accessibility: Compliance with WCAG standards made the platform more inclusive, helping students with disabilities access the site with ease.
