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.
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.
A simple structure had already been built — 2 window panes, that could either be filled with a ‘tree’ style menu system or some analytics:
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.
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.
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.
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
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).
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.
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.
‘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 and ‘suggested’ data-sets
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!
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: