Filo.ds Design System

Filo.news

About the product

Filo News is a digital news platform focused on delivering timely and relevant content. The goal was to develop a design system that not only addressed the communication needs of the platform but also provided flexibility for various sections while maintaining a modern and engaging appearance for its audience.

My contributions

In this academic project, as a UX/UI designer, my objective was to understand and develop a scalable and maintainable design system. I conducted a thorough review of existing components, mapped out the product's needs, and structured the design proposal based on atomic design principles. Additionally, I handled the documentation and handoff of the design, ensuring that the system was clear and useful for future implementations.

The development of the design system was divided into the following phases:

Phase 1: Concept Development

In this phase, I defined the objectives and scope of the design system for Filo News. I conducted extensive research to understand communication needs and audience expectations, ensuring that the proposed system was adaptable and aligned with the platform's goals.

Phase 2: Design and Iteration

I designed and iterated the design system using atomic design principles. This involved evaluating key elements such as typography, font weights and hierarchies, colors, and layout. I mapped out different states of components, conducted readability and accessibility tests, and adjusted components with real content and composite screens to optimize their functionality and appearance.

Phase 3: Documentation and Handoff

The final phase focused on documenting the design system and ensuring a smooth transition to development. The outcome was a robust and well-documented design system aimed at enhancing visual communication and flexibility across different sections of Filo News, providing a consistent and engaging experience for users.

Phase 1: Concept Development

Phase 2: Design and Iteration

Phase 3: Documentation and Handoff

Curious to learn more?🔎