Leann Manning
  • Design Leader
  • UX Research
  • UX Design

Design System

A significant part of creating a fantastic user experience is consistency. Consistency may seem trivial, but reducing the cognitive load on users makes the experience appear seamless and easy. Creating a consistent user experience means all designers and developers must work from a design system. I have designed, contributed, and even developed design systems. Design systems can seem like a big undertaking, but if the organization can start with the basics, these will quickly become important in the design and development lifecycle.

Style Component Anatomy
Style Component Layout
Style Guide Variations
Style Kit

Accessibility and Internationalization

Inclusive design is no longer a nice to have for organizations. Accessible websites are quickly becoming a standard and mandate in many places.

Any organization planning to do business in global markets needs to consider internationalization. Internationalization goes beyond just translations of text. It could mean adjusting your site to accommodate right-to-left languages and localizing content so it is relevant to the area.

WCAG Color Guidance
WCAG Color Guidance
Screen Reader Customization
Alt Text Customization and Localization
Translation Example
Right to Left Translation

Communicating Design Specifications

Communication is vital to the success of any project. I don't believe in designers throwing things over the wall to developers. Product managers, UX designers, and developers must constantly communicate on projects. It is vital that the team determines how they wish to perform the work and find the correct form of communicaFon. I have tried various design specifications, from long documents to visual concepts to diagrams of information.
Requirements Spec Doc Example

Transition and Deprication
Feature Concept Goals and Measurement

Iteration Process Example - Home Page

Below is an example of the iterative process of taking a site from something simple with an older UI to a more modern feel with more complex interactions.

Orginial Website
Phase 1
Phase 2
Phase 3

Iteration Process Example - Report

Data is becoming more complex and is expected to be real-time. With the introduction of Gen AI, data will continue to change and evolve. Below is an example of taking a basic report and transitioning into a more modern look with more robust data sets.

Orginial Report
Phase 1
Phase 2

Iteration Process Example - Mobile

The average American spends 5.5 hours on their phone every day. Mobile standards have evolved quite a bit over the years, and users will abandon apps that don't meet standards. Below is an example of the evolution of a mobile application.

Orginial App
App Rebrand

Iteration Process Example - Education Website

Historically, E-Learning and education applications have needed to be faster to adopt a more modern UI. This is no longer the case as kids attend school with tablets, and online learning has become part of their daily lives. Here is an example of an evolution of a student and admin online learning application.

Orginial Student Site
Student Site Rebrand
Orginial Teacher Site
Teacher Site Rebrand

Additional Web Design Example

Here are a few additional interaction and web designs I've worked on throughout my career.

Think Through Math - Set Up
Think Through Math - Progress
Think Through Math - Set Up
SnapRetail - Template Selection
Email Editor
Continuing Education Site
Continuing Education Site
Continuing Education Site
Continuing Education Site
Continuing Education Site