Overview

Brief

This is a digital bank aiming for young generations in Taiwan. In order to show a clearer product values to the audience, the bank client cooperated with AJA Creative to design a new introduction pages for different Target users on the official website.

Problem

The users are unaware of what benefits and values Richart can provide for them and often get lost in such various products while browsing the official website.

Goal

1. Understand different types of target users’ financial needs and what Richart can offer(credit card/insurance/loan/currency exchange).
2. Gamify the financial terms and visualize financial products to target users.
3. Maintain brand IP role (Richart dog) tonality and continue its style to create 
new designs.

Team

UX Designer x1
UI Designer x2

Product Manager x1
Frontend Engineer x1

My Role

UI Design & Graphic Design
Focus on different design styles for customers and visualized high fidelity designs for WEB and APP version.

Timeline

4 weeks

Background

Taishin Richart is the leading digital bank in Taiwan. Since its establishment in 2016, the number of accounts opened has been the highest in terms of digital account quality. It is an award-winning digital bank which is popular amongst young people in Taiwan and occupies more than 60% of the market. AJA Creative currently acts as Richart's design consultant and has done so for many years, providing digital products which targets the younger generation.

Result

Compared to the old website, every index from Google Analytics has improved: the redesign’s average reading time is raised by 77%. The bounce rate was also lowered by 21% and CTA click rate is raised by 12%.

Design Process

Research and Findings

Stakeholder Interview

We conducted a semi-struct interview to understand stakeholder side’s point of view. As there are a variety of financial products the client would like to display online, the core issues they would like to solve are:

- Who are these target audience? and what do they like?
- How to introduce the products to the target audience?
- How to explain/covey in “customers’ language”?
- How to make them feel relatable to our introduction?
- How to make them interested to the products?

Personas

From the user data, we found these target users are around the 20s to 30s generation, a group that is used to digital life, online shopping, and social networking. Therefore, I summarised 4 Personas to represent core users. Each group represents a different lifestyle, and financial knowledge level. It can help the whole team better understand who we are designing for and what features we should focus on in product development.

Current Status Analysis

Based on 62 valid questionaire for the current product introduction website, we found some insights from users’ reaction after seeing the current product introduction page. Some feelings were mentioned many times such as: Not Intuitive, not engaging, some phrases are hard to understand.

"There are a lot of complicated things, and the words are very esoteric, so I can't understand..."
"I read a lot, but I still don't know which one product is the most suitable for me..."
"Just like other banks, there are a lot of complex financial terms, hard to understand... and I don't feel particularly attracted to me"

There are 4 main pain points summarized as below:

1. The introduction is not intuitive nor concise enough.

2. The content is not engaging enough for readers to feel highly relevant nor connected.

3. The first impression of the page is not very attractive.

4. Lack of website navigation guidance.

Insights for design oppotunities 📝

1. UX Writing  :  Rewrite the contents in a more understandable/attractive way.

2. Information Architecture :  Restructure the web to make it more concise and easy to navigate.

3. UI Elements  :  Add corresponded image/illustration to help users to understand the content.

Idealation

Design Strategy

Based on the brand’s core strategy “Design for the young generation”, we would like to implement it into different aspects: from overall structure, to context design and visual illustration. It is vital to make all the gamified designs relatable and interesting, this creates a fun topic of discussion amongst the younger generation, leveraging their “go viral” mindset in social media to help spread and increase understanding. Especially in traditional finance industry, there are complex terms and products that makes people shy away. Our mission here is to gamifiy this product, introducing their products in a fun and easy to understand way.

Gamifi-cation &
Personifi-cation

Use "personification" and "gamification" to rewrite the whole content and illustration to make people interested in understanding more, and make users understand their own "role goal" and what they are special at.

Being Understood

Classify target user type, let people find their own classification to arouse their feeling of "being understood" and have a sense of self identity.

Covey in Frank Tones

Use easy and frank tones to describe all financial phrase and terms to attract users to read more and feel easier to understand.

Design Proposal

There are 3 types of information structutre I proposed for this project. Type C was selected due to its clearity of showing all the role types at first glance, and is able to list out all the main info of each category.

Wireframe

Content & Illustration

The four main types of users are created into 4 types of game characters, each character are armed with special skills (introducing insurance, investment products) and owning different tools (introducing credit cards and Richat app’s function). Besides, we also simplified difficult terms to attract people to read more.

Web Version

UX Writing

A concise slogan can make users feel relatable and draw their attention to read more. The final goal is to attract them to click on CTA button!

Mobile Version

Icon Design

Design System

In order to ensure high consistency and quality of digital products, the components and definitions that can be used to  formulate in the development process are listed in this specification, so that when the engineering development team participates in cross-departmental collaboration, it can be effectively aligned whilst shortening the cognitive gap between the two parties, improving the efficiency of communication and output.

Design Strategy

Consistency& Modular design

The consistency of the design language is built by using basic elements or modular designs such as repeated wireframes, colors, cards, lists...etc. It is a key to reducing development costs (both for designers and engineers) and also lower users’ learning curve. Most importantly, it can make sure the product/brand grows in a certain way and avoid disorganisation.

Flexibility

The flexible design of components enables rapid expansion with multiple scenarios and services, which means most of the components can be extended into more variants and be used for different business scenarios.

Highlight
the Hierarchy

To deliver a clear UI design, the information must be seen and understood easily. Thus, all the contents and layouts must be set in a certain hierarchy to deliver. It is better to keep every design in a precise look, for example: not using more than 3 colors/ text types in a small card design.

Design Details and Description

Other Interesting Things we did...

“Localization” is the key to a successful product.


There are many interesting gamification designs we collaborated with this client, most notably, sending “red envelope” to friends and families during Chinese New Year via APP! It is a very cultural thing and we digitized this behavior into a fun and easy interaction. It is also a good way to promote the brand and gain new customers!

A Wobbly Bone ?!



Attract curiosity with wobbly bone animations (Because Richart is actually a dog!) After clicking, a restaurant menu will slides from top, showing the recent promotions.

Results:  Up to 77% Click Rates (2021)

Grab your Red Envelopes!



Despite the pandemic blocking people from having a reunion, this digital red envelope enables people to share blessings in a fun and exciting way amongst users! The faster you open the envelope, the more money you could gain! Receivers can write cards to express their gratitude to senders.

Results:  162% usage grows (2020 vs 2021)

Reflection


Thanks to this opptunity I grew alot from this project both on proposing skills and UI skills. This is such an unforgettable experience, the reason is that the communication cost of this design commission was much higher than imagined! In addition, the customer had very high requirements, so the final design came out after many discussions and revisions. If I could do it all over again, I hope to improve my communication skills and able to catch customers' ideas more quickly to reduce time cost and communication cost!

Let’s create something together Email Me
Let’s create something together Email Me