2013 Fidelity.com Accounts & Trade Responsive Redesign
With 2.5 million daily users, Fidelity.com is one of the most heavily used financial services websites. Rolling out a responsive redesign in beta allowed the team to test multiple iterations, learn from feedback, and optimize the customer experience.
Situation
As part of the Fidelity.com responsive redesign, the UX design team was tasked to deliver the data-dense Positions grid – a table of 13 or more columns and potentially thousands of rows. Business stakeholders had a long list of requirements. The team struggled with mobile performance issues.
The team was blocked for a year on the Positions grid and needed to deliver a customer-centric solution in 10 months. There was a lot pressure from leadership, and this was an opportunity for Fidelity to be an innovation leader.
Before
The existing Fidelity.com Accounts & Trade experience was optimized for a fixed-width desktop experience, providing limited functionality. It wasn’t usable on mobile devices, at all. The redesign was an opportunity to explore what was and wasn’t working and optimize customer experience.
- How do customers expect to sort and filter?
- Was it easy to use from the first time, and if they needed help could they find it?
Audience
Wide range of Fidelity.com investors
My Role
Design Lead, Information Architect, and Prototyper
What I Did
Brought in as a “unicorn” (designer that also does research and develops production-quality code) and responsive web design expert, the design director engaged me to teach the team the latest techniques. I collaborated with the team to explore responsive solutions, especially focused on the Positions grid.
Team
- Design director
- 2 Design leads (myself +1)
- Visual Designer
- 3 Front-end Developers
- UX Researcher
Key Tools & Deliverables
- Wireframes (HTML/CSS/JS, Backbone templates)
- Branding and visual design (Adobe Illustrator, HTML/CSS)
- Responsive, interactive prototypes (HTML/CSS/JS, Backbone templates)
Skills Used
- Accessibility
- Design System
- Design Thinking
- Front-end Web Development
- Information Architecture
- Interaction Design
- Rapid Prototyping
- Responsive Pattern Library
- Responsive Web App Design
- Style Guide Governance
- UX Design
- UX Research
- Visual Design
Change takes time, patience, and especially trust… which is earned.
On my first day, the team explained the status of the project: broken layouts, freezing on mobile devices. I had an idea to help. In about 20 minutes, I created a very rough HTML+CSS sketch of the initial idea using CSS display inline-block to have table cells reflow using min- and max-widths customized for the content. This may seem common now, but back in 2013 this was actually cutting-edge. We had responsive experts come in — Jason Grigsby and Aaron Gustafson — and they said this would work, and that it wasn’t being done elsewhere. However, I couldn’t talk about it, due to the NDA.
Teams were siloed, and the front-end development team wanted to continue with the JavaScript approach. So, for the next three months I collaborated on their direction, providing IA, visual design, and front-end development. Three months later the layout still broke and froze on mobile devices.
Three months later the SVP reviewed the work in progress, then halted that work and directed the team to pursue the CSS-based solution.
I recreated existing layouts using a CSS-based solution to replace the JavaScript-centric approach, designed the table to be as fast as possible. Collaborating with another design lead and UX researcher, we invited customers to the usability lab to understand their priorities, then iterated on the prototypes. Realistic prototypes on actual devices allowed customers to tell us what they want and show us what they need on the devices they usually use.
The Positions grid serves a broad range of users. One customer might have one row, whereas another could have thousands. High-value customers might have very large units of a stock or billions of dollars. Coordinating with business analysts to research the smallest and largest possible values, we tested our prototypes to ensure they were flexible enough for all customers.
Direct user observation uncovered unique insights. For mobile, we were able to hide the “All Accounts” sidebar to slide out of sight unless needed, then slide in with a tap. We streamlined options to only those customers needed.
Result
The redesign resulted in a 75% increase in mobile engagement. After launch, the Positions grid became the most viewed page on Fidelity.com.
The project was featured on the Responsive Web Design podcast.
This work formed the base for the company’s new responsive pattern library.