STUDIO | WE ARE ROYALE

CATEGORIES | UI DESIGN, MOBILE & WEB DESIGN, INFOGRAPHIC, DATA VISUALIZATION, ICONS

 

DATA NARRATIVES

Grainger is a company dedicated to giving the right tools and information to those that need it most. With that dedication, the goal was to provide a collection of interactive data visualizations in order to educate the core audience. The tool would explore hidden metrics and stories often only uncovered through well thought-out charts and graphs. I designed the UI for the interactive data based off of the OHSA Top 10 and came up with several explorations. Ultimately, we wanted to elevate the charts and graphs into a clean and sophisticated voice in order to communicate information simply but effectively.

Grainger_02.jpg
 
 

 

STYLE EXPLORATIONs

The first steps of the design process was exploring the tone of the data narratives. These designs were preliminary and meant to start a conversation about the look and feel. Thin or bold and minimal or complex, were attributes we focused on. We started out with designs in a classic print format and then adjusted them for a digital medium. 

 

FROM DARK TO LIGHT |

 

THE DONUT CHART VARIATIONS |

Grainger_a.jpg
 
 

 

ICONS

Icons were used to represent the different types of data. 

 
 
 

 

DIGITAL INTERACTION

Preliminary designs were evolved into digital formats. During this process, we experimented with colors and layouts of the UI.

 

ILLNESS AND INJURY BY PART OF BODY |

 

ILLNESS AND INJURY BY SOURCE |

Grainger_05a.jpg
 

DAYS AWAY FROM WORK BY SOURCE |

Grainger_06a.jpg
 

TOP 10 CITATIONS OVER TIME |

Grainger_07.jpg
 

INCIDENCE RATE BY BUSINESS SIZE |

Grainger_08b.jpg
 

FALLS BY SOURCE |

 

WORKPLACE SAFETY OVERVIEW |

Grainger_10.jpg
 

TIME OF DAY WHEN INJURIES HAPPEN |

 

MAP OF TOP FINE PER STATE |

Grainger_12a.jpg
 
 

 

VIEW INTERACTIVE SITE