Fidelity - Apply for Options Trading
Key takeaways:
Mobile first: I took over a project that had a desktop design but no mobile design. The desktop design did not convert to mobile, so I had to create an entirely new design with a mobile-first approach.
Contextual instructions: Participants in usability testing did not read instructions before acting, but did read instructions that appeared in context when they reached a roadblock.
Instruct with the design: Participants in usability testing did not read instructions before acting, but learned about the constraints of the content by interacting with elements and observing how they affected the contents of the page.
Options are a high-risk financial instrument, so before users are allowed to trade options, they are required to acknowledge the risks and apply only for the options trading privileges within their risk tolerance. Applying for options trading is a complex, multi-step process that shows user important information and gathers legal consent. Two of the steps in the application process are to indicate the risk the user is willing to accept and to request specific option trading strategies. The current experience is shown below on the left. When I joined the scrum team charged with updating this transaction, they had an initial design created by the previous designer, but only a desktop version and no mobile version of the design. The proposed new design is shown below on the right. It features a table layout where selecting higher levels of risk would unlock riskier option strategies, with the unlocking mechanism shown as a gray box blocks ineligible strategies. The previous designer submitted this design for usability testing and found that participants generally understood the concept, although they found the risk descriptions hard to parse.
When I tried converting this initial desktop design to a mobile size, it became very difficult to use. I created multiple versions for rapid usability testing and found that users couldn't easily accompish simple tasks I asked them to complete.
I decided to create an entirely new design that would be mobile-first. Using Sketch and InVision, I created a working prototype to show on an iPhone. After three rounds of usability testing, I found a design that fits onto a mobile screen, provides intuitive interactions, and minimizes unhelpful text. As users increase their risk tolerance, they unlock higher risk option strategies.
Usability testing showed that people didn't read the instructions before taking action and want contextual instructions when they run into roadblocks. One of the rules of the Fidelity options application is that option strategies are packaged together (1; 1-2; 1-3; 1-4; 1-5) so a user can't pick and choose, for example, strategies 2, 3, and 5. Rather than explain this rule, when a user selects a checkbox lower than the first box, the UI automatically checks all boxes above that one. If a user unchecks a box in the middle of the pack, it unchecks the boxes below that checkbox and provides a contextual explanation why that happened. In the photos below, the hypothetical user first checked the fourth box, automatically selecting the three above it. They then unchecked the third box, which also unchecked the fourth box and provided a contextual explanation why that happened.