TRAILS Design

Design engineering, product design, and visual design for school mental health program

Note: As this work is current, many of the artifacts shown are WIP

TRAILS is a nonprofit organization dedicated to teaching school staff how to educate and respond to mental health issues. I was hired as a Product Design contractor to help work out their multi language functionality, but was soon brought on board full time as a Design Engineer to flesh out the design system and operate as a design/dev hybrid.

When I first joined, TRAILS was in the final phases of receiving an updated brand and infosite from an external agency, but the materials were limited to marketing type content and unsuited for general product use. I had to take the updated brand and try to extrapolate and adapt it to fit our dashboard side of the app.

color scale developed with base hues from agency branding
We only received a handful of colors (without even guidance on proper ratios of usage) from the branding agency, so I took the core values and extended a color scale to work with UI components. The color scale uses an HSL method where the hue value is locked, ane each step is separated by a lightness value of 10.
a list of type classes developed for UI design/dev use
I also configured a type scale and class specification that helped other designers and developers work quickly and effectively to place text. As with the color scale, these were all documented via Storybook pages for anyone on the team to reference.

However, it wasn't long before the TRAILS mission and product went through a pivot phase, and with it came an opportunity to iterate on existing styles so that our brand is an extension of product, and not the other way around. Hoping to have a bit more fun with our identity, I began to draft a few "what if" concepts that leaned on my experience as an artist.

a draft of splash page with updated brand and illustration
Updated brand ideas included leaning more into storytelling and prioritizing student engagement above all else. Our educational materials are the heart of our program, so I drafted characters, settings, and stories to center our identity on.

Unfortunately, the team was on sharp timeline to deliver the new product MVP, so extensive changes to branding were not in scope given the quantity of materials to update. Given though that we were switching to a new headless UI library (Shadcn), general product-look updates were still on the table. So with that, I got to work drafting up example screens to hash out the overall vibe.

In order to not overly influence the UX iterations of product design squad who were working grayscale on the new MVP, I came up with my own "fake" version of our product to test out theme.

an example home screen used to test out UI theme
My "fake" version of the product has the user travel a cosmic journey to collect Cards: short snippets of concepts or activities that mapped to the mental health materials in the existing product.
an example journey screen used to test out UI theme
Similarly, the journey and stops correspond to the learning paths the product team was developing for teaching our materials. In my version, each topic or mental health skill has its own star system with a fictional story that ties into clinical learning.
an example card detail screen used to test out UI theme
A card detail screen. Here, the primary CTA button is the most vibrant and brand colored of UI elements. Other components stick to more neutral cool gray tones.

At the time of this writing, I'm working on the frontend to begin adding components and applying this theme. Because of the size and nature of this team, design system source of truth will likely lie in the code and Storybook documentation.

I have much more I could share on all of this work, so if we happen to chat, I can go into my process in much more detail. Aside from that, I can list a few other odds and ends in terms of contribution to the team.

PREVAboutNEXTIBM Verity