My Role
Design System
Company
Stratio BD
Industry
Big Data
Year
2024
Stratio is a company that specialises in harnessing the power of big data and advanced analytics but, after 7 years of launching functionality, the design team did not yet have a way to create unified charts.
Key reasons why we identified the need for a Data Visualization Design System within Stratio:
Increasing complexity of data
As Stratio grew, so did the complexity of the data we needed to visualise, requiring a standardised approach to improve clarity and consistency.
Lack of consistency
Existing data visualizations lacked consistency, leading to disjointed and confusing user experiences.
Inefficient workflows
Without a standardized approach, designers and developers faced inefficiencies in creating and implementing data visualizations.
Competitive landscape
In a competitive market, the ability to effectively visualize and interpret data is crucial for informed decision-making and strategic planning.
We began by conducting extensive research into existing data visualization practices and frameworks to understand industry standards and user expectations.
Analysis of our own products' data visualization elements helped identify pain points and areas for improvement.
Based on our research findings and product requirements, we defined a set of design principles to guide the development of our data visualization design system.
These principles focused on clarity, consistency, accessibility, and scalability to ensure that our design system met the needs of both users and stakeholders.
Typography
For the all the brand actions we use the font family Stratio.
Stratio is a typeface specially designed for user interfaces with a focus on high legibility of small-to-medium sized text on computer screens.
Color palette
We defined four distinct color palettes to help the design team effectively convey information: Sequential Monochromatic, Sequential Diverging, Categorical, and Meaning.
Accesibility
Stratio Charts Design colour palettes comply with accessibility standards.
This commitment to accessibility ensures that our design system can be used effectively by people of all abilities, including those with colour vision impairments.
Using our defined design principles as a foundation, we began designing the individual components of our data visualization system.
Iterative design sessions and feedback loops ensured that each component met usability standards and aligned with our overall design vision.
In this video, you can see how our design system works, including selecting different graphics, scaling components and more.
