Alan’s Projects
Specific projects that I have worked on. How the problem was defined, how it was solved, and everything in between.
Project: Design System for Child Content
Time
July 2022 - August 2024
Setup
An ed-tech company had been resolving design issues on a case-by-case basis, resulting in a patchwork document with ill-defined behaviors and documentations.
Problem
In order to make the necessary changes to meet business goals, a proper—scalable—design system was required to increase efficiencies in both activity design and development.
Intro
Prior to officially taking on this project, I had been working to capacity as the lead activity designer, de facto product manager, and UX Team lead. All of which spread me pretty thin. with a product team eventually coming in to relieve the burden of work I had accumulated, I was able to shift focus toward assembling the design system for the child facing side of the product. The later addition of a director allowed me to expand my design system to the adult facing side of the product, providing me with the opportunity to mentor other designers on tokenized design systems, and giving senior leadership an insight into how this will be a key component to success for the future.
The State of the System
Prior to my hiring at this organization, there was no UX designer and no product team, so I had my hands developing the activity design workflow. The child facing side of the product was composed of kids educational games for the demographic of ages 4-7 that were very out of date in large, but an effort was slowly being made to modernize them.
With no UX team, this meant this was handled primarily by educators, artists, and some input from development.
Taking Stock
Despite no UX involvement, assets were being developed and used in the updated activities so I began by conducting an audit and evaluation of components to verify that they are meeting WCAG standards and creating definitions of use for specific components.
Nearly all of the components had an issue in one form or another, so with the list I had compiled earlier, I needed to recreate the components with the necessary changes to meet UX and accessibility guidelines.
I established milestones for the project:
Planning and Communication around the project
Audit the current UX, verify updates with research, and validate design decisions
Formalize an atomized design system
Develop a behavior and use case scenario guide
Tokenize parameters and values
(Ongoing) Monitor implementation and make adjustments as needed
Plan
Development
The developers had been using their own system of labeling values but had not unified with the UX team at this point, so it was imperative to start with those closest to the work for impact and feasibility. My plan was to tokenize our design system and break it into atomic structure. After meeting with the lead developers on several projects, I received a resounding approval to move forward with the design system update from their end.
I created the planning documentation with the audience in mind. There were two main audiences: Developers and Product.
Product
I held a presentation with key members of product leadership to explain the efficiencies gained by switching to a tokenized design system. By highlighting the benefits, such as scalable designs, templatized components and modules, a near-instant updates to existing designs, common language from designer to developers, and clearer communication from non-designers to external teams, the project was approved.
Documentation
I developed the Epic in Jira and broke it down into stories to be pulled in from the backlog for the appropriate sprints. I also connected it to organization initiatives and goals and outlined a roadmap to highlight milestones in the project and guide the direction of work. This was done through FigJam, Jira, Slack, and Confluence.
Audit
Common Patterns
I began by defining commonalities in the existing activity space to find where it can be simplified to be easier for students on smaller screens or touch devices. There were a wide variety of interactions within the activity space, but there was one UI element that remained consistent: the Card. This would become the primary button for standard UI interactions moving forward.
I needed to conduct an audit of existing templates and components to maintain a similar look and feel while developing the identity of the product in the educational technology space.
Too Much UI
Over 50% of the users for this product were on touch devices, but the UX was almost entirely geared toward mouse and keyboard. Some In many cases, a hover state was required to listen to audio clips and were integral to completing activities.
I stripped the UI down to the base card and developed a press and hold function along with the game architect. This gave all cards
Documentation
I developed the Epic in Jira and broke it down into stories to be pulled in from the backlog for the appropriate sprints. I also connected it to organization initiatives and goals and outlined a roadmap to highlight milestones in the project and guide the direction of work. This was done through FigJam, Jira, Slack, and Confluence.
1
Tools/Methods Used:
Internal Communication from the product
Figma
Zoom
W3 WCAG2.1 Guidelines
Color Contrast Checker
Nielsen Norman Group Research
Research and Tools
Leveraging the existing Research Team, we scheduled A/B testing for various components with existing users. The aim was to validate iconography to function and establish that students understood how to interact with the updated UI.
Combined with accessibility tools to verify that the students with disabilities were able to not just understand, but properly see and interact with the UI, I gathered the data and began making adjustments to the variant that students
Design Patterns
The product didn’t make effective use of design patterns to illustrate to users certain functions. Action buttons, audio replay, in and out of scene contextual UI were all undefined in the previous system. When breaking down the components into the atomic structure, I made sure to develop a system for defining such scenarios.
Outcomes
Go With the Flow
This was the first project I had at this organization and the fruits of that labor are still being harvested to this day. With a 2 year funding deadline for a conversion project, the work I did in collaboration with other leaders paved the way for future success.
This resulted in…
A clear path for developing activities that lead into a development queue.
A visual that helps pinpoint bottle necks; a workback to identifying where issues may be appearing
Established RACI led to team leaders having the ability to hold contributors accountable for work and know who to talk to when there were questions
Activities that were in the asset development phase previously would occasionally get lost once the assets were created—this solved that issue entirely, saving time and money on development
Requirement documentation that was easily understood by non-software dev personnel, that led to a clearer understanding of the goals, constraints, and must-haves for activities.