Zafin US Bank

April 2017 – 2 week sprint

3-person team – product manager, visual designer, & myself

My Role: Interaction Designer & Ux Researcher

Zafin US Bank

Zafin bring an offer to keep our customers through higher interest rates. Creates one consistent view of product information across all channels (including deposit account interest rate disclosures and offer terms and conditions)

Zafin US Bank

Zafin bring an offer to keep our customers through higher interest rates. Creates one consistent view of product information across all channels (including deposit account interest rate disclosures and offer terms and conditions)

Sector

Zafin at US BANK

Challenge

The organization’s website needs to be redesigned to better connect with its audiences, including building a more intuitive information architecture and developing a coherent visual language.

My Role

Workshop Facilitation, Information Architecture, Webdesign, Branding

Project Time

3 weeks (before handoff to development)

Overview

  • Week 1 Research and Discovery.
  • Week 2: Define Requirements and User Stories
  • Week 3: Conceptual Design
  • Week 4: Iterative Design and Testing
  • Week 5: Visual Design
  • Week 6 Implementation and Development
  • Week 7: Launch and Post-Launch Activities
  • Week 8: Continuous Improvement

What is Zafin?

Considering We CD’s & its interest rates, the current rate of Interest are generally provided by the bank based on the zip code (where the customer is living). Whereas for Zafin, its a 3rd party system, It provides the Rate of Interest based on the customer’s profile, not based on zip code.

How Zafin Tailors Interest Rates for US Bank Customers Based on Profiles?

Zafin will receive all the details available in bank about the customer (like Credit score, address, amount n bank how long the account is present etc). Based on the details provided by US Bank to Zaflin, profiling will be done at the customer level data, gets validated and the interest rates are provided.

My Role in the Zafin Project

My role spans from concept to completion, guiding the entire design process. I start by conducting thorough user research to understand individual needs and preferences, which informs the initial design strategy. From there, I create visual concepts and prototypes that align with both user requirements and business goals. Throughout the development, I test these designs to ensure they are functional, user-friendly, and meet project objectives. This end-to-end involvement ensures that the final product is both effective and engaging for users.

Scope

  • Enhance the user interface to be more user-friendly, with clear instructions for non-tech-savvy users.
  • Streamline the app's design to provide intuitive navigation and easy access to key features.
  • Optimize performance by addressing technical issues to ensure smooth operation, fast loading times, and reliable functionality.

Problem Statement

  • Text size and alignment issues in responsive design impact readability.
  • Congested text reduces readability.
  • Navigation via tab, arrow, and enter keys is not functional.
  • Alternate text for images is missing.
  • Visual hierarchy is unclear.
  • Quick tasks feature offers limited options.
  • Recent transaction lists display too few rows.
  • The link for the view balance bounce offer is missing.
  • The UI is cluttered and complicated.

Competitors

Process

Discovery

  • Understand user
  • Understand current process
  • Collect existing user feedback

Design

  • Reduce navigation links from 4 to 1
  • 1 screen for entire process
    Add dashboard notifications
  • Use Shield components

Alignment

  • Preview design with product
  • Ensure base requirements met
  • Determine scenarios for user research

Research

  • Observe research sessions
  • Evaluate feedback
  • Determine design adjustments needed

Discovery

  • Understand user
  • Understand current process
  • Collect existing user feedback

Design

  • Reduce navigation links from 4 to 1
  • 1 screen for entire process
    Add dashboard notifications
  • Use Shield components

Alignment

  • Preview design with product
  • Ensure base requirements met
  • Determine scenarios for user research

Research

  • Observe research sessions
  • Evaluate feedback
  • Determine design adjustments needed

Challenges with Old UI Screens

  • Inefficiency: The old UI often requires more steps or clicks to complete tasks, resulting in a less efficient user experience compared to a streamlined new design.
  • Limited Functionality: The old UI may lack newer features or functionalities, limiting the overall user experience and capability of the interface.
  • Outdated Design: The design of the old UI appears dated and lacks the visual appeal and modern aesthetics of current design trends.

Features of the New UI Screens

  • Introduced a fresh look to enhance user engagement and create a more positive brand image.
  • Added new features and functionalities to address evolving user needs and provide a more comprehensive experience.
  • Streamlined workflows to allow users to complete tasks with fewer steps and in less time.

User Problem

Ideation/ Mind Mapping

A diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea.

Ideation/ Mind Mapping

Initial gathering of individual expectations and definition of daily goals.
Brainstorming and prioritizing brand attributes.
All put together, it creates the mission statement.

Objective

The objectives of the system are to lower transaction costs, reduce risk, and provide liquidity.

Competitors

U.S. Bank competitors include PNC, Wells Fargo, Bank of America, M&T Bank and BB&T Corporation.

Existing Problem

Progress tracker is not working. Offers is not updating. Recent transactions are not properly update sometime. Quick tasks has limited options.

Research

The product catalog needs connectivity between Zafin and U.S. Bank.
  • Text visibility is too small on the old screens
  • Leading to poor readability due to inadequate typography and placement.
  • The outdated UI is also a significant concern.

Research

The product catalog needs connectivity between Zafin and U.S. Bank.
  • Text visibility is too small on the old screens
  • Leading to poor readability due to inadequate typography and placement.
  • The outdated UI is also a significant concern.

Reusability

Design leverages proven elements and existing icons.
  • Reuse shortcut options for consistency.
  • Integrate card view as part of our design pattern.
  • Utilize buttons from the current design system.
  • Reapply existing tables and colors in the new design.
  • Address pending transaction status.
  • Design leverages proven elements and existing icons.
  • Reuse shortcut options for consistency.
  • Integrate card view as part of our design pattern.
  • Utilize buttons from the current design system.
  • Reapply existing tables and colors in the new design.
  • Address pending transaction status.

User Flow

Low Fidelity Mockups

By utilizing low-fidelity mockups, I ensure that the design foundation is solid before moving on to more detailed and polished versions.

High Fidelity proposed designs

These designs played a critical role in creating a user-friendly, efficient, and visually engaging platform that meets the needs of both the bank and its customers.

User Testing

To understand the views of other users about this part, I’ve collected data from the users.

Frank J. 

It is very good option to edit quick task.

Mark. M

Only one offer is presented per account

James.S 

Review & pay option is good for users to check their transfer before the task done.

Cameron. S 

Front-end channels will need to display the offer

Jeff Hardy 

Offer is only available when CD is in its grace period

Mark Willson 

New MMA accounts should be divided into “pricing groups” for testing purposes

Steve Robinson 

Only one offer is presented per account

Deff Waugh 

Monetize payments and can Zafin identify customer payments and determine amount of cash payment

Learnings from the Zafin Project:

I learned the intricacies of integrating multiple systems, such as Zafin and U.S. Bank, ensuring seamless communication and data flow between them. This experience highlighted the importance of understanding technical requirements and working closely with development teams to address integration challenges.

The project reinforced the value of a user-centered approach. By deeply understanding the needs and behaviors of different user segments, I was able to design interfaces that catered to specific requirements, such as personalized interest rates based on individual profiles.

Working on Zafin taught me the importance of designing for scalability. The system needed to accommodate a wide range of financial products and user interactions, so I focused on creating flexible design components that could easily adapt to future growth and feature expansions.

I gained a deeper understanding of the importance of designing within regulatory frameworks. The financial sector is heavily regulated, and ensuring that the UI complied with legal requirements, such as clear and consistent disclosure of terms and conditions, was crucial.

The project emphasized the importance of cross-functional collaboration. Working closely with product managers, developers, and compliance teams allowed me to address complex challenges more effectively and ensured that the design aligned with both user needs and business goals.

Through continuous user testing and feedback, I learned how iterative design can lead to significant improvements. Regular refinements based on real user data helped me create a more intuitive and efficient user experience.

I discovered the challenge of introducing innovative features while maintaining a user-friendly interface. The project required balancing cutting-edge functionality with a design that remained accessible and easy to navigate for all users.

These learnings from the Zafin project have enhanced my ability to tackle complex design challenges, particularly in the financial sector, where precision, compliance, and user-centricity are paramount.

Wanna collaborate?

Let’s chat.

Name

(required)

Hey, thanks for checking out my work.

I’ve been fascinated with the way people interact with technology since forever. I’m particularly keen on digital products designed to make life easier for human beings.

What are you working on?

If you want to know more about my design process, or if you want to talk about a cool idea, don’t hesitate to hit me up.

thank you

To Connect with Us.