Digital Banking Illustration System
Case Study About Scaling System Illustration Library For Cross - Channels
Project’s Goal
Fix the “mess” in visual style
Role
Product Illustrator with UX focus
Results Achieved
Strong System Illustration Library; Company-wide recognition of illustrations’ value to the business
Please note, that in this Case Study I’m showing how I think and covering here only my vision with the respect to the NDA. Thank You.
Client
A multinational investment bank based in Switzerland, the largest private bank in the world, serving private, corporate, and institutional clients.
What
Why
How
Results
Problem: Visual inconsistency
Challenge: I had to analyze the existed situation, re-transform illustrations without removing them and provide the detailed guidelines with consistent look and feel.
1
Gaps/ overlapped lines
2
No/ Yes ground line
3
Different cropping
4
Inconsistent line stroke
5
Various Color fill approach (all)
6
Messy/ branded font
The Why
Pain Points
Inconsistency was the cause, not the reason.
Visuals were not aligned with the Swiss brand. The inconsistency had lowered down a seamless user experience. Assets were not optimized for different requests because of various aspect ratio. In total, 20 visuals without clear art-direction and a source of truth.
The key for solution - product illustrations aren’t for decor. It the expand representation of the brand. This instrument should be used and prepared for all channels, including marketing, branding, cross-banking groups and CoE team. The stronger the fundaments are -the faster and stable the brand scales.
Approach
What
Why
How
Results
Before
- Different strokes
- Different color fill
- Stock feeling
- Different sizes
- Messy
After
- 1 pt strokes
- Red color - accent
- No cliche - diversity
- Set 1 aspect ratio
- Hand-drawn
Analyzing
Linear graphic is similar to other authors, who use such style, so I’ve decided to focus on the culture, architecture and portray real-life scenes to highlight the Swiss brand.
For example, mailboxes differ from American and European.
Style Test
I chose Ray and Charles Eames photo to test the character diversity.
Color Palette
Alabaster
Brand Red
Black
Grey 1
Grey 2
Grey 3
Guides
279 x 224
Optical Balance
5 : 4 aspect ratio
Scaling
Big scaling down had made the illustrations blurry, so I’ve offered to limit the range of scaling the main components (70-130%) + add thumbnails 80x80px (range 56-112 px) to prevent blurry visuals.
Messagebox improvement
600%
Smaller compared to GIF
Animation gave a possibility to introduce gestures, to support users with explanatory videos and process.
10x
Better user-conversion
Users got involved into the experience. Marketing team loved to use it for campaigns, celebrations etc.
5x
Speed increased
We got a lot of positive feedbacks from the users, and have received happy responses for the campaigns.
Also
frame by frame
Motion
Risk profile
Visual Storytelling
What
Why
How
Results
Summary and Deliverables
Design should have user-centric approach, but the most important is team’s co-creation.
Illustrations have scaled from 20 to > 360 assets in under 2 years, evolving from Frontify to an independent system with guidelines and a global repository for 50K colleagues. A teammate abroad thanked for making her pitch deck stand out, and they’ve adapted source colors to the local meanings (eg. “red” means a “success” in Switzerland).
But such results were thanks to an incredible team of designers, leaders, product owners and interns.
- System with 300 product illustrations
- 35+ motion assets JSON format
- Documentation: How to create, Design System
- Structure, How to use, How to Request
- Icons and thumbnails
- Presentation Templates
Interested to read more?
There is an article!
I have described detailed steps for implementing motion into the design system.
