top of page

Modals, Messages & UI
Create a consistent style and interaction for modal windows, messages, header and subnavigation.
My Role & Activities
UX Lead | UI audit, sketching, wireframing, high-fidelity comps.
Problem
The KWT app had grown organically over the years and lacked a consistent look and feel.
Solutions
-
Conducted an interface audit, targeting modal windows, system messages and the accompanying components, e.g. buttons, tabs, etc.
-
Sketched/wireframed a few possible templates and reviewed with product owner and business analyst to ensure all scenarios where covered.
-
Designed high-fidelity comps using Sketch. This was also an opportunity to tweak the existing styles, add new ones and document the decisions as part of a larger effort to create a cohesive design system.
Project Artifacts
![]() Screen Shot 2018-02-18 at 2.26.49 PM | ![]() Screen Shot 2018-02-18 at 2.27.07 PM | ![]() Screen Shot 2018-02-18 at 12.30.40 PM | ![]() screencapture-projects-invisionapp-d-main-1518975012888 | ![]() Assessments |
|---|---|---|---|---|
![]() Assessments-expanded | ![]() Modal - invite users | ![]() Screen Shot 2018-02-18 at 12.31.04 PM | ![]() Modal - class settings | ![]() Modal - invite users educator |
![]() Modal - add student | ![]() Modal - create new class | ![]() Screen Shot 2018-02-18 at 12.28.33 PM | ![]() Screen Shot 2018-02-18 at 12.28.48 PM | ![]() Messages |
![]() actions | ![]() Error Success Messages_2x | ![]() Screen Shot 2018-02-18 at 12.27.32 PM | ![]() Screen Shot 2018-02-18 at 12.27.10 PM | ![]() +LI Manager Mode_2x |
![]() App Overlay_2x | ![]() +LI Manager Mode Class List Details_2x | ![]() UI Option 2_2x |
bottom of page






















