gloo | Assessment UI
role: design lead // hours: 40 // results: optimized file system and UI
01 | The problem
Gloo’s assessments application allows organizations to send out pre-configured, scientifically validated assessments to their members, clients, or congregants. User’s select an Assessment from their library, configure options, share out links to take the Assessment, then view the results as they roll in. The director of UX approached me with a project to improve the experience by solving for the below tasks:
- Refresh the visual design and assure that it is consistent, coherent, and aesthetically pleasing.
- Help maintain the brand’s visual strengths in the interface while maintaining best practices in UX.
- Solidify the look & feel by promoting meaningful depth, information hierarchy, colors, and font weights.
- Help provide a better “narrative” to the design, as described in Gloo’s Design Principles.
- Teach the internal team best practices in how to organize and name screens, artboards, layers, and symbols.
02 | My Process
When teaching the team best practice for files organization and component and symbol creation I shared my changelog and walked through each step.
Changelog:
- Rename File and layers
- Adjust layout and grid for 1440 desktop size, newer standard.
- The top utilized desktop size in 2020 is 1366 then 1440 then 1280 - Cleaned up text styles, utilized ideal sans, Montserrat based off style guide. Opens sans is very common, ideal sans gives a little more flair.
- Created symbols for items that would be used within the design system/style in the future.
- Icons, Buttons, Cards, navigation - Reorganized the Detail view page to keep the user focused on the task at hand.
- Updated navigation colors and icon to work within the assumed persona/customer demographic and have the icon tie into the action
- Brightened up the styling on the cards to make them more readable and give them color differentiation, made the NEW stand out.
- Brought in more of card styling
03 | The Result
After reviewing heat maps, interactions and some rage click behavior in Quantum I revised the assessment flow and created a clearer design component for assessment cards, buttons, consistent typography with a clear hierarchy and reorganized the data visualization of the dashboards. There was a good deal of superfluous information that the user was not engaging with and some components caused confusion. These changes were tailored to what their users engaged with for imperative data. I also included a stretch design to tie in some of the geometric and bold elements of their style guide.
