Articles & research papers

Interaction Design

The Full Stack Design System

UI methodologies like Atomic Design bring logic and structure to individual screens. Now it’s time to extend that thinking to every aspect of your product.

  1. 50 years ago graphic designers figured out that it’s a good idea to come up with some shared underlying rules when designing a bunch of related things.
  2. Digital product designers realized this is also a good way to make sure your buttons always look the same. “Design Systems” emerged as a useful way to build consistent UIs.
  3. But most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be.
  4. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.
  5. By embodying product concepts in Design Systems designers can go beyond consistent UIs towards creating consistent products.

The Full Stack Design System

Atomic Web Design

Atomic design is methodology for creating design systems. It provides a clear methodology for crafting design systems. Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them.

Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.

There are five distinct levels in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Atomic Web Design

Building a Visual Language- Behind the Scenes of Airbnb’s New Design system

Working in software development and design, we are often required to ship one-off solutions. Sometimes we’re working within time constraints and sometimes we just haven’t yet agreed upon a path forward. These one-off solutions aren’t inherently bad, but if they aren’t built upon a solid foundation, we eventually find ourselves having to pay back accrued technical and design debts.

Visual language is like any other language. Misunderstandings arise if the language is not shared and understood by everyone using it. As a product or team grows, the challenges within these modalities compound. A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.

While this was a monumental task that ended up requiring efforts from many of our product teams, we found that creating our Design Language System was worth the investment and a huge leap forward. Since the design language and code are often shared, we can now build and release features on all native platforms at roughly the same time. Development is generally faster, since product engineers can focus more on writing the feature logic rather than the view code. Additionally, engineers and designers now share a common language.

Building a Visual Language : Behind the scenes of our new design system


Emojis today are an integral part of mobile communication letting us react and emote quicker in our conversations. Emojipedia is an emoji resource that offers information on different types of emojis and what they mean.

You can browse Emojipedia by category, popularity, platform and unicode versions to know more about an emoji.

Or maybe you prefer to tweet the Botemoji an emoji and let it tell you what it means.

Design Census- A Survey by Google and AIGA To Check Salaries and More

Google and AIGA have released survey results of their first annual Design Census—an open and collaborative resource for you to important things like gauge design salaries, benefits, working hours and job satisfaction. It offers meaningful filters like location, job type, seniority levels, industry and more.

Design Census

Influence Principles- The ‘Liking’ Principle in User Interface Design

People prefer to say “yes” to individuals and organizations they know and like. Same goes for websites and other user interfaces.

The key to effectively employing the liking principle is user research. If you don’t know your users well, it’s very difficult to anticipate what techniques (similarity, familiarity, cooperation, association, and praise) will have a positive impact. Research techniques such as surveys, interviews, and usability testing can all contribute data to this exploration.

The ‘Liking’ Principle in User Interface Design

Google’s Responsive Web Design Basics

The use of mobile devices to surf the web is growing at an astronomical pace, but unfortunately much of the web isn’t optimized for those mobile devices. Mobile devices are often constrained by display size and require a different approach to how content is laid out on screen.

There is a multitude of different screen sizes across phones, “phablets”, tablets, desktops, game consoles, TVs, even wearables. Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.

Google’s Responsive Web Design Basics

Happy New Year! These Were the Most Popular Posts of 2015

As the curator and creator of The UX Bookmark, I would like to wish you all a blessed 2016! 2015 has been a good year for me and I hope it was for you too. Get out there and chase your dreams. Be true to yourself and live in the now.

Here is what was read the most on The UX Bookmark in 2015. You might have read some of them. Read the rest. Enjoy!

  1. A huge list of Style Guides and UI Guidelines
  2. Ultimate guide to table UI patterns
  3. Charting application alternatives to using Excel
  4. Download IDEO’s Human Centered Design Toolkit
  5. Useful Visio Macros

Checkout Usability- Helping International Users Checkout

Victoria’s Secret uses a checkout usability tactic that may improve the usability of your international checkout. VS asks its customers to indicate their billing address in the first step of the checkout form. (Even with geolocation tools, it’s good to ask as a user’s billing address may be different than their IP location).

Helping International Users Checkout

Free Online Graph Paper / Grid Paper PDFs

Here is a very useful collection of downloadable and very printable graph papers of the types:

  • Squares
  • Triangle and Hexagonal
  • Circular and Polar
  • Asymmetic
  • Specialty
  • Writing and Note-taking

Free Online Graph Paper / Grid Paper PDFs