Thoughts on Advancing Design Culture through Technology

My early hacking with React-Sketchapp, where I generated different card types in Sketch through Airbnb’s React components

Backstory

After reading Airbnb’s Painting with Code, I was prompted to give a company brownbag about my thoughts on its implications for fellow design colleagues. Many of the article’s sentiments behind programmatically defining and enforcing design languages deeply resonated with me. While I can’t claim to be an evangelist of this specific technology (I’m still very much tinkering around), I think it is beneficial to acknowledge the emerging trends around design workflow and to revisit the definition of craft in the context of our evolving tech landscape.

A Designer’s Workflow

Strong products come from strong team cultures. I believe in this principle wholeheartedly. I also believe good design teams are necessarily multidisciplinary: though each contributor may come from a different path, ultimately, they are all problem solvers focused on a different axis of a complex human need. The catch: while good teams have members that balance each others’ craft out in the end, they must also be cautious and make adaptations to thrive in a demanding tech industry.

As I write this Medium entry, I recognize that designers have quite the tall order. Aside from possibly reconciling graphical user interfaces for X number of screen sizes and Y number of platforms for Z number of products (e.g. unique native and web experiences across desktops, phones, tablets, and smart watches), they must also face the emergence of multimodality (e.g. chatbot or Alexa users, anyone?). Because today’s tech is shedding light on various means of gathering user input, designers cannot simply address design from a visual lens. The need for deeply empathizing with the technology behind today’s explosion of product canvases is clearly here.

The highest goal of a designer is this: to ship products that users could adopt as a lifestyle. To support this, we must thoughtfully carve out workflows alongside our product and engineering partners that enable rapid experimentation, implementation, and deployment. Airbnb’s React-Sketchapp, alongside other design tools, addresses two big needs:

1. The need to streamline spec handoff between designers and engineers (e.g. Zeplin, Avocode). No designer or engineer enjoys pixel pushing or meddling with different sources of truth. Consolidation is key.
2. The need to ground design mocks with real data inside the designer’s everyday tools (e.g. Craft). The days of designing too idealistically are hopefully reaching an end: the faster designers can get access to real data sets used in their product, the closer to shipping with precision.

I’ve heard an interesting question repeatedly arise from designers who are still reacting to these automated solutions:

With all of this automation, where does design fit in?

Computers are superb at executing logic and enforcing rules; in fact, they do this far faster and more consistently than humans. Designers shouldn’t let this truth intimidate, but rather understand and harness the full potential. It’s up to us to determine which tasks computers should focus on in order to free up human concentration.

If I could attempt to summarize a typical design process, I can describe the workflow into four modes: Define, Iterate, Polish, and Ship.

My depiction of a typical designer’s workflow

As designers, we can spend considerable amounts of time iterating wireframes, mocks, and prototypes, inciting our inner pixel perfectionists along the way, perhaps even frustrating our engineers for every new coat of blue or new interaction we want tweaked in the production build. And as product requirements explode, we need to painstakingly maintain a robust design language that can scale across flows, devices, and related products. And to properly frame any of our design artifacts, designers spend many cycles trying to identify and hone in on valid user needs, which arguably, is the hardest part. On top of these responsibilities, mistranslations can happen frequently at any point, which jeopardizes quality shipping and time for learning about our users.

If we consider how smart tooling could help us advance our process, for instance:

React-Sketchapp, Craft, Zeplin, and related tools attempt to work alongside a designer’s workflow. They do not replace the need for the designer’s leadership and intervention, but in fact, reinforce the importance.

…Then perhaps we can truly focus on aspects of the product problem that augment personal craft and creativity. In other words, when we understand the role of a machine vs a human, this is when I think a designer’s expertise can shine.

Definition of Craft

I stated at the beginning that a design contributor solves for an axis of a complex human need. Whether your craft is finessing beautiful yet legible typographical compositions or conceptualizing a complex bottom-up information architecture, you have an uncanny understanding for how a human being seeks, learns, and feels about information as a fellow human being. I argue that a designer’s empathy and intuition cannot be automated and must be honed to take a product above and beyond. When we enable the computer to focus more on the objective (e.g. the strict observation of rules) and for the human to focus more on the subjective (e.g. the big blurry product questions), I think that’s when we can achieve harmony.

Ultimately, just as an artist leverages an empathic connection with her favorite canvas and utensils to maximize an expression, so must a designer who wants to articulate her imagination in the world of technology. I assert that the modern UX designer doesn’t need to code like an engineer, but at least have a deep curiosity for channeling the beauty behind the scenes. Maybe this warrants an extensive discussion for another day.

Next Steps

My intention here isn’t to prescribe but to prompt. I recognize that not every designer comes from a programming background, and maybe code seems intimidating to pick up. If you are curious however, I have a gut feeling that just like with learning human languages where you’d eventually pick up key phrases through osmosis if you were dropped in a foreign country, you would also become in tune with the code jargon. And sooner or later, you won’t feel worlds apart from the technology that fuels your design process, but truly in sync with its nuances and potential.

Tips for getting started:

1. Pick up HTML and CSS as starting languages. “Inspect” the code behind websites you use every day. This is a quick way of familiarizing with the lingo.
2. Ask your fellow engineers to guide you through their development workflow. Check out their GitHub repository. Break things. Let them supervise you while you play around in a sandbox. Before you know it, you can contribute minor lines of code in production and you’ve set a new tone in your communication in your team culture.
3. Feeling advanced? Pick up JavaScript (or its cleaner incarnation called CoffeeScript) and learn about different libraries and frameworks. React will be handy for you if you want to use React-Sketchapp.