top of page
Design System:
InfoMoney
Company:
InfoMoney
Year:
2024
Role:
Product designer (UI designer, UX designer, Information Architecture)
Team:
Me and another mid-level designer, PM, Tech lead
About the company
The biggest and the best portal for financial news in Brazil
_ InfoMoney is a leading financial and business news platform in Brazil, dedicated to providing reliable and actionable information to help users make informed financial decisions.
_ The portal was founded in the year 2000 with the mission to democratize the access to high quality financial information in order to improve people’s lives.
_ In 2016, the platform was acquired by XP Inc, one of the largest financial institutions in Brazil, to strengthen its content strategy and provide value to XP's growing user base.
_ Under the XP umbrella, InfoMoney has expanded its reach, integrating cutting-edge tools, innovative content formats and partnerships to remain a leader in financial journalism.
The problem
The platform suffered from inconsistencies in typography, colors, and layouts, leading to fragmented branding and inefficiencies in design and development.
Context
_ Inconsistent typography, colors, and layouts across pages fragmented brand identity and user experience.
_ The lack of reusable components resulted in redundant work, wasting time and resources.
_ As InfoMoney's digital presence grew, it became increasingly difficult to maintain visual consistency and alignment across teams and projects.
_ Absence of a modular approach limited ability to quickly adapt or create new features, pages, or updates.
The challenge
How might we build a flexible design system that would adapt to the growing needs of Infomoney, while maintaining the consistency of the brand and being easy to use?
The solution
Infomoney Design System has been developed to provide a strong foundation for the creation of digital experiences that are consistent, scalable, and efficient.
Modularity
Components can be easily combined to build new pages.
Scalability
Designed for future growth while maintaining quality.
Efficiency
Reduces redundant work with reusable elements.
The process
A structured approach based on Atomic Design was implemented to break down elements into reusable components.
1. Discovery & Research
Conducted in-depth stakeholder interviews, analyzed user feedback, and performed a full design audit to identify inconsistencies in typography, colors, layout, and component behavior. This helped define pain points and establish key design priorities.
2. Strategic Foundation
Adopted Atomic Design, a methodology that structures UI into reusable components (atoms, molecules, organisms, templates, and pages). This approach ensured modularity, making updates and scalability easier while maintaining a cohesive design system.
3. Responsive Framework
Created a grid system with multiple breakpoints (Base, Medium, and 2XL) to ensure seamless adaptability across different screen sizes. This structure helped maintain proportion, alignment, and usability across desktop and mobile experiences.
4. Typography Tokens
Standardized font styles by implementing typography tokens for size, weight, line height, and letter spacing. Inter and Source Serif 4 were chosen for their readability and modern aesthetic, ensuring consistency across the platform.
5. Color Palette
Developed a structured color palette, grouping tones into neutral, primary, action-based, and complementary colors. This system improved accessibility, readability, and brand consistency while adhering to WCAG guidelines for contrast and usability.
6. Component Library
Reusable components such as buttons, input fields, cards, and navigation bars were designed and documented. Each component was tested for accessibility, responsiveness, and adaptability to ensure compatibility across all use cases and platforms.
7. Prototyping & Validation
Built a system of reusable components, including buttons, cards, input fields, and navigation elements. Each component was tested for accessibility, responsiveness, and adaptability, reducing redundant work for designers and developers.
8. Documentation & Implementation
Rolled out the new design system across key InfoMoney pages, starting with high-impact areas like the homepage. A comprehensive documentation hub was created to guide teams, ensuring consistency and alignment across design and development workflows.
Conclusion
_InfoMoney Design System has revolutionized digital product development into the company, enhancing efficiency, alignment, and innovation.
_With reusable components and scalable practices, it reduced redundancy, streamlined workflows, and accelerated iterations while ensuring design consistency.
_As an evolving system, it adapts to InfoMoney’s needs, keeping the brand flexible and future-ready.
_Next steps include implementing dark mode and expanding components as new pages transition to the system.
bottom of page