Looking at UX committed to brand

UX is making connectionsLooking at UX committed to brand

v1 - 8.14.2013

Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 2

Table of contents

The first 6 monthsLooking at the road map and achievements

Results A display of how we are integrating brand across digital channels

Working beyond visual Signature Connections and DSO improving the way we work

Building to the future Our goal to be #1 in customer experiences


The first 6 months

Within the first days of Signature Connections, UX quickly mapped out a strategy to tackle the daunting task of updating all of our digital experiences to reflect our new brand. We broke the opportunities we had into three phases:

• Immediateimpact

• Globalchanges

• Designtoolkits/localelements.


Design Principles

F R O M :

Institutional

F R O M :

Gradients and shadows

F R O M :

Cool

F R O M :

Positioned

F R O M :

Disparate

T O :

Human

T O :

Flattened and simplified

T O :

Warm

T O :

Inviting

T O :

Connected

01.

02.

03.

04.

05.


Methodology

During this effort we had to be very nimble, flexible, collaborative, and efficient. We held to key principles in evolving the brand.

DesignInput

Signature Connections guidelines

Emerging BAC touch mobile design system

Current UX toolkits

UI Dev collaboration and input

BAC and Edge in-flight project work

VisualProcess

Toolkit working sessions

Brand/ Enterprise collaboration and working reviews

UX governance

UI Dev validation

DecisionPoints

UX design governance

Stakeholder reviews

UI Dev review

Deliverable

Spec’d assets

Visual comps

Updated style toolkit


UX Timeline (Brand rollout)

High impact areas and foundation

1/15-4/1 4/1 - 5/15 5/15 - 8/1

Global site elements and integration Style toolkits and local elements

COMPLETE! 8/14 Status Update

Phasel:

• Color Palette and ADA

• Iconography and images

• Engagement areas

• Digital marketing spaces

• Project related opportunities

Phasell:

• Global site elements

• Project implementation

• Guideline development

• Process and Infrastructure

Phaselll:

• Local site elements

• Style toolkit build and distribution

• Continual refinement and improvement


Results- the early work

Bank AmeriDeals logo Palette and ADA pre-work

Working with ATM group


Results - Mobile systems

Edge iPad Redesign:

BAC Touch system:

Edge iPad Redesign:


Account oveview and onboarding

Makinginteractionseasier


Global elements - before and after on .com

Before After Gradients, cool grays, heavier, legacy palette Simple, warm grays, Signature Connections palette


Global elements - before and after on OLB

Before After Gradients, cool grays, heavier, legacy palette Simple, warm grays, Signature Connections palette


Global changes - Cross channel consistency in navigation

Salesexperiences

Serviceexperiences


Toolkits

• Crossplatformandexperiencealignment.Color, fonts, and styles used will align with experiences across all channels

• Simpleisbetter.More simple design of our system allows the important content and page features to be presented without visual competition.

• Continualimprovement.Develop a system of testing-into and listening to VOC to inform our system.

UXVZDtoolkits.Efficiency, consistency, working smarter

Beyond visual


UX making connections

• Brand.Direct contact and weekly meetings have allowed us to break through walls and silos that existed, resulting in hands-on feedback, problem resolution, and awareness

• EnterpriseCreativeServices.UX is delighted in making this key connection, ensuring our digital work is in concert with enterprise wide initiatives. Our customers will be receiving the same look, feel, message, language whether on our sites, mobile aps, reading an e-mail, or receiving a statement

• MarketingandAgencypartners.Previously guarded relationships have seen the walls knocked down as UX has worked with Brand and Marketing to connect our creative resources, our strategic thinkers, and our leaders. We have seen new relationships flourish as we all realize the power of being connected

• Leadership. A new level of accessibility to senior leaders has led to a new level of informed and efficient design.

ThroughtheSignatureConnectionsbrandingeffort,UXextendeditsnetworkandbuiltstrongrelationshipsfarbeyondwhatwehadknownbefore.


UX brand values

TransparencySharing cross-channel

Multi-team approach

Universal decisions

Enterprise-wide resources

SimplicityEfficiency in what we do

Efficiency in what we create

Utilizing toolkits

Closer relationships with UI Dev

Early input and informed designs

ConnectedMake the extra effort to be personal

Think outside of your silo

Go beyond achieving-results

Build relationships

Act like a part of a world-class team

Building toward the future


Future vision - Infrastructure

• Styleguide.Working with our production group and MCOE we are in the process of creating a stable, secure, CMS based style guide as a one-stop experience for UX’ers, vendors, UI Dev, and Marketing partners. This guide will be built with the idea of being able to consolidate like elements and cross-linking to related ones.

• Processandroutines.The Brand Expression does not want the onus of approval to be on the designer. We are focusing on establishing set routines to facilitate the design approval process in a way the breeds accountability, recourse, and awareness.

• Enterprisenetwork. Building our network across the company has already allowed us to see the benefits of efficiency. We will not spend unnecessary hours duplicating efforts or working with uncertain goals.

Aspartofbuildingaworld-classteamwewillgiveourpeopletherighttoolsandsupport,allowingourpeopletofocusonthecustomer.


Future vision - Informed and efficient design

• Backtobasics.Focus on the overall story and experience for the customer. Sketch it out. Create a wordle. Create a style tile to define the broad strokes.

• Earlyengagement.Include all teams early. Include UI Dev, include Usability, have a plan for how you want to test it, discuss how it will be implemented and trouble shoot challenges early

• Dothehomework.Research the landscape, past projects, other similar experiences outside of financial. Be prepared to speak to why this direction is better for our customers, does this support our over-arching goals.

• Identifyandimprove.Look for early recognition of the need for new elements or improvement of existing ones. Leave room for adjusting personnel based on discovery.

• Approvalandawareness.Establish a system to get awareness and approval at the conceptual stage- allowing for constructive course correction. Gradual check-ins and status will eliminate surprises and reactions.

Aprocessthatfocusesonup-frontplanning,research,input,andapproval.


Future vision - Cross channel consistency

Wewillnotbeaskingourcustomerstolearnanewsystem.Wearelookingtoinstillafeelingofcomfort,trust,andfamiliarity


Future vision - The next 18 months

• Design.While the recent moves to align with brand were substantial, we will be starting work on our next design system (4.0) which will address the needs or tighter integration into mobile models, universal standards, and reusable code.

• Brand.We will continue to build on our relationship with our brand partners and relying on them as a key ally in supporting Signature Connections.

• UIDevandTechnology.We have made great strides in the past year in creating code libraries that align with our design toolkits. We would like to deepen that relationship and expand the model across all development teams.

• Culture. UX will become of place where people speak of what they can do instead of what they cannot do. We want our people to feel proud again, to feel valued, and to be excited about the direction we are heading.

Weseethisasjustthebeginningandthereisalongwaytogo.

Documents

Looking at UX committed to brand