To comply with a non-disclosure agreement, I have omitted and obfuscated confidential information in this case study. The data and information in this case study is my own and does not necessarily reflect the views of Fidelity.
DATE: March 2017
MY ROLE: Visual Designer
Trading stock options is challenging. The truth is that most people who trade stock options fail miserably and lose money each year. “Normal” investing—in things like stocks and bonds—is complicated enough for most people. Options ramp up that complexity by an order of magnitude. Not just that, but all option strategies—even the supposedly low-risk ones—have substantial risks which aren't always obvious. And there are all those trading strategies with goofy-sounding names like iron condor, butterfly, and jade lizard.
All that said, a lot of investors like the challenge and find that trading options is generally more interesting and challenging than trading in stocks. Options also fit well with emotional biases of many investors who prefer certainty of a limited loss and unlimited upside.
Fidelity provides an extensive options trading experience across a wide range of products and platforms to cater to these of these investors. On average roughly 200,000 trades are completed every day. The current experience, though once highly-regarded, is in need of improvement—based on known issues and customer feedback. The options trade ticket, in particular, was identified as a product that could benefit from a design overhaul. This is difficult stuff for most of our customers. How can we make it better?
I joined the team as a consulting visual designer in March of 2017 (the project was already well into its ideation phase). The team was highly collaborative and
there’s was lot of crossover between roles. This was a very transactional and data-driven project where most of the heavy-lifting was done by the senior information architect on the team, the super-talented Rui Mu, with me following her lead. I didn't know anything about trading options at the start of this project and I still don't now. Honestly, I don't feel bad about that.
How can we provide the most value for Fidelity customers at this critical conclusion to their trade experience? We defined some goals for our new experience to achieve:
- Help customers understand what they’re trading and guide then through the process
- Make it fast, easy and accurate for customers with relevant feedback along the way
- Provide support to minimize risk and maximize gains
- Create a frictionless trading experience with a minimum of distractions
- Start with the most complex use case for MVP1 (options), then leverage the experience to encompass other trade types
We opted for Fidelity’s variation on a lean approach which emphasized rapid sketching, prototyping, lots of user testing throughout the process. This created early team-wide alignment, sparked tons of great ideas and created a strong sense of ownership across different disciplines on the team. Our process moving forward was as follows:
- Conduct a discovery phase to understand the current experience, customer segments, and goals moving forward
- Create detailed user scenarios and validate them with metrics and data
- Create multiple design concepts for review, refinement, and user testing
- Conduct a series of quantitative studies to inform and validate design hypotheses
- Roll out releases in the form of MVPs— allowing a small segment of users to access and provide feedback
- Continuously evolve the design with incremental releases, improving as we learn
Start by focusing on the most complex use case for the trade ticket—options trading—for MVP1 to load test solutions and get customer feedback.
How do we know we have succeeded?
- Speed: How quickly can the customer accomplish the task of completing the trade?
- Accuracy: Was the information the customer intended to enter actually entered? Are we showing accurate data?
- Confidence: Is the customer appropriately confident in the information entered?
- Omnichannel: Can customer execute trades where and when it is most convenient for them on the devices they choose?
- Aesthetic integrity: Can we move the needle dramatically on the visual design of the ticket to best represent the current state of the Fidelity brand?
Research and Discovery
The discovery phase was a quick, high-intensity effort that allowed us to define project milestones, audit the existing work, review the competitor landscape, understand our client’s vision, and begin research into user needs, behaviors and pain points. We also kicked off a technical discovery phase to understand feasibility and constraints.
During our inventory of trade ticket’s across all of Fidelity’s products, we unearthed no fewer than 5 different trade tickets, encompassing desktop and mobile. So were destinations, others we docks. Still, others were movable modal layers. We also conducted a functional taxonomy across all of the tickets.
We did an analysis of each and shared the results with the team and our business sponsors.
Customer Journey Map
We created a rough customer journey map to give the team an overview of our customer’s end-to-end experience across Fidelity.com, from Google search for “options trade” to complete trade transaction. We thought this would help expose potential gaps and friction points in the experience. Some key learnings:
- Stocks are the most commonly traded security type for these participants, followed by Mutual Funds, ETFs, Fixed Income, and Options
- For the these participants, the number of trades per year is generally low (1 – 12) for Mutual Funds, Fixed Income, and ETFs.
Analysis of Current State
We had access to user research studies, customer verbatim feedback, and input from field reps, to help us identify the strengths and shortcomings of our current trading experience:
- The current ticket affords a lot of control but also saddles customers with potential indecision and unnecessary cognitive load
- Speed and accuracy of order input seen as well-behind competitor offerings
- From a visual design perspective, it was obvious we had fallen well behind the level of fit and finish that competitors such as TD Ameritrade were offering.
- Not responsive; won’t work well on mobile devices
Our initial competitive analysis looked at several of Fidelity’s primary competitors in this space including E*Trade, Charles Schwab, Options Express, Scottrade, TD Ameritrade, TradeKing, and others. We used the following criteria to guide our evaluations:
- User support
- User control
- Aesthetic integrity
We used personas throughout the project to guide design decisions, priorities, and create empathy amongst the client and our team.
Our persona hypothesis consisted of three different trader types which we used to facilitate discussions about our user’s needs, desires and varying contexts of use. Through careful analysis of our research, we identified client behavioral variables to segment our user audience.
We reviewed the personas with our business sponsors to develop a clear picture of who the design of the ticket would target in MVP1 and later in future MVPs.
Lily - Light Trader
- Total trades per year: 1–70
- Time trading per week: 3–10 hrs.
- Trading activity: stocks
- Mindset: “I don’t really know much about trading, but I like to trade the companies I know”
- Pain points: per trade expense, complexity of trading tools, lack of guidance
Nancy - Medium Trader
- Total trades per year: 72–120
- Time trading per week: 10–20 hrs.
- Trading activity: stocks, ETFs, single-leg option trades
- Mindset: “I’m comfortable with simple trades, but it would be great to up my game”
- Pain points: hard to learn how to trade beyond just stocks, hard to formulate strategy
Harry - Heavy Trader
Total trades per year: 120+
- Time trading per week: 20–40 hrs. Trading activity: stocks, bonds, ETFs, mutual funds, multi-leg option trades, conditional orders
- Mindset: “The performance of my portfolio is a source of pride, but I need better tools”
- Pain points: speed, accuracy, and control of investing tools
Do what’s easy for the customer, not what’s easy for us.
The goal of this effort is to define the best trade experience for our customers. It is not to define the best trade experience for our customer’s given current funding buckets and existing back-end systems. There are real-world constraints but they need to take a backseat while we determine what will provide the best experience for the customer. If it’s not good for the customer, it’s not an option.
Concepts now. Details later.
The time will come for dotting ‘I’s and crossing ‘T’s. It’s not now. Ask yourself, ‘does it break the model?’ If not, it’s just a distraction.
Past performance is no guarantee of future results.
Do not assume past constraints are current constraints. Assume yes for now. We’ll revisit it later if necessary.
Look for every opportunity to shorten the distance between what the customer is looking to accomplish and what it takes to get there.
We know confidence is a pain point for our customers. Strive to provide more enhance decision support whenever possible.
We know our younger traders can you some help during the process, but guidance should not get in the way of speed and accuracy for more advanced traders.
Design for all devices and displays
Make this experience feel and home on any device and let customers trade where and when it is convenient for them.
Optimize for speed
Page performance is a critical aspect of a high-quality user experience. With the emergence of products such as Google Accelerated Mobile Pages and Facebook Instant Articles, minimal or zero latency with quickly become a basic expectation with our customers.
Ship to learn
We know that not all features or content will be adopted to add value. Make small bets, and be willing to quickly pivot when the results of experiments don’t agree with our hypothesis. Use customer input and data to inform decisions and let the best ideas win.
Fidelity upholds relatively high standards for the work it produces and places a premium on good design. The current state of Fidelity.com make look dated but, its mobile app is quite good.
My process involved sketching and white boarding concepts and flows with my IA partner and then translating these directly into high fidelity design comps. Since I was working with many existing design patterns, it was relatively easy to move straight into hi-fidelity designs. Additionally, Fidelity maintains excellent design pattern stencils in both Axure and Sketch. The days of gray box wireframes may be over.
My next step involved slicing the comps and piecing them together with Keynote or Axure into a prototype. In the early stages, I focused only on representing the highest risk areas of the design.
For each feature phase, we went through cycles of requirements, consensus, approvals, detailed specs, and handoffs.
Prototyping was the most effective way to quickly gain meaningful feedback from the team, consensus from stakeholders and approval from senior leadership. We also used them to for our weekly usability tests with our user research team.
Keynote (Magic Move!) was the boss when it later came time to demo motion and animation effects quickly to the team.
UI Design Toolkit
I assembled a UI toolkit from the current Fidelity.com style guide and latest component stencil kit to speed up the visual design process—especially as other designers join the team in the future.
The toolkit also features Fidelity Sans—Fidelity’s new bespoke typeface designed for us last year by Danish foundry: PlayType.
This is the first step in the trade order check out process: the order ticket. It consists of the following components:
• Account selection
• Margin display
• Symbol/company selection • Symbol quote display
• Trade details
• Order summary display
The team worked strived to keep the ticket interface as organized and simple as we could to reduce cognitive load while providing clarity and guidance where appropriate. We moved details out of the way and tried to pare down the interface to just the essential features that addressed the most common and important use cases.