Dow Jones Interoperable Modules

B2B Modular Web App

Interoperable Modules are a modular solution that integrates Dow Jones' news and data directly into customers' workspaces to optimize their workflows.

Role: Product Designer (UI focused)

Contributions:

Discovery
Design competitive analysis
Visual design
Prototype
Design system
QA and UAT

Team: 2 Product Designers, Product Manager, Accessibility Lead, Design Systems Designer, Developers

Year: 2022

Introduction ✍🏻

To continue providing award-winning news and data where it is needed, Dow Jones developed pre-built news modules designed to integrate seamlessly into OpenFin, a unified workspace used by major financial firms. Featuring premium financial and business content from renowned Dow Jones brands such as Newswires, The Wall Street Journal, Barron's, MarketWatch and Investor's Business Daily, these news and data modules optimize users' workflows by streamlining access to the latest news, analysis, commentary and event data. The project was to create an MVP, starting with the most essential module, Streaming News.

Design Process 👨🏻‍💻

We began by understanding the requirements, users' needs and technical constraints. These were the must-haves:

News headlines with timestamp
Category and time selection
News filters
Search bar for news search
Ability to save searches and recall them

We conducted a competitive analysis, worked on the wireframes and then the visual design.

After the first version of Streaming News module was shipped, we gathered feedback and learned that it didn't work well for the users.

"I want to see more headlines on the screen, scrolling is wasting my time."

We realized that users typically had this module open in a small portion of the screen, combined with other modules they were using in their workspace. Therefore, we had to optimize the usage of screen real estate to improve data visibility.

User's Workspace — An example of a user's workspace with multiple modules open.

In the following iteration, we made several improvements:

Reduced all elements' size and spacing while ensuring legibility
Rearranged the controls to optimize both screen usage and user flow
Added breakpoints for small and large screen sizes to ensure an optimal layout in every viewport

Before and After of Extra Small Screen Size — Before and after of extra small screen size.

Before and After of Medium Screen Size — Before and after of medium screen size.

Small and Large Screen Sizes — Addition of small and large screen breakpoints.

We also added new features:

AND/OR boolean operator in the search bar for a more refined search
Dedicated page to manage saved searches and notifications

Learnings 💫

One of the key learnings from this project was the value of empathizing with users by understanding how they interact with our product within their actual workspace. Initially, we were too focused on our own product, neglecting its integration into users' environments. By shifting our perspective, we optimized the design for seamless workflow integration.

Additionally, we learned the importance of information density and visual hierarchy in designing effective modules for financial workspaces. User feedback highlighted issues with screen space utilization, leading to frustration with limited data visibility. Implementing a clear visual hierarchy helped balance dense data.

Thank you for reading my case study, any feedback is greatly appreciated. Let's get in touch! 💬