Skip to main content

Citibank:
Global Mobile Brand Experience

Bringing the Citi Brand Experience Strategy to their Mobile Web and Devices
Role:
Lead Visual Designer
Business Impact:
– Comprehensive enhancement and transformation of Citi’s mobile offerings.
– Establishing a cohesive visual brand identity across all touchpoints.
– Delivering consistent experiences, irrespective of international location.
Agency:
Fjord
Skills:
– UX/UI
– Design Systems
– Developer Collaboration

Project Overview

During my tenure working on Citibank’s mobile projects, I played a pivotal role in shaping the bank’s mobile presence. I spearheaded the initiative to unify the brand across various mobile touchpoints, including tablets, phones, and responsive web platforms. My achievements include the creation of Citibank’s inaugural tablet applications for platforms like iPad, Kindle, and Android.

I also revamped the smartphone application, infusing it with a more robust design while ensuring brand consistency. Collaboration was a significant aspect of my role. I worked closely with other designers, taking the lead in visual design. My collaboration extended to Citi’s business stakeholders and a deep engagement with developers based in Cincinnati.

I was instrumental in crafting design patterns tailored for both tablet and phone applications and conceptualized the full design for pre-login promotions. My collaborative efforts also led to the introduction of the promotions concept in Citi’s Singapore market.

In essence, my contributions to Citibank’s mobile projects were multifaceted, ranging from design innovation to cross-functional collaboration, ensuring a cohesive and user-friendly mobile experience for Citibank’s clientele.

Successes and Challenges

Unified Brand Experience Across Mobile Platforms

Led the initiative to ensure consistent branding across tablets, phones, and responsive web platforms.

Collaboration: Design, Biz, Dev

Partnered with designers, business stakeholders, and Cincinnati-based developers to realize design visions.

Creation and Revamp of Mobile Applications

Pioneered Citibank’s first tablet apps for various platforms and enhanced the smartphone app’s design and functionality.

Design Patterns (Earlier to Material UI, etc.)

Crafted unique design patterns for mobile devices that allowed for further enhancements across devices.

Tablet & Mobile Overview

  • Over the course of the Citibank engagement we designed for all major mobile touchpoints.
  • We needed to better align Citibanks mobile brand experiences with the existing ATM visual look and feel.

Initial Mobile Direction

Concept:
  • We explored a couple of design concepts, both UI/UX, and this was the selected design.
  • Goal was to enhance the UI feel of the ATM

Final Mobile Direction: Accessing Accounts and Viewing Activity

Mobile App:
  • A sample set of designs that showcase the flow from viewing all accounts, to looking at the account overview, and finally a look at the transaction detail.
  • The All Accounts view was meant to give a mini-chart to give the user their status at a glance.
  • The Account Detail had both a chart and ledger view. At a tap, the user can flip between the views.

Account Type Charts

Mobile App:
  • Each Account Type had a chart that best exemplified the information the user needed.

Making a Transaction

Mobile App:
  • Simple transaction/transfer/Payment view.
  • User can choose accounts, dollar amount and date to make a transaction or payment

Design Patterns

Mobile App:
  • As the design for all their mobile products were growing we needed to create a design patterns document.
  • This was before popular design system libraries like Material UI.
  • It helped give guidance when the app needed to be expanded to include promotions or other new sections.

Tablet App: Login & Account Detail

Tablet App:
  • This was the first tablet app that Citi produced.
  • I was the Lead Visual Designer spearheading the application of the brand to tablet.
  • The app had all the features that the smartphone app had, Account Overviews, Account Balances, Locations, Help and Search.

Pre-Login Promotions

Tablet App:
  • The first extension of the Citi Tablet app
  • The POC was to have a pre-login experience for customers in Singapore to see all the promotions and offers it provided its customers.

Responsive Web: CitiCards.com

Responsive Web:
  • Halfway during the Citi engagement, we entered a POC project to get some of Citi’s websites ready for responsive experiences on phone and tablet
  • This is a mobile-first design for Citicards.com

CitiBank.com

Responsive Web:
  • Additionally we did mobile-first designs for Citibank.com
Josh Butler: Designer. Made in NYC. Always a Work in Progress.