Product Designer
Easy Trade - Accessible trading webapp
Industry
Fintech
Year
2021
As the UX Designer for the project, I took on a comprehensive approach to ensure an accessible solution was created for all users. I was responsible for every stage of the design process, including research, ideation and user testing.
​
Easy Trade is an investment and stock trading website that provide an accessible and inclusive experience. It help all users to invest in stocks as well as to learn about trading and investing.
​
The aim of the design process is to make a website and application that is AAA WCAG compliant. The website supports a variety of input devices, including keyboard, mouse, eye gaze tracker and speech input.
The Problem
People with disabilities who use assistive technologies face significant barriers when using stock trading websites that are not WCAG compliant. These users may encounter confusing navigation, missing content, and inadequate labeling of form fields, making it difficult to access financial information and participate in the stock market.
Background Research
First, before touching anything related to design, I wanted to dive into the psychology and motivation behind goal setting.
​
My research encompassed -
-
Understanding different types of disabilities.
-
Web accessibility resources (WCAG, ARIA, Material)
-
Recognising different assistive technologies, and how they interact with digital products.
Disability Analysis
Disability affects around 15% of the world's population and can be physical, sensory, intellectual or mental. Individuals with disabilities face numerous barriers and challenges, including discrimination and social exclusion. Efforts to promote disability rights and accessibility have been made, but more work is needed to ensure full inclusion for people with disabilities.​
​
-
According to World Health Organization (WHO) around 15% of global population has some form of disability.
-
There are over 11 million disabled people in Britain.
-
Digital accessibility makes easier for people with disability to perceive, comprehend, navigate and contribute to the web.
Disabilities focused in this project
For this project, 4 different impairments are considered. These impairments are from the following categories: Auditory, Visual, Cognitive and Physical.
Rheumatoid Arthritis
The most prevalent inflammatory disease is Rheumatoid arthritis that mainly causes pain and stiffness in joints of feet and hands. This makes the person fatigue and limits their ability to perform day to day activities.
Dry Macular Degeneration
​In dry macular degeneration the vision is blurred due to thinning of macula. People found it difficult to deal with day to day activities. It can affect both eyes but does not lead to complete blindness as the person retain their peripheral vision.
Non-Syndromic sensorineural hearing loss
Sensorineural hearing loss occurs due to malfunction of the inner ear or the auditory nerve. Syndromic and non-syndromic are types of sensorineural hearing loss. In non-syndromic there is partial or total hearing loss without any evidence because it affects inner and middle part of the ear. It can be unilateral or bilateral.
Photosensitive Epilepsy
Epilepsy is a condition in which brain is affected and cause seizures. Seizures are small bursts of electric signal in brain that disrupts the normal functioning of the brain. Fits, collapsing are common symptoms for epilepsy. ​In photosensitive epilepsy seizures are triggered due to flashing and flickering of lights.
User Requirements
The research made it evident how different users would use the website differently. To cater to this, I categorised them into four user personas based on their needs, goals, behaviours, and experiences.
Scenarios
Following the creation of the personas, scenarios were created for each persona. Scenarios allowed me to empathize with the user and design the best solution for them.
Pamela - Physical Impairment (Rheumatoid Arthritis)
After Budget 2021 Pamela wants to invest in TESLA stock and wants to buy it at £116.76. She has a doubt if she can complete this process without any hassle.
Ian - Visual Impairment (Dry Macular Degeneration)
Ian is retiring from his job and he wants a regular source of passive income after his retirement. So he wants to open an account so that he can start investing in stocks. Many existing online websites do help in opening account but their forms are not well designed for people using assistive technologies.
Anna - Cognitive Impairment (Photosensitive Epilepsy)
Anna is currently pursuing financial management course in the university. She wants to prepare a report in which she wants to compare APPLE and TESLA stock prices for the duration of one year. Studying chart pattern is a big problem for her as she has photosensitive epilepsy.
Mathews - Auditory Impairment (Non-Syndromic sensorineural hearing loss)
During the pandemic, Mathews' freelancing work is not earning him as much as he used to make before. As a result, he wants to learn the basics of the stock market by watching beginner's stock market course videos, so that he can start earning extra income by investing.
Information Architecture
.jpeg)
Conceptualisation
I created basic wireframe sketches to establish the general layout I had in mind, based on the scenarios. The idea was to merge familiar layouts and features from standard websites and applications.
-
All pages are designed using hierarchical grids, prioritising the most important content to be displayed at the top.
-
The platform layouts are clean and easy to navigate for users.
-
Navigation is kept unique and consistent on all pages for user convenience.
-
A help button is added to the side navigation bar to provide support to users.
-
Breadcrumbs are provided so that users can easily check the hierarchy of pages.
-
All important information is shown on a single page.
Tablet and Mobile Paper Prototypes
Paper prototypes were created for the tablet and mobile versions of the desktop web application to demonstrate how the application adapts to smaller screens while maintaining accessibility inclusiveness.
UI Style Guide
The Solution
Easy Trade is an inclusive platform through which trading is made easy for everyone. Users can buy and sell stocks, manage their portfolios, and also learn about different concepts of trading through online courses within the platform. The platform supports the use of assistive technology (Eye-gaze solutions).
​
WCAG Guidelines followed:
​
-
Breadcrumbs are provided on every page.
-
Tabbed navigation throughout website to make the content on the website accessible via keyboard.
-
As per WCAG AA standards it is ensured that the contrast ratio between background and text is kept at least 4.5:1 in entire website.
-
Minimum 14pt text size is maintained.
-
Minimum clickable target size of 44px X 44px is provided.
Final Designs
Functional hi-fidelity prototypes were made based on the sketches, whereby various iterative updates and a vast variety of accessibility considerations were implemented, especially in accordance to each persona's impairments.
Mouse Grid Feature
-
Allows users to navigate through a three-by-three grid of numbered segments.
-
Voice commands are used to navigate.
-
Makes the process more accessible and efficient.
Accessible Onboarding
-
Single column form design implemented.
-
Progress bar added at the top of the page.
-
Large and high contrast labels as well as placeholders are used for input fields.
-
Required input fields marked with asterisk(*).
-
No time limit set for form filling.
-
Auto-jumping on specific fields enabled.
-
Global and local error messaging included.
Chart pattern, colour filter and refresh rate
-
Grayscale line charts with clear labels used instead of complex candlesticks or bars to avoid seizure occurring due to patterns and colours.
-
Colour filter and refresh rate option provided to reduce cognitive workload and help users focus.
-
Alternative formats such as video representations and written summaries also provided for those who prefer them in the tools section as shown in the prototype.
Video caption, transcripts and sign language
-
Option for accurate captions for live audio is provided.
-
Sign language interpreter for prerecorded audio is provided in the settings option.
-
A separate transcript box is designed on the right side of video container.
-
Content of video is summarised by providing title and time stamps below the video.
Responsive Designs
During the process of creating the responsive designs for small screens, touch targets, the size of buttons, and uncomplicated input options were taken into account.
​
-
Hamburger menu is provided which include navigation menu items.
-
Text size kept consistent throughout the design.
-
Touch targets are all 44x44px or larger for ease of use.
-
Same colour contrast as the website is maintained for consistency.
-
Stock searching made easy with type, speak, and scan options.
-
Gestures like swiping and turning restricted for universal access, especially for users who mount their devices on a stand.
-
Graph representation has a lock button to reduce unwanted touches.
-
Button is provided to shift from portrait mode to landscape mode for user convenience.
Eye Gaze Solutions
Selection Process
-
Dwell time approach was followed.
-
Gazing for more than 300-450ms to make selection.
-
Gazed object is highlighted with bright colour border.
-
Visual feedback is provided in the form of circle which starts filling when user dwell at the target.
Scrolling Process
-
Stock websites are content heavy website and scrolling is an integral part.
-
To overcome the issue of "Midas Touch" in eye gaze, two opaque scrolling buttons are provided at the top and bottom centre of the page.
-
User can activate these buttons by gazing at the for 150-200ms.
-
A visual feedback is provided in form of gaze marker which is shown as horizontal loader under the header section.
Zooming Process
-
Zooming chart is common feature on stock website.
-
User using eye gaze can’t drag the pointer to zoom in or out.
-
Zoom bar is divided into 10 circles. Each circle represents percentage of zoom.
-
User can select the 'zoom in' percentage by gazing at the circle for 200-400ms.
Usability Testing
Conducted SUS (System usability scale) and Think-aloud protocol by evaluating the web, tablet, and mobile interface on participants with moderate knowledge on accessibility, and aware of similar trading software.
Recruit Participants
Initially I started by recruiting participants and informing them about the aim of the project and their role in the research, for this we made user to sign a consent form.
Participants Task
Task 1: Complete the registration process.
Task 2: Compare apple stock with tesla stock.
Task 3: Choose any stock from watchlist and trade.
Task 4: On caption in video course section, by selecting one of the video course available.
Task 5: On tablet make compare chart full screen.
Task 6: On mobile view check the transcript for the video course 'Introduction to Stock Market'.
SUS Score
To check the usability, SUS was conducted. Scores above 68 on the SUS are considered above average. Our results show a score of 73.6.
Think Aloud
Users were asked to think aloud during performing all the task. Following are the key findings:
​
-
Dashboard was very informative but for new user it will be very confusing so there should be a guided walkthrough option which can help user.
-
In the video course section, transcripts are generated, but feedback is not provided. Additionally, an add-on feature could allow users to select specific text and add it as a note to read later or bookmark.
-
During registration process user wanted a section at the end of the submission so that they can check the registered information is correct or not.
Updated Design
The feedback collected from all the participants further updated the designs.
Project Learnings
-
Learned the true UXD process and importance of inclusive design through an accessibility project
-
Acquired practical and theoretical knowledge
-
Inclusive design is critical for a solid user experience, particularly for users with impairments
-
This knowledge will inform future UX projects, both personal and professional
-
The project enhanced my understanding of UX accessibility, which will benefit my professional growth
Reflection
-
Recognized the significance of inclusive design for as many impairments as possible
-
Aspired to meet the highest accessibility standards by achieving as many WCAG AAA criteria as possible
-
Will prioritize accessibility in all future UX projects
-
Plan to conduct evaluations on participants with a wider range of impairments to gain deeper insights
-
Will conduct multiple rounds of evaluations to ensure the design meets the needs of diverse users
Other Projects
Byte Exchange - KYC & Onboarding
Redesigned KYC onboarding, boosting registrations by 26.3% and cutting completion time by 65% for Himalaya Exchange users.
OneMDM - Enterprise Data Workflows
Streamlined complex data workflows, reducing errors and task time by 40% for enterprise users in Master Data Management systems.