Client
trading.com
Client
trading.com
Client
trading.com
Stack
Miro Jira Figma Principle Firebase
Stack
Miro Jira Figma Principle Firebase
Stack
Miro Jira Figma Principle Firebase
Timeline
Sep 2020 - Aug 2021
Timeline
Sep 2020 - Aug 2021
Timeline
Sep 2020 - Aug 2021
Role
Product Designer
Role
Product Designer
Role
Product Designer
Context
Trading.com aimed to launch its MVP platform and app, delivering a compliant, accessible, and scalable trading experience. The focus was on meeting regulatory standards while ensuring a strong foundation for future growth.
Trading.com initially partnered with an agency to establish its design framework, but as the platform evolved, new requirements emerged. Adjustments were needed to align with the new requirements and introduce new features based on user and market needs. I led the design of new and adapted features, collaborating with Product Managers to refine requirements and align with user needs while working closely with developers in weekly standups to ensure feasibility and smooth implementation. Some of the main requirements were:
Accessibility enhancements to meet AAA standards for the US market.
Regulatory content updates to comply with financial industry guidelines.
New feature development based on competitor analysis and business strategy.
Design system updates to support ongoing iterations.
Advocating for the best use of the design system.
Process
Each feature followed a structured design process within two-week sprints, ensuring alignment between user needs, business objectives, and technical feasibility. This iterative approach allowed for rapid prototyping, feedback, and refinements before finalizing designs for development.
Requirement Gathering: Collaborated with Product Managers to define feature scope based on business objectives.
Competitor & Market Research: Analyzed similar products to identify best practices and differentiation opportunities.
Design System Review: Assessed whether existing components could be adapted or if new ones needed to be introduced.
Design & Iteration: Created mockups and multiple iterations based on feedback from internal teams and developers.
Feasibility Validation: Presented designs in weekly standups with developers to ensure smooth implementation.
Handoff & Documentation: Provided detailed documentation in Confluence and kept track of progress in Jira.
Communicated changes: Presented the design system changes to the marketing team designers to ensure consistency.
Deliverables
The project involved both improving existing features and designing new ones from scratch. Some of the most challenging features are presented in this Case Study:
Economic Calendar: A new feature from scratch, allowing users to view and filter the recent economic events
Personalizing the News Feature: Adding personalisation and tailored content to the users behaviour.
Improving Web & App Navigation: Converting the navigation into a more maintainable component while adding new items.
Context
Trading.com aimed to launch its MVP platform and app, delivering a compliant, accessible, and scalable trading experience. The focus was on meeting regulatory standards while ensuring a strong foundation for future growth.
Trading.com initially partnered with an agency to establish its design framework, but as the platform evolved, new requirements emerged. Adjustments were needed to align with the new requirements and introduce new features based on user and market needs. I led the design of new and adapted features, collaborating with Product Managers to refine requirements and align with user needs while working closely with developers in weekly standups to ensure feasibility and smooth implementation. Some of the main requirements were:
Accessibility enhancements to meet AAA standards for the US market.
Regulatory content updates to comply with financial industry guidelines.
New feature development based on competitor analysis and business strategy.
Design system updates to support ongoing iterations.
Advocating for the best use of the design system.
Process
Each feature followed a structured design process within two-week sprints, ensuring alignment between user needs, business objectives, and technical feasibility. This iterative approach allowed for rapid prototyping, feedback, and refinements before finalizing designs for development.
Requirement Gathering: Collaborated with Product Managers to define feature scope based on business objectives.
Competitor & Market Research: Analyzed similar products to identify best practices and differentiation opportunities.
Design System Review: Assessed whether existing components could be adapted or if new ones needed to be introduced.
Design & Iteration: Created mockups and multiple iterations based on feedback from internal teams and developers.
Feasibility Validation: Presented designs in weekly standups with developers to ensure smooth implementation.
Handoff & Documentation: Provided detailed documentation in Confluence and kept track of progress in Jira.
Communicated changes: Presented the design system changes to the marketing team designers to ensure consistency.
Deliverables
The project involved both improving existing features and designing new ones from scratch. Some of the most challenging features are presented in this Case Study:
Economic Calendar: A new feature from scratch, allowing users to view and filter the recent economic events
Personalizing the News Feature: Adding personalisation and tailored content to the users behaviour.
Improving Web & App Navigation: Converting the navigation into a more maintainable component while adding new items.
Economic Calendar
The Economic Calendar needed to provide users with a structured way to track upcoming financial events while handling dynamic API limitations. The system couldn’t support live search, but it could fetch events within predefined date ranges.
By researching competitors and analyzing existing components in the design system, I adapted the design system and introduced new ones to accommodate all the requirements of the feature.
Process
This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd.
Deliverables
Quick-access date filters: Horizontally scrollable buttons for predefined date ranges.
Custom date selection: Allowing users to define a specific range.
Advanced filtering: Event-specific properties such as categories, countries, and impact levels.
New component designs: A redesigned event layout incorporating all necessary information.
Economic Calendar
The Economic Calendar needed to provide users with a structured way to track upcoming financial events while handling dynamic API limitations. The system couldn’t support live search, but it could fetch events within predefined date ranges.
By researching competitors and analyzing existing components in the design system, I adapted the design system and introduced new ones to accommodate all the requirements of the feature.
Process
This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd. This is a descriptions for the ejasejpaszpdfspaodkfpsakd.
Deliverables
Quick-access date filters: Horizontally scrollable buttons for predefined date ranges.
Custom date selection: Allowing users to define a specific range.
Advanced filtering: Event-specific properties such as categories, countries, and impact levels.
New component designs: A redesigned event layout incorporating all necessary information.
Personalizing the News Feature
The initial news feature lacked personalization, displaying articles relevant to only a single currency pair. This limited the content’s relevance and engagement. Based on new requirements, the feature needed to:
Introduce an Analysis tab to provide expert insights.
Add a "For You" tab pulling articles based on the user’s watchlist and history.
Allow multi-currency pair tagging for articles.
Remove trading actions from the screen.
Enforce character limits for better readability.
Improve background contrast for better accessibility.
To implement these changes, I worked closely with Product Owner to gather requirements and explored existing components in the design system. Many UI elements required new components, while others needed adaptations to maintain consistency with the platform.
Deliverables
A restructured layout that seamlessly integrated the new tabs.
A compact currency pair component to improve usability.
A cleaner reading experience with better hierarchy and readability.
Personalized content surfacing based on user activity.
The improved feature would provide users with more relevant news and analysis, ensuring a more engaging and customized experience that aligned with their trading interests.
Personalizing the News Feature
The initial news feature lacked personalization, displaying articles relevant to only a single currency pair. This limited the content’s relevance and engagement. Based on new requirements, the feature needed to:
Introduce an Analysis tab to provide expert insights.
Add a "For You" tab pulling articles based on the user’s watchlist and history.
Allow multi-currency pair tagging for articles.
Remove trading actions from the screen.
Enforce character limits for better readability.
Improve background contrast for better accessibility.
To implement these changes, I worked closely with Product Owner to gather requirements and explored existing components in the design system. Many UI elements required new components, while others needed adaptations to maintain consistency with the platform.
Deliverables
A restructured layout that seamlessly integrated the new tabs.
A compact currency pair component to improve usability.
A cleaner reading experience with better hierarchy and readability.
Personalized content surfacing based on user activity.
The improved feature would provide users with more relevant news and analysis, ensuring a more engaging and customized experience that aligned with their trading interests.
Reflections
This project highlighted the importance of balancing structured design with adaptability. By refining features based on user needs and technical constraints, the platform successfully launched on time with a consistent and scalable design system.
Early collaboration with Product Managers and Developers ensured that design solutions aligned with business goals while remaining technically feasible. Frequent iteration cycles helped maintain efficiency despite evolving requirements, reinforcing the need for a flexible design approach in fast-paced development environments.
See also
See also
See also
