INDIANA UNIVERSITY2019-09-07T17:23:19-04:00

Project Description

Rivet Design System

Rivet is a newly launched design system by Indiana University.

Rivet was created to give designers across each of the nine IU campuses across the state of Indiana a method with which to brand the systems and products that they create accurately, each reflecting IU’s overall styling guidelines. Before Rivet was created, an issue was present where products that came from separate IU campuses did not look affiliated with one another, and were not using the same design and branding guidelines as one another. This, combined with the overall need for a cohesive branding strategy in place for Indiana University, made it apparent that a design system needed to be put in place and shared among the designers and developers located on each IU campus. Each IU campus is listed below:

The task of creating this design system rested with Indiana University Bloomington, the main IU campus located in Bloomington, Indiana. A tight-knit team of UX designers, architects, and accessibility analysts began creating Rivet in fall of 2017. I was part of that team, and we ultimately created, conceptualized, and launched a beta of Rivet within the first quarter of 2018, just a few months later.

A Rivet beta was launched before our initial full release to give faculty and staff across each IU campus a first look at the assets, features, and structures present in the design system. From there, we began collecting feedback, comments, and suggestions, and iterating on each asset and feature present in Rivet. The initial beta featured very few elements and features, but after it’s launch, we began working to ensure that Rivet was being updated with planned features, bug fixes, patches, and other tools on a quarterly basis. Each of these iterations eventually lead up to our first full launch of Rivet V1.0, which also occurred within the first quarter of 2018. From there, our iterative process continued, and more components, assets, and bug fixes were implemented on a quarterly basis.

As part of the many products that followed the launch of Rivet, I created a set of Prototyping Kits based on the UI components that I developed for the design system. These kits would allow designers to prototype applications using Rivet’s styling features, from any IU campus, and they were created on multiple platforms for ease of use, allowing designers to choose the software they would prefer to prototype within – Axure, Figma, Adobe XD, or Sketch.

All UI Kits, as well as the entire Rivet design system, full functional documentation, HTML, CSS, and JavaScript snippets and fragments, and fully documented use cases categorized by “Beta”, “Alpha”, and “Ready” assets are available for download on the Rivet Components website.

The following images show each asset and component created for Rivet. Images are taken from the Figma UI Kit, which is available for download on the Rivet Component Website (link above).

Bursar Redesign

As part of the many concepts that followed the launch of Rivet, I created a set of design examples to include on the Rivet website as we built it up to it’s official 1.0 release.

One of the main issues that we noticed after initially launching Rivet was that many departments without designers weren’t able to really conceptualize a design layout, structure, or interface themselves, and would continuously ask our department what they could do with Rivet. We were asked by staff and faculty to create very specific design examples of systems or websites that focused on assisting a specific department with an issue that they were experiencing (i.e. create an appointment management system for the IUC Counseling School of Ed that allowed for the creation and management of student appointments), but we wanted to make sure that we were creating design examples that were intended to be used as templates and design inspiration for everyone, including those unfamiliar with design. This meant that we needed to stray away from designing systems with very specific purposes, and focus on designing systems that were more widely used and recognized by a wide variety of users. We wanted to focus on products that were common regardless of what campus you were on, or what department you were in. These templates can be accessed on Rivet’s Components website, and available for download if desired.

After narrowing down to a list of platforms and systems that would be excellent candidates for a redesign (i.e. common across each campus, dated/in need of an update, and widely used by students, staff, or faculty alike), I began redesigning many applications used throughout Indiana University with Rivet. The most used system from this list was the Bursar website.

The bursar website is predominantly where students, faculty, and staff go to view, manage, and make payments to their tuition statements from semester to semester. The old site had not been updated since 2006, and although it did have the IU logo, it did not look affiliated with IU in any other way. I decided to move forward with this redesign to give an example of what a design could look like on a commonly used, widely-recognized website with confidence that any individual on any IU campus would be aware of what the site was, and what they would use it for. This allowed designers, faculty, and staff to tie this new design example to existing functionality that they were already familiar with, while also providing them with a helpful template that showed what was possible with Rivet.

The process started by conducting research with students and staff about their thoughts on the current Bursar application. After analyzing the data gathered, I moved into redesigning the existing platform. One of the biggest complaints from users was the many pages associated with the current system, and nearly 95% of users stated that they would prefer a dashboard or “hub” with all of the information they need.

Ironically, after completing this Bursar redesign as an example of what could be created with Rivet, my design was implemented and is now live on One.iu.edu.

Below are examples of the Bursar website, before & after my redesign.

Old IU Bursar website designAfter redesign using Rivet

View More

2019-11-06T01:05:21-05:00

UI DESIGNS

A collection of UI Design concepts. This collection will be filled with more UI Designs on a weekly basis.

2019-03-28T10:38:10-04:00

CARE+

Healthcare maintenance application for the sick, elderly, and their caregivers