CIBC & Simplii
The Domestic Student Page
Role: UI Designer
Overview:
In 2017 CIBC ended a 20-year partnership with Loblaw Supermarkets and their consumer banking services. This split was the birth of Simplii banking. While working on CIBC and Simplii’s external-facing website I built several pages, including their newly launched domestic student banking service page.
Phase 1: Beginning Stages and Planning
This project focused on bringing a product to Canadian students. Simplii banking attracts many young, college-aged users due to the no-fee banking feature. As it’s also an online-only bank, their customers tend to be younger.
My PM, Sasha and I, the UI Designer, first began by having a meeting with the Simplii team. In this meeting we discussed:
Hierarchy: What are the most important features of this new product?
Timing: Deciding on the best time to launch (August).
How we should layout content and prioritize our visual hierarchy.
Imagery that aligned with brand guidelines.
First Mock:
Mock was created along with one other designer on my team, Hina, and the writer on the project, Cameron.
Phase 2: Problem, Solutions and Mocks
I began working on this project in the early stages of development. While the Simplii team knew it’d be important to provide student banking to their college-aged users, we needed to understand what exactly would be useful and what would incentivize users to join. This was important to understand why I would make the design choices I’ll need to.
Understanding what’s important to the user:
We explored existing student banking products from other banks. We noticed it was important to prioritize cash and money incentives higher on the page.
All imagery is diverse, student and university-focused.
Based on previous user research we were mindful of the fact that younger users tend to spend less time reading pages, and are likely to skim the page for the information they want. Thus, we’d prioritize short-straight to the point content.
The Simplii team provided my team with the content that would be used on the page. The information provided was specifics of the products such as perks, offers and interest rates. Once we’re provided with a rough layout of the content, the copywriter and I begin crafting a mock.
Phase 2.5: Why we designed the page the way we did.
The page started with a banner, which would have an image of a student, and an immediate CTA to encourage them to apply for student banking.
The beginning of the page prioritized telling user’s the benefits of the account. We decided to keep the text minimal and pointed with iconography to make the benefits skimmable.
For the remainder of the page, the hierarchy was decided based on user research previously mentioned. We prioritized incentives, CTAs, referrals and cash prizes before ending the page with instructions on sign up, and ways for users to contact Simplii if necessary.
Feedback
We received feedback from the Simplii team, as well as our developer Jack about the mock-up.
Some issues included:
The purpose of the form, and how many of the fields were necessary. We decided it was best to add this form and turn it into a ‘contact’ form rather than a sign-up form to discourage users from calling in. They informed us phone lines have been overwhelmed
The ‘How to sign up for student banking’ section would not house the additional content they’d need to be added to the page. This section was going to need more separation to outline all the ways to sign up for student banking.
Original:
Update:
Why update this design?
The design was changed to accommodate the additional information. We decided to go with an interactive, tab-accordion under a single heading since the information was similar, but required a different set of instructions. We all felt this made each set of instructions more distinctive from the other.
Phase 3: Finals
Once we redesigned as per the feedback, the new mock was agreed upon and is currently live on the site. The Simplii team began the project with quite a tight time constraint, so simplicity was important in the execution of this design. It was important the final page was live before school reopened.
To polish the page I sourced stock imagery and iconography aligned with Simplii’s brand, usually including a pop of red. I sourced, photoshopped and edited the images on the page.
The page is viewable here.
Video: Live Domestic Page
Other CIBC and Simplii Projects:
The domestic student page was one of several I’ve done so far during my time at CIBC. Below are some examples of other pages I’ve been a part of.