Beacon Interface .

Mobile Banking Application for The Visually Impaired

#InnovativeInteraction

Professional Team Project l Able Labs, Thailand, Collaborated with KBTG l Nov 2016 - 2017 l Role: User Research and UX/UI Co-Design

Context

While more and more services have been moved to mobile applications on touch screen devices that mainly provide visual affordance, it is a significant obstacle for the visually impaired. The goal is to rethink vision-based UI to recreate an experience that empowers everyone to access mobile banking via different human senses.

Outcome

The design won1st prize in the Singapore Fintech Festival 2016 Global FinTech Hackcelerator and then was applied to K PLUS application in Thailand.

The Challenge

How should UX/UI be when designed dedicatedly for other senses, not only for the sight?

Understand

The "Explorer" as the potential user group

In-depth Interview / Concept Testing

Some solutions are out there in the market, and the visually impaired have spent tremendous efforts to familiarize themselves with those designs which were mainly designed for sight. The team believed that there could be a better solution that includes any senses into account. In this phase, perceptions and diverse physical issues of users were studied. After the users were grouped, ..the Explorer.. was identified to be the target users because of their ..openness in trying new solutions... The team believed that these users would finally become influencers for others in the communities.
 

Unique characters ( It's not only about the best practice! )

Design Requirements

Confidence, Intuitiveness, and Independence are what users value and what the team aimed to deliver. From these issues, the main characters of the interaction were set to ensure we can meet those values. With 1 Screen 1 Task, the information architect of the application should require users to proceed one step at a time to minimize the decision-making process and decrease error.

Simple four directions interaction mapping should correspond with user affordance and international interaction standards. Lastly, Interface should be designed to be understandable by any alternative sense, Hearing, Seeing, and Feeling.

Design

Natural gesture, Mode-X template and the voice pattern

Information Architecture / Screen Type / Interaction Template

Identifying the right buttons from many other buttons on the screen and using one finger to touch can be hard when users navigate through an application without a sight. Moreover, this touch or click gesture might not really be natural gestures. Therefore, interactions were then reassigned by .mapping gestures to the intuitive meanings.. . For example, when human wants something, they tend to drag these objects toward themselves. Therefore, sliding down is assigned to "enter." When humans get frustrated, they might shake the object they are holding. So, shaking is used when the user cannot catch up and want to "replay" the voice guide

Functions, together with voice guide and possible gestures, were structured into the first-iteration flow. Then the function flow was grouped into sequences and types in order to develop further in a more consistent way. After the first screen flow was draft, several design iterations and usability testings were conducted.

Beacon_portfolio2020-04.png
The challenge of this project is how the different types of feedback can coordinate to bring the best user experience. .The archetype of the flow was then created and called “Mode X“.. . This Mode X flow guides when and what feedback should function. The reason that it is called Mode X is that it can be applied to any mode by inserting valuables of each mode into this template, such as Transfer Mode or Bill Payment Mode. Moreover, each screen type is designed to be consistent with voice guidance behaviors. For example, in the first screen of that particular level, the voice guidance system will be coded to read the text on the second line, then the third line of the screen.
The archetype flow called “X Mode“

The archetype flow called “X Mode“

The voice patterns mapped to the screen types

The voice patterns mapped to the screen types

Outcome

K PLUS Beacon - A mobile application to empower people with visual impaired to manage personal financial independently at their own convenience; anywhere, anytime, and any situation”

 
 
 
 
 
Beacon_portfolio2020-12.png
Pruanfun_portfolio2020-02.jpg
 
Previous
Previous

Pruanfun, Strategy & Service Design

Next
Next

Poke and Move, UX/UI (Coursework)