isral Duke | Designer Design System |

Design System Details

Two iPhones displaying sample screens from a web app produced with the Design System.
A laptop screen showing a sample screen from a web app produced with the Design System.

Design System allows team members to access a single source of truth and quickly produce value.

Try Design System yourself

Overview

Design systems allow organizations to unify their products’ appearances, code base, and provide users with a consistent experience. Pelican is a design system which is being designed and developed for official web aplications.

Project Role

I am the lead UI and UX designer and the primary frontend designer. I consult with other designers assigned to various modernization projects and review those projects’ user interface design and code needs. Frontend code is written to build the necessary components using a popular frontend CSS framework.

User & Audience

The primary users for this design system are senior developers, mid-level developers, junior developers, and user experience designers. Seondary users are the business analysts and product owners. Tertiary users are stakeholders who decide to adopt the design system for their products.

Persona for Lalana, one of the imaginary users to guide design decisions. Persona for Umang, one of the imaginary users to guide design decisions.

Research

The design system’s original research was performed by taking a user interface inventory of two vast web applications which were being modernized. But, research never stops. The design system is continually applied to unknown web applications which were not updates for many years. As these obscure web applications are discovered new components are added to the design system if it can be used in more than one place.

Key Challenges

The design system is meant to provide value for end users and stakeholders. Many stakeholders were unaware of the value of a unified user experience across official products so convincing them of its value is an ongoing effort. Performing an inventory across a myriad of official web applications is a monumental task for which the design system has to flexible to accomodate unknown use cases.

Skill Sets

UX

UX Design is learning about users and designing for their needs.

  • User Research
  • Accessible Content Development
  • Information Architecture

Design

Interaction Design is creating an interface or process around the users’ challenges and goals.

  • Inclusive Design
  • Figma
  • Creative Cloud
  • Graphic Design

Technical Skills

Technology is how users’ solutions are built.

  • Accessible Markup
  • HTML, SCSS, CSS
  • Bootstrap
  • GitHub

Certifications

W3C Accessibility

Verify W3C Certification

Google UX Design

Verify UX Certification

Interaction Design (I.x.D.)

Verify I.x.D. Certification