A design system that extends into brand strategy
Arvest Bank
Deliverables
Design System
Digital Product Design
Brand & Content Strategy
Timeframe
11 months (2021)
My role
Design Lead
The Ask
Arvest described their design and content guidelines to be disparate, outdated, and lacked cohesion. Their team faced with constant challenges of finding a consistent reference to their design, so we created a unified design language system to accelerate their design and dev process, unify customer experiences, and create coherence across brand touchpoint.
Approach
From design system to brand strategy across business units
The engagement began with the need to build a foundational Design System, and continued to extend into unifying marketing and digital experiences across the bank’s business units.
The work happened in threes phases with rotating team members:
Phase 1: Foundational Design Language System (DLS)
Phase 2: Digital Account Opening Flow
Phase 3: Brand Strategy for Business Units
Arvest’s brand components — before
Phase 1: Foundational Design Language System
We immersed ourselves in our client’s expertise to understand their voice, value, beliefs & brand promise.
We started by exploring the impact design and content decisions have on a brand. Through workshops and desk research, we learned about Arvest’s internal needs, its customers’ needs, and some of the challenges the marketing team faced every day. We delivered a foundational DLS to help the team start to think and work systemically.
Workshop artifacts: we explored how the brand is currently perceived and color palettes to modernize the user interface.
From exemplar layout, came components
As we focused on an exemplar Hero Flow, we designed and coded a broad set of components: typography, styles, and functions, which became the backbone of a design system.
The design system — UI components (designed and coded), page templates, and content guidelines — were documented in Zeroheight, a central hub for users that include designers, engineers, marketing teams, and vendors to access the design assets and continue scaling and refining the system.
The 15 weeks of DLS work yielded:
501 designed components and component states, including icons, patterns and glyphs
46 responsively coded components implemented into the DLS
Design intent and usage guidelines
Phase 2: A refreshed Digital Account Opening flow and brand alignment
Digital Account Opening experience improved, with mobile top of mind
Building on our first engagement, we applied the new design components into an end-to-end flow. Along the way, we created new components and made updates to existing ones in the Design System to meet business requirements.
A monolithic brand approach
On the brand front, we worked with our key stakeholders and 5 business units together over 9 weeks to build clarity and alignment of all sub-brands into one umbrella brand. Since customers connect with Arvest first, expect to work with the company they know, and while we understood that all of Arvest’s products were in the same category — a monolithic brand approach was a natural fit.
Phase 3: Extension of the DLS & strategy work to support all of Arvest
Each business unit gets a new and cohesive look
Over 18 weeks, we collaborated with each of Arvest’s business units to build brand alignment, design the visual system, and recommend a content strategy. We applied the new look to assets such as webpage, digital ads, flyers, booklet, email template, and educational materials.
Outcome
A design language system that accelerates design and dev process towards a unified customer experience
With a shared library of scalable, repeatable components and styles, Arvest is now able to accelerate the design and dev process, unify customer experiences, eliminate guesswork, and create consistency and coherence across files, projects, and brand touchpoints.
A unified brand approach streamlines customer communication
It leverages Arvest’s heritage and positive brand equity, and streamlines how they communicate the brand. Going forward, Arvest will express one company logo and label areas of specialization if the customer’s context requires it.
Brand strategy illustrated by design templates and content guidelines
The visual system and content guidelines have been packaged as a robust toolkit that will help make Arvest’s brand strategy visible in marketing, digital products, experiences and physical spaces.