In 2004, Questrade innovated in the financial services industry when it launched its online stock trading platform. Few banks and stock brokerages offered what they did: DIY investing. By 2017, investors used Questrade for its low fees and user-friendly platform.
By 2017, Questrade's account selection—designed in 2007, bottlenecked the account opening experience. Only one account could be opened at a time. It was marred by UX issues, which reflected in high drop-offs.
Account selection was rigid and bloated.
Old account selection screen
Our goal for the project was to redesign the account opening experience, by making it easy to choose accounts and fill in information. Financial services tend to confuse people so we wanted to make the experience simple, clear, and delightful.
I was one of four designers on the project. I paired closely with another UX/UI designer on the Account Selection screen, and handled many of the user research and usability testing duties.
The feature, along with the account opening experience, went live in December 2017. See it on Questrade.com .
To begin the redesign, we needed to know what people knew. A survey showed Canadians were familiar with terms like TFSA, RRSP, and RESP; less familiar with Corporate, Forex, LIF, RIF, LIRA, and Trusts. "Margin," which was a Questrade-named account, was known by Questrade clients.
Tree testing also showed that Canadians knew "self-directed" (DIY) accounts compared with "managed" accounts.
Based on the research, I recommended that we:
Account selection information architecture
Designing for mobile first let us tackle user interfaces issues that would come up on smaller screens. Issues included reducing clutter and keeping product offerings above the fold.
Mobile explorations
Usability testing with a prototype showed that testers didn't know they could open multiple accounts and that the screen had too much copy.
For the mobile solution, we simplified the copy, made the product offerings expandable accordions, and inserted a user decision that made adding more accounts obvious.
Iteration prototype (left) and solution prototype for mobile
Designing for desktop made us consider user interface issues that could happen with a larger canvas. Issues included featuring popular accounts yet ensuring lesser known accounts were discoverable.
Desktop explorations
Usability testing showed that the "shopping cart" interaction and call-to-action needed more visibility. And, the lesser known accounts was hidden.
Desktop iteration prototype
For the desktop solution, we had the shopping cart fly in from the right, rather than top or bottom, ensuring a clear action response. We also made the lesser known accounts more discoverable.
Desktop solution prototype
I paired with another UX/UI designer to give the solution a splash of colour. Together, we defined animations and interaction states.
New Account Selection screen
The new Account Selection screen, along with the new account opening experience, was launched in December 2017.
We saw a whopping 20% increase in new accounts opened on mobile—due to added responsive functionality—and a 5% increase on desktop compared to the previous year.
After release, I conducted further usability testing on the account opening experience. I aimed to capture any remaining usability issues with the redesign. I wrote a report detailing findings, risks, and recommendations.