Design projects • • • Spire

Spire

Spire is a learning management platform that helps higher education institutions create competency-based learning programs, and supports instructors who wish to use gameful instruction in their classrooms.

I worked on Spire during my time at the University of Michigan’s Center for Academic Innovation. As lead designer on this project, I was in charge of:

Over 2 years, I also:

Because Spire is the rebranded evolution of GradeCraft, I also worked on translating the new brand identity across existing features.

new Spire brand logo
overview of the new Spire brand design library

I used Adobe XD to create a shared design library resource.

Spire userflow diagram

Initial userflow map I created for instructor and student audiences.

Application

Some examples of the design system at work, and how it comes together in the Spire platform.

Spire planner feature in laptop mockup

Public-facing sign up and login pages.

Walkthrough demo of a program participant-facing feature.

Brand Guidelines

A preview of some sections from the design library resource I developed. Because I was in charge of the front-end HTML and stylesheets, the usage guidelines for many of these design elements also include usage notes for the code, such as SASS color variables and HTML class names.

Spire brand guidelines for logo Spire brand guidelines for color palette Spire brand guidelines for typography Spire brand guidelines for icons and buttons Spire brand guidelines for card panels Spire brand guidelines for tables