Project

Mable App Design & Development

Client

MUFG Bank

Year

2019 – 2020

Role

Lead Design

Award

Good Design Award 2022

Traditional Banking needs
to be digitalized

Background

Moneytree had partnered with MUFG as known as the largest mega bank in Japan. They asked Moneytree to build a PFM app for them.

Design Challenge

  • The client brought UX strategy based on internal workshop had a risk because their value proposition had never been validated by customers.
  • Moneytree had never provided a service of client works. In the project, the product design & dev process was totally fragmented.

Solution

  • Conducted marketing & user test to validate the value of the product.
  • It was no way to stop running both: exploring phase & dev phase so just to deal with confusions and ambiguities on UI design. Later on the company recruited ThoughtWorks, a creative agent as an advisor.

DESIGN PROCESS

01. Questions to ask

Ask stakeholders. Ask customers. Ask products.

02. Marketing Research

Screening 1,000 Japanese people to ask about money & digital banking experience

03. Qualitative research

User test to validate the value of the new concept & features.

04. Define User Experience

Personas (Who) / Customer Journey (How) / mental model (Why)

05. User mapping & Key Features

User Flow and charts for the MVP. Mapped out entire user flow from installing to transfer money.

06. Design Sprint

Development phase started

01. Questions to ask

Kept asking the client about the UX strategy in order to identify what we know and what we can’t know. And define what questions are critical for the product development.

02. Marketing Research

Screening 1,000 Japanese people to ask about money & digital banking experience

03. Qualitative research

User test to validate the value of the new concept & features. 15 testers were asked about their financial life patterns and being tested with high-fi prototype.

04. Define User Experience

Personas (Who) / Customer Journey (How) / Mental Model (Why)

05. User mapping & Key Features

User Flow and charts for the MVP. Mapped out entire user flow from downloading an app to transfer money between bank accounts.

06. Design Sprint

1. Feature requirements with user story from client

2. Create IA with engineers (wireframe + prototype)

3. Create visual design

4. Present the prototype to client

5. Internal prototype testing

6. Repeat 1-5 (Iteration)

7. Pixel Perfect Design (Design system

Design Showcase

0
1
2
4
5
6

My Responsibilities

  • Conducted Quantitative & Qualitative Research (User Test)
  • Define value proposition
  • Build user mapping & prototype
  • Involved in design & dev sprint
  • Design design system and pixel perfect design

Stakeholders

Client:
MUFG Digital Division (BO / PM / Visual Designer, System manager, Internal back-end engineers, External backend engineers )

Internal team:
Moneytree (BO / PM / Art Director / Product Designer / Visual Designers / Tech Leads and Mobile Engineers / Back-end engineers)