Redesigning internal trading tools to empower data-driven decisions at TDSecurities
Sketch,Adobe XD, Photoshop, CSS, JavaScript
User interviews, usability testing, analytics review
TD Securities needed an internal tool to help traders, relationship managers, and salespeople make better data-driven decisions about client value and risk management. The existing workflow relied heavily on third-party solutions and fragmented data sources, making it difficult for teams to quickly assess client value across fixed income, institutional equities, foreign exchange, and prime brokerage.
How might we create an intuitive internal dashboard that consolidates Bloomberg and ION historical data to help TD Securities professionals quickly identify high-value clients and manage risk more effectively?
Working closely with the project manager, I defined user needs through iterative feedback sessions.We prioritized getting core functionality in front of users quickly to validate our approach.
I structured the application around key user workflows:
Created a comprehensive design system and CSS library to ensure consistency across the applicationwhile enabling rapid component development for our React-based platform.
The component library I developed accelerated development while maintaining design consistency,reducing design-to-development handoff time and ensuring scalable UI patterns.
Based on the patterns identified in the empathy maps, we honed in on the four user personas' habits, problems, pain points, and other details about him/her.
We gave each participant in the group stickers red (disagree), yellow (neutral), and green (agree). The task was to read the Summary, Motivators, Character Traits, Key Drivers, Values, and Channels for the group's user persona. They voted on each category for the user personas. If the group overwhelmingly disagreed, they could make edits.
Before we wrapped for the day, the groups had to use the knowledge of the user personas to write hills. By writing down the Who, What, and Wow. We persuaded the participants to think of big ideas that would become critical features of the Pepper Archive app.
Based on the patterns identified in the empathy map and hills, we decided to focus on three personas — a creator (Josh), a producer (Kelly), and a business owner (Bobby). These personas embody how typical users would navigate our app. We highlighted stages, touchpoints, thoughts, feelings, and pain-points of our personas in our user journey maps to spark ideas and functionality specs for the app.
After the amazing Design Thinking workshop, I workshopped with the team to create a project roadmap. We prioritized what feautures were most important for the launch of the MVP, and what features could be rolled out in later releases.
Pepper Archive is unique because it combines the marketplace of a stock website with a social media platform's interactivity. Users need to have the ability to view and purchase content seamlessly while also uploading and selling their content. We outlined this process with our site map, and user flows to identify issues and come up with quick and painless solutions.
Because we had an idea of what we were looking for, we decided to do some quick wireframes in Sketch so we could split up the visual design work among the designers.
We finally got to see our ideas come to life in the high fidelity comps we created. Because our team two UX/Product designers, it was easy to bang out the comps in a short amount of time. The next step was creating prototypes using Protopie and creating micro-interaction studies to see what animations added value to the overall experience.
After polishing the designs for several comps, I created a Pepper UI Kit/Design System for our developer and future designers to follow.
Here are our next steps in for the Pepper Archive project in 2020: