I read 25 books in 2022, which is actually 1 more than in 2021. I definitely thought I read fewer then last year since we welcomed our daughter to the world this year (welcome Poppy!), but it turns out I maintained my reading pace.
Of note: I read 33% fewer fiction books this year (only 2 this year, down from 3 hah). Most of the books I read continue to be art and design related. Only 8 were by women, and 1 by a person of color. I did a much worse job at reading perspectives of under-represented peoples compared to prior years. This is also a reflection that most art and design books are written by white people.
Understanding Comics by Scott McCloud: This has been on my reading list for years, and is recommended in basically every list of “X books every designer should read,” and I’m glad I finally did. It’s full of great principles of storytelling and visual communication.
How Buildings Learn: What happens after they’re built by Stewart Brand: Yet another book that’s been on my list for years, and is also on every recommended reading list for designers. But I see why – it’s a super interesting read about buildings and how they learn and adapt to use (or don’t). It lowered by respect for architects since it describes them as “stylists” and people who care more about awards and getting in magazines over listening to what the building inhabitants want (this is a broad brush, and I’m summarizing what was said in the book, but I know not every architect is like this). Especially surprising to me was to learn that post-occupancy evaluations (POEs), which is when architects talk to their building’s inhabitants to learn how well it works for them in day-to-day use, is rare. This is unthinkable to me as a designer since my bread and butter is talking to the users of the products I design to understand if they work for them or not, and using that to improve the product.
Creative Doing: 75 practical exercises to unblock your creative potential in your work, hobby, or next career by Herbert Lui: I love books about creativity, the creative process, and exercises to become more creative. This book has all 3. Now if only I had more time to do the creative exercises…
Barbarian Days: A Surfing Life by William Finnegan: This is part memoir, as told through stories of surfing. I didn’t expect to enjoy this as much as I did. It starts slow, but then finds its groove as the author takes us through his surfing adventures he’s had all over the world. Learning about what makes for the perfect wave, the conditions to look for, the type of coastline, and so on, was surprisingly interesting. And he weaves into that the spiritual side of surfing, why he does it, and what drives him to keep doing it as he ages.
The Passage of Power (part 4 of The Years of Lyndon Johnson) by Robert Caro: And of course, Robert Caro’s last published volume of the LBJ biography makes this list. Yet another fascinating read about the man himself, presidential power, and how our government actually runs. This volume features the assassination of JFK and Lyndon’s ascension to the presidency, during which time a lot was happening behind the scenes that I had never heard about before (since most historical records focus on the assassination itself): multiple scandals closing in on LBJ, his incredibly smooth assumption of power and continuation of JFKs agenda despite being almost completely excluded from his predecessors administration, and the very short amount of time he had to break the logjams in Congress and show the American people he was a president who could get things done (and therefore get re-elected the following year). Really good read, and now I’m eagerly awaiting the 5th (and supposedly final) volume to be released, except Caro is in his 90s so… 😬
Full reading list
As always, you can view the full list and follow along with my current list in Notion.
Color Scheme: An Irreverent History of Art and Pop Culture in Color Palettes by Edith Young
The Overstory by Richard Powers
A Roomful of Hovings by John McPhee
White Fragility by Robin DeAngelo 👍
The ABC of Lettering by Ivan Castro 🖌
Understanding Comics by Scott McCloud 👍
Cribsheet: a data-driven guide to better, more relaxed parenting, from birth to preschool by Emily Oster 👨👩👧
Accelerate: Building and scaling high performing technology organizations by Nicole Forsgren, Jez Humble, and Gene Kim
Design: Type. A seductive collection of alluring type designs by Paul Burgess 👍
1000 Record Covers by Michael Ochs
New Retro: Graphics and logos in retro styles, Designed and published by Victionary 🎨
Not All Diamonds and Rosé by Dave Quinn
About Face: The essentials of interaction design (4th edition) by Alan Cooper, Robert Reimann, David Cronin, Christopher Noessel 👍
Severance by Ling Ma
Creative Doing: 75 practical exercises to unblock your creative potential in your work, hobby, or next career by Herbert Lui 💯
Drunk: how we sipped, danced, and stumbled our way to civilization by Edward Slingerland 🍻
Graphic Design: The New Basics by Ellen Lupton & Jennifer Cole Phillips 🎨
Palette Perfect 2 by Lauren Wager 🎨
The Visual Display of Quantitative Information by Edward Tufte 📈
Barbarian Days: A Surfing Life by William Finnegan
The Pyramid Principle: Logic in Writing and Thinking by Barbara Minto 👍
The World According to Color by James Fox 🌈
Envisioning Information by Edward Tufte
How Buildings Learn: What happens after they’re built by Stewart Brand 👍
The Passage of Power (part 4 of The Years of Lyndon Johnson) by Robert Caro 👍
I’ve recently been doing some experiments with layering, filtering, and masking in CSS. The language has come a long way in the past few years, with properties like filter, mask-image, mix-blend-mode, additional gradient types like radial-gradient, and more, opening the door for Photoshop-like effects that weren’t possible before.
I did these in CSS, as opposed to Figma or Photoshop (where they are usually trivial), partly to see if I could, and partly because CSS provides a lot of advantages over graphics programs: they can scale and be responsive to browser/device sizes, dark and light modes can be controlled via CSS variables (which I didn’t do but it’s possible), they can respond to mouse movement (which I also didn’t experiment with but it’s possible), and they can have scroll effects like perspective scrolling (which I did experiment with).
I followed some tutorials and tweets (which I’ll link to), and pushed some of those in new directions.
Adding noise via SVG filters
I was inspired by this Tweet by Fons Mans, where he suggests adding noise to gradients to give them an extra level of polish and pop. This got me wondering how I could do this on the web, and I remembered seeing a tutorial on CSS-Tricks ages ago about how to add noise to backgrounds programmatically via SVG filters. Actually it turned out it was two articles: Grainy gradients by @jimmmy, and Creating patterns with SVG filters by @finnhvman.
I decided to add some noise to a couple of gradients on my site
— the background of the main layout, and the header of the writing page. It’s subtle, but interesting.
It was a fun project to figure out how to do it in code. The tl;dr is I generated a noise filter with SVG, and applied it to an :after element and set mix-blend-mode to overlay.
Blobby background gradients with noise
Fons’ tweet also shows how to layer, blur, and blend elements together to make interesting background gradients in Figma, which I also did in CSS:
All of those inspired me to do a motion blur type pattern by blurring SVG noise in one direction, and layering that on top of some stripes. It didn’t quite come out how I had envisioned (I wanted to get it to look more like putting some paint on a canvas and scraping it down), but it’s kinda cool in its own way:
All of those led me to create some trippy pop art that uses layering and blending to get different colors, and perspective for different scroll speeds so each layer moves across each other at different rates. Scroll within each of these Codepen embeds to see what I mean.
The last thing I did was create this card with a fancy gradient border, inspired by a design I saw somewhere else (I can’t remember exactly where), which uses some layering and blending techniques from above but isn’t nearly as experimental or “out there” as some of the previous stuff.
That’s all I’ve got for now. They’re fun to make, and I feel like I could make a lot more of these since each one inspires new ideas. Plus I’m a lot more attuned to seeing gradients and layers in the world now – lights, shadows, clothing, purses, etc. – which makes me want to figure out how to recreate them in CSS.
While I was the Head of Product Design at LaunchDarkly, I hired 12 people in a year and a half. In that time I looked at a lot of case studies from product designers (on the order of 100s, I’m sure) and saw examples of great ones and terrible ones and everything in between. I’d like to share more case studies of my work, so I wrote down what makes for great case studies and bad case studies to guide me when I start writing them.
The best case studies I’ve read…
Are short and scannable, but had enough depth to answer questions I had while scanning, and enough detail to show me your skills.
Have plenty of pictures, from screenshots of the final work to process shots during the project (sketches and wireframes, the team at a whiteboard, etc.).
Provide enough context for me to understand the product, business context, users & customers, problem, goals, constraints, etc. (but kept just to the bare minimum so I can understand the work).
Also include context about your role, and what you did.
Are well-written and easy to follow. Writing the project like a story usually makes it more engaging (as opposed to just point-by-point saying the steps you went through. “First we did research. Then we…”).
Get me invested in the problem you’re solving and make me want to know how you solved it. This will hook me into reading the case study and pull me through to the end.
Have a clear impact that’s contextualized so I know if it’s actually impactful or just metrics theater.
Impress me with your craft and attention to detail.
Showcase projects with enough depth to highlight everything above, without being so sprawling and broad that they just skim the surface of what you can do. Some of the most interesting work I’ve seen in case studies (and in portfolio reviews) were smaller projects that went deeper into the decision making process and craft (but were still impactful).
That’s the advantage of smaller projects — they can go deeper on a narrower problem. Case studies of big projects can go too broad and lack the depth that really shows the level of care and detail a great designer will put into a project (of any size).
Ultimately, a great case study shows me how you work and your strengths, leaving me wanting to work with you.
The worst case studies…
Are confusing, long-winded, and hard to scan.
Don’t show me the work, or just have 1 or 2 screenshots with no explanation of what I’m looking at. (This can be especially bad in product design work where the thing you did might be a small piece of the screen it lives in, and/or more conceptual work like system design and information architecture.)
Converse of the above, some only have pictures, with no context explaining what they are, what the feature/product does, who the users are, etc.
Lack context. Who was this for? What does the product do? What problem were you solving? Why was it worth solving? Etc.
Don’t show me your process, how you got to the end result, or how you make decisions along the way. They just show the final product.
Don’t emphasize your strengths. If you say you do everything, I’m left thinking you’re not great at anything (no one can master every UX skill).
Leave me wondering what you did versus the rest of the team (especially if you worked with any additional designers)
Don’t tell me the impact. So you designed and shipped a thing. Did it matter? What was the impact to customers and the business?
Go way too deep on theory and idealized product design/discovery processes rather than telling me what you actually did.
Formulaic. They followed a template and just rotely filled in the details (sometimes incorrectly). These are an instant turn off and boring to read and you can smell them a mile away.
This is most common with case studies of designers coming out of bootcamps, and I don’t want to come down too hard on people trying to break into the field of product design. Templates are useful in these situations, and for entry-level roles I won’t give negative marks to anyone who follows a template. But once you have a few years of experience under your belt, it’s time for your case studies to grow up.
So where does that leave us? My ideal case study includes these ingredients (doesn’t need to be in this order):
Context: Help me understand what I’m looking at. Specifically, what’s the problem? Who is it a problem for? What are users trying to accomplish? What are their pain points? Is this an evolution of an existing feature or wholly new? What are the business goals and stakes? Why was this project important? Constraints? Scope? What’s the team team you worked with, and your role specifically?
Solution: Show me the designs! How did you solve the stated problem? Ideal case studies have a screenshot with a “wow!” factor that draws me in, but that favors visual design (or designers who work with good design systems), so this will depend on the nature of the project.
Process: How did you get to that solution? What alternatives were considered? Convince me that your solution was the right or best one given the context above. Also make sure to highlight:
Attention to detail: What details did you obsess over? What made it special/unique/yours? Give me an indication of your craft skills.
Strengths: Show off your strengths and how you applied them to this project.
Impact: What was the impact? Did it solve the problem? How did you measure that? Business impact? Customer impact? The best case studies have both business impact and customer impact, with both quantitative and qualitative measures (but not all projects have these, so at least one measure is better than nothing).
Great case studies include the ingredients above while minding these constraints:
Short as possible (for busy recruiters and hiring managers), while providing enough detail to answer questions they might have while scrolling through the work, and showcasing strengths, craft, and attention-to-detail.
Visual. Show at least one screenshot of the finished thing up top. Choose an image that looks appealing and makes me want to learn more. Include pictures throughout the case study to break up the text. Include in progress work, process shots, diagrams, the team together, etc.
Scannable. I should be able to scroll through it and have a good sense of your work without reading (pull quotes, captions, and bolding help here).
These ingredients resonated with me as a hiring manager and are what I’ll be aiming for with my own case studies. I hope they help you, too.
“Creativity is a gift I accept.” This is one of my daily affirmations that I adopted after doing the Artist’s Way. In that spirit, I’m always trying to strengthen my creativity (it is a skill that can be practiced). Here are some tips and tricks that have helped me over the years. I cobbled these together from personal experience and reading many books on the topic (skip to the end if you want some recommended reading).
Tweet-sized summary: Generate lots of options. Refine the best ones until you have something you like.
On generating options
Quality comes from quantity. At the start, generate as many options as you can with no concern for how good they are. Turn off your inner critic and the voice that tells you whatever you’re making sucks (this is easier said than done, but it can be done and improves with practice).
To get going, start with the easy options. Even if they’re basic, or simple, or derivative, or just plain bad (you’ll refine them later. Plus, even a basic idea can spark a more innovative one).
Create the worst version of your idea. Improve it from there.
Start small. Rather than trying to tackle the whole project at once, which can feel overwhelming, try zooming in to one small corner of the work and start there. Once you get the ball rolling, the work will start to flow and you can expand outward from there.
If you’re feeling stuck or not seeing paths forward, set a target number of concepts to generate. It doesn’t matter how bad each one is or how small of a change one version is to the next as long as you reach the goal number. It could be 10, 20, 50, 100 — it doesn’t really matter, but it should feel slightly out of reach (but no so out of reach as to feel impossible. Also, I’ve noticed it depends on the domain you’re working in. I’ve found product design to be more constrained than lettering, for example). Once again, you’re just going for quantity. Generate enough options and the sparks will start flying. Eventually at least one will be good.
A-B-Q method: I got this one from Well Designed by Jon Kolko (see end of post for more book recommendations). It goes like this: Create a version of your idea (A). Then do an iteration of that idea, such as by changing one part of it (B). Then come up with a completely different version of the idea (Q). It should bear no resemblance to “A” or “B”. This is a good technique to find new, uncharted territory to explore. It’s also a technique I use when I’m stuck.
Pay attention to when you get into a “flow” and the work just comes, versus when you’re stuck and can’t seem to make progress. Figure out what you can do to get yourself in the right mental state every time you sit down to create. Maybe it’s the time of day, or your physical setup, or the music you put on, or a candle you light, or morning routines like having a good breakfast and doing your morning pages to calm your mind (these are all things that help me). Everyone has different triggers that get them in the right mental headspace, so figure out what those are for you (this is one reason I love reading about other creators’ processes).
After you’ve generated lots of ideas, choose the best ones to refine. What is “best”? Only you can decide. Whatever is speaking to you. Or closest to the vision in your head. Or feels right. Or you’re most excited by.
Identify the rough edges, and sand them down, one by one. Keep doing this over and over again until there are no more rough edges to sand.
How do you spot rough edges? And how do you fix them? Spotting them is usually easier than knowing how to address them. This is the most mysterious part of the creative process since no one can really say what led them to make the leap from point A to point B. The best “technique” I have is to regularly fill your creative tank with work you admire and inspires you. This will hone your eye for what’s “good” and “bad” (sidenote: there’s no universal “good” or “bad”. It’s only what you deem “good” and “bad.” Chasing what other people tell you to like won’t lead you to create work you’re proud of and excited about). It will also give you new ideas to try in future projects. I subscribe to a lot of email newsletters and blogs that contain inspiring work, but I’m also constantly paying attention to the world around me for objects that catch my eye.
Save good work into an “Inspo folder” (this is what I call my Notion page. Austin Kleon calls his a “swipe folder.”) so you can refer back to them later. This can be helpful when you’re feeling stuck.
At the beginning of projects, create a mood board of inspiration for that project. This is a great resource to draw on when you hit creative walls in a project.
Analyze work you admire and try to figure out what makes it good. Looking at creative works with a critical eye will help you identify aspects of their work you can incorporate into yours.
An even better version of the above tip is to re-create work you admire. Doing so forces you to engage with it on a much deeper level than you would otherwise. You’ll see all the details that would otherwise go unnoticed. You’ll find decisions the creator made that cause moments of surprise and you’ll ask yourself, “Why did they do that?” Those moments are gold. You’ve stumbled across a decision another person made that you wouldn’t have, which is a new trick that you can use in the future. These are growth moments and new neural connections are being formed in your brain.
The work you surround yourself with and re-create will come out in the work you produce. So surround yourself with good work! And continually push to broaden your horizons to new fields, new artists, new cultures, etc., etc.
Share your work with other people for feedback. Their reactions can help you gauge what’s working and what’s not working. This can be other creators you admire, trusted friends and family, or people in your target audience.
Make time for play. Just do something for fun that isn’t tied to any specific project. This could be learning a new technique, trying a new tool, following a tutorial, or just making a mess with materials that inspire you. This is another way of learning new techniques and tricks that you can pull out in future projects.
Always be willing to throw out what you have and start over. If you’re stuck, it may be because this idea isn’t the one. There may be better concepts out there.
Embrace mistakes. Sometimes these lead to the most interesting and novel breakthroughs.
Remix the most promising aspects of different concepts together.
On getting un-stuck
Try a different tool. Look at the work upside-down. Listen backwards. Run it through some filters. Use your non-dominant hand. Just do something different. Let go of the expectation that it needs to be “good” or “usable” to be worth spending the time on. The idea is to break out of the mental rut you’re in. And to have some fun!
Seek out inspiring work. Your folder of saved work can often come in handy here. But also, keep a catalog of places to go (websites, books, museums, etc.) that has work you can draw on for new sources of inspiration. Passively waiting for inspiration to hit doesn’t always work, so actively seeking out new sources can get you un-stuck.
Take a walk. Wash the dishes. Pet the dog. Sleep on it. Just stop focusing on the work for awhile and let your unconscious go to work and pop new thoughts into your head.
Instead of trying to create something good, try creating the worst version of the thing. This can break you out of mental ruts, let you ignore constraints (real or imagined), and see new paths to go down that you didn’t see before.
Remove all constraints. They may be inhibiting you.
Add constraints. Too much freedom can overwhelm you with options and the intimidation of “the blank page.” Constraints force you to come up with creative solutions.
Creativity is weird. There’s no set way to get un-stuck, just techniques to try that may or may not work for any given project.
On knowing when to stop
Stop when you can’t find any more rough edges to polish.
Stop when the work matches your vision.
Stop when it feels as good as you can possibly make it.
Stop when you like it. When you’re proud of it.
But be wary of over-working an idea. Sometimes you can spend too much time refining the work. Some decisions may be overthought, or come across as trying too hard, or you remove the small imperfections that make a work seem personable and human. Where that line is is really hard to judge, and depends on the nature of the piece. I’m still figuring out where that line is for myself.
Those are some of the tips and tricks I’ve learned over the years that have helped me be more creative and produce better work. I’m always searching for more, but some places that informed my thinking are:
The Artist’s Way by Julia Cameron. This is, by far, the best book on creativity I’ve ever read. It’s more than a book – it’s a 12-week program that will actually make you more creative. I wrote about about my experience with it here.
Keep Going by Austin Kleon
Steal Like an Artist by Austin Kleon
Creative Doing: 75 Practical Exercises to Unblock Your Creative Potential in Your Work, Hobby, or Next Career by Herbert Lui
Understanding Comics by Scott McCloud
Making Music: 74 Creative Strategies for Electronic Producers by Dennis DeSantis
Bird by Bird by Anne Lamott
Well Designed by Jon Kolko
The Shape of Design by Frank Chimero
The Storm of Creativity by Kyna Leski
Liminal Thinking by Dave Gray
Creative Selection: Inside Apple’s Design Process During the Golden Age of Steve Jobs by Ken Kocienda
Draft No. 4. On the Writing Process by John McPhee
The War of Art: Break Through the Blocks and Win Your Inner Creative Battles by Steven Pressfield
The Messy Middle by Scott Belsky
Working by Robert Caro
The Art of Noticing by Rob Walker
On Writing by Stephen King
Vernacular Eloquence: What Speech Can Bring to Writing by Peter Elbow
Story: Substance, Structure, Style, and the Principles of Screenwriting by Robert McKee
“We need a North Star.” Most product designers have been asked for one at some point, and it usually causes us to internally groan and roll our eyes (if not externally, too). We’ve all worked on North Stars that are a frustrating waste of time and served no purpose, and where the sole burden was on us to “come up with the vision.”
But many of us have also created ones that painted an inspiring vision, getting a team excited about the road ahead and keeping them on track to deliver that vision.
I led a discussion in a product design meeting at LaunchDarkly to learn about the team’s experiences with North Stars. What made for good ones, and what made for bad ones? What follows are some takeaways from that discussion.
A design “North Star” is a visual output (commonly a video, although it can also be a storyboard, a series of hi-fidelity designs, etc.) that explains the high-level narrative of why an idea or concept will improve people’s lives.
They should be inspiring, get people on the same page and excited about a vision, but still be realistic.
It’s not a roadmap, a spec, a detailed design mock, nor does it answer every question about how an upcoming product or feature should work. What eventually gets built won’t be exactly like the North Star.
They can be used for projects as big as a whole new product or service, or as small as individual features.
Julie talks about North Stars as very future forward, and primarily videos, but myself and the team have created ones for individual features, and the output was just static screenshots. I’ve also called them “hero shots” and “concept mocks.” You could argue these aren’t “North Stars,” but spiritually they’re the same: get people excited about the future they’re building.
Do’s and Don’ts for North Stars
Simply put, good North Stars distill complex concepts to their essence, and get people excited about the future they’re building towards. These “Dos” and “Don’ts” will guide you to successful North Stars.
Design for an unspecified time in the future
Redesign every screen or specify every interaction and design detail
Put all the work on the designer
Have too many cooks in the kitchen
Spend multiple quarters making one
Do it “for fun”, or because someone said you’re not “innovating enough”, or because you’re bored with the current experience
Set a target timeframe for when this could be achieved. In my experience at high-growth startups, a timescale of 6–24 months is best for most features or products, but it will depend on your project and needs.
Scope it aggressively to 1-2 screens, a handful of use cases, a persona — something to set the focus on the most important aspect of a future product or feature. You’re trying to sell a vision, not answer every question. Good North Stars should tell a story in just a couple of screens.
North Stars should be a cross-functional effort, like any product work. Expecting the designer to “come up with the vision” without input from engineering, PM, and other stakeholders is doomed to fail.
Conversely to the above, too many people involved slows down the process, leads to too many opinions, and takes too long to get to consensus. The triad (design/eng/PM) is usually the right group size.
A north star should take somewhere between days and weeks to create (maybe months if it’s a multi-year vision with filming and editing to do), depending on the time frame and scope of the future vision you’re trying to communicate.
North Stars need to be tied to concrete initiatives that are actually going to be built. Doing them speculatively will be a frustrating waste of time for everyone involved.
North Stars That Worked
At both LaunchDarkly and my former company, Gladly, we’d make “hero shots” of features we’re planning to build for roadmap presentations and sales decks. They’re a single screen that communicated the feature to prospects. We’d usually spend a few hours designing this 1 screen to represent a whole concept. It forced us to distill complex features down to their essence. When design and development actually kicked off, they kept our focus on the purist version of the idea. There were a few times when features were getting too complex, or we were over-optimizing for edge cases, and the “hero shots” reoriented the team back to the essence of the concept.
Hero shot for LaunchDarkly’s “global search”
Hero shot for approvals in LaunchDarkly
North Stars That Didn’t Work
While at Optimizely, myself and a couple of other designers worked on a “North Star” (which we called a “concept car”) to envision what the product would do in some far off future (we didn’t have a specific time frame in mind). We were tapped by the co-founder to do this as a way of getting the company excited about the future of the product, get investors bought into our vision, and to sell candidates on joining the company. It was not tied to any product initiatives, nor did it feed into product strategy.
We spent months speculating on a bunch of cool new features, redesigning the UI, and rethinking the core flows. The end result looked awesome and was packed full of new stuff that solved existing pain points. The company was excited about this potential future we could build.
Optimizely’s “concept car”
But it went nowhere. It was shared with the company, shown to some investors and candidates, but ultimately none of it was built. It was way too broad in scope, had a non-specific time horizon that was too long, wasn’t tied to any product initiatives, wasn’t an input to product strategy, didn’t tell a story, and wasn’t cross-functional. Basically, we did everything wrong.
When used properly, North Stars can be a fantastic tool to accelerate projects and sell a vision. But when used incorrectly, they’re a frustrating waste of time. Hopefully now you have some guidance on when and how to do North Stars.