UX Design, Front-End Development
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.
- 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."
- 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.
1. Review User Story
2. Sketch & Wireframe
3. High-fidelity Mockups
4. Build Front-End and Write Documentation
5. Test and Iterate
All content © Daniel Bivins, 2018, unless otherwise noted.