The building and deployment of E.SUN Bank's Design system
( In cooperation with the whole design team. )
Design system elevates your brand.
Objective
1. Unifying design styles for consistent user experience
With the aim to achieve consistent user experience, a design system handbook unifying design of E.SUN's digital products across Taiwan market is developed. It involves maintaining overall design consistency and ensuring the design is in alignment with E.SUN’s visions of optimizing user experience.
2. Establishing design principles
Serving as guidelines of the design system, design principles are established to guide E.SUN’s designers when creating products and user experiences to ensure all designs can accurately and effectively convey E.SUN’S spirit and values allowing the bank to achieve its vision and ambition.
Role & deliverables
1. Building design system
Collectively, as a team, the designers went through every UI component applied on the different E.SUN channels and established a new design system according to the design principles.
2. Putting design system into practice
To verify the new design system and apply it to real-life
projects, each designer applied the new design system to projects he/ she was working on at the time, such as consolidated statements (take me for example).
The Outcome & impact
E.SUN’s new design system website was built and deployed allowing all designers to work according to an unified guideline while developing websites. Most important of all, designers could focus more on optimizing user journey instead of allocating a big chunk of their time crafting fancy UI that lacks consistency.
The Challenge
The new design system was discussed and established during the period when a lot of long-term design projects have been activated for a while. Therefore, it took us a lot of efforts to develop a design system that can not only unify all the design but is also suitable for different products/ projects across all platforms.
01 Feature walkthrough
02 Background
A bank whose products were built with different styles creating inconsistent user experiences.
Over the years, E.SUN has rolled out various kinds of digital services/ products which benefit their customers. Designed and developed by different teams on tight schedule and with different design process, it was found that E.SUN’s digital platforms lacked design consistency. It was also discovered that there were quite a few cases involving the same features with inconsistent design styles producing different user experiences across multiple platforms. Therefore, in an effort to enhance E.SUN’s brand through optimized user experience, it was necessary to establish a design system to make E.SUN’s digital platforms more consistent and user friendly.
*E.SUN official website (AWD web)
PC
Mobile
*E.SUN internet banking (AWD web)
PC
Mobile
*E.SUN app
03 Solutions
First―
Checking current UI components
After collecting UI components ( including buttons, list, carousel, dropdowns, checkbox, stepper, radio button, tab, etc ) of different digital products/ platforms including the bank's official website, E.SUN app, and E.SUN internet banking to Figma artboards, we reorganized them and standardize their styles and interaction mode.
.
.
.
At the same time―
Brainstorming design principles
Through joint efforts across departments, design principles, the ultimate guidance for designers aimed to connect tiny design details with E.SUN's visions, were brainstormed and delivered at workshops and meetings. The design principles help ensure customers perceive E.SUN’s digital products as simple, easy-to-use and trustworthy.
Generally speaking, our design principles make our digital products simple, easy-to-use and trustworthy to our customers.
Next ―
Developing new design system based on design principles
With the design principles in mind, the development of a design system which clearly sets out the color, typography, icon, and detailed component styles was underway. The new design system saves time and effort designers put into designing overly fancy UI and allows them to focus on delivering simple and clear user journey or process. Most important of all, it makes it possible for the design of products designed by different designers appear more uniformed and systematic.
Every designer in the design team was responsible for redefining a couple of UI components. Take my part
( button and table ) for example.
The problem
Buttons
1. Buttons were inconsistent across platforms and the ones in the app were not distinctive enough.
2.Illegible button text
3.Overuse of buttons on campaign pages
*E.SUN official website
*E.SUN internet banking
*E.SUN app
*Campaign page
Tables
1. Tables are inconsistent across platforms.
2.Overuse of colors within one table
*E.SUN official website
*E.SUN internet banking (PC)
*E.SUN internet banking (M)
*E.SUN app
Solutions
1. For buttons: defined button type, status, application rules..., etc. to unify styles and experiences on the web and app.
2. For tables: defined usage of colors and application rules on the web and app respectively.
04 Putting design system into practice
The design system was not merely a collection of several UI components along with design theories. What matters to us was how well it works when applied to real products. Therefore, we applied the new design system to ongoing projects or refined products that have already been released when the new design system was almost done. Take the consolidated statement that I've been working on since one year ago for example, another designer and I started to plan for a future refinement for the project as stated in the design system such as reorganizing the usage of buttons and rearranging the color of assets allocation charts according to the standard color assigned to each service offered by the bank.
A. Original consolidated statement
B. Applying new design system to projects I've been working on
* New design system
* Applying new design system to the
consolidated statement
Differentiating E.SUN’s various kinds of digital products while maintaining overall product design consistency.
When applying our new design system to the SMS consolidated statement and taking feedback collected from user testing of consolidated statements into consideration, we should allow flexibility and made adjustments when necessary. Adding design pattern which were slightly different allowed customers to distinguish monthly statements from platforms providing real-time information (such as E.SUN app and E.SUN internet banking). By applying the new design system to the consolidated statement project, we were able to test if it is flexible enough to extended application to specific use cases.
C. The consolidated statement with new design system
Future maintenance and evolution
A lot of effort has been poured into establishing this standardized system designed with an aim to help different product teams build better products more efficiently. The design system should be adopted for every project and evolve with the bank so that E.SUN can continue to provide better products to its customers.
View other projects
