Multi-Leg Options
How might we help our novice and advanced users learn about, build, test, and execute Option orders with confidence to increase the number of options trades going through our site?
Timeframe
July 2022 | Updated May 2024
Role(s)
Senior Designer | Design mentor
Due to non-disclosure agreements, all my work here will be represented in a white-label generic branding and will contain no imagery of the product before the redesign.
Challenges
Client had no previous knowledge of the ins and outs of options trading
Designing for multi-leg options, which doesn’t currently exist on the clients site today
Ask to keep the tool advanced enough for advanced users while making it more approachable for novice users
Client did not account for timing and go-to-market planning which resulted in initially bad feedback from users upon launch (remedied through time and iterations of the project after the fact.)
Accomplishments
+11% Increase in options trades since project launch
+20%-30% uptick in younger demographics utilizing options on the site after redesign
Scalable solution created which will allow for the client to continuously develop and add more options trading capabilities to their site in the future
Kick-off
With undefined requirements, we began kicking-off the project by having a collaborative session that allowed everyone to give their inputs into the objectives, goals, and desired outcomes of the project.
By hosting this workshop, we were able to gain a better sense of what the client wanted to achieve within this project and were able to dive into our initial user journeys.
Journey Maps
Unsure of where this new multi-leg options experience was going to live, we took to creating an intensive journey map of all the pages and places where options might be pushed throughout the site and offered up a way to show the client all the touchpoints available to help promote options on their site.
Wireframes
After deciding which section of the site the client wanted to focus on in this engagement, we began our low-fidelity wireframes. It took a few weeks to gather the right understanding of how the client wanted this to function.
While they originally said they wanted to focus solely on the novice user, we quickly learned that they wanted a better balance of helping novice users adopt options trading while ensuring power users were still able to perform the same workflow they had been all along.
Visual Design
Working closely with the client’s designers to learn about the ins and outs of their design system, we then placed a nice layer of visual design and continued tweaking our content to prepare the prototypes for testing.
Usability Testing
The client ran an unmoderated test on usertesting.com with both advanced and novice traders, we were able to gather valuable input on our designs.
The overall feedback being positive with the ask from novice users that they would still like more education woven throughout the experience to help them make their choices.
Design Iteration
Back into visual design iteration we went to add in additional layers of education and small visual feedback tweaks to feedback received during testing.
Usability Testing
Another unmoderated test was performed to ensure that we had hit the right balance of education throughout the experience before finalizing all our designs.
The test came back with positive reviews, helping solidify that our designs had moved the outdated experience in the correct direction.
Final Designs
The final designs contained a revamp of the current options chain and a new analyzer page that dove deep into the
The final iteration of the designs finally made it into development a year after sign-off. The final designs contained seven specified breakpoint sizes with a responsive approach to our breakpoints and was developed and verified to work from 350px - 1900+ screen sizes.
Final Designs
