Questrade

The digital, low-cost alternative that gives Canadian investors a better choice in an industry that's historically been stacked against you.

Introduction

Questrade is Canada’s fastest growing online brokerage with over 250k accounts opened annually, 30 billion dollars under administration, and 10x winner award for Canada's best managed companies.

My Role

Responsible for taking design ownership of their brand new web-trading platform, Trading. I was a UX Designer on the Investing team, tackling UX issues, new features, and improvements for the web application.

Project Outcomes

+ Released Trading 2.0, 2.1, and 2.2
+ Improved user feedback from the old legacy design of Trading 1.0.
+ Released two main design features, trending stocks, and education mode.

Company | Duration

Questrade | 8 months

The Team

1 UX Designer, 1 UX Manager, 1 Product Owner, 1 UI Designer, 1 Content Designer, Product Managers, Development Team - Cactus!

Design Process

Teamwork makes the dream work

Every sprint would consist of a UX project given to me by my UX Manager, depending on the project, I would start the initial background research to outline the requirements. I would contact the needed teams afterwards such as the UX research team or the data analytics team to allow me to focus on what concepts I need to design for. I would then continue to have weekly 1on1s with my Manager to review different concepts designed, and once approved, would then have design work sessions with the UI Designer and Content designer to nail the concept.

Presenting to stakeholders and Dev-hand off.

I would present the polished low-level project to my UX manager, and once approved, would schedule a meeting with the Product team to present the finished project to them. After product approval, I would then align with the UI Designer and Content Designer to polish any remaining edits, and create a dev spec with notes, and have a UX walkthrough for the Trading dev team to see and ask questions. Once done, I would book a meeting with the Product Owner to help explain the project and this allowed the Product Owner to create the needed tickets for the developers.

The Problem

The 2021 UI design was not well received.

Faced with bad reviews and bad impressions of the initial UI overhaul of the web-trading app in 2021, Questrade needed a UI lift. I joined the team when the UI facelift was finished. I needed to iron out the overlooked UX issues, and take over any future major design features.

Falling behind competitors

Questrade also felt that they were falling behind these fast-moving younger fin-tech companies, and needed to push new features as soon as possible. I was tasked with executing the preferred projects, two of them being trending stocks and education mode within a timely manner.

The Users

Retail investors are the new driving force in the investing world

With 200 000 active investing accounts the majority of users using the web-trading platform consisted of new-to-investing users. Users who do not check their performance often, do not sell/buy often, and follow trends based off of market movers, and friends/family.

Retail Investors

The users need to understand what they are investing in, what type of order they are executing, what is a symbol, how to use the platform, and create a general sense of safety and comfort using the Questrade platform. The old UI design did not create an honest, safe, and usable atmosphere for these users.

Trending Stocks

Companies with strong and growing investor interest that may be poised for future growth

Due to the nature of case studies, I decided to focus on this particular project. Trending stocks nature helps retail investors gauge how the market is performing, find hidden gems to invest in, and let’s them explore and discover new companies and industries.

Trending table and search panels

Research

People preferred to see strong performing stocks

I began my research by doing a competitor analysis, after the competitor analysis, I reached out the UX research team and together we created a set of user study questions to ask a set of 20 non-Wealthsimple customers about the would like to see in a Trending stock page, and their initial thoughts of what a trending stock is. This cemented what type of lists we would show to users and gave us an understanding of what “retail investors” perceive when they see a trending stocks table.

Technical Restraint

Our current API was limited in generating the above trending lists.

I met with one of the Directors of Software Engineering and Product Manager of Investing to hash out any limitations of the project. The main technical restraint was the API could only generate certain trending lists, and while waiting on our backend team to develop our trending stocks API, we had to use our current trending stocks API supplied by Tipranks. This resulted in the initial release to have only two trending lists - Best Rated, and Most Rated.

Design Concepts

Where to naturally integrate the Trending stocks feature within the user journey

After settling on the type of trending lists users prefer, and their initial impression of what a trending stock is. I started to conceptualize areas on the platform where the feature can be naturally integrated within the user journey.

Simplified version of the main user journey

Settled Concepts

Three main areas to integrate feature: watchlist search, search panel, and account page

New users may feel lost when creating a watchlist

When users first create their watchlist, they may not be sure what to add to their watchlist to truly make a strong watchlist. Integrating a set trending chips within the search panel can help new investors feel more confident that what they are adding are good stocks.

Trending stocks always available

Located within the main account summary page, a fixed table included on the platform can allow users to always have access to a cohesive list with detailed information. The trending table location is located within the account summary tabs, which is integrated within a user's journey, when they are reviewing their performance.

A main user journey - the search

One of the user's main journeys within Trading is to search for a specific symbol. Originally, we were not going to include trending into the search panel, because when users use the main search panel, they already have a symbol in mind. They do not need any more features added on, but since the development was going to integrate trending stocks into the watchlist search panel, we decided to include it in the search panel as well.

Presenting to stakeholders

After approval from the main UX team, it was time to present the finalized concept to the product team. This consisted of multiple product managers, directors, and leads for them to review and comment on. The meeting would consist of a walkthrough of a developed prototype with the following screens to cover any edge cases that might come up. After approval from the Product team, it was to be prepared for the Dev walkthrough.

Dev walkthroughs

Along with the Product Owner for the dev-team, I would present the ins-and-outs of the finished project to the development team every sprint. They often would have lots of questions regarding the technical aspects and after the questions were answered, I would handoff the finished Figma file to the team.

Other Projects

Education Mode, UX Audits, Account Recognition, and more

Education Mode

Education mode is built into the Trading platform that integrates helpful information for users who are not sure about investing literacy terms. It acts as a book-guide to make sure users fully understand their investing actions.

Account Recognition

When users scroll down the webpage, they often forget what account they were scrolling down. The new design, when users scroll down, the Trading title would switch to the specific account.

UX Audits

After every major update to the web-trading platform, we conduct UX audits to iron out any small UX issues that went unnoticed during the development/design phase. These are just some of the UX fixes that I found during my audits.

Watchlist editing notification

When users save their watchlist or make an edit to their watchlist, they do not receive toast notifications to visual inform them that their action has gone through successfully. New design added a toast notification to the finished edits and saves.

Reordered QuestWealth portfolio

The QuestWealth portfolio displayed irregular hierarchy for the modal. I rearranged the display to show the appropriate top-down view of the modal.

Key statistics dropdown

The original key statistics did not have a collapse option, once the user expanded the dropdown, it persisted throughout each new quote page section and could not collapse. I introduced the collapse button

Closing

After 3 new update patches to the platform

New features, new UX, and an overall stronger effort to improve the Questrade platform, their product line improved dramatically within 2022. I learned how to be a UX Designer in a very large UX design team, how to coordinate with different teams, follow different team-working styles, and leading my own team through UX projects.

All the above reviews were created during 2022, a full year after the poorly reviewed 2021 UI design launch

You May Also Like