In this first of three articles, I will share insights on the prep work required to build your organization’s Design System while using a fictional start-up to show by example.

(If you want to know more about Design Systems and why you probably need one… check out Modern Design Systems by Igor Solovey)

Who is Part 1 (Prep) for?

• 🎨 Product Designers, UX/UI Designers
  Learn about Design Systems or build one for an existing organization

• 📈 Business Leaders (CEOs and Stakeholders)
  Focus your organization’s goals through user-centered design

• 💡 Startup Founders and Inventors
  Further their understanding of how to serve users

• 👨‍👩‍👧‍👦 Anyone
  Strategically build a value-driven design-focused organization

Ad

Letter

An AI-assisted newsletter builder for content creators, designers, and developers.

This article is supported by Letter.

---

Three-Part Structure

This journey loosely follows the Prep, Analyze, Execute process used by athletes and even poker players.

• Part 1 (Prep) will cover Values & Goals
  Here we establish ‘Why’ we have gathered in an organization. We go through the steps to create a Why Statement, prioritized Values, and Value-Driven User-Aligned Business Goals.

• Part 2 (Analyze) will cover Design Direction
  Here we go through branding exercises to define the organization’s personality guided by values and goals. We then gather inspiration from anywhere and everywhere to define top-level design guidelines.

• Part 3 (Execute) will cover the Design System
  Here we take our Design Direction and build a value-driven structure using Design Tokens. I will also cover documentation, resources, and syncing with development. We’ll use Figma, Figma Tokens, and GitHub for our example.

Table of Contents

• The ‘Why’

• Step 1: The Why Statement

• Step 2: Defining Value-Driven Business Goals

• Step 3: Defining User & Community Goals (Empathy)

• Step 4: Joining Value-Aligned Business Goals with User Goals

• Extra: Deciding on a Product

The ‘Why’

It stands to reason that identifying your organization’s purpose for existence must come before you start worrying about colors and button corner radiuses. The hardest part of building a Design System is, fortunately, this first step 😅. This process may send you and your organization into a momentary existential crisis but have faith. Once you’ve succeeded, the rest becomes much easier!

For a better understanding of the power of purpose and values, please watch 👉Simon Sinek’s TED Talk (5 min) explaining The Why.

I encourage you to take a deeper dive into this subject as soon as you have the opportunity. Simon Sinek is an excellent place to start.

TL;DR: Successful brands (Apple — Think Different) and people (MLK —I have a dream) think and speak in terms of why (their reason for doing things) and not what or how.

OK! Time to Show by Example 👇

Let’s imagine a brand new start-up that is deeply motivated and inspired to help artists but has yet to achieve any critical milestones. For the organization’s name, let’s try Artesia. It sounds like a mythical land of art. Good enough for our imaginary start-up. 👍

Artesia has an idea to use web3 technology to free artists to dedicate their time to creating art. This is a potentially viable idea, but we lack a guiding statement of core values. So far, we have a what (free artists to just do art) and a how (web3). Let’s take some necessary steps to separate signal from noise and define Artesia’s purpose.

Step 1 of 4: The Why Statement

The Why Statement shares our ‘Why.’ It serves as a mantra for the entire organization and influences how we communicate with the world. Here are some solid examples:

• Asana: “To help humanity thrive by enabling the world’s teams to work together effortlessly.”

• BBC: “To enrich people’s lives with programmes and services that inform, educate and entertain.”

Let’s sketch some ideas out…

How about? We believe in empowering artists to focus solely on creating

🤔 Not terrible… Well, we’ve removed the how, but this feels more about what we want to do (empowering artists) and doesn’t go deep enough. There are two questions we should always ask:

1. Is it clear how our organization makes the world a better place?
   (This may sound like hippy idealism ✌. It’s not! Any legitimate organization that wants to last will look to improve well-being and enjoy the rewards.

2. Does our Why Statement reach us on a human/primal level?
   Our Why Statement aims to inspire those within and outside our organization. As an example, I believe ‘connection’ to other humans is a value we all crave. When we use the word in a Why Statement, the concept reaches us on a deeper emotionally-intuitive level.

Right now, the answer to both questions is “No.”

Let’s rework our statement. Perhaps… To make the world a better place by connecting people through art

Interesting 🧐. We now have a why and a how, but it’s too generic. Before we go further, let’s look at some examples of values for inspiration and ensure we didn’t miss anything. The below is by no means a complete list.

Let’s grab some values from the list, and we can then reduce them.

Value Candidates

1. Accessibility: We want to make sure people with disabilities, and different skill levels have the opportunity to use our organization to create or experience art.

2. Collaboration: This is about bringing people together, especially artists who are often isolated.

3. Community: We want to build a community of artists, fans, and patrons.

4. Creativity: This is pretty obvious since we are organizing around art.

5. Decentralization: We may want to consider web3 technology to empower our community and explore DAO fundraising.

6. Empathy: Because we are human-centered, we want to stay focused on serving our users, which requires empathy.

7. Empowerment: We want to help lift up artists so they can create.

8. Enjoyment: Let’s have fun while we work.

9. Fairness: Always a good value

10. Humility: Just in case we are super successful, let’s not lose sight of who we are

11. Inclusion: This is a more powerful word than diversity. All are welcome.

12. Innovation: Let’s be curious and open to change to continue advancing.

13. Quality: We only want to put out great products and art.

14. Simplicity: We’ll take the time to reduce clutter.

15. Sustainability: Let’s avoid the depletion of natural resources.

16. Transparency: This naturally builds trust as we are an open book.

😅 That’s a lot! We can combine some of these and narrow down the list below.

We are now ready for another take 🎬 at our Why Statement.

Let’s try…

We empower artists to connect humanity through art

👍 Better… This should resonate more with people as it clearly states we exist to connect humanity (Why we do it) using art (How we do it), and we believe we can do this by empowering artists (What we do).

We’ve lost the original part about freeing up artists to just do art. Although that idea is compelling, it could restrict our flexibility in the future. Remember, we don’t care too much about how we achieve our core values since time will surely change our methods and products.

Step 2 of 4: Defining Value-Driven Business Goals

In the Venn diagram above, you see we derive a union between our Value-Driven Goals and Business Goals to get Value-Driven Business Goals.

Before we develop the business goals, let’s imagine a world where money isn’t a limitation and list Value-Driven Goals that match our Artesia’s Why Statement and Values (listed below).

Let’s grab the whole Artesia team and do a Crazy 8s session. Once everyone is ready, the team has 8 minutes to come up with eight goals inspired purely by our values. The exercise should be fun and open to big, even ridiculous ideas, without concern for the details. Later, ideas are voted on, and the top candidates become our working Value-Driven goals.

Value-Driven Goal Candidates

Here are a few examples of the many goals the team came up with:

• Artists are able to quit their day jobs and just do art

• Better and more art in the world

• Bring people together by removing polarization

• Greater appreciation for art in private and public organizations and society as a whole

• Break through the creative censorship in totalitarian areas

• More love — less hate

• Owning an island 🏝 where artists can collaborate on creating art

• Access to early art education for children around the world

• New mediums and methods for creating art

Value-Driven Goal Finalists

Here are the top four refined goals after the team voted. (Sadly, the artist island 🏝 idea didn’t make it through, but it won’t be forgotten.)

• Empower artists with the resources needed to level up and focus on creating better artwork

• Build community and shatter division by raising empathy and understanding of others' viewpoints through artwork and its networking effects

• Innovate to offer new options and opportunities for creating art

• Provide easy access to art education for all ages and abilities

Now, it’s time for Business Goals 📈

These are usually pretty obvious (like, be profitable). We still don’t have a product, so these goals will need to be pretty general. Again, we run a Crazy 8s session with the team.

Business Goal Candidates

Here are a few examples of the many goals the team came up with:

• Raise funds to cover operational costs

• Become profitable to support expansion

• Extend reach and brand recognition

• Build and grow a passionate following of community and users

• Explore options and opportunities for revenue generation

• Attract the best talent and partnerships

• Be flexible and efficient

• Make the founders and shareholders super-rich 🎩 🤑

• Offer the best products available

Value-Driven Business Goals Finalists

Here are the top six refined goals after the team voted. (Making the founders and shareholders super-rich didn’t make the cut 😿. Now, there is nothing inherently wrong with this outcome, but it shouldn’t be a priority. It’s evident from the Venn diagram that there is no union with Artesia’s values.)

• Bring in funds to support the team and community and expand product offerings

• Extend reach and brand recognition

• Build and grow a passionate following of community and users

• Attract the best talent and partnerships

• Offer the best products available

• Be flexible and efficient

Combining Value-Driven Goals and Business Goals

Let’s drop these in the Venn diagram and see what comes out…

Value-Driven Business Goal Finalists

After combining similar goals and removing goals that don’t align, we have a reduced, more focused list.

• Empower artists with the resources needed to level up and focus on creating better artwork

• Innovate to offer the best products for options and opportunities for creating and distributing art

• Provide easy access to art education for all

• Bring in funds to support the team and community and expand product offerings

• Build and grow a passionate following of team members, users, partners, and community

• Be flexible and efficient

Note: Maintaining an open and transparent culture with regular team check-in is vital to keep goals current and motivating.

We’re not done with goals yet. We can’t forget our users and community…

😅 We’re halfway there. Get up. Stand up. Spin around. Grab a snack. Come back refreshed.

Step 3 of 4: Defining User & Community Goals (Empathy)

IIt’s never too early to get to know your users and where they live (metaphorically speaking… let’s not be creepy 🕵️). Regardless if you just came up with a great idea in the shower or you’re a member of an international organization, you need to know what your users and community want (if anything). You may be surprised to find out they don’t want what you think they do, and it’s always best to fail early. You can always pivot and find a better solution.

Understanding your users is the first step in Design Thinking…

This is a big subject and typically falls under Product Design and UX Research which is beyond the scope of this article. Regardless, don’t be intimidated if you are starting out. You’ll be able to gather great insights with minimum resources.

User & Community Goals Process

You can see from the below diagram that we need to consider Community Goals and User Goals to find the union between the two.

Suppose, in the process, we find that some of the users’ goals conflict with what the overall community wants. In that case, we need to address this issue and find viable solutions. For example, if Acme’s users want to use Acme products to create red things, but the community wants blue things, Acme might encourage its users to make more blue things.

Determining Artesia’s Community

You can make the community as large as you wish to include all of humanity. However, that may be too broad for Artesia. For the Community, we need to figure out who will be touched by our organization. For now, let’s narrow it down to people that are actively interested in artwork and have access to the internet. In the future, we can consider non-digital methods or new technology to reach more people.

Which Community Does Artesia Serve?

• Art lovers who have access to the internet

What Are Artesia’s Community’s Goals?

We need to connect with exemplars of our community members. From the traditional art world, these might be gallery owners, art critics, art buyers, gallery and museum-goers, etc. From the street art and NFT (dArt) world, these might be NFT collectors/traders, street/graffiti art fans, digital art fans, NFT marketplaces, blockchain projects, etc.

For the purposes of this exercise, let’s imagine we reached out to a reasonable smattering of people (5–10) from our list of potential community members above. For example, we might call Alice, a gallery owner in Chelsea, Bob, an NFT trader in Tulum, and so on.

We then gather our findings and create some ‘community personas.’ Personas are archetypical users whose goals and characteristics represent the needs of a larger group of users. You can think of a persona as the spokesperson for a group of people that use your product.

🔗 Link: Learn UX Design lesson on personas (highly recommended and worth the price)

Personas should be:

• Tied to real data from observation and research

• Reflect actual user patterns, problem-solving, psychometrics, and surprises — not user roles

• Focus on users’ current experiences

• Be contextual (considering the environment in which they live)

🔗 Link: See my Persona Cheat Sheet

Disclaimer: We are about to break a big No-No with personas here. Namely, don’t invent Personas (See Made Up Personas Don’t Work). However, for the purposes of this exercise, we can excuse ourselves.

Community Persona: Kalie
After speaking with multiple art buyers and gallery owners, etc., we combine their data into a persona named Kalie…

Community Persona: Steve
After speaking with crypto degens, NFT traders, graffiti heads, etc., we combine their data into a persona named Steve…

🔗 Link: Biagio Persona Tools

With our two personas and research insights, we can identify Community Goals:

• Improved art appreciation

• Better informed art buyers

• Better resources for the discovery of new artwork

• Financial and social freedom

• Connection to others with similar interests in art and art buying

👍 Great! Let’s move on to User Goals…

Determining Artesia’s Users

For our users, we can assume artists. Again, our core values center around empowering artists.

⚠️ Now, we don’t even have a product yet. Sure, we have some half-baked ideas about using AI to generate art or using NFTs 🙈. This may actually be a blessing! We don’t want to fall into the age-old trap of having a ‘solution in search of a problem.’ Don’t worry… we’ll figure out our product soon enough.

We can make some assumptions about our artist users to narrow down our target. Let’s remove established artists. Sure they may be able to benefit from our products and community, but they don’t need us. We can also remove hobbyists who are NOT looking to dedicate most of their time to art. We can safely focus on artists looking to quit their day jobs and just create.

Note: This user target may change in the future. For example, with success, we may look to serve actors or content creators, or even activists. However, when starting out, it’s crucial to establish a beachhead (bullseye) of users that need our products and services.

Which Users Does Artesia Serve?

• Emerging artists that want to quit their day job

What Are Artesia’s Users’ Goals?

We need to connect with exemplars of our community members. These might be art students (especially recent grads) or struggling artists from the traditional art world. From the not-so-traditional art world, this might be street artists, NFT creators, digital artists, UX/UI designers, photographers, etc.

For the purposes of this exercise, let’s imagine we reached out to a reasonable 5–10 people from our list of potential users above. For example, we might call Bob, an NFT artist in LA, Jane, a street artist in Denver, and so on.

We then gather our findings and create some ‘user personas.’

From this exercise, we can gleam some top User Goals:

• Financial freedom to focus solely on creating artwork

• Achieving recognition to make a greater impact

• Better resources for success as an artist (digital/NFT and traditional)

• Building or being part of a community

• Social change

Note: Market and Experience Segmentation is helpful to consider and typically comes after building Personas. However, we can skip this for this exercise. Here’s my 🔗 Cheatsheet if you are curious.

OK! Let’s do our Venn diagram thing…

We can see our Community-Aligned User Goals are:

• Financial freedom

• Community building

• Better resources for artists and art buyers

• Social freedom

Goals like “improved art appreciation” can be wrapped up in “better resources for artists and buyers.”

Final Step: Joining Value-Aligned Business Goals with User Goals

The last Venn diagram 😅

Now we just have to sync up our Value-Driven Business Goals with the Community-Aligned User Goals, and we will have separated signal from a lot of noise.

Looking at the above diagram, we can better understand the big picture. We can now make sure our Value-Driven Business Goals jive with our Community-Aligned User Goals.

If we found out that the artists we intend to serve have no interest in community-building, we would need to consider removing or deprioritizing our focus on Community. For a ridiculous example 🤪, Pat wants to start a business to serve dogs, and his Value-Driven Business Goals include lots of cats and fireworks. After doing user research with dogs, he discovers that the User (dogs) Goals include avoiding cats and fireworks — he needs to rethink the organization’s Value-Driven Business Goals.

Fortunately, Artesia’s values and the user goals align nicely, with one exception. Although social change appears in User Goals, this goal is perhaps too broad and politically charged since what this means is very different depending on who you ask. Because of this, it’s been removed from our final list of goals. However, we can keep all of this in mind when establishing Community Guidelines.

We can see some repeated values in our Community-Aligned User Goals. There is Financial Freedom (Empowerment), Community- Building (Community), and Better Resources (Innovation). Let’s bubble up these values to Primary Values and put them all together in our growing values document (see below).

Extra: Deciding on a Product

All Artesia team members are asked to spend a day looking out in the world to see what direct and indirect competitive products exist for inspiration. It’s best to be informed of what is out there.

Let’s run another Crazy 8s session and come up with some product ideas. We don’t forget to refer to our Why Statement, Values, and Goals (see sheet above) at the beginning of this process.

👉 We Empower Artists to Connect Humanity Through Art

After everyone presents their eight ideas, the product ideas are sorted into groups based on what the product offers:

• Help artists efficiently create better art
  ideas 💡:
  — AI for generating artwork
  — Collaborative tools for collective artwork
  — Learning resources for art principles and technique
  — NFT tools
  — Art trends and news digest

• Help artists focus on their artwork (through financial freedom from art sales or other means)
  ideas 💡:
  — Tools to build a following
  — Marketing tools
  — Sales tools
  — NFT training and resources
  — Business training
  — Art buyer tools and
  — Resources for NFTs

• Help artists build or join communities
  ideas 💡:
  — Tutorials on effectively growing a social following online and IRL
  — Community tools
  — Partnerships with community platforms like Discord

• Help maximize the reach and impact of artists’ artwork (to effect positive change in the community)
  ideas 💡:
  — Build an online platform that attracts artists and art-lovers
  — Experiential marketing and events
  — Partnerships
  — Build a marketplace
  — Invent the next level of NFTs with more dynamic features

The team votes, and after some combining of concepts, three finalists are selected:

1. Generative Art Platform with AI assistance for creating editable images, including NFT minting to multiple chains with an art marketplace

2. Comprehensive Education Platform with materials and tools covering art, business, funding (DAOs/VC/etc.), and marketing to help artists progress and focus their energy on creating and distributing their artwork

3. Decentralized Asset Management Platform to organize, manage and display digital assets across multiple touch points (web3, VR, web2, mobile, IRL)

We’ll make an executive decision and pick #1, The Generative-Art Platform, as our first product. Let’s give the product a working title of Kairos (noun an auspicious moment for decision or action). In Part 2, we will decide if we want to call the product Artesia (less branding work but less branding flexibility) or Kairos (more branding work but more branding flexibility). The other two concepts are both valid. However, they can be shelved until we have a single product in the Growth stage of the Product Life Cycle or the product fails.

Let’s be sure to think about the product and make sure it aligns with our Why Statement and has the best potential to execute on our Value-Driven User-Aligned Business Goals. Yep, looks good ✅.

🏆 Prize: We have a product concept the whole team is passionate about that can deliver on our values and will serve our users and community well. Had we skipped these steps, at best, we could have arrived at a good product idea by accident. Most likely, we would dedicate time and money to building something that people don’t really want in an organization with no real stated values to inspire its members.

Note: Now that we have a product we are interested in pursuing, we’d enter a Design Sprint. This would include steps like UX Research and Competitive Analysis, Ideation Session/s with all team members, Rapid Prototyping, User Testing, and UX Analysis. After completing the Design Sprint, we’d have a tested Figma prototype and an actionable analysis report we can iterate on. We would then enter another sprint and continue with our product development until the timing is right to launch.

Check out Biagio's work: http://biagioux.com/ 😊