This pet project of mine is a chance to explore my love of flags and give myself little code challenges at the same time. 

I'll pick a flag I like—could be state, city, municipal, or anything, really—and recreate it in CodePen, using a new technique or giving myself a new constraint with each one. For example, Chicago is rendered in HTML canvas. Seychelles uses css clip-path. Colorado uses only Tailwind CSS.

(Of course it would be easy to copy the design in Illustrator and import it as SVG code, but there's no fun in that.)

Provo, Utah's old flag might be my favorite so far. The only HTML here is a single H1.

Obviously, real-life flags aren't responsive, so my goal is for them to render proportionally when shown in CodePen's 4:3 thumbnail—but a little fluidity is a nice bonus.

And the thing is, I've learned more than just a few new code techniques from this project. Studying how these flag designs are constructed has taught me about the art and meaning behind them—e.g., I never would have known that the black lines on the flag of South Korea are called trigrams, and each references a set of classical elements. Or that the flag of Bavaria references the colors of heaven (white) and the sky (blue), a reference to their anthem.

Check out the full collection on CodePen.

Two things made an impact on me this week.

The first was Expressive Design Systems by Yesenia Perez-Cruz. It was my fourth Book Apart and the 31st in the series, and like all of its siblings, it's on point. I opt to read ABA titles that are indirectly related to my focus (UI design)—like content, research, and cognitive bias—because I want to get a primer on topics that I can fold into my design work to make it better. EDS is closer to my wheelhouse than any of the others I've read, but I picked it up because I realized I don't actually know much about how to build, maintain, and develop a proper design system.

In seven years of agency work, I've created dozens of pattern libraries and style guides, but you can't swing a dead cat on Design Twitter without hitting someone who's in the middle of telling you that a static artifact doesn't constitute a design system. I've never truly lived with a design system for long enough for it to reach maturity, never used or contributed to one as part of a dedicated team. And if my goal is to one day join a digital product team as an in-house designer, I need to know more than just what a design system isn't.

EDS demystified two things for me: the process for building a new design system, and the idea that they have to be restrictive by nature. Like all ABA titles, it's concise and to-the-point, with an eye towards practicality. In particular, the concepts that I bookmarked as especially meaningful were:

The idea of describing components by their function, rather than their content or design.

The idea of designing tokens like spacer units, text styles, and even meaning in relative rather than absolute terms for better flexibility and scalability.

The concept of levers and dials, where levers are foundational aspects of the design system, and dials are the fine details.

I highly recommend this book to anyone who does—or wants to do—design system work.

The other thing was a documentary called The Orange Years: The Nickelodeon Story. It's a fun nostalgia trip for those like me who grew up on Rugrats, Double Dare, and Clarissa Explains It All. But it also gave some insight into the creative genius behind Nickelodeon's epic hot streak in the 90’s. They had an insane collection of creative talent, whom they trusted to explore and experiment. They valued authenticity. They talked to kids, not down to them.

Even their logo had lax usage guidelines: “Don't mess with the wordmark, and use orange”—that's it. Everything else was fair game.

Maybe EDS was just fresh on my mind, but what I see is a great example of an expressive design system. Not just the logo, but all the creative work done at Nickelodeon was governed by a system that left room for divergence and creativity, and it was a big reason why they thrived in the 90’s and 2000’s.

Expressive Design Systems and the Genius of 90’s Nickelodeon

I was recently asked by a freelance client to help craft an email strategy for both trial users and paid users of their product. To get myself in the right headspace for this task, I took five minutes at the beginning to do an empathy exercise that I found extremely valuable, so I thought it'd be worth sharing.

You probably already know how important empathy is in UX design. In this case, I found this exercise a helpful starting point because while I did lead the UX and UI design of the product itself, there are many things I'm not:

I'm not a UX writer. I have writing skills, but it's not my primary focus.

I'm not an end user of the app. I helped design it, but I don't run the kind of business that would benefit from it so I'll never experience it from that perspective.

I'm not a marketing specialist. These email blasts are an important touchpoint in the marketing strategy and brand experience of the app, which I'm not directly overseeing — although my work designing the app does make up the bulk of the brand experience.

Acknowledging these shortcomings helps identify my blind spots, which is the first step in confronting one's own bias. The downside of this exercise is that it's self-centering; it's important to make sure you don't project your own experience onto all your users, as that would undermine the work you're trying to do and potentially exclude the experience of your more marginalized users. To get the fullest picture of your users' real needs, you should always lobby for qualitative user research and/or more robust empathy workshops.

That said, this is a low cost, high reward exercise that ensures you're approaching your design from a customer-centric perspective.

Put yourself in the user's shoes. Now think about what you're feeling as you go through the experience. Use these questions as a guide: What are my frustrations, my needs, my goals? How might my past experiences influence my mindset and behavior? How do I want to be feeling? If the experience goes badly, how will I react? What if it goes well?

Treat this prompt like a jumping off point, not guard rails; once you get started, you should let the story take you wherever it goes. The key thing here is to orient the narrative around expressive feelings. Emotions are at the root of most every human decision, so it's critical to explore those first. Once you know how your users might be feeling, you know not just what to design, but how to design it. You can work more strategically.

Here's what the result of my exercise looked like:

In my case, my main takeaway from this exercise was that we have a fine line to tread when it comes to email strategy. We want to maintain a strong relationship with the customer to help them succeed, but can't just blast them with emails that might feel irrelevant. We have to be thoughtful and considered with our timing, our headlines, and our content strategy; speaking directly to the user's motivations and uncertainties is the key.

Furthermore, this gives us a basis on which to judge the approach and success of the ensuing UX work. Outputs can be measured against the empathy narrative: "Does this headline tap into the user's mental state? Does the content of this email help nudge users who are feeling overwhelmed?" 

My first stop for further reading is almost always Neilsen Norman Group. They have a great article on the difference between sympathy and empathy. To combat self-centering, give David Dylan Thomas' Design for Cognitive Bias a read. And to learn more about more in-depth empathy workshops, this article on Medium is a good deep-dive.

If you use this method on your projects, or have any questions or feedback, I'd love to hear from you!

ServiceMaster-backed startup HelloHome has an ambitious mission: improve the home selling process while making it cheaper at the same time. 

If you’ve ever been a part of one, you know that real estate transactions are complex operations, fraught with anxiety and stressful for everyone involved. HelloHome was conceived as a replacement for the traditional seller-agent model, an app that charges a flat fee and guides you through every step of the process—something like a “Dominoes Pizza Tracker for Home Selling,” according to their own elevator pitch.

For contractural reasons, I won’t be able to show any screenshots of the work here. Feel free to reach out if you want to know more.

I was brought on as as the head User Experience and User Interface designer, a hybrid role in which I drew the primary user flows, built a design system for the app, and helped QA the implementation. It was a huge undertaking. Working directly with the CEO and CTO, we formulated a working MVP in just over a year.

I took this project on as a freelancer, knowing that it would be a challenge to squeeze all that work into the margins, but that it would be worth it to expand my skills as a UX/UI designer. Perhaps more importantly, it gave me an opportunity to be a design lead on a product team, a seat at the table where I could advocate for UX and capital-d Design as the key to market success.

Before opening any design tools, it was important to fully understand the pain points in the traditional home selling experience so we knew exactly what problem to solve. Each transaction is unique, with different sources of friction and a dozen potential points of failure.

At a macro level, the value that HelloHome wanted to deliver was *transparency*. If the agent, buyer, and seller all knew what to expect next at all times, our mission would be successful. As a recent first-time home buyer myself, I knew first hand just how opaque the process could be at times, and often felt unprepared for what had to be done next. A good agent can help, of course, but the digital generation is always ready to embrace a tech solution to a traditional problem.

Not wanting to fall into the bias of centering our own experiences, the team also interviewed the company’s existing network of real estate professionals, and evaluated how competitors like HomeLight were solving the same problems. This process confirmed a lot of our suspicions, but also illuminated new problems and insights we might have otherwise missed.

HelloHome would be an immense app. Understanding even the core user flows required starting with basic flow charts and low-fidelity wireframes.

This process helped us define not only the ideal user experience, but also the technical requirements for the MVP. Understanding how both interacted with each other was job one.

In the first round of wireframes, I took a holistic-yet-low-fidelity approach that further clarified what the main sections of the app would be, and what the primary actions we wanted the user to take at each step would be. Wireframes were the perfect way to do that, as they don’t prescribe a UI that might distract from the actual lessons we were trying to learn.

But eventually, it was time to make things pretty.

HelloHome is a four-headed monster: It contains a buyer dashboard, seller dashboard, admin dashboard, and marketing site. By designing atomically, I was able to ensure that styles and components shared across all four interfaces shared a core DNA. This meant that no matter what your touchpoint was with HelloHome, your experience with the brand would be consistent, which was critical to our goal of instilling confidence in our users.

Once the design started taking shape, I batched up the work and delivered it to the dev team in phases, so we could work in parallel and get to market more quickly.

If I’m being honest, there were times during this project that I felt like I’d bit off more than I could chew. It was an unfathomable amount of work to take on as a solo designer. 

But the pains I felt were growing pains. The technical skills I developed working on HelloHome have applied to almost every subsequent project I’ve worked on, and the experience gave me a taste for design leadership that, I hope, will inform my career trajectory.

Today is the election. I hope that by the end of the day we have something to be optimistic about; until then, to keep the stress and anxiety and powerlessness at bay, I’m doing an exercise. 

It’s time to leave the “I’m not very political” safe-house that I should have left years ago. Don’t get me wrong – I’ve always voted, and voted progressively. But if the last four years have taught me anything, it’s that politics isn’t something you can compartmentalize. As long as politics is used to separate families, cage children, disenfranchise voters, steal elections, pack federal courts, criminalize poverty, quell protests, embezzle public money, and deny climate change, my habit of keeping my views private is, at best, immoral.

In my wildest dreams, this is what America has accomplished in her next 100 years. It’s what I’m voting for.

A More Inclusive, Democratic Political System

A four party system has emerged, in which today’s Democrats are the center left, today’s Republicans are the far right, and there’s room for a progressive left and a conservative right

Puerto Rico is a state (and we have a new flag!)

The Electoral College has been dismantled

The Supreme Court is 11 seats and new appointees face a 25-year term limit

Equitable Social and Economic Opportunity

A restorative reparations program has been instituted for Black slavery and Native American genocide, bridging the racial wealth gap.

Childcare and Pre-Kindergarten are free for all.

The healthcare industry has been replaced by taxpayer-funded universal healthcare 

There’s a more proportional tax on extreme wealth that pays for expanded social programs

Police forces nationwide have been demilitarized, defunded, and are subject to strict civilian oversight

Our borders are open and we offer a fair path to citizenship for migrants, especially those seeking asylum

Rights to marriage and non-discrimination protections for the LGBTQIA+ community have been codified and upheld by the Supreme Court

We’ve guaranteed government-build housing as a human right

Marijuana has been decriminalized and past convictions have been expunged

Progress in Infrastructure and Climate Change

We’ve fully transitioned to zero-emission energy sources while providing millions of unionized jobs in clean energy (a.k.a. the Green New Deal)

We’ve build an affordable, cross-country high speed rail system

High-speed internet is now a free public utility

Taxes are being actively reinvested in the infrastructure and cultural economy of marginalized communities

This short list of readings is intended to reframe how you think about design. Starting with high-level think pieces and narrowing down to more practical, focused guides, I’ve curated this list from the articles and books that have made the biggest impact on me personally. Hopefully they’ll do the same for you.

First, break down your perception of UI design as something that happens in a box. When you’re designing for an edgeless, sprawling space like the web, don’t start by drawing a box for it to fit inside. Instead, go with the grain. What is the web’s grain? It’s “an edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment.”

Along the same lines, challenge your belief that the solution to every problem is an app—or even a screen. In this (admittedly preachy) book, Golden Krishna walks you through three principles of thoughtful design that go beyond “slap an interface on it,” and envisions a future where computers serve humans, not the other way around.

Take a break from the cerebral stuff for a moment, and absorb some of Steve Krug’s practical, common-sense advice about usability. You’ll be surprised how well this 20-year old book has aged (but you can also pick up the revised version from 2013).

It’s time to confront the invisible biases that shape the way we design for others, and the way others consume that design. This is a short, consumable introduction to a complex topic, so look into the Resources listed at the back to deepen your understanding.

A good designer understands the basic human psychology, so read through and then bookmark this pocketbook guide to some of the most common UX concepts. If you’ve been designing for years, or just have a good eye, you may have intuited some of these ideas already.

Learning to write, and to write convincingly, is essential to becoming a better designer. That takes practice, so get a jump start by learning Aristotle’s three elements of rhetorical appeal: Ethos, Pathos, and Logos. Yes, a little bit of ancient Greek philosophy is going to help you write sharper H1s. It’s also going to inform how you develop design concepts, how you communicate with clients, and how you present your work.

Lastly, it’s time for some nuts-and-bolts, tactical advice to improve your work. Design is about thinking, yes, but at the end of the day, the designer should be able create something something beautiful, accessible, and delightful with the flick of a wrist. The tips and tricks in this book are the kinds of things I tend to do without thinking, which sometimes makes it hard to teach to others. But Steve and Adam manage to do it.

Seven Readings to Reframe How You Think About Design

Recent Posts

Flags in Code

Expressive Design Systems and the Genius of 90’s Nickelodeon

The Five-Minute Empathy Exercise

HelloHome: UX/UI Case Study

Manifesting America's Next 100 Years

Seven Readings to Reframe How You Think About Design