Introduction
I had the opportunity to work on updating the UI design of a web app for a small startup in 2019. The goal of the application was to solve the accreditation crisis that was hitting colleges and universities across the US.
Schools were being assessed and put on probation due to their inability to prove compliance with the accrediting board's Standards. This SaaS company's cloud-based platform created an accessible view of a school’s overall program performance—all the way down to the individual student level.
The inability of schools to leverage their existing student data to create a narrative that was digestible to the accrediting boards was causing schools to lose their accreditation status, leading to a waste of time and money for students who attended these programs. "Since 2017, this San Antonio-based technology startup company has been effectively utilizing data for measuring, evaluating, and improving academic performance."
Role and Responsibility
To complete this web app prototype, I worked as the UX designer and Junior UI designer, creating the digital wireframes, along with any clickable prototypes to be passed off to the Senior UI Designer.
Tools Used
•Adobe Illustrator
• Figma
• Adobe XD
Problem
Through the conduction of user interviews with some existing "super users" of the SaaS platform, I discovered that the most common complaints were that of confusing labeling and an ineffective user flow to create a report. They were also experiencing difficulty getting faculty to use the platform. Most individuals said the process for creating a report to submit as evidence of progress on their action plan was confusing. They would click on the Reports page from the main navigation, only to realize that they needed to navigate to the Action Plans page.
Solution
We decided to implement a "quick report" feature into the Reports page to solve this issue, enabling the user to create a report using either the current method (on the Action Plans page) or the new feature. We also implemented some "gamified/fun" elements to the platform, such as a fun graphic on the login and customizing your profile to increase engagement.
Style Guide
I created a style guide for the company to be used for the UI of their cloud-based platform. Ask for visuals.
High Fidelity Wireframes
I created wireframes for the company to use in the front-end development of their cloud-based platform's UI. Ask for visuals
Clickable Prototype