YAHOO FINANCE
MODULAR
HUBS
HUBS
Building a scalable system that supported rapid deployment, enabling users to access personalized financial information while allowing the team to iterate efficiently
Timeframe
9.2023 - 1.2024
Role
Lead product designer
Platform
Desktop, Mobile web
The Overview
Creating a scalable design system for financial hubs
Financial hub pages, like a mortgage hub, serve as centralized resources that aggregate tools, educational content, and data on a specific financial topic.
From a product design perspective, these hubs are crucial for enhancing the user experience by providing easy access to comprehensive information. For Yahoo Finance, such hubs not only foster user trust and engagement but also drive traffic, increase retention, and bolster ad revenue. They support the platform's goal of being a go-to financial resource, combining user value with business growth opportunities.
From a product design perspective, these hubs are crucial for enhancing the user experience by providing easy access to comprehensive information. For Yahoo Finance, such hubs not only foster user trust and engagement but also drive traffic, increase retention, and bolster ad revenue. They support the platform's goal of being a go-to financial resource, combining user value with business growth opportunities.
Challenges
Addressing diverse requirements with limited resources
Each hub had unique content requirements, and the team operated with limited design and development resources. The main challenge was creating a modular design that could adapt to varying levels of complexity and scale to meet evolving user needs.
Solution
Designing a flexible modular hub system
The modular hub system consisted of Core Modules for consistency (top banner, news, video) and Custom Modules for specific needs (mortgage calculators, tax law resources). Collaborating with engineers, I ensured the system was technically feasible, allowing for modular integration with minimal friction. Regular user feedback informed hub-specific module development, enhancing usability.
Core Modules
Core modules are modules that are universal to the content of the topic. They may not all necessarily be included in a hub.
- Banner
- Top Story
- Article Content
- Topic Pills
- Video
- FAQ
...
have all been categorized into a stylesheet with the specific guidelines. All components are created to be responsive for mobile web platform.
- Banner
- Top Story
- Article Content
- Topic Pills
- Video
- FAQ
...
have all been categorized into a stylesheet with the specific guidelines. All components are created to be responsive for mobile web platform.
Custom Modules
Calendar Module: Highlighted key tax-related deadlines and events.
Local Tax Law & Resources: Provided tailored tax resources for users based on location.
Local Tax Law & Resources: Provided tailored tax resources for users based on location.
Lender Module: Enabled users to compare and access information about different mortgage lenders.
Calculator Module: Provided mortgage calculators for users to estimate costs and payments.
Comparison Module: Allowed users to compare credit card offers based on interest rates, rewards, and other factors.
The Impact
Adoption, Engagement
By leveraging the modular system, we reduced the time to launch new hubs by 40%. Simpler hubs could be assembled and updated by non-design team members, freeing up resources for more complex projects.
The modular design allowed for the easy addition of new hubs. As priorities shifted, new hubs could be created without the need to start from scratch, ensuring long-term flexibility.
While the core design remained consistent, hub-specific modules allowed for customization, creating a unique experience for each hub while maintaining brand alignment.
Editors and PMs were empowered to manage hub content independently, enabling quicker updates and faster iterations, which was crucial for keeping financial information timely and relevant.
The modular design allowed for the easy addition of new hubs. As priorities shifted, new hubs could be created without the need to start from scratch, ensuring long-term flexibility.
While the core design remained consistent, hub-specific modules allowed for customization, creating a unique experience for each hub while maintaining brand alignment.
Editors and PMs were empowered to manage hub content independently, enabling quicker updates and faster iterations, which was crucial for keeping financial information timely and relevant.
Conclusion
Empowering teams while enhancing user-centric design
Balancing modular consistency with customization allowed the system to scale efficiently while addressing specific user needs. This approach empowered stakeholders to iterate quickly, keeping content relevant and responsive to user demands.
The modular hub design showcases my ability to create scalable systems that streamline workflows, empower teams, and deliver value to users. In future projects, I plan to continue leveraging modular design principles to drive efficiency and enhance user-centric outcomes.