Making data usable
Making data usable
CLIENT
Iberdrola Spain
TEAM
3 UX Designers, 3 Design Leads, 1 Product Owner
PROCESS
Usability, Benchmarking, Ideation, Tokenization
TIME FRAME
1 month
Garaje de Ideas for Iberdrola
Despite having many types of Charts across all platforms within its ecosystem, Iberdrola had wanted charts standardized, componetized, and well-documented withing its Design System.
As a UX Designer, I was part of a team formed by 3 UX designers, tasked with the job to integrate these charts into the existing Design System, ensuring consistency, usability, and accessibility across all platforms.
Variety is the spice of Charts.
Once the project kickstarted, we began by collecting and auditing the existing Charts within the application. This revealed multiple scenarios that needed representation, but also highlighted opportunities for optimization. By reducing the number of components, we aimed to streamline the work for designers and developers alike, enhancing both design homogeneity and programming ease.
From the ground up.
The next step became creating from scratch a specific library, grounded in foundational elements like colors, typographic scales, borders, and spacings specifically designed to fit the requirements of charts. Usability and accessibility became key pillars to carry out this job.
Componetization for success.
Using the full power of Figma’s variables, we crafted chart components using design tokens, ensuring each was detailed and optimized for use. Each component was built with flexibility and ease of development in mind.
This means that careful steps were taken as a team to ensure designers would receive flexible, easy to use chart components adapted to pretty much any scenario, and developers would be able to implement them into the app straightforwardly.
Future-proof documentation.
Documentation in a design system ensures consistency, clarity, and efficiency by providing a clear reference for all teams. It aligns designers and developers, reduces ambiguity, and streamlines updates, making it easier to maintain a cohesive user experience across products.
For this reason, we created guidelines for each Chart type, outlining content rules, do’s and don’ts, and included examples of variants along with usage instructions. At the same time, we also provided developers with detailed specs such as measurements, spacings and tokens to facilitate implementation in code.
Action speaks louder than Charts.
This project significantly expanded the possibilities for designers to seamlessly implement charts in their work, providing a powerful tool to visually communicate complex data. To see a real example where the full power of Charts was applied, please check out the case study on Aerothermal product design.
Conclusion
This project not only unified all charts design across the application but also significantly improved the efficiency of both design and development processes. By introducing standardized, accessible, and well-documented components, we’ve set a new standard for Charts to come.
What I've learned
This task really stood out to me to showcase the full power of a well-thought-out design system. It’s not just about creating components, but also ensuring they are optimized for both designers and developers, saving time and money in the process.
Other projects
SUGOI App – Entrepreneurship
Iberdrola – Product Design
