New brand meets new content management
When an old CMS ( Content management system ) can no longer support your needs, you overhaul. In our case, sunsetting the old system while ushering in a new brand brought forward a slew of interesting challenges.
The Problem
Banks typically move slowly and for good reason. While some reasons exist for financial security, others are just symptoms of an 90,000 employee strong company. I was hired to redesign, reimagine and disrupt the status quo.
Previously, a rather traditional waterfall method was utilized. Business lines would ask content teams for updates on a campaign and everyone would get to work. Web designers would build concepts, writers would write and developers would make it all happen.
While that was fine for 2010, I joined Scotiabank in a new digital first age. A new CMS was coming, and its name was Adobe Experience Manager. Much like WordPress and Squarespace, AEM is a dynamic and very user friendly content management system that allows just about anyone to build and launch a website.
Part of my mandate was to redesign and migrate over 2000 pages from an old crumbling CMS to this new shiny system that was all new to everyone on the team. Let’s get to work.
My Role
Lead UX/UI Designer
Timeline
Dec 2016 – Jan 2018
Business Line
Retail
The Solution
Our team was created and our mandate was set, so what’s next? I immediately began the research process by asking for several data points including heatmaps, traffic reports and customer feedback via contact forms. We then put together a package and presented it to the rest of the team with this new updated mandate.
Make it customizable, Make it accessible, Make it responsive, MAKE IT BETTER.
What does the Data say?
While heatmaps are only one data point, they do show overarching trends when it comes to how users interact with your product at any given moment. We immediately set our eyes on the obvious sign-in button. There’s no denying the majority of users use the retail website as a gateway to their online banking.
Shifting focus towards the remainder of the pages showcased several trends and patterns. Carousels showed a lack of engagement the further down the list you went. Overtly large mega-menus brought on a “mini-site-within-a-site” mentality that not only brought on confusion, but lacked proper mouse detection on hover. Furthermore, the lack of a true mobile friendly version of the website gave users on the go the impression that we don’t support your choice of platform. Lastly, accessibility was non-existent. Multi-colour text, a lack of proper tagging and an html structure that lacked proper hierarchy were top issues amongst a slew of others.
Getting to work
After extensive research into modern banking platforms and competitors, we as a team got to work with initial brainstorming and information architecture workshops. We canvassed business lines for information and gathered user data from years of metrics and online feedback.
During the process, I interacted with several key teams including accessibility, user researchers, service designers, marketing and data scientists. We compiled lists of recommendations and got to work implementing a new information architecture.
Designing Components
AEM utilizes a component based structure to build out pages. Content authors choose blocks of components such as galleries, cards and headers based off a designers mockup. Part of this process was to design, build and maintain responsive components that are all able to live cohesively. A base layout and design spec sheet were provided to developers. Furthermore, DesignQA and a full authoring guidelines was created in order to help facilitate best practices for design, content and accessibility.