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 identity brought forward a slew of interesting challenges.
My Role
Lead UX/UI Designer
The Team
3x Design, 2x Dev, QA, PM
The Challenge
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 tasked to redesign, re-imagine 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. Typically, web designers would build out a page based on a copy-deck provided by content authors. After a few rounds of revisions, the page would go live.
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 webpage.
Part of my mandate was to redesign and re-imagine the design and customer journey of over 2000 pages. From an old crumbling CMS to a new shiny system all within a year. Let’s get to work.
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 heat maps, 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!“
– Our Team Mantra
What did the Data say?
While heat maps 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 among 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. Through a series of card sorting exercises and journey maps, we began our wireframing journey by designing key sections of the website.
During the process, I interacted with several key teams including accessibility, UX research, 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 mock-up. 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, design QA and a full authoring guidelines were created in order to help facilitate best practices for design, content and accessibility.
The Great Migration
AEM was sold as a way to democratize content publishing on Scotiabank.com. Previously, a solid understanding of front-end techniques was required to create and publish content.
To test everything we had been working on until this point, our team put together a great migration exercise.
Over 100 Scotiabankers filled the halls of our cafeteria, both to see the curtain lifted on an incredibly anticipated project but to also make their mark and test a system their fellow colleagues worked so hard on.
My team and I acted as guides floating between tables. We offered tips, help and suggestions ranging from technical hiccup mitigation to the full explanation for why and how we set this all up. The day was a success! With over 250 pages migrated, news of this event spread to the rest of the organization and our project anticipation level reached new heights.
The feedback from our exercise was the perfect way to gather valuable information for our authoring team. Furthermore, we were able to test our design choices with real users in a real-world situation. This helped justify our decisions and solidify the process authors would use for years to come.
Wrapping it all up
After a successful launch with metrics and customer feedback pouring in, our work was not complete. Though no launch is perfect, what we managed to complete in just shy of a year with a very small team was a monumental accomplishment. So much so that our team won the best of the best award for our efforts.
Post-launch, our team continued working on new components and page migrations while my new goals were set on the other core pillars of Scotiabank; Commercial banking, business banking and wealth management, all sites in desperate need of redesigns.
On to the next one!