Brief
Migrating to a new platform, modernizing its design with the Dow Jones Unified Design System.
Project Overview.
Project Goal
MarketSurge is migrating to a new platform to improve performance and scalability while modernizing its design with the Dow Jones Unified Design System to enhance consistency, efficiency, usability, and information architecture.
Solution
A refreshed MarketSurge tool leveraging the Dow Jones Unified Design System to modernize the interface, enhance usability and consistency, and improve performance and scalability through platform migration for a seamless experience.
My Role
Design Lead
UX Design & Visual Design.
Teams
Cross Functional Teams
Timeline
June. 2024 - Dec. 2024
Design documentation handoff.
HIGHLIGHTS
A modernized MarketSurge tool for an enhanced investor experience.
Slide to view before & after.
CONTEXT
Simplifying Complexity for Investors.
MarketSurge is a vital tool for investors, but its outdated design, overwhelming data presentation, and other challenges make it difficult for users to navigate, interpret information, and take effective action.
We collaborated with the CI team to conduct user interviews and gather data through surveys and forms. Through our research and analysis, we identified several crucial pain points, ensuring the design process is focused on addressing the most critical issues.
The visual aesthetic is not reflect modern standards, reducing user engagement.
The tool's interface is cluttered, making it difficult for users to find and access key features or data.
Users are find it challenging to tailor the charts or data views to their specific needs.
Users are not receiving adequate feedback when interacting with features, leading to frustration.
Charts and data are lacking clarity or be overly complex, causing confusion for users trying to make quick decisions.
CHALLENGE
As we undertake the redesign of the MarketSurge tool, it’s crucial to address the constraints and challenges that could influence the project's success and ensure a seamless, impactful outcome.
Adapting the tool to the Dow Jones Unified Design System while maintaining its unique functionality.
Balancing the complexity of investor-focused data with a streamlined, easy-to-use interface.
Incorporating input from various stakeholders while maintaining a cohesive and focused design strategy.
Development Capacity:
Aligning project goals with available development resources and expertise to ensure timely delivery without overburdening the team.
Testing and Iteration:
Conducting thorough user testing to identify and address issues while iterating efficiently within project timelines.
CHALLENGE
North star design principles.
Seamless, Data-driven, Modern, Clarity.
Unified Design System, Performance, Scalability.
HEURISTIC EVALUATION
In-Depth Analysis of MarketSurge.
We collaborated with the IBD product team to conduct a heuristic evaluation of the MarketSurge tool, assessing its usability against key principles to uncover areas for improvement. This partnership also included a deep dive into understanding the tool's functionality and user needs, ensuring a more informed and effective design approach.
To ensure comprehensive coverage of the MarketSurge tool, the evaluation is divided into five tasks.
Example of evaluation task 1.
Example of evaluation task 2.
COPONENT AUDIT
Design System Ensures Consistency.
One of the primary goals of this project is to implement the latest Unified Design System (UDS) from Dow Jones. To achieve this, we conducted a comprehensive component audit and mapping to identify which components could be reused, modified, or newly created from Dow Jones' latest UDS component library.
Component audit example 1.0 - Masthead.
Component audit example 2.0 - Right hand panel.
Component audit overview example.
WIREFRAME
The New Essential Base.
Before — low scanability.
The current MarketSurge masthead faces several usability and visual challenges.
Cluttered Layout. Overcrowded elements make navigation and readability challenging.
Lack of Hierarchy. No clear visual hierarchy, making it hard for users to identify primary actions.
Visual Overload. Excessive use of text or icons without proper spacing or alignment.
Inefficient Use of Space. Crowded elements with inconsistent spacing, create a cluttered and unorganized appearance.
Current masthead.
After — enhanced layout and data presentation.
We streamlined the layout by decluttering elements, establishing consistent spacing, and introducing a clear visual hierarchy to enhance usability and create a more organized appearance.
New masthead wireframe.
Before — lack of hierarchy and consistancy.
The right-side panel also encounters similar usability and visual challenges as the rest of the tool.
Overloaded information. Too many features or options crammed into the panel, overwhelming users.
Lack of Prioritization. Key actions are not easily accessible or visually prioritized.
Cluttered Icons. Unclear icons make it hard for users to identify their functions at a glance.
Unintuitive Grouping. Informations are not logically grouped, leading to confusion and longer navigation times.
Current right side panel.
After — Improved consistent spacing and information grouping.
We improved the right-side panel by decluttering the layout, prioritizing key actions, ensuring consistent spacing, enhancing, and logically grouping informations for a more intuitive and user-friendly experience.
New right side panel wireframe.
Before — overwhelming and redundant.
The left data panel experiences its own set of usability and visual challenges consistent with the tool’s overall design.
Poor Data Presentation. Including unclear organization, inconsistent formatting, and a lack of visual hierarchy.
Poor Responsiveness. The panel does not adapt well to smaller screens, affecting usability on mobile devices.
After — Streamlined data presentation.
We improved the left data panel by enhancing data organization, ensuring consistent formatting, and making it resizable.
New left data panel wireframe.
FINAL DESIGN
Intuitive and Seamless Experience.
Flexible and personalized.
The final design delivers a modern, user-friendly experience by enhancing data organization, creating a clear visual hierarchy, ensuring consistent formatting, and adapting seamlessly across different screen sizes.
Default view.
Expand view.
Single-chart view.
Multi-chart view.
Screener view.
Modal design.
Information detail modal design.
Right side information panel.
Manage your alert.
Highlights and learnings
Improved data organization, visual hierarchy, and consistent formatting significantly enhance user experience and ease of navigation.
Personalization and flexibility in the design cater to diverse user needs, making the tool more intuitive and accessible.
Scalable solutions allow for easy updates and expansions to meet future requirements.
Collaborated with design system team to align MarketSurge components with the Dow Jones Unified Design System for consistency and scalability.
