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