ADCB 2016 Annual Report

Design Firm: Addison   
Direction: Matthew Carl   
Client: Abu Dhabi Commercial Bank

Intro
The Abu Dhabi Commercial Bank, a public joint-stock company servicing retail, commercial, investment, merchant, brokerage, and fund management needed to craft their message and financial strategy. Their latest end of year financial results needed to be effectively communicated through digital and print mediums. This communication was essential to success of the brand and its investors.

Process
The responsive website was being designed in tandem with the print book. Collaborating with Design Director Matthew Carl helped create a cohesive experience both in print and digital. In order for this site to be successful, I really needed to think through how statistical content would be presented and behave on a mobile device. One of the larger tasks of the site was to refine  the structure of the book to be easy to interact with and navigate.

Interpret
While it was important to reference the printed annual report, this site would be a new experience. Thinking through a simple homepage experience to showcases the pillars of ADCB was fundamental. This would establish the looking forward rhetoric and lay the groundwork for the overall tone of the content. ADCB is an international brand, hence the site needs to be accessible to a global audience.

Explore
Looking through past iterations of ADCB annual reports, it was clear that a simple, clean design approach was the best. The anticipation of the site being toggled between two languages kept the design very lean. Researching long scrolling content experiences led me to implement a sticky footer progress bar and pagination. This small feature gave the user important affordances as well as opportunities to jump ahead through the content.

Thinking
How should statistics reveal themselves?
How can I inform the user of what content will be shown next?
How can the user jump from one piece of content to another?
How will this work in a responsive environment?
Will this layout change when it is translated into another language?
Where can content be hidden, and where can it be revealed?

Features
Downloadable Annual Report PDF
Rich Storytelling with Animated Statistics
Site Pagination
Content Progress Bar
Parallax Image Reveal

Role
Visual Design
Responsive Design
UX
Prototype
Production
Presentation

ADCB_Annual_Report_ResponsiveADCB_Annual_Report_Responsive
ADCB_Annual_Report_iMacADCB_Annual_Report_iMac
ADCB_Annual_Report_iPadADCB_Annual_Report_iPad
ADCB_Annual_Report_MobileADCB_Annual_Report_Mobile