UX DESIGN + UI DESIGN + MICRO ANIMATION+ UX RESEARCH + MOBILE ACCESSIBILITY
TD Wealth
Notional trading
Bringing flexibility into the trading experience
Role Overview
Role Activities
- UX and UI Design
- Accessibility Integration
Key Responsibilities
- Analyzing requirements
- Collaborating with stakeholders
- Creating wireframes and prototypes
- Ensuring screen reader accessibility
Collaborations
- Product Owners
- Developers
- Quality Engineers
- Business Analysts
- Copywriters
- UX Researchers
Project overview
Problem Statement
Traditionally, investors using TD investment platforms were restricted to trading securities in whole units, limiting their investment options and market access. This constraint hindered their ability to implement flexible investment strategies.
Solution
As the Lead Product Designer, I headed the design initiatives to empower TD Wealth clients in their mobile trading experience, enabling users to trade using either dollar amounts or share quantities. This innovation, a first for the TD mobile app, provides a uniform experience across over 70 different trading scenarios, simplifying a complex system into an intuitive user interface.
Impact
The new model in the experience aligns with investors’ mental models and budgetary constraints, offering unmatched flexibility in trading.
It has positioned TD as a leader in trading flexibility while forecasting a a $177MM revenue increase over 5 years.
Design Process
Within the Mobile Investment Pod, I integrated my design methodology with TD’s established Digital Development process, adhering to an agile framework. In my role I was pivotal in guiding the team towards a robust user experience that incorporated design principles, quantitative data, and insights from UX Research.
Discovery
Framing the context
On every project I take on I start by understanding the context, including the problem statement, target audience, and business objectives. By analyzing investment practices, tracking data, and user research reports, I laid the groundwork for informed design decisions.
Analyzed topics
- Investment practices
- Company’s tracking data on trading metrics
- Investment foundations
- Company goals and revenue benefits
- User research reports on investment customers
Yield insights in:
User Challenges
- Limited when trading securities
- Dependence on calculators
Business Challenges
- Navigating Market Competition
- Managing Trading complexity
Exploration and UX Research
Designing the Right Solution
As I started exploring ideas on a solution. I leveraged the results of my discovery to help me stay focused on the problem to solve and design within the business constraints.
Design Principles
To further direct and strategize my thinking, I followed Aarron Walter’s Hierarchy of User Needs and created a list of design principles that would help achieve a solution that was functional, reliable, usable, and delightful.
Wireframes and user testing
Equipped with knowledge and principles to direct my decision making, I developed multiple wireframe explorations, engaging in design critiques with my pod to refine solutions. Feedback was crucial, guiding decisions on front-end enhancements, balancing simplicity, and efficiency, and building for future scalability.
Pod and Leadership Feedback
- Focus on front-end enhancements
- Balance simplicity
- Build for the future
UX Research and Design refinement
Partnering with the UX research team we conducted a usability test where I created a high-fidelity prototype that could handle math operations as well to adapt the UI based on the user inputs.
Efficient variant received a better response compared to the stepped variant
Think in dollars
11/12 participants typically think in terms of dollars when trading securities.
Efficiency of use
Having all content at glance, allowed users to enter trades quicker, reducing errors, and effort to complete their trades.
Flexibility of choice
Participants praised the easiness to choose quantity or dollar inputs when trading securities.
Accessibility
With a consolidated solution, the next step was to create an accessible experience for screen reader users. A custom accessible experience was needed to properly walkthrough users using a screen reader tool.
Development handoff
The insights gathered helped tweak inefficiencies and finalize the high-fidelity UI design to be delivered to the engineering teams.
Key Takeaways
This project exemplified the integration of diverse use cases into a unified trading experience, removing complexity and providing users with unprecedented flexibility. By focusing on user-centered design principles and collaborating across disciplines, we were able to introduce a novel solution that enhances the trading experience for all TD app users.