Select: Platform to choose your broker- UI/UX Case Study

This article will discuss how I worked on my first design project — Select: Stockbroker comparison platform, where you can choose your broker.

Designing select was my first big project as a UI/UX designer at my first job. The lines were blurred in the design process with no design team in place, and my CTO was the all-in-one product guy who helped me with his continuous feedback.

Timeline 8 weeks

Platform Web

Collaboration Project manager | Engineering | CTO

About the company

Finology is a fintech startup that strives to disrupt traditional investing by making it affordable & accessible to everyone while simultaneously putting the brakes on standard financial advice and respecting everyone’s individuality. They are making financial planning as easy as opening a social media account!

What is Select?

It is a platform that helps people choose their stockbroker and open their Demat account with no amount of friction and at most transparency. With the help of advanced features and unbiased reviews on Select, people can open an investment account that suits their needs and get rewarded.

Select is one of the products of Finology One, that helps people who are investing in the stock market to choose their broker hassle-free and get rewarded for opening their Demat account.

It also shortlists top brokers according to the unique taste of a user. It does so through a tap-and-answer questionnaire, unbiased reviews, ratings, and personalized wishlists. It helps users calculate exact brokerage and other transactional costs before executing any transaction, and one can also compare the charges and essential information of top brokers.

Disclaimer: I have used “we” in many places that denote the whole team who have worked on this project and, at times, our company.

Context

We at Finology received hundreds of queries regarding which broker to choose, how to choose the right broker, etc.

We also heard stories of brokers cheating their clients and robbing them of their hard-earned money!

This prompted us to think of coming up with a technology-backed solution that helps you decide what’s right for you. And ‘Select’ was born!

Previously 1:1 Financial advisory was the significant chunk of business at finology, but it was not scalable enough to continue it. Hence, we wanted to help the masses even after shutting down the advisory.

Also, the fintech industry, when select was launched, was very limited to a few stockbrokers who didn’t show each information upfront, and most of the time, people who wanted to open their Demat account got scammed or chose the wrong stockbroker, which would not be practical for their investing style or capacity.

Most of the stockbroker platform was focused on business first and user needs last.

People were always in need of help if someone can listen to their needs, wants, and investing styles to suggest to them the best broker platform.

People wanted easy and accurate information accessible from all the brokerage platforms in one place.

Design Challenge

• To create a frictionless, transparent platform with all the actual databases and tools to be a one-stop solution for users to choose and get information about stockbrokers. (consumer side)
• It should also help stockbrokers partnered with select to show their information and offers in a legitimate way to get leads.
  (business side)

Goals

I began by understanding and discussing stakeholders’ goals and pain points. My Project Manager conveyed user needs as she led this project and knew the customers who have faced broker and brokerage platforms issues.

Measuring Impact

As my company, Finology’s founder, Pranjal karma is a personal finance coach and influencer on Youtube; hence this platform was launched publicly on his youtube channel and promoted through his social media handles.

After one week of launch :

Page Structure

So, our founder, CTO, and project manager sat down and planned what the user flow would look like, what features to include, and what pages would be there.

Although, after the development, many things were tweaked a bit according to the requirements and other external reasons. But this was the basic user flow of the website.

I was a beginner and I spent most of the time understanding and analyzing user needs, designing visuals, and iterating.

Home Page

This would be the first thing the user will see whenever they come to the website. It had to work as a landing page and a home page.

There were two use cases that it had to cater to:

1. First-time visitor/user
2. User visited for 2nd or nth time

We had to consider these two types of users and make this page useful for them. Hence, we kept all the primary CTA and offerings at the top of our landing page. So users coming to select would be able to get value instantly.

The aim of this page was :

Give the user the Aha moment as user lands here. And help them navigate smoothly to accomplish their goal.

After landing on this page, the first thing the user is likely to do is “To know which broker will be best for them.” Hence the CTA “Top 5 brokers.”
instantly shows the user the top 5 brokers the user can choose from. This help user to accomplish something just after landing on this page, without thinking much.

Rewards & Freebies

In this section, we wanted to create value for users and cross-promote our other products.

Here are some iterations I made before coming to the final version:

The final version worked out better as :

1. The card pattern with the banner imagery made it more scannable and intuitive.
2. It increased the visibility
3. Better communicating about the offerings
4. CTA was made consistent

Broker detail cards

One of the significant challenges while designing select was to make these broker detail cards. The aim of it was to:

1. Show brief information about the broker that are the primary decision factors to choose a broker.
2. It should be scannable and readable.
3. It should be adaptable for web view as well as the mobile view.
4. It should show all the significant data points upfront. Even if users don’t want to dig in for more, they should be well-versed with the essential offerings, charges, and types.

I checked out broker websites like https://top10stockbroker.com/ and https://brokernotes.co/ to know what evident information they show to the users about the broker.

After talking to the customer support and exploring other broker platforms, I got the insight the primary data points were: “Logo” of a broker, “broker name,” “Overall rating” of the broker, “Type of broker,” its “features and offerings,” and main broker charges such as “Account opening charges,” “Account maintenance charges,” “Equity delivery charge,” and “Equity intraday charge.”

Here are some iterations I went through while designing the broker detail cards:

In the final version, I made changes such as:

1. Overall Ratings are the primary decision point data, so I grouped them with the broker name And made the broker type more visually prominent.
2. I improved the visual hierarchy by eliminating the separators and using negative space instead.
3. Added info tooltip so that users can get the data clearly. it helped in not filling the card with too much information.
4. I added the “Full Details” button that navigates users to the full broker’s details page.
5. I used a grey color instead of red with a cross icon for the features not there in the broker platform. (red signifies danger and not trustworthy).

Broker full details

It contains in-depth information about a broker. It has to be designed like a product page, with all the data points that users need to decide before purchasing the product.

Hence the main data points for the broker details page were “Product Basket,” “Brokerage Plans,” “Trading Platform,” “Pros & Cons,” “Additional Features,” “Other investment options,” “Finology verdict of the broker,” “Charges details” and “Customer review.”

These were the main data points users will likely know about before opening a Demat account.

Here, I made sure :

1. The data points are adequately grouped and arranged according to their significance.
2. For better readability of heavy information, I used tables and apt negative space in each piece of information. Also, I used cards for different subgroups of data.
3. There are primary CTA on top and sectional tertiary CTAs that anticipates what the user might want to do next after going through the information of that section.
4. In the customer review section, there was “Overall rating,” “Rating summary,” and “Review analytics.” It’s the most crucial section of this page as it gives the social proof about the broker.

Compare brokers

This page provides users a close view of all the maximum searched and popular brokerage houses across India.

The side-by-side comparison gives appropriate insight into their similarities and dissimilarities on “Broker’s basic details,” “Broker Ratings,” “Charges,” “features,” “Investment options,” “customer support,” etc. This comparison and differences among brokers will help users pick the right broker for trading and investment purpose.

There were four use cases for which I had to design :

1. Only the essential detailed comparison data points are shown when users land on this page. All the other information is concealed as it should not overwhelm the user as soon as they come to this page.
2. When the user selected two brokers for comparison
3. When the user selected three brokers for comparison
4. When there is no broker selected to compare against the broker chosen.

Here is the first version I created.

Later after the iteration, we landed on the final version

Broker calculator

This calculator helps in computing the brokerage charges and other charges that are imposed apart from the brokerage while undertaking trading transactions. It computes the total cost that one would incur while undertaking the trade transaction.

This calculator is a useful tool for traders and investors as it helps them understand the approximate cost they would incur for a certain potential transaction.

Input Required

• Buy/Sell price of the stock
• Type of exchange BSE/NSE
• Quantity of shares

The final version worked out the best as :

1. The visual hierarchy was improved.
2. Made tabs in the proximity of results.
3. The result was made visually intuitive.
4. Added broker name for which the brokerage is being calculated.
5. Improved the copy

Find my broker

Finding a perfect broker that caters to your trading and investing needs might be a complex goal to achieve for some, so we have simplified all the significant decision-making points and condensed them into an easy set of questions presented in an interactive way.

Find Your Broker — Watch Video

This is how I designed the wizard:

1. I visually indicated where the user is in the process while answering the questions.
2. I chunked up the questions into meaningful labels and steps such as “Usage”, “Products”, “Features” and “Steps”.
3. Users can go to the previous step and redo their answer at any point of progressing in the wizard.
4. At the end of the wizard, the user gets matched to the broker that aligns with their choices.

The Process

As this project was made in a very short timeline and by a very small team of 5 people, there were ad hoc changes in the development phase after the design was completed. I have jotted down our process of designing Select below:

Here, are some principles we followed while designing the platform to benchmark and adhere to best practices in designing for fintech digital products.

Retrospect learnings…

So these were my learnings after working on this project.

1. This was the first UI/UX design project that I was part of. Being an amateur designer, I need to get a heck lot of feedback on my designs and iterate. As the first version was near to 💩 and as I kept iterating 👩‍💻 , it transformed to 👌.
2. I learned how each stage of design is important, and you should not jump to visual design as soon as you are given a brief. I made a massive mistake by directly starting with the visual design as soon as I knew about Select. Later my lead told me that this was a poor approach and guided me.
3. I learned how to mindfully approach big projects and design a digital product from scratch by undertaking one interface at a time.

This case study was made with ❤. Procrastination. Anxiety. Inspiration.self-motivation

It would mean a lot to me if you could long-press on the clap icon, drop a few claps & show your support.

🛄 I’m currently open to opportunities as a Product Designer in and outside India. Do reach out to me on LinkedIn or Twitter for any feedback, freelance opportunity, or in case you need help! Just drop a “HEY!”