Stocko
Overview
Stocko is an investment platform that provides an inclusive investment experience to its users. It enables individuals to invest in a variety of stocks and mutual funds, as well as understand the current market situation and provide adequate equity knowledge.
My Role
I oversaw the entire design process and worked as a UX generalist, handling processes from user research to usability testing.
Practices
Disability analysis, Design system, Prototyping, Usability testing, Reiteration
Problem Statement
Disabled people often face accessibility challenges while using digital devices. Moreover, Inadequate access to cutting-edge technology creates a huge problem when it comes to managing money and investing it safely.
Solution
Stocko provides an accessible solution for investors by streamlining their money investment journey.
-
A SIP - Systematic Investment Plan - allows users to invest in their preferred stocks or mutual funds and set up a fixed monthly investment installation plan.
-
Keyboard-operated web interface that allows users to interact with the elements without using a mouse.
-
A user interface based on the Web Content Accessibility Guidelines (WCAG) that addresses major accessibility issues.
01 Discovery
Secondary research method adapted to identify different disabilities and assistive technologies that have been used by users.
Explored online resources such as a11yproject, WebMD.
Web accessibility resources (WCAG, ARIA, Material).
Disability Analysis
Around 15% of the world’s inhabitants are living with certain forms of disability. Digital exclusion is an accessibility barrier to the people. The absence of accessing and using information and communication technology (ICT) resources, as well as the transition of commercial and public services from in-person to online causes further exclusion.
Assistive keyboard (Unsplash)
02 Define
Categorized the insights to form the further strategy.
Designed affinity mapping of various disabilities.
Understood needs, wants, and pain points in investing.
Presented initial findings draft to the course supervisor.
User Personas & Scenarios
Created Hierarchical Task Analysis (HTA) diagrams and drafted personas based on data gathered from resources.
Sketches
Started with web app sketches and followed WCAG guidelines.
Applied WCAG AA and AAA guidelines. Also, referred mobile guidelines to be applied to mobile design.
03 Develop
Information Architecture
UI Styleguide
Prioritized accessible design system and designed color palette considering color blindness and contrast ratio.
Components
App Experience
UI Design
Designed the Web, Tablet, and Mobile version of the application by implementing WCAG web and mobile guidelines to make the design inclusive for all the users.
Investment Dashboard
The investment dashboard consists of primary tabs to navigate throughout the system. A user can skim through the stock indices marquee on top of the page to notice daily market trends.
Investment Dashboard
Stocks
The stock investment page included a stock performance chart line based on time intervals, as well as the ability for users to Buy and Sell stocks with consistent labels and appropriate input options.
Stocks
Mutual funds
To explore and invest in a desired mutual fund, a linear design flow was used, with separate section groupings dedicated to each functionality, such as Information on selected mutual fund and Investment form.
Mutual Funds
Learn
The learn section shows the Top playlist as well as the number of videos in each playlist. The "Now Playing" label beneath the playlist indicates which playlist is currently being played.
Learn to invest
Mobile design
According to Anthony, Kim, and Findlater (2013), 91% of users with motor impairment used the direct mode of interaction with their index finger, hands, or feet. As a result, when designing the mobile user interface, consideration was given to touch targets, button sizes, and simple input alternatives.
Responsive tablet view
04 Test
Usability Testing
Usability evaluation indicates demographic data of the participants, semi-structured interview questions, user feedback, and SUS score.
Example Questions
How would you describe the Mutual fund section from the point of an investor?
Does Learn to invest section provide enough knowledge to the investors? In your opinion, what can be improved?
What are your thoughts on the News section? have you faced any readability issues?
Does Dashboard have enough information needed for an investor? What can be done to improve current design?
Google form URL: https://forms.gle/Dp8CcybiGd9pFvQ16
Participant’s Comments
“Learning is required at beginning of Stock or MF investment. This section will give confidence to users to learn and start investing.”
“There should be basic informative videos for very new users which will clear their concepts about MF, Investments, and Stocks. Need step by step guide/videos for interested users.”
“In the transcript section, as the video plays the text gets highlighted, and also add-on feature is the user can select the specific text and add that as a note to read later or kind of bookmark.”
“New users in investing will find it difficult to navigate in general, some terms like mutual funds, etc. might need information bubbles, etc to help them, or some sort of tour feature.”
Updated Designs
The feedback collected from all the participants further updated the designs.
Tour overlay to assist novice users by providing an overview of the interface.
Synced video transcript with timeline and highlighted text (Yellow), Selected text (Light Purple) to add as a Bookmark.
Key Takeaways
A total of four personas and five scenarios along with Hierarchical task analysis (HTA) diagrams were developed around different disabilities.
Bootstrap 5 framework is referred to as a source of inspiration while sketching the initial screen layouts. Additionally, Web Content Accessibility Guidelines (WCAG) 2.1 are implemented in the sketches.
Followed the colour palette considering colourblind accessibility and contrast ratio, and used Roboto typeface with relative font sizes in the ‘em’ unit.
The usability study was undertaken based on field studies in the remote and in-person environments following a cognitive walkthrough approach.
All the participants including novice and experienced were satisfied with the overall app flow and provided useful insights.