Join us while we solve the mystery of building a human-centered digital banking experience for a 200-year-old French institution. Hint: Gringott’s vault door from Harry Potter has something to do with it.
The company: The second-largest banking institution in France with 31 million customers, BPCE Banking Group consists of 14 different retail banks and is relied upon by half of the French population.
The challenge: To retain and attract new customers, it embarked on a major digital transformation four years ago. But introducing digital banking to a 200-year-old French financial institution while also keeping in mind user-centered design practices is not an easy task—especially when new European regulations for banking security services, personal data protection, and accessibility have been introduced.
The strategy: Building its first in-house design team to transform the digital banking experience using emotional design tokens.
“A banking experience must convey the feelings of security, trust, efficiency,” said David Serrault, Head of Design at BPCE Group. “Like Gringotts vault door opening in the Harry Potter movie; this is what a banking application should be. Simple, smart, fluid…with a little bit of magic.”
Transforming digital banking into an emotional experience
The newly-developed design team decluttered interfaces and digital touchpoints, created a simple visual vocabulary for all BPCE brands, and slowly introduced motions and haptic interactions.
But designing for functionality and compliance wasn’t enough.
“Like the security vault door opening in the Harry Potter movie; this is what a banking application should be. Simple, smart, fluid…with a little bit of magic.”
“We wanted to provide something more than efficiency to our customers, which was emotion,” David said. “Banking digital experiences don’t have to be cold and severe. Creating an emotional relationship with customers is becoming a key competitive advantage for acquisition and retention.”
However, he added that the banking industry’s strict regulations, coupled with BPCE’s complex IT legacy, presented blockers for introducing emotional design tokens. The other main challenge was convincing key stakeholders the value they’d bring to digital banking apps and platforms.
The design process and outcome
“Through several proof-of-concept applications, we explored what it means for a bank to be ‘emotional,’” David said. “We started by defining principles and metaphors through rounds of prototyping and user tests to convince our very pragmatic stakeholders the value of using emotional design tokens to connect with customers.”
The process included:
- Asking “How can we transform the usage of a digital banking application into an emotional experience?” Designers were tasked with prototyping emotional design for BPCE’s digital users.
- Collectively evaluating prototypes through quantitative preference tests and expert reviews.
- Collecting the highest-ranked ideas across all designs and combining them into one final prototype.
- Testing the prototype in customer interviews.
“I don’t think the value of good design can be taught to stakeholders…It has to be felt through experiences and collaboration.”
Based on user testing, these emotional design principles were selected to design BPCE’s new mobile banking apps:
- Fluidity: Reducing action steps for mobile users
- Efficiency: Creating smooth and safe transitions (e.g.: the well-oiled mechanism of Gringotts’s vault door)
- Proximity: Implementing simple illustrations to evoke a relation with the user’s local region
- Relevance: Rewriting UX copy to be more casual. For instance, “Please confirm…” became “Is this okay for you?” (“C’est bon pour vous ?”)
Selling the value of design
The best way to explain design’s value to key stakeholders is through metrics, such as increases in conversion rates, subscriptions, and app rankings, David said. However, he added that measurable success can’t happen before executive buy-in.
“It’s a challenge to implement new methods and features in the French and banking cultures, both of which have an aversion of risk,” David said. “I don’t think the value of good design can be taught to stakeholders; they want to see something concrete. It has to be felt through experiences and collaboration, which we achieved through prototyping. This helped us communicate our vision and validate the direction we were taking.”
BPCE’s design team created an astounding 800-plus prototypes to communicate new design features to stakeholders and developers, which were also used extensively in the bank’s new user-testing facility housed in their Paris office.
“The best way to explain design’s value to key stakeholders is through metrics.”
For the delivery phase, his team implemented user testing for all new features and products.
“The level of design awareness is very heterogeneous across our stakeholders. Many of the people I work with are very mature and have strong expectations regarding our design expertise,” David said. “However, sometimes we as designers are the only advocates of the final users. Watching customers using our products has a great impact on stakeholders. French customers are often very critical and straightforward in the way they give their opinions, which is a major advantage for improving our products.”
Building a design system
When he first joined BPCE, David was tasked not only with creating a design team, but also a design system—something rarely seen in French companies. The design system, called BPCE.design, is the organization’s single source of truth for:
- The Sketch component library
- Icon repository
- All common UI components across products
- Editorial guidelines
“With our design system, we don’t need to redesign or specify design tokens from one project to another,” David said. “It saves time, guarantees more consistency across the digital products of the company, and greatly improves the quality of the user experience.”
BPCE has eight in-house designers (plus several consultants), and nearly 300 developers, a ratio which David hopes adding more designers will improve. “This is a huge ratio of designers to developers, which means our designers are very busy,” David said. “So to help create a more connected workflow between designers and developers, we built a design system.”
He added that the design system also helps implement brand consistency and saves considerable time with redesigns. David and his team are currently revising their system for a more integrated development process.
Connecting designers and developers
To improve the design-to-development workflow and collaborative relationship, BPCE’s developers use Inspect. This simplifies the designer to engineer hand-off, saving time for both teams.
“Inspect has helped smooth the workflow between designers and developers, who are now more autonomous,” David said.
“Previously, developers tended to ask us everything about each design element. Now we can give the red lines, and explain globally how the screen is organized—what are the main fonts we use, and the styles—to make the connections between the style sheets and the screen, so they clearly understand the logic behind the design.”
Like Harry Potter, who discovered his magical powers, it seems that BPCE is now recognizing the value of their small but mighty design team. “We are being asked to contribute to more and more organizational projects every day,” David said. “And our design team is growing rapidly, which are very encouraging signs of our company’s great digital transformation.”
by Abby Sinnott
Based in London, England, Abby is a content marketer on InVision’s Design Transformation team. When she’s not telling stories about exceptional design, she’s hard at work on her novel.
