Welcome new users
Re-enforce branding
Show product offerings
Strengthen product value
My Role: UX & UI
Content Design: Heather Gilroy
Team Lead: Dan Ko
Senior Manager: Dalbir Channa
TD New To Bank & Welcome Experience
"You know what they say about first impressions. This project may seem small, but it was incredibly rewarding! This was one of my favourite projects during my time at TD. A warm welcome goes a long way in demonstrating value and making people feel confident. Every time I see this work in the wild, I smile!"
bright spot
understand the ask, gather requirements, assess scope
step 1: discuss
How might we deliver a simple, enticing solution for new customers to explore products TD has to offer prior to becoming a customer?
Business Requirements
Using updated design system and branding, create an effortless experience for New To Bank customers opening an account, increasing acquisition at first time app-launch.
I want...
To browse TD offerings before I become a customer
I want...
To open a deposit account directly from the app
I want...
To see all the products available to me at TD on the mobile app
I need...
Banking information that is relevant and concise
I need...
A simple, friendly process that is accessible to me
I need...
Flexibility to bank on my phone and on the go
An empty skeleton landing page is confusing, and fails to display a customer-focused, friendly introduction to the experience
New users must register for EasyWeb outside the mobile app either on web or at a branch before they can use the mobile banking app
Only seasoned app users understand how to proceed on the empty landing page which caused confusion
Current State
The existing experience defined for improvement
ask questions, gather research, find data
step 2: discover
Research
Understanding how our competitors deliver this experience helps to map the space. This allows us to use pre-existing mental models a launchpad for innovation.
strategy, wireframes, visual designs
step 3: design
Architecture & User Flow
Mapping the experience with various user flows before wire-framing allows us to understand all entry points, and create a concise communication of the flow
final deliverables
step 4: deliver
Wireframes
Using an iterative approach, wireframes allow the stakeholders to understand the flow in a low-fidelity screen state
reflect
step 5: debrief
View this page in an alternate format
Use the same password
Closing Thoughts
This project was a lot of fun! Looking back on the process as a whole, the iterative approach at each step allowed us to gather feedback from multiple stakeholders inside and outside of design. Unfortunately, usability testing wasn't possible for this project, however the deep competitive insights we gathered allowed us to launch off a familiar mental model across various login experiences. Working on this project stretched my visual design skills as well as teaching me how to scale and format graphics for all mobile and tablet breakpoints. Even though future iterations have already been released, this project was the jumping off point for those iterations to operate on a solid foundation.
Learning
Every project has an opportunity or two to improve. After reflection on the process, next time I would have prepared a more comprehensive prototype as the initial high level design. Prototypes give real world context to non-designers that aren't as comfortable viewing wireframes.
Opportunities for Improvement
More motion design! This was in our original proposal and I hope to see it come into future enhancements. Having subtle animation in the imagery would bring an additional layer of delight to the experience.
