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
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ā
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:
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.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
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.
Collaboration: This is about bringing people together, especially artists who are often isolated.
Community: We want to build a community of artists, fans, and patrons.
Creativity: This is pretty obvious since we are organizing around art.
Decentralization: We may want to consider web3 technology to empower our community and explore DAO fundraising.
Empathy: Because we are human-centered, we want to stay focused on serving our users, which requires empathy.
Empowerment: We want to help lift up artists so they can create.
Enjoyment: Letās have fun while we work.
Fairness: Always a good value
Humility: Just in case we are super successful, letās not lose sight of who we are
Inclusion: This is a more powerful word than diversity. All are welcome.
Innovation: Letās be curious and open to change to continue advancing.
Quality: We only want to put out great products and art.
Simplicity: Weāll take the time to reduce clutter.
Sustainability: Letās avoid the depletion of natural resources.
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 digestHelp 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 NFTsHelp artists build or join communities
ideas š”:
ā Tutorials on effectively growing a social following online and IRL
ā Community tools
ā Partnerships with community platforms like DiscordHelp 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:
Generative Art Platform with AI assistance for creating editable images, including NFT minting to multiple chains with an art marketplace
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
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/ š