96% of TD Bank customers have suffered from a long and endless line at the branch. The chaotic way of directing people to designated areas of services has turned many customers away. The current TD bank digital line up system is only available on phone through scanning a QR code. The project focused on creating line-up solution and making it more accessible and inclusive to all customers.

Product Demo Video

Final Product (Website)

click here to see the system on live website

Tools and My Roles

User Interface Design: designing and prototyping the interface of the queuing system

Communicator: Setting up the weekly meeting agenda & external emails communication

User Research: Conducting usability testings with various users and refining the prototypes based on the feedback

Design Process

Overview

Research

  • Market Research

We have found lots of digital applications for the virtual queues/waitlists of restaurants. However, there was none apps dedicated for financial institutions or any other public service sectors. Most platforms we found were digital queueing management websites that focused on providing insights and advice on how to build a queueing system. None focused on the user interfaces.

  • Accessibility Research
  • User Research
  • User Personas
  • User Journeys

User journey map
User empathy map

Ideation

Impactful: provide users with a pleasant or unique user experience;
Feasible: the feature is within the group members’ ability and also feasible technically

Each group member came up with the desired features/design ideas individually and then presented the ideas with one another. Then, we group the ideas and discussed which ones are the most feasible and which ones are the most impactful. Then, we come to the conclusion that our design will prioritize on the features that are both feasible and impactful.

Prototype and Testing

  • Kiosk Prototype
credit to the engineering team
credit to the engineering team
  • Paper Prototype
  • A fake TD bank debit card
  • the welcome page
  • tapping the card to begin
  • read customer’s information
  • if customer would like to edit info
  • done with lining up

We have made a low-fi (paper) prototype to ensure the logic flow of the interactions is correct and all essential and preferred features are included.

We have performed six usability testings and have found several problems:

  • Mid-fidelity Prototype
  • welcome page
  • ask if customers have the card to tap
  • tap card for existing customers
  • check info
  • help page
  • error page if any info is incorrect
  • choose update methods
  • done with lining up
  • done with lining up

Based on the feedback from the paper prototype, we have made a mid-fi (clickable) prototype for users to interact with.

  • We added:
    • BACK & EDIT & SKIP buttons to support the user flow
    • ticket printing option
    • error prevention and warning
    • revised HELP page’s wording
    • solve the contact method’s “opt-in by default” feature

We have also added one “Are you still there screen” to adjust needs of people with memory loss or other memory-related disabilities. This screen will pop up if there is no action from the user on the screen for 15 seconds in order to make sure things are saved and information is protected.

We have performed six usability testings on different people and have found several problems:

  • High-Fidelity Prototype

Kiosk Interface

Website Interface

Based on the feedback from the usability testing using the mid-fidelity prototype, we have made the following changes:

  • solve the inconsistency, confused/wrong wording and non-interactions problems
  • omit the SKIP button to avoid confusion
  • make the time-out screen 15 seconds long (the maximum Figma allows)
  • add “check position” function
  • add ending page to indicate the end of the user flow

Reflections and Challenges

What I have learned?

Precise communication and presentation on the design process and the logic behind the design alternatives/decisions

Collaboration with people from multi-disciplinary backgrounds

Accessibility design: what the interface should do to accommodate different types of disabilities

The collaboration between interface design and software development. Before this project, I thought designer just designed things and developer just implemented as designed. However, this project gave me a chance to take part in the collaboration and I realized that the collaboration between designers and developers is more like a back-and-forth communication. We communicated a lot along the design to discuss the queuing process and the logic behind so that we made sure everyone’s on the same page. Every element I designed should be communicated to the developers clearly so that they were able to realize the interactions.

Next Steps

Working on my technical and coding skills so that I could help with the software team.

There was budget constraint (we did not have enough money to build up the physical kiosk or screen in order to put the system into use) and covid-related constraints (team members were unable to interviews with a large number of TD customers since it was hard to conduct research in-person)

The COVID was a huge limitation for us, so we did not have resources/opportunities to recruit a large amount of participants and also people with disabilities to test our prototype. Next time we should spend more time on research about the accessibility issues and interviews with people with disabilities to understand more.

Many TD resources are under NDA which are not publicly available for us, so when we were designing, we had to take more time to build things from scratch. This resulted in our colors, fonts and certain formats are deviated from the standard TD design.