Tunaiku’s Design System
Identity, Design Values and Principles
Preface
In mid-2018, our design team kickstarted our design system as our products started to expand and grow rapidly. At the same time, we also started to grow our design team to keep up with the increasing demand for UI UX design. And this situation made us realize that we needed a system that can help us retain a sense of consistency, and also act as a guideline that will standardize and help us improve the efficiency and effectiveness of our design workflow.
Process
Now, I should begin by saying that I should have begin the design system with some research on our user, marketing and branding first to ensure that our design system is aligned with the direction of our product, business, and branding. The problem was there was not a clear direction of our product and marketing. We even haven’t got any branding guideline yet.
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
I began the process by laying bare the essence of our product and service. What is it for, who is our users, and what is our purpose: what makes us different? Why choose us?
What is Tunaiku?
A unsecured loan for retail customers, which is highly accessible and obtainable with an easy application process.
Who is it for?
People who urgently needs quick cash and cannot afford to go through lengthy application process (like bank).
Persona (our customers)
Some of the persona compiled from our marketing researchers. These persona were categorised based on their demography profile (age, life stage/phase, sex), motivation / purpose of their loan, and their decision-making process (the decisive factor in their purchase behavior).
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
To get the core essence of our purpose and point of differentiation, I delve deep by asking the why questions and analysing our competitors (competitor and SWOT analysis).
Purpose
To provide a solution for people who are “unserviceable” or outside the reach of conventional financial institutions. By giving a convenient, affordable loan that are easy to apply to and fast, we become a lifeline and life saver for them.
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
We are different from other traditional banking and lending services and even other fintechs because:
- 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
To cope with the constant changing nature of our market and tech, and to adapt to our customer needs, our workflow and product can be always in the state of flux. This means the way we work and our product experience may not be always stay the same. There will be changes and updates, but we strive to provide a consistent high bar of excellence and to make sure our products catered to our customer needs.
Make up for it with extra attention, support and care
As mentioned in the previous point, due to the agile nature of our work, there may be some points in our customer experience where things are not consistent, the quality of service dip down or our product delivery doesn’t meet customer’s expectation. When these things happen, we try to compensate and fix these problems by providing extra support and help to our customers. As a customer - obsessed company, we commit to ensure our customers’ problems will be taken care of.
Trustworthy
We strive to provide a secure and reliable service by creating a straightforward, transparent, and high-standard experience for our users. Users know they can rely and depend on Tunaiku wherever and whenever they need.
Make users feel in control
Financial products can be daunting, but not with Tunaiku. We create product and services with a seamlesss and simple process that show how easy it is for people to achieve their goals. This simplicity and easeness help users by making them feel like they are in charge / everything is under their control.
Goal for our product and user experience
After defining the purpose and values of our product, we can refine it further to form a goal and direction that encompass the user experience we strive for:
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)
What do we want to achieve internally with our design system? How does the design system help us as an organisation?
- 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
To know if the element, component or module that we design matches with what we currently needs in our design, we assess the functionality and purpose of these elements/components:
- 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
The system’s modularity ensures maximum flexibility in execution. Its components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.
- Are we delivering recognizable, repeatable, reusable solutions?
- Do the component/module/element work in other devices/platform?
3. Improves our collaboration and our organisation
As a living system that is continously being developed and growing, there will be constant changes and updates to improve and enrich it. In order to make the system easy to use and encourage collaboration, we need to make the design workflow itself easy for designers to use and improve:
- 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)
We want to deliver an experience where user feels as if Tunaiku provides them a life-saving solution to their urgent needs and financial problems. This means we have to ensure our user experience embodies these values:
Designed for urgent and emergency needs
As we know, the majority of Tunaiku users are people who are in dire needs, trapped in urgent life situation and in need of quick cash. Therefore, they are in the state where they have to quickly process information and achieve their goal very quickly. This insight needs to be kept in our mind when we design our user flow and interaction.
Keep it short and simple (KISS Principles)
This principle can be applied to both UI and UX, as the persona of our users and their mental model tend to be people who are time poor and mentally oriented for short-term benefits.
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
We value our users’ time and effort by creating design and flows that are easy to do or complete. This means they are designed to solves users’ problem in the most simplest way. Some example includes:
- 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
When we create the UI and UX, always keep in mind of what users think, feel and know in that journey point. This is important as we have to match our mindset with theirs, so that what we design can be perceived and understood by them in the exact way we design it to be (matching our expectation and goal with them).
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
As a financial service provider, we know that trust is an indispensable asset and currency that we need to maintain. How do we prove ourselves as a trustworthy company? We achieve that by showing these qualities in our design and user experiences:
Honesty
No bullshit, no jargon or confusing copywriting / marketing buzzword / technical terms. No deception or attempt to manipulate user’s action by making them go through an unnecessarily complex user flow and tasks.
Straightforward
When creating a design and user flow, make sure that they can be easily understood with one glance. This can be achieved by:
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
When we fail to deliver our product and service to the highest quality or meet our customers’ expectation, we try to make it up by providing extra attention and support to help them achieve their goals. Our commitment to deliver good experience does not stop on the primary activities or main user flows, it also extend to our ability in solving and finding alternative solution to their problems.
Give support when it is needed
If the situation calls for it (i.e. we need to give info for users in response to COVID-19, or a bug is disrupting the user flow), then we need to provide a way to enable them to get the help / support they need. This can be an additional info, a quick swipe to the help center, or an instructional info with link to our CSR center.
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
Following Steve Krug’s principle “Don’t make me think!”, we need to ensure that our support system and help center can be easily accessed by users whenever and wherever they are. This is especially vital in specific journey point where the journey point is prone to error but we can’t fix the problem due to technical / operation issues.
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
Implementation of this principle can be done in various ways: creating design that informs and helps user in “mastering” the medium, preventing error, and helping users recover when they make mistake / find error.
Create design that informs and helps user in mastering the medium (self mastery)
User empowerment requires perfect usability and simplicity: only if users know what every design element means will they feel in control of the medium. Here are some ways to create design that is easy to understand and use:
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
Tunaiku has a wide scope of users, which range from digitally savvy millennials to mobile phone-bound housewives and ojek drivers and baby boomers generation who are more in the low range of digital literacy.
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
One of the most classic usability principle: We can reduce the risk of making mistake by creating design that eliminate error-prone conditions or to give error messages that can be easily understood.
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
Problems may happen, but we must always find a way to ensure users know what is happening and help them retain their sense of control. To avoid ambiguity, confusion and having users feeling like they lose control / hopeless, we must find a solution for them.
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.
