Institutional Dashboard

The Challenge

While at Vitalsource, the company created an extensive analytics platform with statistics to help a variety of users. Instructors were given a platform to view analytics associated with their students, but the need for a larger view for administrators became apparent. The main focus was to have a platform that allowed administrators, or department chairs a quick glance and how their instructors and courses were performing.

My role: Brainstorming, whiteboarding, design thinking, ux research, iteration
My deliverables: Responsive wireframes, workflow prototypes, feature prototypes, component library



We walked through various design solutions and checked them with business goals before decided on a solution that catered to useful experience, as well as providing information that we as a company wanted to be providing. Since another analytics dashboard had been built, we were taking existing functionalities in some cases and fitting it in to this new experience.



Working through the iteration part of this experience was challenging. Since we had no actual user feedback, we were making a lot of assumptions. Diving further in to the design process, the need for a complex and simple filtering system was realized. We were also running in to inconsistencies with the new designs and the existing designs that were already in production.

Complex Features


A design challenge that came to light after the initial pages were laid out was how to filter through what could be thousands of course cards. This was a great opportunity to step out a complex filtering system for the dashboard, to cater for various types of input, multi and single select capabilities, all in a intuitive experience.

Since this entire experience is responsive, taking mobile in to consideration through out the design iterations was imperative. The final solution ended up being malleable enough to scale to multiple products, with various goals.

Component Library


As a direct result of the new dashboard that our team designed, merging with existing features, it was apparent that not all of the UI was consistent through out the entire experience. No matter if the user were an instructor or an administrator, we wanted the experience to be learnable, and consistent through out the entire breadth of the product. This prompted us to develop a React component library, that was mutually beneficial for developers and designers. I began by doing an UI audit, seeing how many different styles of the search bar we had, figuring out what design language we wanted to use for tooltips, etc. Then I complied the direction in to a library for designers to reference when creating new screens for this product, as well as specs for developers to pull while creating new components.


Templates, components, basics and principles were broken down in to styles and language that could be followed for all feature updates moving forward in to an easily digestable and understandable document for reference. We started off with the traditional atomic design framework, but ended flipping it to start with the larger structures. We found that it better fit our framework, and was easier to socialize.