My Role:
UX Design, Front-End Development

Jenzabar

UI Component Design & Pattern Library

Jenzabar is an enterprise software company for higher education with a lot of experience in their space and that's exhibited by a solid product. That being said, various business stakeholders and the UX team realized that there was a strong need to rebuild the product's modules to be responsive and accessible. 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 user 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.
- Build components in a modular way that allows for developers to "grab and go" the code that they need. This improves consistency in code as well as an increase in efficiency. This is classic "business needs meeting good design."

The Outcome:
- With that motivation, these new, or reworked, components contain proper semantic 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. Ensure Story Satisfaction & Deliver to developers

Jenzabar Style Guide page about color palettes
Style Guide typography for Jenzabar project
showing examples from Style Guide pages for Jenzabar project
Jenzabar systems design of a style guide
Jenzabar software UI design of an alert bar
responsive design of a user alert being shown on phone
example of responsive form design for Jenzabar

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