How we created UBC APSC's visual language for building accessible and intuitive websites.

Role

Project lead

UX/UI designer

Illustrator

Tools

Figma

Miro

Qualtrics surveyrs

Jira

Timeline

2 months (2020)

Product

Design system (web)

Background

Atom is a visual language that provides UX, UI and development guidelines for UBC Applied Science. This helps cross-functional teams collaborate to create an engaging, accessible, and intuitive experience for the APSC audience.

'Atom’, stemming from the Atomic Design Method, encompasses all the basic building blocks that can be used to create any of our digital assets.

Goal

Create a scalable pattern library and style guide that designers and developers can use to improve efficiency when building new websites, ensuring brand alignment and accessibility across all products.

Research

Comparative analysis

Documenting the info architecture, pattern libraries and style guidelines of established design systems such as Polaris, Primer, and Material to inform our own IA.

Information architecture map

Component and branding audit: Document existing components and styles used in UBC APSC products to identify what might be missing, what should be removed, and what needs tweaking.

Card sorting: Organize defined elements of our design system into meaningful groups.

IA mapping: Create a clear hierarchy and organization of all the elements within our design system.

Accessibility testing

I tested the accessibility of all components within our design system using the WCAG 2.0 to ensure they met accessibility guidelines, and that those with visual impairments could still use our digital assets.

Design

Component library

This design system was created to optimize scalability and accessibility across browsers — each component was designed for mobile, desktop, and tablet breakpoints.

Our Figma library also holds all of these styles and components, allowing us us to maintain consistent typography, colors, components, spacing, and more across all of our design files.

Website

I communicated with our engineers to ensure that our design system was feasible for implementation, while also collaborating with our marketing teams to ensure that our design system aligned with their needs and expectations.

This helped me to design our web layouts to be intuitive for anyone, not just those from a design/engineering background.

Illustration

I also created illustrations following the brand guidelines for our design system, adding a visual element to text-heavy pages in order to make them easier to digest while also keeping the user's attention.

Workday

UBC Student Communications | UX Research

Workday

UBC Student Communications | UX Research

work

about

illustration

music

resume

This website is best viewed on desktop :)

resume