WeLoan Redesign

RoleLead designer / Font-end developer

In-house redesign of a loan product.

WeLoan, or Weilidai, is WeBank's online consumer loan product launched in 2015. Millions of users have since been enjoying the hassle-free experience when using this reliable product.

Since its initiation, WeLoan's design hadn’t changed too much. And in August 2019, we decided to do a little make over.

Focus

As a mature service and application, persuading the stakeholders to make changes is no easy task. Banking industry in China is a regulatory-sensitive and KPI-orientated one. Any changes made to a cash cow product if done wrong, the least impact you can expect is a decrease in CTR causing money loss, and the worst could be violating some vague protocols defined by regulatory authorities causing your product to be shut down until fully rectified.

Given the limitations, bold moves are not viable, and the redesign would focus on:

  • Information restructure
  • A more modern and fresher look
Home screen
Home screen redesign

Design

The market today is different from 4 years ago. Concepts in financial and banking industry are widely accepted and users are educated by the booming industry. So we sought to simplify the information that are now considered "common sense" and therefore to reduce the clutter.

In one case, we found that users actually don't care about repaying when they are lending money. So we simplified or hidden some of that in the lending flow.

Comparing two flows
We finally been able to turn a three-page flow into a single page one.

As for visual design, the first change is to switch our good ol’ square attached-to-card buttons to fully rounded buttons.

Button transition animation

Another leap for us is upgrading the color palettes. The upgraded black-yellow color match has higher contrast ratio of 3.87, compared to 1.87 that of the former white-yellow match. Besides the improvement on accessibility, black-yellow palette is more trendy, young and aesthetically pleasing.

All screens

And this time we take animations and smooth transitions into account. Micro interaction helps to improve user experience in many ways:

  • Drawing user attention when necessary
  • Communicating status and providing feedback
  • Enhancing the sense of direct manipulation
  • Helping people to see the results of their actions
Animated icons

We also recreated our own mascot Willy.

Mascot before and after.
Meet Willy.

Workflow

Firstly I made a high fidelity and fully interactive prototype with Framer X, which is a very powerful tool to bring your design to life. And making it a lot easier to communicate your idea with your team and stakeholders.

Framer app interface
Framer X has a steep learning curve but it is powerful tool once you get used to it.

As for the implementation of animations, I use SVG animations. SVG allows designers tweak the effect until they get what they want to ensure the best possible effect, while developers usually don’t get the luxury of time on doing it for you. Another benefit of animated SVGs is that they can be used on web pages like PNGs and JPGs, without any extra lines of code.

Drama app interface
I used Drama for prototypes of these animated icons before handwriting the SVG code.

Designers are also included into the development process. Hidden properties like minimum heights, aligning rules, relative heights and so on which cannot be reflected properly on exported specs, required constant communications between designers and developers.

Outcome

As I mentioned before, the industry is a KPI-orientated one. If your design isn't making the company, no matter how cool it looks, the stakeholders won't buy it.

The data analytics afterwards showed an increase in both pages CTRs and, most importantly, the increase in loans the bank leased, which means the company is making more money.

The redesign achieve the goals that: a) improving user experience, b) helping the profit of the company. And only that we can rule the redesign a successful one.