Published: Dec. 16, 2016 By ,

The Concept

The vision for Analytics 360 is to create an integrated platform for exploring and analysing University data. The aim is for it to be accessible enough for anyone to get involved, but adaptable enough for department specialists to be able to really dig into the information. We hope to be able to include every database across campus, and create a platform that is so compelling, University staff ditch their old workflows and happily get involved!

How We Started

Concept and Initial Interviews

The need has been building at Colorado University to create a new way to deal with the immense amounts of financial and administrational data being generated. Databases are currently siloed, and workflows across campus are currently complex and limited in their scope.

Raza Dawood kicked off the initial discussions with a cross-department meeting to outline a future vision for the project. Initial interviews with Principal Investigators were then conducted by Gwen Evans and her team to establish their needs and the types of data they handle on a daily basis. 

Green-Field Development

As a designer, creating a new platform from scratch is always really exciting. Raza and our distributed team had already created a whole back-end for the system by the time I got on board, but no work had been done on the visual side, so we had a very open playing field.

Interaction patterns

A simple structure had already been built — 2 window panes, that could either be filled with a ‘tree’ style menu system or some analytics:

Screenshot of the initial startup page for Analytics 360

The first I saw of the new platform.

Although I really liked the simplicity of this layout, and the ‘2-pane’ view, I wanted to get back to basics here and explore further, so I began working on paper to sketch out some rough ideas.

Sketches made by Bill trying out different looks for the dashboards 

Sketches made by Bill trying out different looks for the dashboards

  Sketches made by Bill trying out different looks for the dashboards

This was a quick process — after batting some ideas around for a day, we were able to settle on a vision and start designing at a higher fidelity. 

Mid-fidelity wireframes

Sketched prototypes are all very well, but to really start testing layout and ‘copy’ (in-app text) you need to go up a level of fidelity. Using an online app called Realtimeboard, we were able to collaborate on ideas directly.

One of our key goals is ease-of-use and familiarity, so we settled on some design patterns that will be well-known to our users, like ‘windows’, and a ‘Start menu’ / ‘Taskbar’ style interface.

 

 

 

Visual design

I began by reviewing the existing designs on the university site. The current scheme is very simple, a few colors and a web-standard typeface — so we didn’t have too many restrictions to begin with. 

For graphing, we were going to need a few more colors, so I built out a new secondary palette that would align nicely with the existing set, inspired by some of the existing Colorado University photography.

Palette & inspiration Palette & inspiration

Palette & inspiration

Moodboard

To flesh out a visual direction, I also built a ‘moodboard’ of ideas from a variety of areas — my previous work, inspirational user interfaces, and ideas we might steal directly. (Link at the end).

 Paris Metro in circles

 The Martian Film User Interface.

Moodboard examples. Top: Paris Metro in circles. Bottom: The Martian Film User Interface.

Next, using a few elements from a user interface template, I created some initial test designs for a login screen and ‘home’ environment — with the Flatiron mountains in the background.

Login screens

Login screens

Work in Progress

User-Centred Design Process

Now that we have established a basic structure for the application, our design process will be centred around our target users. Building on our initial interviews with Principal Investigators, we will be running regular usability testing sessions to make sure that we are on track to meet their needs. 

A Flexible Dashboard System

We are aiming to build a flexible, ‘atomic’ dashboard structure, so that users can begin with templates, create exactly the view they need, and save it for easy access. 

Sample home page for Analytics 360 

An informational panel within Analytics 360

Favorites sidebar for Analytics 360

‘Home’, an information panel, and a ‘Favorites’ side-bar

The ‘Wikipedia’ Effect

We also hope to make the data across campus easily accessible and ‘connected’ — so that relationships between different data-sets are easily exposed and simple to follow. To this end we are experimenting with ‘Suggested’ or related data-sets, that will help users find the connections and gain new insights.

Navigation experiments 

Navigation experiments

 'suggested’ data-sets

Navigation experiments and ‘suggested’ data-sets

Next Steps

We are now moving to the stage where we can get a live version of the site up for development and testing across our team of developers and designers. This will both accelerate development, and allow us to make sure that the product we are designing is the product that we deliver.

We’d love to hear your thoughts on our progress so far, and your hopes for the platform!

Links

Moodboard for the project: https://projects.invisionapp.com/boards/9Y2X475SFA7ZE/

User interface template: https://www.invisionapp.com/now

One last thing

I’ll leave you with this awesome data visualization we discovered. Because Queen:

Queen visualization using Tableau

Source: https://public.tableau.com/en-us/s/gallery/analysis-queen