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:
- Designing the platform’s UI for all audiences—course instructors and students & program admin and participants
- Advising on all user experiences and best design practices
- Leading a small team of student interns
Over 2 years, I also:
- Developed a new brand identity and design system
- Coordinated with our UX research team
- Designed visual prototypes and assets
- Actively implemented front-end code (HTML/SASS/CSS) to build my designs with the software development team
Because Spire is the rebranded evolution of GradeCraft, I also worked on translating the new brand identity across existing features.
![new Spire brand logo](../projects/spire/images/brand-spire_logo.jpg)
![overview of the new Spire brand design library](../projects/spire/images/brand-design_library_snapshot.png)
I used Adobe XD to create a shared design library resource.
![Spire userflow diagram](../projects/spire/images/Spire--userflow.jpg)
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](../projects/spire/images/application-all_opportunities.jpg)
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](../projects/spire/images/brand-library_logo.jpg)
![Spire brand guidelines for color palette](../projects/spire/images/brand-library_colors.jpg)
![Spire brand guidelines for typography](../projects/spire/images/brand-library_typography.jpg)
![Spire brand guidelines for icons and buttons](../projects/spire/images/brand-library_icons_buttons.jpg)
![Spire brand guidelines for card panels](../projects/spire/images/brand-library_participant_cards.jpg)
![Spire brand guidelines for tables](../projects/spire/images/brand-library_tables.jpg)