This was an ambitious project for me which had a lot of ambiguity until we had a successful MVP version out within a span of short 4 months. The project had a talented mixed bag of researchers, interaction designer, information designer, communication designer and of course experts from the analytics team. As a team we brought expertise from various streams together to understand and execute a tailor-made design system for the organisation.
My contribution came into the interaction and information design discipline majorly. We had an agile working process with a laid out scope to divide and conquer along with our daily brainstorming sessions as a team. Fractal as an analytics company is a powerhouse which produces analytical reports/products for B2B clients like P&G, MARS, Google and other fortune 500 companies. There was a need for a standardisation of the dashboards created in different accounts and along with democratisation and the need for a design thinking in every problem solving.
Behaviour Architecture Toolkit
What is a BA toolkit?
It is an approach to understanding the problem from an end user's point of view. You can use the toolkit during discovery to understand the emotional needs of your users alongside data, domain, business and technology needs. This toolkit can be used by anyone doing discovery with users including consultants, designers, engineers and data scientists.
A glimpse into the toolkit
Component Library
What is Component Library for?
These are reusable User Interface elements that can be used to design any application. They help build simple, intuitive and consistent experiences. The stencils are designed using Figma and therefore can be used by multiple people across the organisation to share and co-create applications.
To end up with the MVP we started with a design audit. Collected multiple dashboards from different accounts close to 100 dashboard screens and retrospected every element and created a laundry list of all the UI elements and charts used with reasoning. We then inspected other Design Systems available (eg; Carbon, Material UI etc) to create a secondary list and compared together to see the difference and found out a pattern in usage and need.
We then started ideating for the structure of the Component Library i.e., grids, colors, fonts, UI components, charts before we started digging deep and detailing out every element. With a minimal and easy to adopt approach for different accounts we started creating the minimal stencils needed for each branch of the library.
These stencils can be used for brainstorming ideas for new applications, wireframe or prototype solutions to share and get feedback from end users/clients. These can be used to create high-fidelity mockups to share with engineering team and have a library of components created using codes in the backend for easy development.
Collection of dashbaords
Chart family types
UI Family from other DS
Exhaustive list of Charts
Exhaustive list of Components
A glimpse into the library
Components
These are reusable user interface elements commonly used in analytical applications. These include simple controls like buttons, check boxes, search bar and tabs. Plus complex components such as filter region, navigation region, header region and others.
Charts & Tables
These are reusable data visualisation components that includes bar, line, area and circular charts, KPIs and tables.
Communication Design Templates
What is a Communication Design Template?
Presentations are a fact of life for any business.
A well-designed presentation tells a story, influences people and makes information easier to digest. Presentation decks are an extension of the brand. Presentation templates ensures consistency and creates a strong brand value for Fractal.
The templates are designed to be used at any stage to make pitches and proposals to clients and to share milestones and deliverables during the project.
A glimpse into the template
Font
Phi design system uses Open Sans - a beautiful well-defined font that scales across all device sizes. It is compatible with Windows and Mac systems. The font sizes that you can use in your corporate communication have been chosen carefully following the principles of Golden Ratio.
Color
Color evokes feelings. Color draws attention. Color has meaning. Therefore color must be used carefully. For example, the fractal-yellow is a color of optimism, imagination and creativity and is used primarily to evoke that feeling. Whereas the fractal-red is used to alert and must be used occasionally.
Grid
Grid helps to organize the content on a page and create a visual balance. It improves readability of content. Well designed things from architecture to logos follow a grid system. We have decided a well thought grid system for different screen sizes across different platforms.
Information Design Guide
Why the Information Design Guide?
Helps you with a starting point for making informative and meaningful data visualisation. It brings together the fundamentals of creating a chart, the process to choose and effective chart and things to care for when presenting the information.
To ensure the information is clear and insightful, it needs to be designed keeping in mind the principles of visual perception, context and reader needs. This guide aims to help you take decisions for identifying chart types that suits your data and ideas best. It also provides a list of principles to help understand the nuances of data visualization and to present your information in the an effective manner.
This guide can be a companion when creating data visualizations. It will assist us in making the right choices in a given context, and will help us avoid common pitfalls.
A glimpse into the guide
Setting Context
There is a need to understand the context in which the reader is operating. Once we discern which information the reader needs; and once we understand the context, we can discern how best to present that information to them.
For example, when one wants to check the body temperature, they will use a clinical thermometer; a laboratory thermometer will be ineffective for this purpose as shown in the guide with a context.
Understanding a chart
A chart is plotted when we encode the data into the attributes of a shape, for e.g.: Length, Position, Area, etc. These are two-dimensional shapes since we operate on a two-dimensional plane. This plane (basically a flat surface) is where we create our charts.
Choosing a chart
There are no graphic forms that are intrinsically good or bad but graphic forms that are more or less effective. So, how do we determine whether we have chosen a right chart? When is it appropriate to use a bar chart, a line chart, a donut, or a flow diagram?
Presenting a chart
When we present a chart, it is not only important to show the correct information but also to show the correct understanding of that information. How do we ensure, that we are representing the information correctly?
This is just the compilation of the work which was executed for the MVP. The detailed processes and the actionable decisions for the Design System contained client data and hence could not be displayed here. However this could be discussed offline.
