{"id":15976037,"url":"https://github.com/stanleynguyen/paylah","last_synced_at":"2026-04-30T00:01:48.634Z","repository":{"id":114220079,"uuid":"127222473","full_name":"stanleynguyen/paylah","owner":"stanleynguyen","description":"📱Accessible PayLah","archived":false,"fork":false,"pushed_at":"2018-04-28T17:02:58.000Z","size":1470,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T17:14:42.760Z","etag":null,"topics":["accessibility","blind","paylah","react-native"],"latest_commit_sha":null,"homepage":"https://expo.io/@stanleynguyen/sutd-paylah","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stanleynguyen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-29T01:58:18.000Z","updated_at":"2021-01-10T19:51:49.000Z","dependencies_parsed_at":"2023-06-16T02:15:32.905Z","dependency_job_id":null,"html_url":"https://github.com/stanleynguyen/paylah","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stanleynguyen/paylah","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanleynguyen%2Fpaylah","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanleynguyen%2Fpaylah/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanleynguyen%2Fpaylah/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanleynguyen%2Fpaylah/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stanleynguyen","download_url":"https://codeload.github.com/stanleynguyen/paylah/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stanleynguyen%2Fpaylah/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32448882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"ssl_error","status_checked_at":"2026-04-29T22:10:49.234Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","blind","paylah","react-native"],"created_at":"2024-10-07T22:07:07.046Z","updated_at":"2026-04-30T00:01:48.587Z","avatar_url":"https://github.com/stanleynguyen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accessible PayLah!\n\nRevised application UI of DBS PayLah! app with the visually handicapped target\naudience in mind while maintaining the usability for the general sighted users as\nwell In this project, we also explored accessibility features of React Native.\n\n### Motivation\n\nEver since its release in Singapore, PayLah has been very well received by\nsmartphone users with DBS bank account in Singapore. Unfortunately, in spite of its\npopularity, PayLah used to have a bad reputation among the blind smartphone user\ngroup. The initial release of the app was not making good use (or any at all) of\naccessibility features on smartphones, in turn rendering itself unusable for the\nblind users no matter how potentially useful the app can be for such user group.\nEventhough there has been a lot of improvements in terms of accessibility for\nPayLah, we feel that it can be done better with more fine-grained touches on the\naccessibility aspects of UI elements. Hence, we want to introduce certains\ntechniques/ways of doing things that can make a blind user's life better on your\napp :)\n\n### Overview\n\nThis whole React Native application is a mock up of the revised UI/UX that we want\nto offer as a suggestion to DBS PayLah. The application is not functional (i.e.\nuser can't send money to friends) but rather interactive, painting a full\nexperience for users, which serves our purpose of testing and research of UI/UX\ndesign. We only implemented (making interactable) these elements and pages that\nare designed differently from the original application. Here are some screenshots\nfrom our applications: (you can find more inside [screenshots](./screenshots)\nfolder)\n\n![home](screenshots/home.png)\n![add payee](screenshots/add-payee.png)\n![pay](screenshots/pay.png)\n![confirm transaction](screenshots/cfm-txn.png)\n\n### In-depth analysis of accessibility design\n\nLet's dive in major things that we did differently from DBS PayLah for\naccessibility features.\n\n#### 1. Decluttering and prioritising\n\nOne problem with DBS PayLah that we found over the course of the project from\ninterviewing our target user group is that the UI is often very cluttered with\nfunctionalities hence UI elements, and often times, those elements (with different\nvisual cues and labels) all lead to the same functionalities/page. For example, on\noriginal PayLah app's home page:\n\n![All buttons to bill pay](screenshots/cui-home.png)\n\u003cbr/\u003e_All of these buttons lead to bill payment page_\n\nThis might be intended by the designers of the original app from DBS to educate\nusers about the capabilities of the app etc. However, as there are now more UI\nelements with various labels on the screen, the learning curve for our blind\ntarget user group is steeper. In our opinion, the benefit of having all this\n\"educating\" elements does not justify the trouble for blind users. So we decided\nto revamp and remove/hide unneccessary elements, and replaced with more purposeful\nelements for useful features like \"Favourites\"\n\n![wallet features](screenshots/wallet-features.png)\n\u003cbr/\u003e_We changed the items in Key Features menu into more frequently used features and order them by frequency of usage_\n\n![favourites](screenshots/favourites.png)\n\u003cbr/\u003e_We added favorite shortcuts to home screen to make better use of avaialble space_\n\n#### 2. More meaningful and appropriately dynamic accessibility labels\n\nOften times, developers find it tedious to label item by item so the labels are\nusually just fixed strings that describe specific elements (or even none at all!).\nNevertheless, as peer application designers and developers, we urge everyone to\npay more attention to labelling because it's critical for a blind person using your\napp. We hypothesized that the tedious aspect of coming up with labels is due to\nthe lack of guidance in this area so we came up with a 3-question framework that\n(might) help other developers in this task, and eventually blind phone users:\n\n1.  What can our users do\n1.  What are our users doing\n1.  What have our users not done\n\nIn addition, for this specific experiments, we also attempted to put in a bit more\n\"thoughts\" into the labels by using logic to make the labels more \"aware\" of the\npages'/elements' states. For example, this is how we label our NEXT button on Pay\npage\n\n```js\naccessibilityLabel={\n  this.state.payees.length === 0\n    ? 'Disabled next button, please choose one or more payee'\n    : !this.state.amount\n      ? 'Disabled next button, please enter amount'\n      : 'Next'\n}\n```\n\nWe found React Native with Javascript's inline logic gates pretty elegant for this\ntask. Nevertheless, we believe that it is definitely possible to achieve the same\nexperience with other tools and it's just a matter of effort from the dev team. We\nhope to be a good example and influence more developers to pay attention to this.\n\n#### 3. Default page starting point\n\nAnother accessibility feature that we implemented during this experiement is\n\"Default starting point\". We found that often times, when blind users first access\na page (or even multiple times afterwards), they are not aware of the page layout\nand possibly purpose so they would take some time to explore the page before\nstarting to actually use it. As a result, we decided to make the top title of\nevery page to have very detailed label that provide context to users by briefly\ndescribing purpose and layout of the page and make such title to be the first-index\nelement item on the page, which will be automatically focused by screen reader on\npage mounted. This has proven useful by helping our test users learn faster and use\nthe app with greater efficiency during our experiment.\n\n#### 4. Non-focusable elements and grouping of elements\n\nLast but not least, eventhough this problem might have been addressed before and\nin multiple guidelines by Apple or Google, developers often forget to \"hide\"\n(making non-focusable) items that are not very useful to the blind user group like\nvisual icons etc. We want to stress this practice again to whoever that are reading\nabout our experiment to always group visual cues together with the related text\nlabel, or label such item if there's no text label or hide them if there's no extra\nneccessary information intended for blind users.\n\n### Final notes\n\nFirstly, we would like to pay gratitude to DBS developer team for their effort in\nmaking such an useful app and having revised the UI (in these recent updates with\nthe new look) to make it better for blind users. We hope that our experiment can\nprovide some interesting techniques to make the PayLah app even better for the\nblind so that the team can refer to and be inspired to improve to greater extend.\n\nOn the other hand, despite the fact that we are specifically basing our experiement\nand research on DBS PayLah and P2P mobile payment, we would not want the influence\nof this experiment to stop there. We would like to say that these above mentioned\nmajor points are actually not exclusive for just PayLah or mobile payment or even\nmobile but they are for every piece of software that is ever written. If you are a\ndeveloper, be it web, mobile or desktop applications, who is reading this, we hope\nthat this will inspire you to do more good by making your software more inclusive.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanleynguyen%2Fpaylah","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstanleynguyen%2Fpaylah","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstanleynguyen%2Fpaylah/lists"}