CASE STUDY

Design System

Type
Employer
Platform
Web
Status
Published

1 — Project Goal

Create and maintain a design system to enable developers and designers to reuse proven user experience patterns within an ecosystem of organizations. Named Pelican Design System, it is being actively designed and developed for official web applications for the state of Louisiana.

2 — Target Audience

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

Persona card for Lalana who represents designers who will use the design system in Figma and during client and business analyst meetings.
Persona card for Umang who represents developers who will use the design system in code and during user acceptance testing.

3 — Research & Key Challenges

The design system's original research was performed by taking a user interface inventory of two vast web applications being modernized. Research never stops — the design system is continually applied to newly discovered web applications. Performing an inventory across a myriad of official web applications is a monumental task requiring flexibility to accommodate unknown use cases.

4 — Initial Design Concepts & Wireframes

Original concepts were created as wireframes between design team members. We chose final concepts from those which the whole team agreed could be most easily sold to external stakeholders. Wireframes were shared with business analysts and developers who have the most exposure to the design system outside of the design team.

Layout idea for the home page in the design system.
Layout idea for the area page in the design system.

5 — Usability Testing

Usability testing started out by gathering successful design systems as inspirations. We chose design systems whose creator's halo effect would help prove parallel values. We also used wireframes to create imaginary but feasible interface scenarios to show how the system would provide quicker turn-arounds and reusable benefits.

Sources, ideas, and features we wanted to implement in the design system.
Feedback from developers about features they wanted in the design system.

6 — Conclusion

The Pelican Design System is currently at version 2. Pelican 3 is in the early research and ideation stage to build it from scratch instead of basing it upon Bootstrap.

Try the prototype →

Skills

Accessibility

Designing and coding within accepted standards to ensure equal access regardless of technology.

  • Accessible Markup
  • Proper ARIA
  • WCAG 2.2
  • Screen Readers

Design

Design means intentially creating for both the users’ task outcomes and the business goals.

  • Inclusive Design
  • Design Systems
  • Product Design
  • Visual Design

Technical

Technology is how we build products. We must consider feasibility, accessibility, and timelines.

  • Accessible Markup
  • Frontend
  • HTML, SCSS, CSS
  • Working within technical constraints

User Experience

This means learning about users and designing for their needs while respecting the business goals.

  • User Research
  • Information Architecture
  • Accessible Content
  • Public Speaking

Certifications

Practical Accessibility
Certified by Sara Soueidan
2025-01-07
DHS Trusted Tester
Certified by Department of Homeland Security
2024-10-28
Smart Interface Design Patterns
Certified by Smashing Magazine
2024-05-31
Designers Accessibility Curriculum
Certified by Deque University
2023-03-09
W3C Intro to Accessibility
Certified by W3C via edX
2021-12-22
Google UX Design
Certified by Google via Coursera
2021-11-24
Interaction Design
Certified by UC San Diego via Coursera
2018-05-27

Talks

Just in Time Usability

Isral Duke presents why accessibility is important for business. He also presents 10 things that site owners can do to quick check their site's accessibility and usability. Presented at a local ecommerce group lunch.

Accessible, Friendly Content

Isral Duke demonstrates how iOS and MacOS VoiceOver presents a simple web page. This talk promotes the use of semantic, meaningful markup to make a better user experience. Presented at Google Developer Groups.

Building Pelican Design System

Isral Duke presents version one of Pelican Design System. He talks about how it was created, and what's coming next in version two. Presented at SQL Saturday.

References

James Alt’s LinkedIn avatar. James Alt Chief Architect at Louisiana Office of Technology Services Kristina Truong’s LinkedIn avatar. Kristina Truong UX Designer at Louisiana Office of Technology Services Elle Waters’s LinkedIn avatar. Elle Waters Accessibility at Workday Guy J. Anglade’s LinkedIn avatar. Guy J. Anglade Director of Website Content at Morgan Stanley Patrick Rills’s LinkedIn avatar. Patrick Rills Engineering Manager at RevenueCat Glynnis Ritchie’s LinkedIn avatar. Glynnis Ritchie UX / UI and Product Designer at Flagrant Dr. James Davis’s LinkedIn avatar. Dr. James Davis Freelance client at Louisiana State University Matthew Magnuson’s LinkedIn avatar. Matthew Magnuson Managing Partner at DMM Motorsports Mike Cole’s LinkedIn avatar. Mike Cole Product Manager at Harman