Produced by Tencent! Exploration of mobile banking design for the elderly (with lots of useful information)

In November last year, the General Office of the State Council issued the "Implementation Plan on Effectively Solving the Difficulties Faced by the Elderly in Using Intelligent Technology". The National Development and Reform Commission, the National Health Commission, the Ministry of Industry and Information Technology, the Ministry of Transport, and the People's Bank of China jointly took action, which set off a wave in the domestic digital service industry. This also made us re-examine the mobile banking solutions we are exploring.

The Dilemma of the “Older Version”

We believe that future product designs will be more cross-grade and cross-age compatible, and that products will provide more users with a convenient and friendly experience. We understand and explore age-friendly design with this in mind, and continue to create more thoughtful mobile banking products for users.

As "primary school students" in the financial field, at the beginning of the design, we carefully read the first detailed rules of the "Special Action Plan for Internet Application Adaptation for the Elderly and Accessible Renovation" (hereinafter referred to as the "Action Plan"), which was led by the Ministry of Industry and Information Technology in response to the call of the State Council. The article mentioned that a "senior version" should be customized for the elderly in product design, and the elderly's usage habits should be taken into account through designs such as larger font size, higher contrast, voice reading, and simplified interactive operations. So we immediately encountered the first problem. Once we provided a switching entrance for the "senior version" at the system level, it was equivalent to labeling the elderly group as "because you have difficulty in moving and poor eyesight, so we provide a different version." Is this really what the elderly want?

Our solution to this problem is not difficult - work hard on the copywriting of the entrance, for example, avoiding the "elderly version" and adopting copywriting such as "caring version", "simple version" and "large font version".

But soon, we encountered the second problem. When we carefully read the Action Plan again, we found that it clearly put forward the requirement of zero-ad plug-ins for the elderly version. From the perspective that the elderly have weaker ability to discern information and are easily deceived, the starting point is good, but this brings about commercial contradictions. If all users switch to this version, how to balance the commercial value of the product?

If we hide the entrance level appropriately and raise some thresholds to ensure that not all users switch over, it will lead to the problem of deep operation entrance levels and high switching thresholds for the elderly.

How to solve this problem?

We believe that the relatively appropriate design strategy at present is to universalize the concept of age-friendly design.

Everyone has an "aging moment"

We believe that age-friendly design is designed for all people with aging behaviors. Gregg Vanderheiden of the University of Maryland is a professor of interaction design in the School of Information. In his paper "Barriers, Incentives and Facilitators for Universal Design Practices by Consumer Product Manufacturers", he mentioned a concept - "Situational Limitation", which means that any of us will have temporary obstacles to action in a certain scenario. For example, have you ever found it very difficult to use your phone to find a song while driving? Walking on a road in the glare of the sun, but needing to use your phone to make an appointment at a bank branch? Or during the epidemic, struggling to unlock your screen with a mask on?

The above situations are not only encountered by the elderly, but also problems that all of us will encounter. During the 5 minutes of driving to find songs, our eyes will produce a brief visual effect similar to cataracts, but this obstacle is short-lived. When we leave the current situation, the obstacle will naturally disappear. The problem we encounter is a situational short-term obstacle.

The counterpart to situational impairment is permanent impairment. The difference between the two is like that between One Arm and New Parent. Both involve one arm being unable to move, but the New Parent condition will end soon.

In banking service scenarios, the following scenarios are situational barriers:

• When making a mobile banking appointment under strong light, we experience temporary visual impairment;
• When we carry a child to an ATM to withdraw money, we will experience temporary physical disability;
• We are not familiar with some of the bank's business processes and may have temporary cognitive impairment;

In fact, in many moments of our lives, we will experience a temporary "aging moment" due to the limitations of the external environment. So what inspiration does this give us for our design solutions?

Design that benefits everyone

We believe that what was originally designed for the elderly or disabled with limited mobility may eventually benefit everyone.

For example, the classic case Curb Cut Effect mentioned by Xia Bingying, an accessibility design expert at Google, in her book “5 lessons I learned by designing for accessibility”. The ramp was originally designed for elderly people with limited mobility or disabled people who rely on wheelchairs, but those of us who have experience in dragging suitcases should be able to feel the convenience brought by this design.

[[418826]]

This design approach is also known as "universal design". There are many similar examples, such as closed subtitles. Closed subtitles were invented to allow people with hearing impairments to better understand the plot of the movie without using sound effects and background noise. But in the end, many of us can benefit from it. If we want to still watch videos in a noisy environment, turning on closed subtitles can help us understand the content more clearly.

The inspiration we get from this case is that excellent aging-friendly design does not necessarily emphasize the word "old age", but guides our solution design by meeting more universal scenario pain points.

Design considerations under situational barriers

Banking services are essential services in daily life, covering a wide range of people from college students to the elderly. Therefore, in the early stages of product framework planning, all scenarios with temporary obstacles should be fully considered. The design is not divided by age, but a design idea based on behavior differentiation.

Situational impairments are mainly divided into the following categories: visual impairments, physical impairments, hearing impairments, and cognitive impairments.

A Visual situational disorder

Age-related macular degeneration is a common chronic disease that can cause vision impairment in patients, with blurred or blind spots in the patient's central field of vision. Although it has little effect on peripheral vision, central vision impairment can affect the patient's ability to read, drive, and recognize faces. The following image shows the effect of my simulated visual impairment.

Actual examples of situational visual impairment

On the way to the bank, the sun was shining brightly. Xiao Zhang wanted to open his mobile phone to check his account balance so that he would have an idea when handling business. However, due to the strong light, Xiao Zhang had a lot of effort to find a certain function item on the screen.

What does this teach us?

A careful analysis of the context shows that users often open mobile banking on a whim to check their account balances. This makes the external environment for opening mobile banking rich and diverse. Users may be on the way to the bank or driving. They open the app quickly and leave quickly, which places extremely high demands on the clarity of the information architecture.

However, the current homepage architecture of most mobile banking services is wide and shallow, basically a combination of Banner + King Kong Area. This is a very mature information architecture that can create a sense of rich and powerful functions in a short period of time.

But there is a problem with this architecture. That is, the structure of the King Kong Zone can only adopt the icon+banner method. This structure limits the amount of information we can convey to users. After users enter the application, the density of functional entrances is relatively high, and it takes a period of exploration and learning.

Organize the homepage design around user assets

To solve this problem, we need to go back to the question of how to ensure the clarity of the information architecture. The problem we face is that the banking business is complex, professional and comprehensive, so how should we organize the information structure?

If we abstract the information architecture of the homepage, there are two mainstream frameworks. The wide and shallow bulk homepage is currently the most commonly used design method. We believe that the advantage of this method is that it can carry more business on the homepage, but for users, the information clarity will be a bit vague; the other is a narrow and deep linear architecture, which will reduce the exposure of the functions of the homepage, but can ensure that each function has enough information.

At the element level, we use the atomic splicing design to enlarge the matrix and ensure that each atom has a larger information display space. The original account management entrance in the form of an icon has been replaced by a 343×256 account information card. The main benefit of this enlargement is that we can shallow the information hidden in the 2nd, 3rd or even deeper levels and provide it to users more intuitively. In addition, we sort the homepage framework by priority to ensure that users can see what they want as soon as possible.

This architecture can also be adjusted quickly and flexibly according to the different stages and needs of the customer's business. The flexible combination can enable the entire team to improve product quality more rhythmically.

B. Physical situational disorder

The conditions of limb disabilities vary greatly. Cervical spondylosis, which is more common among the elderly, and peripheral nerve compression diseases caused by long-term medication use, etc., may cause the following obstacles during product use:

• Finger tremors limit flexibility: it takes longer to click a button, and the clickable area of ​​the same control is more demanding;
• Decreased palm strength leads to unstable grip: The elderly prefer large-screen mobile phones, but the weight of large-screen mobile phones requires them to use greater strength to hold them, making it impossible for them to use the phone continuously for a long time.

Actual cases of situational physical impairment

On a bumpy bus, you receive a calendar notification telling you that you need to transfer money to a bank card, so you need to open your mobile banking app to transfer money in a bumpy environment. At this time, the violently shaking screen will temporarily limit the flexibility of your fingers, making it impossible to click buttons accurately and quickly, and you may even drop your phone.

What does this teach us?

In the case of physical impairment, it is necessary to ensure that the buttons are simple and focused, and the content is repeatedly simplified and merged to make more space for operation. Simplification here means to accurately convey the content in the simplest language, rather than directly deleting the content.

Efficient transfer process design without jumping out of the process

Transfer is the most frequently used operation in mobile banking. On average, each user has 2-3 people to whom they frequently transfer money. Based on this, we adopted a lightweight design approach in the process to create a lightweight and fast experience for users. In terms of elements, we designed a layout of upper card + lower information, dividing the page content into two parts, making full use of the card element to carry more information about the transfer object, so that users can focus on the operation of entering the amount.

At the same time, the process of creating a new bank card inherits the sliding operation, and you only need to slide to activate the process. At the same time, when the user enters basic information, the input information is updated in real time to assist the user in completing the creation operation.

In the future, we will add functions such as information shuttle and voice wake-up, hoping to simplify the entire process as much as possible.

Cognitive situational disorder

The elderly are a high-risk group for Alzheimer's disease and damage to the hippocampus. These diseases can cause people to have cognitive impairment of external things, mainly manifested as memory loss, learning disabilities, etc.

Cognitive impairment can be divided into 2 main stages:

• Mild memory loss stage, this stage is mainly characterized by decreased adaptability, confusion about new things, and difficulty in orienting oneself;
• Moderate visual-spatial impairment, during which a person has difficulty processing problems and identifying similarities and differences between things;

Actual cases of situational cognitive impairment

Xiao Zhang had been in a meeting all morning and felt dizzy, but he had made an appointment to withdraw a large amount of cash at noon yesterday, and when he was about to leave, he felt as if he had forgotten to bring something. This kind of short-term cognitive impairment is caused by temporary memory loss after the brain has been working for a long time.

What does this teach us?

For us, cognitive barriers are more about delivering information to users in a more understandable way when users conduct online business. Banking business is relatively complex. For example, when purchasing financial products, the understanding threshold of professional terms such as "open-end funds", "interest settlement", and "R2 risk" is relatively high, making it difficult for many users to distinguish product differences when purchasing, and thus only focus on parameters such as returns and investment period.

Moreover, many policy fluctuations are actually reflected in the change of a certain noun on the page, which makes many users even more confused. For example, in 2018, the country issued new regulations on large assets. All banks, led by the central bank, require that wealth management products must be net value-based and no longer sell principal-guaranteed wealth management products. In other words, investors can no longer sit back and relax when buying wealth management products, and need to bear their own profits and losses. In many wealth management product introduction pages, the only obvious change is the addition of the three words "net value-based". To this day, many users still have the perception that wealth management = a sure win.

Design of on-screen commentary

Due to the complexity of the composition of financial products, many professional terms are needed to explain the product composition, risk description, etc. Therefore, we maintain the general structure of financial products on the details page and add an entry for on-screen explanation. After turning on this function, the main value of the product introduction will be extracted and pinned to the top, and complex vocabulary will be highlighted and explained. In this way, the user's understanding threshold is lowered.

Design of branch process guidance

Currently, all major banks are migrating their businesses online, but most users still have the habit of going to branches to handle their business.

When making an appointment for a service at an offline branch, the first thing presented to the user is "Which service do you want to choose". After the user selects the service they want to handle, if the service can be handled online, we will recommend the user to handle it online. If it can only be handled offline, we will display the branch appointment. After the user completes the appointment, we provide detailed operating instructions to avoid the user forgetting to bring things when going to the bank or being in a hurry due to unfamiliarity with the process.

① Emotional frustration caused by age discrimination (environmental level)

Categorizing and dividing people by age can lead to harm, hardship, and unfair treatment. According to WHO data, one in two people in the world suffers from age discrimination.

Older people are generally at a disadvantage in the workplace, and as they age, opportunities for specialized training and education for older people also decrease significantly, leading to widespread social isolation and increased loneliness among the elderly. A 2020 Cornell University study showed that in countries such as China, the United States, and Japan, the annual expenditure on eight additional health problems caused by age discrimination exceeds $63 billion. For people over 60 years old, the annual expenditure on dealing with these health problems accounts for 1/7 of their medical expenses.

Discrimination is like a butterfly effect, which brings many problems that need to be solved through design. We learned from some professionals that the elderly who go to bank branches to handle business are discriminated against by society, which leads to poor insensitivity, emotional sensitivity, and easy emotional frustration.

② Physiological changes lead to poor ability to repair negative emotions

After the age of 60, degenerative changes occur in the cerebral cortex and subcutaneous nerve cells, the regeneration capacity of nerve fibers decreases, and the cerebral blood flow and oxygen intake decrease, resulting in the body's weaker ability to repair negative emotions. This leads to a vicious cycle of bad emotions, so we should pay more attention to and care about the user's frustration when designing.

③ Avoid words such as "elderly" and "special" when designing

In the solution, we provide a same-screen explanation function, hoping that this design can lower the threshold for financial management. We have revised the entrance design of this function several times, from the initial addition of an elderly icon to the final explanation copy, hoping to reduce the labeling perception caused by some special copy in product design, so that the solution can be more universal and equal.

Find a balance by referring to existing standards

Here we will focus on how to use these foundations to find a balance point to guide the design and meet the situational obstacles of ordinary users.

① Contrast - Use some auxiliary tools to check whether the contrast is reasonable

WCAG has AA and AAA contrast ratio standards for Color Accessibility Design. We believe that for common pages, such as primary tabs, it is sufficient to meet the AA requirement (4.5:1).

Some online tools can help us test whether the contrast meets the WCAG standards. I recommend four: WebAIM's Color Contrast Checker, Contrast-ratio, EightShapes Contrast Grid, and Color Tool.

② Character height: about 5.62mm

There is a website called "Visual Angle Calculator" which has a program that can directly calculate the minimum font height based on the distance between the line of sight and the screen. The visual ability of the elderly is declining. Studies have shown that the minimum acceptable visual angle for the elderly is 0.75 degrees, and the viewing distance is 43cm, which is equivalent to a font height of 5.62mm after conversion.

③ Touch target size spacing

In interface design, the touch target needs to be enlarged to improve the accuracy and speed of the elderly's clicks. 44*44 points is the minimum touch area recommended by Apple HIG, and 44 points is converted into a physical size of 0.27 inches (6.86mm). Some articles suggest that the minimum touch target of aging products should be 10.5mm, and the distance between adjacent interactive elements should be reduced to at least 2mm.

Conclusion

Currently, many design teams are trying to design with situational barriers in mind. For example, Google's Next Billion User plan is to provide more localized designs for users from different regions. Users may have behavioral situational barriers due to poor network or riding a motorcycle. Google has also provided its own solutions for the above two situations.

In addition, Microsoft has proposed Inclusive Design, which is a design language with the same weight as the official design language Fluent Design. It also provides detailed design tools and Sketch plug-ins for designers to use.

This article focuses on the framework scenario level to share with you our exploration of the field of aging-friendly mobile banking product design. The road to aging-friendly mobile banking is long and arduous, and I hope that more students will leave comments to discuss and explore with us.