ONLINE BANKING EXPERIENCE
Minimal Onboarding for the banking user.
Personal Contributions: Persona Building, Design, Wireframes, Prototypes, Mockups.
​
Software Used: Figma
​
My Role: UX Designer with Deloitte LLC
​
​
PROJECT BACKGROUND
Our team was tasked with building a proof of concept for an online banking experience during a 12-week assessment. They asked for a new look and feel, new onboarding flows and for us to determine the viability of using OutSystems as a low code-no code development tool. ​
​
The Problem:
​
The bank has having difficulty getting users to sign up for their online banking experience because of its complexity. They were also struggling with ways to more easily onboard a user and guide them through a full account set up.
PLANNING STAGES
We began by having a brainstorming session with the client where they identified major pain points of their users. From there we identified 5 key steps to their intended user experience.
Enrollment
Funding the Account
Ordering A Debit Card
Setting up Direct Deposit
Viewing Transactions
USER PERSONA
By synthesizing user research provided by the client, we created a single user to use as a reflect for our designs.
.png)
JANET VASQUEZ
A 38 year old teacher who also works in retail . They are single with no children. They use their online banking profile a lot, but also like the ability to go into a branch. They have other banks, but like this one for convince. Because they work two jobs, efficiency, transparency and simplicity resonate with them.
INNOVATING ONBOARDING
To give a bit of a wow factor into our designs, we were tasked with brainstorming innovative initial onboarding ideas. Below you will see the process from paper, to wireframes to our finalized chat bot concept.
INITIAL WIREFRAMES
We were originally tasked with creating a desktop experience. Below are my original wireframes. My design concept was to use widgets to contain each feature while still allowing the user to view any other account information they wanted to.The user would click or tap into the widget area, where it would then expand to include the actions they were interested in accomplishing.
 |  |
|---|
LOW FIDELITY DESIGN
Our team was asked to pivot, and focus on the mobile screens to showcase the design's ability to be responsive. For this we also made sure to used components within the OutSystems design system in order to prove that the design could be done in a quick way with predetermined components.
HIGH FIDELITY DESIGN
Finally, working with the OutSystems team, we moved our low fidelity designs into a higher fidelity, using the branding of the bank and including design element. We kept the design simple and focused on the first time user journey, which includes limited information, but has clear call to actions for the user.
HIGH FIDELITY DESKTOP
Below is the final example of the high fidelity desktop view. Here you can see how the design is responsive, even with the added design elements
THE SOLUTION
By focusing on the user, and keeping direct action and assistance through onboarding in mind, we created a simple design with limited distractions that will guide the user through their online banking experience. After this step, our plan was to keep the simplicity of this design, but by adding more complex screens as the user clicks into the app.