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
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 3
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.
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 4
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.
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 5
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
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 6
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
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 7
Results- the early work
Bank AmeriDeals logo Palette and ADA pre-work
Working with ATM group
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 8
Results - Mobile systems
Edge iPad Redesign:
BAC Touch system:
Edge iPad Redesign:
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 9
Account oveview and onboarding
Makinginteractionseasier
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 10
Global elements - before and after on .com
Before After Gradients, cool grays, heavier, legacy palette Simple, warm grays, Signature Connections palette
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 11
Global elements - before and after on OLB
Before After Gradients, cool grays, heavier, legacy palette Simple, warm grays, Signature Connections palette
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 12
Global changes - Cross channel consistency in navigation
Salesexperiences
Serviceexperiences
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 13
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
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 15
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.
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 16
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
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 18
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.
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 19
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.
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 20
Future vision - Cross channel consistency
Wewillnotbeaskingourcustomerstolearnanewsystem.Wearelookingtoinstillafeelingofcomfort,trust,andfamiliarity
Bank of America: Proprietary, Confidential, Copyright 2012. Bank of America Work Product DRAFT: Bank of America - Future State Design - 08/14/2013 - Page 21
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.