UI/UX

Professional CSS

I have been styling with Cascading Style Sheets (CSS) for nearly two decades now. Nonetheless, CSS is one aspect of digital design that requires periodic professional development to stay abreast of changes. Below are two academic projects that illustrate several best practices in CSS in 2022. The projects use or contain:

• Layout with Flexbox and/or CSS Grid

• Block Element Modifier (BEM) syntax

• Custom CSS Reset for page normalization across browsers

• REM font sizing for page scalability and accessibility

• Controlled animations and other effects for interest and learnability

• Media queries for responsive layout changes

Customizable UIs

Software as a Service (SaaS) introduces UIs into an organization that often require customization. Local users of the software need access to the most relevant content. Such was the case when Northwestern acquired the Saba Learning Management System. The out-of-the-box interface offered little; it did not surface the content and features that were considered important.

While Saba's support for custom design was limited to HTML tables and inline styles, I nonetheless made it work with the design below. Not shown are custom interior pages that display the content or initiate a task.

To arrive at the 3 categories (Learning, Performance, Career) and the 9 tasks and topics, I partnered with the Product Owner and colleagues in HR to understand their priorities. To arrive at a final design, I first conducted cognitive walkthroughs with colleagues using sketched wireframes, and then conducted scenario-based usability tests of a prototype with 7 volunteers.