CIBC, Sept - Dec 2022
Redesigning Simplii Financial’s site and authoring design documentation for their rebrand
Role
Product Design Intern
Skills
Visual design
Design systems
Content design
Product Design Intern
Visual design
Design systems
Content design
In other words, how do you turn a brand guidelines document that’s 75+ pages long into clear, concise, and specific documentation for designers?
I created the documentation pertaining to Simplii’s brand language, tone of voice, logotype/logomark, photography, and iconography.
The biggest priority for me was to ensure that the documentation was digestable and actionable. I first planned out what content was most important to highlight, and then started to brainstorm ways to create visuals and diagrams to summarize that information. For example, to help our content designers speak “in the voice” of Simplii, I created a set of dos and don’ts to distinguish good vs bad copy. Some examples are below!
Don’t use overly formal language
Our account provides 2.5% interest on new deposits for a limited time.
Do use a bold and energetic headline
Earn 2.5% interest on new deposits for a limited time. No monthly fees. Great rates. As simple as that.
Don’t use confusing language
Simplii’s No-Fee Chequing Account has your back.
Do use tongue-in-cheek humour at the right time
We’ll give you a cash bonus for every friend you bring to Simplii Financial.
Similarly, for our photography documentation I included examples of photos we would want on the site, and photos we wouldn’t. Additionally, I added links to our stock photography source sites and keywords that our designers can use in the future to find photos more easily!
How can we educate users about risks and preventative measures?
In addition to writing design documentation, I also created a set of exercises for each so that designers would be able to solidify their understanding of our guidelines. For example, for our photography documentation I created exercises for designers to source images, edit them, and design a hero banner with them.
Before: A long PDF where the info is not digestable, and is hard to find
After: A shared space where info is concise, easy to read, and split up by content and audience
Improve readability and scannability
Use more consistent design patterns
Decrease page lengths across the site
Improve alignment with brand vision
Well, how do you take a desktop design and make sure it looks just as good on tablet and mobile?
A responsive design
A non-responsive design
There are three main considerations I kept in mind while designing for tablet and mobile: layout, touch targets, and scaling.
Layout: While a desktop screen has space for columns and horizontal layouts, mobile screens don’t, which is why we changed most of our layouts to stack content instead.
Touch targets: On mobile, the screen size is smaller which means touch targets have to be bigger! We made all our buttons and interactive elements wider so that users don’t have to worry about clicking a tiny button on their screen.
Scalability: Since we had three different breakpoints, we also implemented scalable sizing across our designs. We had specific typography, grids and image sizing for each breakpoint to make the design process more efficient.
To get feedback from users before moving forward, we conducted an A/B survey and some usability testing, with 350 participants total!
The survey
326 users between the ages of 18-75 viewed the current homepage design versus the proposed new one, and had to rate them on a 7-point Likert scale based on the following criteria:
The current design did outperform on professionalism, but Simplii did want this redesign to set them apart from the look of a ‘traditional’ bank, where professionalism might mean muted colours, serif fonts, and more product-focused imagery.
21 users between the ages of 20-55 took a look at the redesigned home page and no-fee chequing account pages.
A majority of users had a positive impression of the home page, commenting on aspects like its modern look, the layout, and the colour scheme.
“Colours give a gen-z pop culture vibe"
“Very clean design, gets the point across”
“Colour scheme is modern and trendy”
“The layout is wonderful and easy to see”
Users were also easily able to identify which components were clickable, which validated the designs of our CTAs and interactive components.
“I like that I can click on many things”
“I like the headings and icons”
“I like the 5 call-to-actions”
“The icons are very easy to see and user friendly”
Authoring design documentation helped me dive into content design and learn the best ways to communicate about design with designers. I was able to explore how design frameworks are built from the ground up. It was also challenging because of the amount of ambiguity. It’s hard to define a design system when it’s still in its early stages, so I had tons of questions along the way. For example, we were still fleshing out the details of when primary vs. secondary icons should be used, so writing the iconography documentation helped me contribute to the discussion and help lay the groundwork!
Having ownership of the tablet and mobile mocks was a great way for me to learn more about fundamental visual principles in the context of responsive design. I also had the opportunity to get mentorship from a Design Systems Lead, which was a great way to learn about the visual design work that goes into building a design system!
Throughout my internship I was lucky to have great mentors and learn from the best. Shoutout to the phenomenal designers at CIBC :)
