Tunaiku’s Design System

Identity, Design Values and Principles

Preface

Process

So with this blocks and limitations, I tried my best to do some research and idea generation process to structure and map the foundational and building blocks of our design system.

First Things First

What is Tunaiku?

Who is it for?

Persona (our customers)

From user and market research, we can start digging deeper to find out our product’s value proposition, the unique values and advantage points we have over our competitors, and how this can be distilled down into a set of distinctive product values and experience that we can offer to our customers.

Purpose and Differentiation

Asking five layers of ‘why’ to understand what makes Tunaiku different or why people choose us over other competitors

Purpose

How do we become a lifeline/saver for our customer:

  • By making it easy and reachable, we free them from risky options such as shark loans
  • The convenience and reliability also empower our customer from feeling helpless and loss control.
  • We provide a sense of comfort and security as our product is easy to use, secure, and straightforward/effortless

Differentiation

  • Tech is one of our primary driver, a key factor and capability in our company
  • Unlike other fintech, we are more secure because we are under bank and our loan product is more affordable and forgiving (in terms of the rates and loan tenor)
  • Although technically we are under a bank (Amar Bank), we are nimble and capable to adapt to constant changes in rapid, fast-paced environment
  • We are not scared to create change and innovation, we want to grow and provide the best service. Unlike the incumbent banks, we are not satisfied with our condition because we want to raise the bar even higher.
  • Customer-focused: we listen to what our customer wants and adapt to answer their needs

Product & User Experience Values

Nimble and Flexible

Make up for it with extra attention, support and care

Trustworthy

Make users feel in control

Goal for our product and user experience

To provide an easy, accessible instant loan that serves as a life-saver solution for the marginally, unserved customer segment, or people who are trapped by life unexpected situation.

Our advanced and robust credit scoring system and seamless user experience become a distinctive factor that differentiates us from other competitor, as we present ourselves as an accessible and secure financial service provider.

Customers will come to us and perceive us as a reliable, top-of-the mind solution to their financial needs, always dependable and come to their rescue whenever and whatever they need.

Internal Goal (for our designer & engineering team)

  • Serves as a guideline and standard for our design output and workflow
  • Ensures our user experience and brand are aligned and consistent across all platforms and channels
  • Provide a flexible system that caters to our design and engineering needs
  • Designed to be scalable
  • Improves efficiency and effectiveness of our workflow

1. The right solution to solve the right problem

  • Does the solution fit our needs and goals?
    Can the component fulfil the function it is designed for, so that it can be used in the scenarios it is intended for without too many customisation or changes?
  • Are we doing more with less?
    By creating one component, are we reducing the redundancies and inefficiencies in our design system?
  • Have we left any detail overlooked?

2. Modular, Flexible, and Scalable

  • Are we delivering recognizable, repeatable, reusable solutions?
  • Do the component/module/element work in other devices/platform?

3. Improves our collaboration and our organisation

  • How easy is the system to be learned and used by first joiner?
  • Does using design system improve our design process?
  • Does using it make our workflow easier, faster and more efficient/organised?
  • Does the operation of design system (making new components, update/adjusting existing ones, code reviewing and etc) easy to follow and shared with others?

External Goal (for our users)

Connect the user experience goal with the design principle, as this is the direction that we are aiming for

Designed for urgent and emergency needs

Keep it short and simple (KISS Principles)

So, we need to find better ways to make our design as a process and interaction that can be easily understood and completed within short amount of time. Keep content simple, concise, and straight to the point. Always place yourself in the shoes of the users, if you are strapped for time, are you going to be willing and able to do this task?

Ex: Onboarding in Micro Loan Program — After multiple iterations and UX research, we found out that the onboarding that people actually want to read and able to understand is the one where the content talks straight to the point, only stating what they actually need: the amount of money disbursed, the period, and the payment process. That’s it, people are not bothered to actually read about the long term benefit or other incentive offered to them.

Optimize interaction and flow for better efficiency

  • Provide micro interaction that is context and solution fit
    Choose the right UI and interaction model that matches with the context of the task/scenario that user needs to complete.
  • Reduce the number of steps / interaction as necessary or when it is possible
    We need to think about how to make design that makes our users’ life as easy as possible. This means when creating components or design molecules, we also think about the steps in micro interaction level. By simplifying micro interaction, we facilitate users to finish their task with the most minimum task and efforts needed as possible.

Example: when choosing the right date picker, we need to see the broader context of how and at what scenario it will be used. For cases where user needs to pick a date that is far into the past (such as birth date), then it is better to use a text input mode.

But for cases where user does not have a wide range of options that they have to choose / they need to pick a precise date and time (scheduling a courier delivery) then it’s better to use a scrolling date picker.

Understand user mental model and meet their expectation

Example: in the bank data fetching, we found out that users wrongly put their bank data because they thought that the information that being asked is their mobile banking instead of internet banking.

This is because the majority of users rely more on their mobile banking rather than e-banking. So learning from this mistake, we clarified ourselves by emphasizing in the onboarding that the account information they enter is “internet / e-banking”, not mobile banking.

Trustworthy

Honesty

Straightforward

Having a clear goal or purpose for each screen or page
Users should be able to understand the main action in a page. There should be just one primary action that is clearly communicated (through UI and information architecture) and no conflict of interest (conflicting, multiple actions vying for users’ attention).

Having a clear and strong information scent
Which means the design provides users a strong hint of what kind of information they can get if they pursue a certain path through a website or app. By providing a strong information scent, we are enabling users to navigate and find the information they are looking for on their own.

To help us assess if our design and content qualified as having a “strong indicator for information scent”:

  • Do users know what each page and interaction leads to?
  • Do users know how to navigate the web/application?
  • Do users know and understand the purpose or function of the page / screen they are looking at?
  • Are they able to achieve their task (finding information, purchase something, ask for help)?

Some examples of information scent:
Left: A form of affordance where we put the informational cards pushed to go beyond the screen. This layout visually indicates and informs user that there are other additional content they must pull in order to see it.

Right: In Senyumku’s Help Center, the FAQ content is placed in different card based on its category, where each card shows its top three most common questions. This serves as a teaser that enables user to ‘sense’ the information scent and to identify which category match their expectation (thereby creating a pathway to their information goal).

Make up for it with extra attention, support and care

Give support when it is needed

These support or additional information must be clearly communicated in a way that does not intrude / distract users from their primary goal. So these info must be structured well within the information hierarchy.

Ensure customer support is easily within user reach

So one way to workaround it is by adjusting our UI and UX so when those issues happen, users can easily reach out to the help center and access the additional info instantly. They should not have to spend time and wreck their brains trying to navigate and search for the support they need.

Make users feel in control

Create design that informs and helps user in mastering the medium (self mastery)

Follow Design Conventions
A great product is one that feels familiar for new user to navigate and use. And we can create this kind of user experience, by building on the knowledge that users have acquired through years of browsing/using digital products.

Example: After doing user interview, the team found out that the icon with question mark (left) is the one easiest to identify as an icon related to Help Center page. This is because the graphic (bubble speech with question mark) is a very common design pattern in other websites and apps, used to direct users to FAQ/helpful information page. So it has a strong association as a ‘help’ icon. Reference: Help Center at Tunaiku’s active dashboard

Show system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Example: to reduce the complaints of users who are confused about their application status, we added an animated progress bar that serves as a visual indicator of their application checking status. We did this so that user can get the emotional benefit of getting a sense of progression as it clears any ambiguity.

Lightweight and reliable: ensure optimal accessibility

Our users are very mobile, heavy users of mobile phone (80% accessed our product from their mobile phone, via mobile app and mdot website), and they are constrained by the limitation of:

  • their internet package quota,
  • their low spec mobile phone,
  • and they live in areas where the internet coverage is not always stable

Thus, we need to ensure our design is lightweight and reliable, which means it doesn’t cost too much effort, time, internet quota for users to open and access our product. Our design should not sacrifice technical and product performance.

When we design a user flow, a micro interaction, animation, etc, ask these questions to assess whether it is lightweight enough for our users:

  • Does the design impact the product / technical performance?
  • If yes, how is the trade off (between the usability, understandability vs techical and performance)?
  • Does the trade off worth the cost of the reduction in product and technical performance?
  • Is the solution also reliable and accessible in other platform and devices?

Error Prevention

Example: Our login relies on user’s phone number as we verify their identity by sending OTP message to the phone number they enter. To ensure user does not enter the wrong number when they first register (which will cause them to not able to login later), in the account creation flow, we made a mechanism to check the phone number first before they can continue their registration process.

By forcing user to verify their phone number with OTP code, we are making sure that they are aware how important the number is for their account safety and also reminding them to use their actual primary phone number (instead of using their alternative/secondary phone number).

Always find a way to let users take action

This means, we provide an alternative that can help them to take an action that help them move forward / get a sense of conclusion, and also a sense of progression (they are able to improve their situation in one way or another).

Example: Here, we try to provide error message that communicates the issue in a clear yet approachable manner. We want to convey that the error is not user’s fault (no blaming) to make the user feels we are being transparent but not too technical or ‘preachy’. And rather than focusing on the problem, we guide the users to an action they can take to fix the issue.