Ingredients for a Brand New Stock Investment App: UX Case Study 📈

Hello and welcome to an another episode of my case study and this time I will be sharing my experience of making a stock exchange app right from the scratch. To continue my tradition of giving creative names I decided to give this app a name which is Stopwatch..Errr I mean Stock-Watch

Overview:

Mark Twain once divided the world into two kinds of people: those who have seen the famous Indian monument, the Taj Mahal, and those who haven’t. The same could be said about investors.

There are two kinds of investors: those who know about the investment opportunities in India and those who don’t. India may look like a small dot to someone in the United States but upon closer inspection, you will find the same things you would expect from any promising market.

The B.S.E and N.S.E

Most of the trading in the Indian stock market takes place on its two stock exchanges: the Bombay Stock Exchange (BSE) and the National Stock Exchange (NSE). The BSE has been in existence since 1875.
The NSE, on the other hand, was founded in 1992 and started trading in 1994. However, both exchanges follow the same trading mechanism, trading hours, and settlement process. Although there are multiple stock exchanges, the maximum trading happens via these two only.

Why Stock-watch? 🤔

1. There has always been a demand for good tools for trading be it on websites or smartphones with the biggest hurdle being which one to choose?
2. Google Play store is filled with a plethora of apps in the market which helps the users in trading and buying stocks but again we are left with the biggest question: which one to choose from?
3. Many existing apps do not start with basics and a user who is a novice in stock exchange is left clueless.
4. Stock trading is always seen a thing to have a lot of knowledge before beginning and is termed for people who can invest time in learning the basics first to avoid any risks attached with it.

Understanding the problem statement:

Once I was given a statement I needed to quickly decipher it into a problem statement so that I could be clear what I need to solve and who will be my users and would be introducing the features in the app accordingly.

Also a right action plan would enable me to focus on the project and I will be able to choose the tasks based on their priority.

Agenda 📝

1. Deducing the Research Problem Statement
2. Build your hypothesis.
3. Scoping down the project.

Deducing the Research Problem Statement:

This was the initial statement I was given and I need to do a lot of hypotheses in order to deduce my research strategy as this PS was a little generic.

“Create a flow (as many screens needed) of a mobile app for buying stocks online”

Being a designer it is very essential to know what and for whom you are solving the problem for and for that there needs to be a requirement of a PS.

After the initial hypotheses and interaction with users I deduced the Research Problem Statement.

Research Problem statement ✏️

There are a plethora of stock exchange apps in the market where users use them for buying and selling stocks but many users prefer trading via websites or some other tools given the cumbersome experience they have via mobile apps or the overall functions in which they lack and make an end to end app for buying stocks online.

Hypothesis:

After all this comes the hypothesis and brainstorming where I need to write down the initial thoughts, assumptions and all the ideas I have related to the problem. At this stage, I solve the problem without any additional research.

Also It is very important to scope down your problem because in practicality we cannot solve all the problems at once, only a few problems in a given amount of time.

I started by writing about the things I know about the problem statement and noted down assumptions. The assumptions need not have to be correct.

Listing all assumptions about the problem statement 👈🏻

1. What do traders prefer? Website or App?
2. Why would I visit this app?
3. If I visit, will it serve my purpose?
4. Will the information provided there be in an organized manner?
5. How would be the overall interaction?
6. Will the overall interaction be smooth and seamless?
7. Why would I visit it when I already have websites to do the trading?
8. Will everything be displayed into the app?

After all the assumptions I condensed all of them and decided to solve the below Problem statement.

“Making a new stock exchange app minimizing user’s dependence on websites as well as attracting new users by educating them”

Action Plan💥

P.S-Smoking is Injurious to health

Now it was time to introduce the pointers on which my project would be based upon, I tried narrowing it down to 5 steps which are as follows:

1. Hypothesis
2. User Research
3. Empathy Map
4. User Flow
5. Wireframing

User Research

Research helped me to empathize with the users and to find out about their needs. I decided to further divide it into 2 parts, mainly:

1. Desk or Secondary Research
2. Primary Research.

Key Insights from Secondary Research 💡

1. Most of the traders prefer trading via websites though people also prefer doing it via apps but the percentage of doing it is very less.
2. Zerodha by Kite emerged out as the top app loved by people when it comes to trading followed by apps like 5 Paisa trading, Angel broking etc.
   Of the country’s new accounts, the vast majority were opened by millennials aged 24 to 39, according to separate data from markets regulator, the SEBI.
3. More than a quarter (27%) of Stock users have traded in the electric vehicle maker. Other top picks include Microsoft, Apple, Amazon and SaaS (software-as-a-service) companies, according to platforms including Mumbai-headquartered Cube Wealth.
4. Technology stocks have emerged as major winners under the pandemic as remote working and social distancing measures have boosted demand for digital services.
5. There is plenty of information provided on the internet but still people find it really difficult to use and select the right tool for trading.
6. On the NSE, the turnover of mobile transactions has increased by nearly 130% over the past year.
7. According to 5 Paisa female participation in stock market trading increased by 49% during Apr-Jun quarter of 2020.

Primary Research 💡

I conducted 3–4 user interviews to gather more insights to solve my problem. Since I did my secondary research (Desk research) thoroughly it gave me answers about who typically uses the product and some data around it.

However I will never get perfect answers, so I could go ahead with assumptions wherever I don’t have data. Below table shows how I defined my users based on the secondary research.

Qualitative Research:

In qualitative research I did 3–4 interviews (zoom and audio) to know about their experiences in stock exchange and trading.

It was to gain an understanding of the underlying reasons, opinions and motivations of the users. On the basis of the understanding of the users I identified 2 group of users

Making an Empathy Map 📝

Initially I was not much inclined towards making the map but sooner realized that it will assist in understanding the thought process of users and impulse in their decision making.

Key Insights from the Primary Research:

1. Whatever may be the medium be it an app or a website people want a simpler UI and a layout which calls for more attention to the details.
2. It is difficult to invest for newcomers without knowledge.
3. It is difficult for investors to build trust.
4. People like multi broker choice, assurance of research calls and authenticity of calls.
5. Some users want a dark theme and customizations as per their likings in some features.
6. Multi lingual support would be helpful.

Converting the challenges into a HOW MIGHT WE QUESTIONS!

1. How might we build an app which has simpler and a good user interface?
2. How might we make an app which has functions and features which can attract customers?
3. How can we make the app which encourages young investors and those who seek knowledge at a later stage do not find themselves stuck in the process?
4. How can we ensure good trust among brokers and investors?
5. How can we make an app which is free from any lingual barrier?

User Flow:

It helped me in creating better wireframes and design based on the flow. The user flow takes you from entry point through a set of steps towards a successful outcome and final action.

Wireframes 🎯

Now comes the main task of the process where I need to put down all the things noted into designs. This stage helps us to sketch our ideas quickly even from the ideation stage to demonstrate our thoughts.

I started with paper prototypes/low fidelity prototypes first as they are used to map out the shell of the interface, its screen and basic information architecture.

Brand Style Guidelines 🎨

• Now comes the task of typography, visual design and choosing the right color is always a thought provoking task and below is what I decided to stick with for the app.
• I used “Arial” as the Text Font throughout my wireframes
• Below are the list of color palettes i used in the designing of app:
• Have used a plain white color palette as and when required.

Final prototypes:

Screens 1–20

Screens 21–26

👉Here is the link to access these wireframes in original resolution:

Stockwatch Screens 1-20.png

Stockwatch Screens 21-26.png

Explaining the Screens ( moving horizontally from left to right )

1. The first screen is the splash screen which will appear to the user after he installs the app in his phone.
2. Then we are seeing Screen 2 which allows users to select from multiple languages to choose while trading.
3. After that we have Screen 3 and 4 which allows users to Sign in/Sign Up where the user can make an account by email or using his FB/Google account, we also have a SKIP button there which will take the user to the learning section of the app.
4. We are followed by next Screens 5 and 6 which are nothing but the OTP Verification and its confirmation.
5. Now we retrace back to the SKIP option, which will take the user to a page where he can learn all the basics of Trading as shown in Screen 7 and 8.
6. Features in the learning section are — Recommended Videos section: Ratings, like, dislike, share and bookmark option , News section: can view latest business news and can also bookmark ,users can view bookmarked videos or news in Screen 10 where he can also delete bookmarked items.
7. Screen 11 shows the HOME screen where the user can see various market indices and select them as per his liking and he also has a button to proceed for his DEMAT account opening.
8. In Screen 13,there is a rating for every broker which is given in order to reflect the market reputation of the broker.
9. Screen 14 shows the details of the broker and takes into the process of DEMAT registration as shown in Screens 15,16 while Screen 17 showing the confirmation of the same,
10. Screen 18,19 shows the Orders and wish-list section with multiple filters as per the user’s liking and needs. Screen 20 shows the Portfolio window in detail. Screens 21,22 and 23 show the features in the wish-list section while the remaining screens 24,25,26 deal with the Profile of the user in detail.

🎬My 2 Cents on the Case study:

I will be really honest with you folks that I didn’t have a slightest of an idea about the stock market before making this project and was bit worried how will I be able to grasp and implement them into design but trust me getting right users, asking right questions and able to condense it all in your design really helps and is such a relaxed feeling at the end. Moreover, enhancing your knowledge in various fields is like an X-Factor.

And then I also recalled one very famous line from one of my amazing teachers,

👍Student For Life #S4L