Loading ...

Responses by and Dennis Lenarduzzi, creative director, Makespace; and CUSP

Background: As banking moves towards a thing one does and away from a physical place one goes to, ATB Financial has embarked on a transformation in technology and its approach to customer experience. The alphaBeta site was designed with a two-fold purpose: one is to inform customers and the fintech community of ATB’s moonshots and innovations; and the other is to recruit talent from all over the world to join its team of more than 300 big thinkers who are working behind the scenes on these innovations.

The vision for the site was to create a platform for information and articles about ATB’s perspective on fintech, and then to use social media and paid advertising to target potential staff to the site. When exposing experiments and minimum-viable products in development to the masses, one of the challenges is that customers want what you might not be ready to deploy. So the idea was to create an identity and experience that is just a bit removed from ATB’s master brand to which customers are accustomed. We thought of alphaBeta a bit like the ATB Transformation team’s online “magazine.”
 
Makespace developed the name, the core strategy, the look and feel, and most of the content over the period that the site has been live.

Design core: The site provides a user experience that speaks to a core target audience of technologically savvy visitors. In our design process, it had to feel aspirational, and convey some progressive navigational and UX components. At the same time, it had to be able to have content updated weekly and effortlessly.

The whole concept of the duality between human and machine was something we’re very proud of. It meant that there were two perspectives always at play. Beyond the metaphor, it gave parallel pathways to information and provided clear content streams for articles or sections that were either more technical (like AI), or more humanistic (like HR.)

Favorite details: Our team is really proud of the site’s navigational elements, which both the design and development teams spent many hours crafting. We wanted to create a dynamic reading experience that made it fun to move through articles and other sections of the site.

Process: The site was an exercise in collaboration at a level that we had not employed before. The concept, branding, core design and content were handled by Makespace, with direct involvement with ATB’s internal marketing team. When it came time to develop and deploy, Makespace worked with Novus Design Group (whose core team has now created CUSP) and Salt & Pepper, who worked alongside us with ATB’s customer experience and Technology teams providing Google Cloud Platform, Security (bank protocols), IT insights and support. We learned how to adapt with agility as the product and content adapts, and how to communicate remotely with efficacy and accuracy.

The site was created in a matter of a few months by a relatively small team, but that did not stop us from challenging ourselves to push the boundaries. The team at Salt & Pepper are based in Moscow, so we had to deal with the time difference (Moscow being nine hours ahead of Edmonton), especially during the deployment and launch—but their expertise in the specific development platform requested by the client was crucial.

Divergent paths: If we could start over, the main thing would be to insist on a different dev platform that might make the “back-end” a little more user friendly. Specifically, there was some content hard-coded in that turned out to require frequent updates. In the latest iteration, we rebuilt the events and articles pages so that the client can update content quickly. Articles and illustrations are produced by Makespace on a very frequent basis, so a consistency in tone and look, as well as a high-level of craft, were not compromised. That agility found its way into content creation as well, with complete articles and illustrations sometimes being turned around in a couple of days. Fast, but fun!

Navigation structure: The navigation played up the duality of human and machine and encouraged users to find their own path to the content based on those two fundamental perspectives. ATB is “people place” and that is fundamental to their brand. Although this site contains a lot of technical content, the navigation endeavors to remain human and playful.

Special features: Our team spent a lot of time crafting both the Upcoming Articles and the Articles Archive pages. These were unique opportunities to bring some innovative scroll mechanisms to the UX, adding senses of discovery and depth as you navigate through the website.

Technology: Considering the initial vision of design, we decided to implement the site as a single-page application (SPA). We used a combination of React and Ruby on Rails. This solution gave us an open technology platform from which we built a user experience that was as modern, smooth and crisp as possible. The key benefit of an SPA is the opportunity to implement seamless and animated transitions from page to page without refreshing.

Anything else? This project was developed for and hosted on Google Cloud Platform in partnership with ATB’s IT team and Google.

alphabeta.atb.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In