My Role:
UX Design, UI Development

UI Component Design

Jenzabar is an enterprise software company for for higher education. I worked with a small team to create a 100+ component pattern library and design system over several months. 

The Challenge:
- Utilizing user stories and competitive research, the goal was to not just to build components but to build the right components needed for each story.
- A major issue that Jenzabar is working to overcome is updating design and code to meet WCAG 2.0 and AA accessibility standards to improve the experience for its users.

The Outcome:
- With that motivation, these new, or reworked, components contain proper structure and ARIA tags, ensuring users could navigate via screenreader or keyboard. Creating this solid foundation for the software to meet accessibility guidelines while improving the experience for sighted users not only helps to meet business goals but is also just good design.
- In the end, we drastically improved the time it takes to ship code by building out these components and making them reusable for developers. Below are several mockups of the UI component designs and pages from the style guide I created for Jenzabar.

 

Process

1. Review User Story

2. Sketch & Wireframe

3. High-fidelity Mockups

4. Prototype

5. Build Front-End
& Test

6. Meet with and deliver to developers

Jenzabar software UI design of an alert bar
Screen Shot 2018-03-14 at 12.45.19 PM
Screen Shot 2018-03-14 at 12.52.16 PM
Jenzabar systems design of a style guide
showing examples from Style Guide pages
showing examples from Style Guide pages
showing examples from Style Guide pages

All content © Daniel Bivins, 2018, unless otherwise noted.