PrizePicks

PrizePicks is a Daily Fantasy Sports operator. It's the fastest growing company in the sports betting space. It is currently the fourth most downloaded free app on the iOS store (as of writing this).

I am currently the Design System Lead on our Flex Design System. I was hired to build the system from the ground up. I support a plethhora of teams and products as we scale expontentially.

Background

Because a system didn't exist before I started, I have owned a wide range of responsiblities. I define the strategy, backlog and roadmap for the system. I bridge the gap between all design and engineering teams. I do my best to educate on design system best practices. Because of my experience I have I have taken a lead role in leveling up our design operations as we continue to scale extremely quickly.

When I joined PrizePicks was one core product. We now have four products and plan to build multiple more. The design and engineering teams have massively scaled to support this, so the role of the system is increasingly important.

Testimonials

Before I dive too deep into the work I've done this past year, here's a brief look at some things members of my team have said about it:

"High Fives" I received in 15Five from members of Product, Research, Design and Engineering.

Stakeholder Map

Similar to my role at Stack Overflow, it was imperative that I understand who the stakeholders of the systems are. In my opinion, there is nothing more important to the work I do than building solid relationships across teams. This is work is the start to that.

Understanding who to build relationships with and how to do so

Keeping Stakeholders Informed

Based on my conversations, it became clear I needed to meet peopel where they were at. Slack was the primary tool to do that at PrizePicks.

The design system channel is where I'd post releases, provide support and generally collaborate with all stakeholders. It was a centralized place everyone knew they could go for their design system needs.

I created an "updates" channel to synced to my backlog so stakeholders could always be aware of what's being worked on and why.

DS Updates and Design System Channel with bookmarks to important resources

Inventory Audit

A standard practice when building a system within a product that already exists.

This was extremely helpful to help others visualize the problems in our experience. This resulted in increased stakeholder buy-in as they could now better understand the problem and the impact I could have in solving it. The audit was constantly referenced by key stakeholders.

PrizePicks web and mobile app Inventory Audit

Governance

Due to the lack of education and understanding of design systems at PrizePicks, a solid governance process was of the highest priority. It's still being iterated on today as we scale.

Detailed Governance Flow

Governance Education

As I continued to collaborate with the teams, it became clear to me I needed to help them understand what a design system is, what it is not and some strategies to help us improve our workflows across products.

Shared vs Core Libraries – A few screens from a presentation on Design Team Workflows

Contribution Model

I want consumers to feel they can easily contribute to the system and really be a part of its success. I did my best to make it as frictionless as possible and meet consumers within their workflows. The goal is the more consumers feel a part of the system, the more they will be an ally and adopter of the system.

Although there is some variance based on product initiatives, contributions have been steadily on the rise month over month.

How to know when to contribute with helpful checklist for review
Contributing to the Flex Design System

DS Working Group

I want the system to be viewed as combined effort, which hopefully in turn encourages continued support and buy-in. Because of this I formed the Design System Working group.

The goal was to allow more teams and stakeholders to share opinions on design system related work. It was a solution to a problem: teams disagreeing on global design decisions and discussing them in a format that was unhealthy to future progression.

Forming this team resulted in transparency, accountability and more efficency in how we work together.

Design System Working Group

Backlog

In order to know what to contribute, consumers must be aware of what exists, what's being worked on, as well as future goals. It is my responsiblity to collaborate with external stakeholders to decide on the backlog, roadmap, OKRs and strategy for the system.

Flex Design System Backlog
Flex Design System Roadmap

Continued Support – Office Hours

In an effort to create a low stakes way to ask questions or offer feedback on the system, I created weekly Office Hours.

Office Hours has been so successful multiple other teams across PrizePicks have spun up their own versions of this.

Tokens Mapping table I created to easily allow engineering to map old tokens to our new format (Object > Base > Modifier)

Continued Support – Asynchronously

I am always looking for ways to be most efficient in my efforts.

For that reason, I created the Design Playbook. The goal was for the design team to collaborate on how we work together across teams.

It discusses things like file structure, layer naming, using libraries, engineering collaboration, etc. Some of this is out of scope of the design system, some of it is not. All of it is extremely useful and important.

Tokens Mapping table I created to easily allow engineering to map old tokens to our new format (Object > Base > Modifier)

Bridging the Gap Between Design and Engineering

One of the key takeaways from my research between Design and Engineering was how badly we needed to bridge the gap bewteen the two. We needed to take the steps to come together and better support each function. We needed to speak the same language.

Design Tokens ended up being the strategy I used to tackle this problem. It was the the problem I solved that without a doubt had the single biggest impact at PrizePicks.

Nobody within PrizePicks was familiar with the concept, so it was up to my to create a shared understanding of the problem and impact we could have by solving it.

Slides from my presentation on design tokens and why they are important. Presented to all of Design and Engineering.

Design Tokens Architecture Updates

After a few iterations and some testing, we are currently ready to release our latest token architecture. I was able to leverage some learnings from a workshop I took to level up our approach.

Tokens Mapping table I created to easily allow engineering to map old tokens to our new format (Object > Base > Modifier)

Component Architecture

With strong foundations in place, I am now able to plan and attack component refactoring and creation. We now have the processes and groundwork in place to hit the ground running as we quickly scale.

We had zero global components being leveraged when I joined PrizePicks. That number is steadily starting to grow as we mature.

Flexible and detailed component architecture

A Source of Truth

I was responsible for deciding on a strategy for component documentation. I reviewed multiple options. I spoke with multiple vendors. Becausee I am currently a team of one, Zeroheight was the winner.

Our documentation site acts as the source of truth for all things in our system.

I manage all releases and the changelog. Each releases pushes to the Slack Flex Design System Channel

Documentation site – Foundations and Components
Checkbox Component

Measuring Success

Now that I've had the time to really build the system and get it to a place that is usable, the next few quarters will have a strong focus on measuring the success of the efforts.

Some things in the works...

  • I am currently in the process of partnering with the Head of UXR at PrizePicks to create an ongoing Design System Satisfaction survey.
  • I conducted the intial user interviews with the teams when I joined over a year ago. We plan to perform these interviews again as the teams and products have changed so much since that time.
  • Zeroheight has some amazing analytics and tools to quantify component usage. It also offers analytics on the documentation site for review.
  • Figma's Library analytics are still very useful to help me understand where we may be lacking when it comes to component offerings and architecture.