Questrade

Helped grow a 2 star rating web-app to a 3 star rating.

Team

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

Duration

8 Months (2022)

Platform

Mobile and Web

Discipline

UX, UI, UXR, and Design System

Overview

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.

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.

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.

Goals

Identify current UX/UI issues, understand development constraints, optimize userflow through research and best practices.

Design and implement industry leading features to be on par with competitors.

Reduce negative reviews about the current design of the platform through fixing user specified pain points.

Pinpoint

By understanding the user pain points through their online reviews and through our customer portal team, the UX team developed a list of design tasks for the design team to complete each quarter. Questrade also felt that they were falling behind 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.

Outcomes

↑ 3

Released 3 update patches Trading 2.0, 2.1, and 2.2.

2 to 3

Improved user ratings from 2.5 stars to 3.5 stars within one year.

↑ 1

New trading API developed for Trending Stocks.


The Challenge

Questrade's low-rating reviews were the result of some of the following:

01

Design stronger, better, and faster to catch up with other popular online brokerages, some features that other brokerages had, Questrade lacked.

02

With over 200k active accounts, new designs must not disrupt the main user experience flow that most returning users are acquainted with.

03

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 platform. The old UI design did not create an honest, safe, and usable atmosphere for these users.

(Note: UX audits and reviewing previous user test data helped with tackling these challenges.)

Research

To fully understand the reason behind the negative user reviews, I worked closely with the user research team and the data analytics team to uncover testing results.

Conducted a competitive analysis on leading online brokerages new functionalities.

Conducted a user survey involving 20+ non-trading users, to understand what they think a trending stock is, and what they want to see.

Created a user journey map, and userflow map to understand where to implement trending and education mode.

Competitor research was done with the UX research team.

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

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.

Designs

Prototype

View the designs on the mobile app

Insight 1

Users would feel lost when creating a watchlist, did not know what type of stocks to put in the watchlist.

Web application before the redesign.

One of the main user discoveries was that many users did not create a watchlist, if they did, there would not be many lists made. One of the reasons for that is that many casual investors (user persona) did not know enough stocks to make a watchlist.

Design 1

Introduce a chip filter within the watchlist search panel and implement pre-made lists with strong stocks.

Redesigned watchlist table.

The new design allowed users to quickly jump into exploring potential stocks to purchase or sell and/or allowed them to have the confidence with their watchlist.

With a list of suggested trending stocks, users also felt a sense of security since an established firm pre-made the trending stock watchlists.


Insight 2

Users found it difficult to find market trends or market movers when using the trading platform.

Web application before the redesign.

The old design did not have a quick and easy way to find market movers or trending stocks, users had to know what stocks were trending, and type in the search bar or review their performance to find those stocks.

Design 2

Allow trending stocks to always have an easy point of access throughout the web application.

Added the trending filter chip within the main table.

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.

Added a trending filter within the search bar.

One of the user's main journeys within Trading is to search for a specific stock. Originally, we were not going to include trending stocks 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 and devs

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. 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.

#1

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.

#2

Account Recognition

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.

#3

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.


Outcome

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.

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

Learnings

01

Working in a large design division

I learned work within in a very large UX design division with over 30+ active Designers spanning across visuals, research, UX, content, and management. I learned which discipline teams were needed for different scales of tasks/projects, and when and how to loop them in within the product lifecycle.

02

Stakeholder engagement and buy-in

Learned to identify who the stakeholders are, assess their needs, understand the level of UX maturity, preferred method of communication, and what to include in the level of engagement and actions. Once I mastered each of these pillars, then it led me to working on grabbing stakeholders buy-in. I learned in order to master stakeholder buy-in, you must speak their language, empathize their concerns, involve them early on, show and don’t tell, leverage data, and anticipate objections.

You May Also Like