Chris Valleskey

In 2003 I built a computer from parts I bought off eBay, got my hands on a copy of Photoshop, and started teaching myself how to code websites by inspecting sites I visited.

My curiosity led me to dive deep into web design and development, learning what makes a good user experience while also considering things like image optimization and page performance. If you ever had to make something backwards compatible with IE6 , you know my pain...

Over several years I got good at constructing entire websites using just a Text editor and my brain. Like Fillerama, which was feaured by Smashing Magazine and had over its lifetime over 1 million users:

My most successful side project during this period of my life was Fillerama, a web app that generated filler text from a variety of TV shows and Movie quotes. It had several different ways for designers and developers to use its output.

Another side project I'm proud of that's still live is Payoff.io, a debt calculator that has helped over 30,000 people pay off their car, credit cards, student loans, and other debt. Looking back, this project was the perfect testing ground for me to refine my creative and technical abilities. I designed the logo and ran an entire social media campaign from scratch in a few days. At one point I was even asked if I wanted to sell it, but I refused because it meant I would no longer be able to work on it.

I originally built Payoff.io to help my wife and I pay down student loans.

After college I started my professional life at a music marketing agency, designing and developing things like a themable music player (starting in Flash) that tapped into licensed playlists, and developing the HTML/CSS for a music streaming platform that spanned web and native mobile apps.

At the end of 2012 I switched jobs. I flexed my Creative side as an Art Director and became responsible for defining brand guidelines, concepting various assets across print and digital, and directing production work.

In 2014 Brad Frost gave our Creative team a half-day session on Atomic Design and I was hooked—Design Systems are the answer to the multiplying level of effort to design experiences for more screen sizes, dimensions, and user needs.

I was quick to apply design system thinking to a native app focused on patient support and adherence for a black box medical product:

Just a few user flows are shown here. In total, over 800 screens exist within the app on both Android and iOS due to the number of indications the product treats and how it can affect the immune system. The foundational design system I set up in 2016 is largely unchanged today.

As I matured in my role, I grew from supporting a single brand of work to overseeing many. I trained my peers on design system methodology and began identifying creative tools which closed the gap between design and development. Because of me, we were early adoptors in using Sketch, saving countless hours vs. our competitors still relying on Photoshop. The ability to make a change in one place and it propogate out to other instances in a creative tool was unheard of at the time!

Going a few years forward, in 2019 I learned WebGL and built an immersive experience which highlighted the long journey many people with rare diseases have to getting a diagnosis.

The experience was powered by Three.js and CSS grid to ensure responsiveness and usability on any device.

In 2020 design systems took off as a means to driving efficiency and accelerated end-to-end content creation. During this time I led the design system setup and change management for many brands, either directly or overseeing a team responsible, including one that has over $200B in lifetime sales.

Here are a few artifacts from that project:

The design system for this project required consolidating 5 disparate websites into one unified look and feel while also updating to the latest in accessibility standards.

The ways in which text appeared was reduced from dozens in the original experiences to 7.

A switch from Sketch over to Figma allowed us to align our design systems closer than ever before, enabling Creatives and Developers to speak a common language when building rich experiences.

Mirroring our Figma components with templates in HTML/CSS enabled us to streamline brand-specific compositions, like this text lockup used dozens of times across a website.

One project required a major overhaul of its data tables, which existed as a bunch of images. I used a screen reader to convert the pixels of each table image into live text, converting it all into accessible HTML and CSS along the way, then reduced styling from over 100 classes to just a handful, opting for native html tags and properties instead of a vast amount of one-off classes.

I audited over 100 tables with different appearances, ultimately creating one table HTML/CSS structure that styled over 8,000 table cells in a cohesive look and feel while boosting accessibility.

On the side I began experimenting with Home Automation, mashing up APIs into useful and fun creations. HuePlay was one of these projects, which grabbed the cover art of whatever you were playing in Spotify and changed your smart home lights to match the mood:

It was at this time that I learned colors on a screen are much different than colors put out by a lightbulb. I went deep into color theory, translating across color specs, and ultimately built something that matched what was on screen with what was put out by the lightbulbs.

Beyond websites, in 2021 I led the effort to unify a client's 40+ brands into a single approach for designing and authoring marketing emails. Throughout the process I ensured the system I set up was compatible with the design nuances of every brand by auditing hundreds of emails and pressure testing them with the design system I engineered.

To save time, I wrote a NodeJS script to automate the generation of the 40+ branded UI Kits from a foundational UI Kit, something that would have taken hundreds of hours to do by hand. The script exported both a layered design asset (in this case an Adobe XD file) as well as the theme values for each brand to CSS which was then fed into the authoring tool for marketers and agencies to use.

Part of this project had me creating user guides and instructional training sessions for my agency as well as other agencies. Shown here is one slide demonstrating the flexibility in the use of the Hero component.

Around this time I helped a nonprofit, Psoriasis Speaks, with standing up a landing page for "The Last Plaque", a short animated film imagining a world free of psoriasis.

I built the experience with React, using react-spring for the animations and effects.

From individual contributor to leader

In 2022 I was tasked with operationalizing design systems across my entire agency. This major undertaking took careful coordination, spanning many departments and hundreds of employees. I couldn't have done it alone, but I was the primary driver behind getting teams to adopt a systematic approach to building experiences.

As an exercise for our design team I created a starting style tile and guided team members on how to adjust it to make each look unique for a specific brand. Shown here are three examples—Can you tell which one is mine? The point here was to start from a similar UI structure and arrive at very unique ways to express a brand.

At the end of 2022, OpenAI released their ChatGPT model and I was quick to apply it to our work by democratizing access via their API (along with a few other providers), designing and building what I called the AI Playground in early 2023. Hundreds of employees were able to use this web app to get exposure to how AI could help them in their work:

The tool was placed in our internal SharePoint and made available for all employees. Coworkers were able to generate images, user interfaces, get suggestions for copywriting, and code support. It even generated structured content for use in modular workflows.

In 2024 I was honored to speak at Forrester's CX Summit, giving atendees a glimpse into how I helped my agency operationalize GenAI tools and practices across our teams.

Design System Automations, AI, etc.

Recently, I've explored and experimented with various uses of AI and automation within design tools.

Translating an html formatted set of content, in this case a product's required safety content, directly into Figma layers, preserving appearance and bridging design to code.

Translating selected Figma layers into whatever language you input.

Automating a design system audit. Scrapes a site for human- or machine-identified components and page-level templates. Useful to see if consistency is being applied evenly across any experience. This video highlights its ability to capture a screenshot of every requested component instance across an entire website.

That's me and what I do in a few minutes. Design systems, AI, and creative technologies are tools for people to express their ideas and bring them to life in amazing and engaging ways. And I think I've weaved an interesting pathway through those to make me valuable anywhere.

I am a doer and thinker. If someone calls a problem impossible, that gets me motivated. I thrive on complexity and want to make the best things with a team of people smarter than me.

Send me a message if you'd like to talk more: