The Ultimate Guide: Design Systems
+ The World's Top Websites
In Today’s Newsletter:
The Top 20 Websites
🔒 The Ultimate Guide to PM-ing Design Systems
The World’s Top 20 Websites
Let’s break down the best graphic I’ve seen this week.
The Big Caveat: This traffic would look quite different if we included app traffic. Google Search doesn't have a very big app. It's actually a website people go to. Things like Facebook, Instagram, on the other hand, are mainly app-based. This would shake up the rankings.
Nevertheless, it’s fun to look at things and learn a thing or two. Here are my top 12 takeaways:
1. ChatGPT is growing rapidly: ChatGPT had a mere 21M visitors in October. It's now the #17 website in the world, with 1.8B. It’s an amazing Product Growth story. However, growth did slow from March to April. So OpenAI's ability to innovate will remain crucial.
2. Google search is far from dead: At 83.9 B monthly page visits, Google still gets 46x the traffic of ChatGPT. The demise of Google search is vastly oversated. Google has as many visits as the next 10 websites combined. Google is still king of the internet.
3. YouTube continues to obliterate TV: Google also owns the second biggest website on the internet. Given YouTube has about 2B monthly users, they, on average, visit the site every other day. It's more than 20x as big as LinkedIn.
4. Facebook isn't dead everywhere: Lots of people have abandoned their Facebook accounts. But Big Blue is still the number 3 website in the world. Sticky use cases like Marketplace continue to thrive. Too many people count Facebook out.
5. Twitter is the still number 4 website in the world: The talk of Twitter's demise is vastly overrated. Twitter is different from all the other social media companies: It actually cares about text. This makes it the number one distributor of words in the world.
6. Instagram is a Top 5 Site: Google has 2 of the top 5 websites. So does Meta. Just a smidgeon behind Twitter, Instagram continues to defy gravity and keep growing. People love pictures.
7. Amazon isn't that Big: US e-commerce's leading player can seem ubiquitous. But its website traffic ranking (14) does its match its market cap ranking (5).
8. Wikipedia is still a powerhouse: Wikipedia is a top 10 site in the world. It hasn't updated in GUI in years, but the quality of content keeps it a king. It has more than double the monthly traffic of Amazon. An amazing example of a community-led flywheel.
9. Yahoo is still big: Yahoo is the number 9 site in the world, and Yahoo Japan is the number 23 site in the world. If you put them together, it would be the number 7 site in the world.
10. Whatsapp remains an amazing asset: Hiding at number 11, you might have missed it. But Meta's third property continues to be a beast. Whatsapp continues to build sticky use cases with groups and new media types. For free.
11. TikTok is huge: Right behind Amazon sits TikTok. That's ahead of vaunted names like: Reddit, LinkedIn, and Netflix. TikTok seems to have survived the US political storm and kept on growing.
12. Bing has cracked the top 25 again: After a surge of popularity because of its free GPT-4 browsing (Bing Chat), Bing is back in the top 25. Offering great products for free (it costs $20/month at OpenAI) remains a prime way to increase web traffic.
ICYMI - My other writing:
Welcome to over 2,000 new subscribers since last weekend 🙌
The Ultimate Guide to PM-ing Design Systems
One of the trickiest PM jobs is that of Design Systems.
→ How do you actually quantify impact? Most of the changes contribute to better usability, a nice user experience, and delight.
→ How do you actually prioritize the backlog? Most of the changes are hard to compare to another without seeing the larger picture.
→ How do you communicate the importance to leadership? Many of the systems only yield results once fully implemented.
For all these reasons, Design Systems changes are not neatly set up for the world of OKRs and metrics-driven product teams that we live in 2023.
So this week, I’m teaming up with my friend - and fellow subscriber - George Nurijanian. George is a Design Systems PM at Xero (public tech co with 4,000+ employees). He’s also founder of prodmgmt.world and has a wealth of insights in Design Systems.
One of the most common challenges of DS PM is articulating the impact. Most DS PMs resort to things like faster development and design time.
The problem? Most of those benefits aren’t realized at the time you’re talking about them. If anything, the changes slow down other’s traditional ways of working. They can’t just grab some off-the-shelf code and move on.
Being a DS PM is full of potholes, tripwires, and false directions like this.
To break down this “hard job,” we’ve put together your Ultimate Guide to Design Systems PMing. Over 5,000 words, we’ll go through:
What are Design Systems (DS)?
Deconstruction of 5 of the Top Design Systems
The Challenges of being a DS PM
How to plan a roadmap as a DS PM
The best ways to quantify impact as a DS PM
The common pitfalls of DS PMing
This will surely help you uplevel your work within design systems, or be a better design systems PM should that be your next assignment.
Let’s get into it.
What are Design Systems (DS)?
Broadly speaking, Design Systems are a tool for scaling good design decisions across the product.
Design Systems bridge the gap between design and engineering, offering code snippets alongside Figma assets, as well as tooling to support adoption and contribution.
The basic thought behind Design Systems is that building a design component is an investment of resources upfront that can be amortized over a long period of time as the number of product artifacts that uses it grows.
Design Systems have different shapes. The most common shape they take is a style guide website plus links to several Figma files. As they grow in maturity, they add components, design tokens, guidance, complex UX patterns, interaction guidance, product language guidance and more.
What is the makeup of a typical Design Systems Product Team?
They vary widely.
Usually, they start as a project led by a few designers, who end up product managing the system through its lifecycle. In other situations, engineers start them as they comb through the code base and try to standardize common components.
But as the scope of the work increases, they grow into full-fledged product teams. These can consist of multiple designers and engineers, product managers, content designers and accessibility analysts.
Design Systems as a Product
When a product manager is involved with Design Systems - versus being fully design-led - the team often treats the Design System as a product.
Product Managers prioritize the roadmap based on what will be most impactful for the business, instead of what’s the most pressing design need. Product Managers are especially helpful if you want to roll out a new brand redesign.
They can manage communications and relationship building. The PM becomes the “change agent.” For all those reasons, most large Design Systems have a PM. What do those look like?
Deconstructing 5 of the Top Design Systems
Design System 1: Shopify’s Polaris
Shopify provides an impressive suite of resources designed to get new adopters off the ground. Look at how comprehensive it is:
This is amongst the gold standards for a public Design System. It includes all of:
Foundational design guidance and recommended resources for creating good merchant experiences, covering topics such as experience values, design guidelines, and product content.
Figma community resources for Polaris components, styles, and icons, with an onboarding guide available for new Figma users.
Development resources like NPM packages, design tokens, and a VS Code extension.
Tutorials for building a Shopify app that can be accessed in the Shopify admin, including an app initialization command that generates starter code for your appI.
These are the four categories you generally want to include in your Design System (with the fourth optional if users aren’t going to spin up their own apps).
A couple best practices are worth highlighting in Polaris. First, it has really great navigation.
The Left Nav makes it simple to find what you’re looking for. It also helps you, at a glance, understand what information is contained in the DS.
On the same theme of simplicity, Shopify Polaris also has really easy to read Do’s and Don’ts.
This makes it super easy for designers to jump to the part they’re interested in and know what not to do.
Finally, it has sandbox code that makes it really easy to edit patterns.
The Sandbox code editing is a game changer. This makes it really easy to create production-ready code as an engineer. It helps you materialize one of the top values of a Design System: more efficient engineering (generally the biggest cost center in any product team).
When you see something at Polaris-level quality, it’s easy to understand why Design Systems are valuable.
Let’s go through a few more examples to inspire you. From there, we’ll go into the guts of being a Design Systems PM (the juicy stuff you can’t get anywhere else - like how to tie back to metrics).
Keep reading with a 7-day free trial
Subscribe to Product Growth to keep reading this post and get 7 days of free access to the full post archives.