UI Components

A new UI system for Versal to replace our outdated and disjointed system. The main goals for the redesign were to bring consistency to frequently used patterns, to refresh the aesthetic, and to eliminate as much confusion as possible for our feature-heavy app.

Addressing User Frustrations

Nested actions were the biggest pain points for our users. Previously we were hiding dropdown menus directly within buttons - which did not operate the way a user would expect them to. This refreshed design directly addresses that problem by visually separating the primary action button from the dropdown menus (as in the "Publish course" example).

Organizing a Stronger Hierarchy 

All Versal gadgets use the same 'Options Panel' to allow users to customize settings. These settings can include 'Passing percentages' for Quizzes, time limits, pass/fail controls and more.