Redefine Banking

Mobilearth is a Fintech company that delivers digital banking solutions to customers and employees. The two main products are Mobilearth banking for day to day customer transactions and MobiBranch which is employee facing.

Expanding Financial Services & Banking Experiences.

Deliver seamless digital banking experiences for customers while empowering employees to support clients remotely—reducing frustration and strengthening engagement and trust.

Objective:

Deliver seamless digital banking experiences for customers while empowering employees to support clients remotely—reducing frustration and strengthening engagement and trust.

The Challenge:

Each bank required different solutions tailored to their branding needs. Then, deliver both a unified and personalized experience at scale.

Team

1 Project Manager

1 Business Analyst

5 Software Developers

1 QA Analyst

My Role

Product Designer

Platform

iOS, Android and Web platforms

Cognitive overload and visual imbalance:

Screens often featured either an overwhelming number of actions or excessive white space, leading to confusion. Additionally, contrast issues and insufficient use of brand colors made it challenging to scale the interface for different banking clients.

Inconsistent UI Design principles:

Lack of color consistency and poor contrast made content difficult to read, while unclear buttons and text input fields reduced usability.

Collaboration & Resource Gathering

Partnership

With internal bank design teams to align on brand standards.

Integration

Collaboration

With Product Managers to gather key project requirements and insights.
Branding kits to ensure visual consistency on all platforms.

Problems to Solve

01. Challenging to deliver branch-level service outside the bank

Lack of mobile and remote tools limits staff’s ability to help customers at their home or business, leading to lower satisfaction and missed opportunities.

02. Customers struggle to complete banking transactions smoothly

Confusing workflows and inconsistent interfaces make it difficult for users to manage accounts, transfer funds, or pay bills online. Cost saving measures like physical bank closures are making customers more reliant on digital products.

03. Adapting to Processes and Language

Each institution has unique processes for KYC, onboarding, account management, and internal tools. We customized solutions to fit these needs, including terminology (“customers” vs. “members”) and workflows for both banks and credit unions.

Conceptualize

From all the insights, we priortized products within Mobilearth.

  1. Understand business goals, wants and needs

  2. Categorize banking functions

  3. Present to stakeholders

Key Opportunities

  • Simplify Every Step

    Strip away complexity to make banking clear and intuitive, so users can accomplish their goals with minimal effort.

  • Define and Align

    Work together with cross-functional team and stakeholder insights through qualatative quantative methods to solve pain points.

  • Design for Accesibility

    Gather and organize insights on all user groups. Iterate on feedback ensuring no pain point or opportunity is missed.

  • Make Banking Fun - Inspire Confidence

    Design flows and visuals that make banking feel empowering and modern, helping users feel confident and even a bit amazed as they explore new features.

Early stages of the discovery phase.

Examples of paper prototypes allowing free discussion with the internal team, each section can be moved around easily. Once a layout was achieved, we moved on to wireframes to gain valuable feedback from customers and stakeholders through user testing.

IMG_20141209_171128.jpg
1_home.png
2_routed_applications.png
3_route_popup.png
3b_see_more_route.png
4_notes.png
5_contracts___archives.png

Employee Locations

With the backend data given by developers, I’ve designed several iterations based on user feedback and internal testing. These modules are important for employees to be able to track each other during visits to serve their clients. Even with prototyping, we supported the product with user testing reflections. We’ve added 7 new functions discovered from feedback such as branch locations, map directions and incorporating profile images to increase cognitive recognition - for duplicate employee names and other efficiencies.

Delivery

Hand-over guidelines to the cross-functional team, in the process.

  1. Simplified tasks with intuitive dashboards and easy navigation.

  2. Reduced pain points with guided onboarding and real-time feedback.

  3. Ensured consistent, accessible branding with flexible, WCAG-compliant components.

66.jpg
67.jpg
68.jpg
69.jpg
70.jpg
71.jpg

Reflection: Use a collaborative design system like Zeroheight, by keeping all guidelines and assets up to date in one place for developer handoff.

Heuristics for UI

  1. Visibility of system status

  2. Match between system and real world

  3. User control and freedom

  4. Consistency and standards

  5. Error prevention

  6. Recognition rather than recall

  7. Flexibility and efficiency of use

  8. Aesthetic and minimalist design

  9. Help users recognize, diagonse and recover from errors

  10. Help and documentation

WCAG Accessibility

  • Text & Color

    PERCEIVABLE INFORMATION

    Meet AAA compliance, check with contrast checker tools.

    Choose text and colors that is easy to read, including people with visual impairments.

  • Error

    ERROR HANDLING

    Clear error indicators and popup tooltips help guide users and improve usability.

  • Structure

    LINKS AND BUTTONS

    Easily identifiable with distinct and consistent styles.

  • Displaying Content

    ENSURE FLEXIBILITY

    Compliance across different devices and screen readers.

Key Lessons Learned:

  1. Users want clear, actionable interfaces to simplify complex tasks.

  2. Ongoing feedback and testing are key to solving real user needs.

  3. Simple, intuitive design helps both customers and employees achieve their goals.

My Involvement:

  • Branding & Visual Design

  • User-Centered Design & Research

  • Prototyping & Interaction Design

  • Product Strategy & Development

  • Information Architecture & Wireframing

  • Design Systems & Guidelines

  • Usability Testing & Iteration

  • Stakeholder & Team Collaboration

  • Designed and deployed digital banking solutions for 30 financial institutions.

  • Led 0-to-1 product development during COVID-19 to enable seamless remote banking.

Logo for Global Business Awards with the text "Virtual Banking Solution of the Year - 2024".
Digital graphic with the word 'Fintech', icons of security, communication, and technology, and 'Most Innovative Digital Banking Solutions Company in Canada - 2023' text.
A certificate or award plaque titled 'Innovation & Excellence Awards 2021' with an 'Award Winner' label, placed on a desk next to a laptop and a container with pens and a plant, in an office setting.
Animated globe with a city skyline at sunset and the text 'Worldwide Finance Awards 2023' and 'Congratulations!'.

Global Business Awards - The MobiBranch solution has been awarded the title Virtual Banking Solution of the Year 2024.

Awards and Recognition over the years

Worldwide Finance Awards - Most Innovative Online Banking Digital Onboarding Platform 2022

Wealth and Finance International's FinTech Awards - Most Innovative Digital Banking Solutions Company in Canada 2023.

  • Drove digital adoption in underserved markets, expanding access to financial services.

  • Streamlined day-to-day transactions, reducing dependency on physical branches and setting a new standard for digital banking experiences.

Corporate LiveWire Innovation & Excellence Awards - Mobile Banking Fintech Company of the Year 2021

Learn How I Designed a Safer Branch Visit

Moibilearth Queue - During the early Covid pandemic, banking customers had to wait in long, frustrating lines outside due to social distancing, This prompted me to seek a solution through Mobilearth applications.

View Case Study!