Design principle: Organizing information by Gavin Lau

How 5 Hats can make data understandable for the user

It is essential for our designs to show well organized information, so the user can understand easily what is shown. It is a key to providing good UX.

Among many ways of showing data, one has stood the test of time and proves to be efficient even today. It is called “Five Hat Racks”.

The concept of the „Five Hat Racks” was originally developed by Richard Saul Wurman in his book Information Anxiety. Later he wrote the book “Information Architect”, where he redefines the “Five Hat Racks” concept to form the LATCH principle.

“Information may be infinite, however…The organization of information is finite as it can only be organized by LATCH: Location, Alphabet, Time, Category, or Hierarchy.” — Wurman, 1996

The idea is that there are five ways to organize all information. In the end it’s about answering the user’s question in a clear way. Avoid organizing information just for the sake of making pretty graphs that don’t contain answers!

“I’ve tried a thousand times to find other ways to organize, but I always end up using one of these five.” — Wurman, 1996

Let’s take a look at the 5 ways of organizing information.


Organizing information by its location. It can be physical or conceptual (spacial) location. We humans have evolved to organize location this way in our daily lives. From using maps for navigating and war strategies to placing our ingredients in the kitchen.

Location organizing is important when the information has multiple different sources and locales.

For example, when designing a particular service we should consider the location of different goods and how they will be distributed. Designing Supermarket’s shelves is a good example of organizing information in physical location.
Pokemon go is good example of app that organizes information by location

Pokemon go is good example of app that organizes information by location

In the digital world organizing by location plays important role, too. Triggering specific UI interactions and notification based on locations for example. Think of GPS and any apps that help with orientation and finding direction. Reminders and other features that prompt you to act based on physical location.

Also, with the rise of VR/AR technologies, organizing information based on location is becoming very important aspect of Information Architecture.

When to use it?

Use it when the relative position of the information you want to present is important. When giving directions or to prioritize what is the most relevant thing to be in reach.

In combination with the “Time” organizing of information we can show the needed answers to the users in the most convenient way.


As the name suggests, ordering information alphabetically is great way to provide random access to data. It is one of the best ways to organize information when the amount of data is big.

For example, the word dictionary or the big phone book be it digital or physical.

We all have used them and know that as long as the user is familiar with the alphabet this method of organizing the data is efficient.

When to use it?

When the information is referential in nature (Dictionaries, encyclopedias, book indexes etc.). When efficient nonlinear access to specific items is required. It is also a good fall back when the information can’t be sorted with another method.


This type of organizing information is probably the most used one by humans. We like thinking about and putting events in linear fashion. Time is great way of categorizing events that have happened over fixed time duration.

Examples: Calendar and meeting schedules, email inbox, project plans, the enjoyable Facebook timeline, order lists in e-commerce platforms, messaging apps and many more.

Organizing by time allows for changes to be easily observed and comparisons to be made. It’s the best way to document history since we humans perceive time in a linear way.

When to use it?

When presenting and/or comparing events over fixed time duration. When you want to communicate a time-based sequence (step-by-step procedures). Organize the information by time when you need to give instruction or when you need to document events in chronological order.


When the information needs to be sorted by similarity or relatedness, using category is the best way to organize it. We could argue that our brains work in similar way, we like grouping similar things together.

This method of organizing information is used across the physical and digital world. From shopping goods and industries to categories on Pinterest and hashtags on Twitter.

Grouping things together into categories makes it easier for the users to find the general type of information as long as they know what they are looking for. It is a great method when combined with the Alphabet one.

When to use it?

This method works well to organizing items of similar importance. If we have indication that people will naturally seek out information by category. We can use information organized by categories to suggest complimenting features/products to increase discoverability.

We should keep in mind that people don’t always group things the same way! Especially true when the properties of the information are overlapping several categories. For example, if we take my Bluetooth speaker, which is water resistant and can be used in the shower. What category should it go in? Bathroom accessories or Audio?

Make sure to user test the terms that define the categories and if they make sense for your users.

Another potential problem with organizing information into categories is the size. The bigger the information the more likely it is that there will be sub-categories or sub-sub-sub-categories. Having this will make finding the information a pain in the butt.

Make sure not to create too many sub-categories if the only way of finding the information is by clicking on each individual category and sub-category.

Hierarchy or Continuum

When the information can be organized by comparing things across a common measure. If the information needs to be organized by magnitude.

For example: Small to large, Lowest to highest, Happy to unhappy etc. Star ratings on services and products, score tables, efficiency, sizes and more.

When to use it?

Use the Hierarchy(Continuum) way of organizing information when there is a shared measurement that you can use to compare things. You can emphasize the information by visually manipulating the sizes or colors of how the information is shown.

Wearing the 5 hats

Using more than one hat at a time is the best way to organize the information you want to use to answer the user’s questions. Mixing categories with alphabetically ordered items. Using Time and Location to organize memorable events. You can use all 5 hats, if needed, to give flexibility of how the information is served.

Allowing multiple ways to view the data is something many users expect to have in today's digital world. To do that we need to wear the 5 hats and use them the best way we can.

Final thoughts

Remember, the most important thing is to organize the information in a way that the user will easily access and understand. Use the data to answer the questions the user has.

By allowing the user to see the information in a way that is relevant to their goals you will create more usable products.



Taking responsibility for the things you launch by Gavin Lau

Launching scares the shit out of me. No matter what it is. The sheer thought of hitting the publish button freaks me out every single time.

Some people celebrate launches like a Gatsby themed New Year’s event. Like there was no tomorrow. Like passing the event horizon, blinded by a light so strong, that it keeps them from seeing what’s yet to come.

But what happens after the launch?

Let’s travel back in time. I’ll promise we’ll get back here in just a moment.

A few months ago I launched Mindful. Mindful is an extension for Google Chrome that aims at making users more mindful about their thoughts, ideas, and ongoing tasks by showing their notes in every new tab.

I made a video to better explain what it does.

Mindful is powered by a text editor engine that has been in the works for almost 10 years. I started working on text-editor experiences in my early twenties and always believed that the web could only evolve, if the tools with which it was shaped, would evolve as well.

But I never launched the editor. My friend always used to say: the editor itself is not the product.

I knew he was right.

All of that changed when Mindful was born. I finally launched something using the technology I painstakingly built over so many years.

The launch couldn’t have gone any smoother. It was featured on ProductHunt, HackerNews and the overall feedback was incredibly positive.

I felt like I had finally passed the event horizon. And it sure as hell made me blind.

But luckily, naïve me didn’t know that yet back then.

The days after the launch

One week after launch, the extension had amassed around 3.500 daily active users. On Friday morning, the day before Christmas, I decided to roll out a small update that would fix some minor bugs people had reported. I was committed to regularly updating the plugin.

I hit publish, and went for breakfast.

I was looking forward to hanging out with my friends and ease into a Christmas time.

While sitting together, enjoying delicious coffee and food, my phone started vibrating incessantly. Wiping my mouth, I looked at my phone only to have panic set in:

Fuck. Fuck. Fucking fuck.

My worst fear of a releasing my own product was about to become reality. In fact, it was already reality. I panicked.

I went home and immediately started rolling out a new update that would fix this. The U.S. is still sleeping, I have a solid three hours, I got this, I thought.

The update seemed to work, but by this point, most of the damage had already been done. Throughout the day, tons of new emails, tweets, messages, and passive aggressive comments on Facebook started coming in.

I answered every single message. No matter who, what, or where it was. I made it my mission to track down everyone who had lost his/her notes and help recover them.

Instead of having breakfast with my friends, I rushed home and started fixing stuff. Instead of enjoying a nice Christmas evening with my family, I went back to my room right after dinner and kept answering emails and tweets until 4 AM.

This would go on for another three days. I remember being on a Skype call with a guy from New York who was scared to death because he had lost all his notes for an important upcoming meeting.

It was painful. But I knew it was my responsibility. After all my product had let people down. I had let people down


This experience taught me a lot about the ethics of shipping and releasing products.

When people look at Mindful on Chrome Web Store, they see a bunch of positive comments and a fairly good 4.7 rating. But they don’t see the work it took to get there.

If you’re a designer, a product manager or any person working on a product, it’s your job to take responsibility for the things you put into this world. Sometimes not launching is a virtue just as honorable, just as important, as the launch itself. Perhaps even more.

The best products are created by people who care about their users. Not just on a superficial level by defining shallow personas to seem more empathic “As a user I want to…” — but by genuinely caring for them.

And that often means making sacrifices.

A product is never finished. Launching is only one piece of a bigger puzzle, a bigger story. Don’t look at the launch as the goal. Look at it as a milestone.

Millennials are changing the user experience of finance by Gavin Lau

Millennials are poised to become the largest demographic group in the world by the end of the decade. That’s less than 3 years away, folks, and as the stats start rolling in, we’re seeing that they have a very different approach to managing their finances.

For starters, their trust in—and loyalty to—the big financial institutions is at an all-time low, and they’re responding by taking more direct control over their earning and investment decisions, as well as seeking advice from a much broader set of sources.

“…[Millennials] consider technology and online platforms an important aspect of financial advice. 57% [of Millennials] would even change their bank relationship for a better technology platform” – Deloitte, Millennials and Wealth Management

They’re starting more than twice as many companies than Baby Boomers, and 9 out of 10 Millennials are consulting at least one social network for investment tips – twice that of their predecessors.

Simply put, the Millennial generation has both the numbers and the influence to change the way we all bank, save, and invest. Their demand for financial services is growing, but they want and need very different things from what’s traditionally been offered in the past – which means the design of financial services and products, and the customer experiences they deliver should be at the forefront of providers’ efforts to remain relevant in a dramatically changing landscape.

In this post, I’m going to explore how and why the world of finance is experiencing such a tectonic shift, and discover how innovations in user experience and product design are paving the way for this rapid evolution in fintech and financial services.

In a hurry? Use the links below to jump straight to the good stuff:

How Millennials are reshaping the UX of financial services

Loyalty? You’ll have to earn it.

Open-minded, and willing to shake things up.

Control and Convenience


How Millennials are reshaping the user experience of financial services

In order to grasp how to design the best user experience for financial products and services, we should start the same way as we would for any other industry: get to know our users! Let’s examine the forces and emerging customer attitudes that are changing the face of the industry, and I’ll explain how we’re seeing them manifest in the UX of different financial services products.

Loyalty? You’ll have to earn it

Excerpt from the speech we never got from Wall Street in 2008

As I mentioned before, there’s significantly lower loyalty to the established, big-name financial brands among Millennials. Today, less than half (46%) of these customers see themselves staying with their current financial services providers over the next few years, according to a survey on Millennials’ financial habits by credit scorekeeper Experian.

Few groups were hit harder by the 2008 market crash than Millennials, and as a result, they have far less trust in traditional, big-brand financial institutions. This is huge news in an industry that traditionally prided itself on long, legacy client relationships that were passed down through the same families. Simply put, Millennials don’t really care who their parents’ tax guy is – they’ll find their own, kthxbai.

How this is changing the design of financial services

[BRANDING] Prestige no longer carries trust – Today, we’re seeing a widespread humanization of financial services’ brands, where before they were far more formal and prestigious.

[INTERFACE DESIGN] Fonts and color schemes are broadening – As a designer in the finance world, it used to be that you could use any font you liked, as long as it was Times New Roman, or maybe, maybe Georgia, (if you didn’t tell anyone, and no-one noticed). Nowadays, the humanization of these firms is being driven not just by the content, but also the presentation.

Where once finance websites and apps were dominated by trustworthy british racing greens, and calming, stable navy blues, the latest wave of fintech applications use liberal splashes of vivid color and bold, modern typography to direct attention, and make financial data come alive for their Millennial customers.

[CONTENT] The tone has softened – The biggest financial services firms used to speak in authoritative tones about legacy, experience and expertise. Now, they’re more straightforward, and colloquial – they speak to customers almost like a trusted peer than a wise old professor/father-figure. Compare this TV ad for HSBC from as recent as 2007…

…with this one for Digit, the automated saving app, launched in 2015. These guys perform roughly the same function (helping you save for the future) in the same industry, but one arrived only 8 years later:

Wanna see something else wild? Check out Merrill Lynch’s website as it looked in 2004 (thanks, Wayback Machine), to how it looks today. What a difference a devastating global economic meltdown can have on your sales pitch, huh?

Open-minded, and willing to shake things up

On the flip side of this lack of trust, Millennials are more open to new brands and fresh approaches than their predecessors, when it comes to managing their money. If Nike started offering the “Just Do It” Mortgage, there’s a strong chance it’d get some serious traction.

“67% of [Millennials] are open to products and services from non-financial services brands, compared to 45% for affluent Gen Xers.” ~ Forbes, How Millennials’ money habits could shake up the financial services industry

In addition, Millennials have faith in the technology of automated investment algorithms, to make better decisions than fallible human advisors. This mindset and openness to new ideas has created a gold rush of sorts, as new companies in fintech suddenly find their newness is no longer a barrier to competition with the heavyweight banks for these customers’ dollars.


How this is changing the design of financial services

[INTERACTION DESIGN] Innovative UX is engaging a new generation of investors. Millennials’ openness to fresh approaches means that today’s competitive fintech products and services are innovating heavily around the needs and user experience associated with conducting the same financial transactions their parents and grandparents did – whether that’s saving money, buying stocks or even applying for a mortgage.

By providing a more frictionless experience while conducting these transactions, financial services providers are persuading an increasing number of hesitant Millennial investors to put their dollars to work in the market.

Motif Investing is a stock trading app that tackles a key friction point preventing many newer investors from getting into trading stocks: the laborious task of researching and picking which specific companies’ stocks to buy. This app instead enables you to buy a “motif” in a single transaction – a curated collection of up to 30 different stocks, all based around a particular theme, like “Robots & AI”, or “Clean Energy” – and even “Elon Musk Saves The World”. Motif then takes care of curating these collections, and regularly changing out which stocks are included, based on performance.

Digit automates your savings by watching each transaction you make, and making a calculated guess as to how much you can afford to save each day. It collects those leftover amounts in a savings account, and thereby relieves you of the mental burden of manually making each painfully sacrificial deposit yourself.

One of our clients, Sparkfin, is like “Tinder for stocks” – utilizing a simple, but addictive left-right swiping mechanic in their mobile app, to enable rapid discovery and selection of suitable stocks to invest in.

[STORYTELLING] Automate in America. Big banks used to tout how your finances would be diligently managed by an experienced, vetted professional advisor – no mention would ever be made of the automated tools they used to do their jobs.

Today, the design storytelling in this industry has changed. Modern automated investment services (dubbed “robo-advisors”), like Wealthfront and Betterment, make no effort to hide the fact that it’s the software calling the shots from behind the scenes – despite showing header images full of smiling, smart finance pros!


Control and Convenience

After the shock of 2008, Millennials are now more prone to do the legwork themselves when researching investments – according to a study by HootSuite, 46% of affluent Millennials perform their own research, make decisions, and execute trades, vs 36% of GenX’ers. This stacks with other findings that the vast majority of consumers (70%) prefer the convenience of banking online (Javelin Strategy report), and only 22% of Millennials rely solely on the advice of a human financial planner(Accenture Generation D report).


But doing your due diligence takes a lot more time than delegating it to paid advisors, meaning that Millennial customers crave convenience, as well as fine-grained, direct control over where their money goes.

How this is changing the design of financial services

Cheaper, automated delivery of services – By innovating on the UX of delivering financial services, and driving down the costs of doing business, fintech companies are able to reach a far wider audience of potential customers.

Fintech companies that are leading the charge deeply understand that better product design and more automation lowers the cost of doing business, which enables them to charge lower fees – a powerful competitive advantage over traditional retail (AKA human-powered), banks. Clearly and intuitively designed interfaces, coupled with detailed knowledge bases and active support forums enable Millennial customers to self-service for almost all their regular needs, and troubleshoot their own problems when they occur.

Sophisticated finance apps like Digit even go as far as to drive users into conversational chatbot interfaces that can handle most run-of-the-mill transactions without the involvement of another person. Or consider Trigger, which enables users to build their own automated investment algorithms based on “IF (stock does something), THEN (take action)” logic – just like IFTTT for stocks. Gone are the days of picking up a phone to talk to your stockbroker when you stumble across a hot tip (almost).


In summary: We Don’t Need No Education

The financial services industry is changing rapidly, and this change is being driven by the radically different preferences and buying habits of Millennials. Innovations in user experience and product design in the industry are enabling a wave of new, low-cost services to enter the market and compete on more equal ground with the older, more established banks.

Millennials are among those most negatively impacted by the 2008 crash – an experience which permanently altered their financial attitudes and behaviors in several key ways:

  • They have less trust in established finance brands and human advisors
  • They’re more open to new ideas and approaches in investment – and banking with new brands
  • They have more trust in technology, and are more likely to consult the wisdom of their peers before making financial decisions
  • They want way more direct control over their finances – and need convenience baked into the service providers they use, in order to better facilitate this desire for self-management

Design and customer experience teams in the finance industry must be mindful of these different needs and behaviors in order to fully connect with Millennial customers, as they’re already effecting radical changes in the UX and design of financial services & products:

  • Financial services brands are becoming less formal & authoritative, and now project softer, more human and compassionate public images
  • There’s a hunger among Millennials for less friction in the process of conducting everyday transactions – automation is no longer feared, but seen as a vote of confidence
  • Innovative UX and product design around conducting financial transactions is driving down the cost of efficiently delivering financial services at scale, as are advances in automation technology – which in turn is making the industry more accommodating to new competitors. These UX innovations include new gestures (swiping to browse through stocks), more flexible purchasing methods (motifs, or purchasing fractions of stocks), and even complete automation of everyday transactions like contributing to your savings account.
  • The interfaces of fintech apps are increasingly focused on providing their users with financial insights in more direct layperson terms, as well as leveraging broader color palettes, and intuitive data visualization techniques in order to dispense actionable investment advice.


Fintech has only just started heating up

Since competition in the Millennials market is being driven by innovations in UX and the customer experience, this evolution in the visual interfaces associated with managing our money is only a hint of things to come.



Can Digital Products Be “Timeless?” by Gavin Lau

Working at HODINKEE, I’m exposed to iconic, timeless designs nearly every day. From vintage watches and design objects that come by my desk, to the classic cars I get to drive on the weekends, I’m fortunate to be surrounded with timeless design.

However, before working here, “iconic” and “timeless” were never words I would use to describe digital products during my years working with startups. “Does it solve the problem?”, “Is it useful?”, “Is this design easy to understand?” certainly come to mind, but never in my career had I wondered, “Is this design timeless?”

The Rolex Submariner, a timeless design.

The Rolex Submariner, a timeless design.

What is timeless design?

For a product to become timeless, it must first have fundamentally good design. Second, it must be iconic, in that it sets a new benchmark in the field and is instantly culturally recognizable. Then, (this is crucial part) it needs enough time to prove it’s as good, or even better, today as it was 10, 20, 50+ years ago. No easy task! So, I wonder, as the consumer internet approaches nearly 30 years old at the time of writing this, why don’t we ever think of digital designs as “timeless?”

Digital design’s handicap

Well, most digital designs are never intended to be timeless in the first place. The web is living medium and probably the fastest changing one designers have ever had to work with. Entire paradigm shifts can happen over night, platforms come and go, and designs can get flipped on their heads in order for a business to survive.

However, that’s not always the case. Sometimes digital designs endure against all odds. And I would argue, may one day be considered timeless.

Porsche 911 vs Google Homepage

Google’s fundamental design hasn’t changed in over 20 years (in internet time that’s an eternity).

Google’s fundamental design hasn’t changed in over 20 years (in internet time that’s an eternity).

Let’s look at two products: the Porsche 911 and the Google Homepage. In the late 90’s, when Google’s competitors (MSN, Yahoo!) tried to become destination sites for everyone, Google remained ruthlessly focused on one thing — creating the best possible search experience. Comparatively, the Porsche 911 was born with the driver in mind — no frivolous luxury interior or passenger niceties, just a reliable, pure driving experience.

Fundamentally the same visual design, but countless innovations under the hood. Images: Wired

Fundamentally the same visual design, but countless innovations under the hood. Images: Wired

Both products were born with good design — simple, innovative, unobtrusive. Both are brilliantly engineered, iconic, beloved and instantly recognizable. Both have been carefully iterated on over time, getting better and more robust. And perhaps most importantly, both fundamental designs are just as good (if not better) when they launched as they are today.

So why does Porsche stir up feelings of timelessness but Google doesn’t?

Even the most timeless designs have their hiccups. Compare Google’s homepage with that GIANT arrow pointing to your doomed Google+ profile to Porsche 911 (996, 1998–2004 model) with their unloved “fried-egg” headlights.

Even the most timeless designs have their hiccups. Compare Google’s homepage with that GIANT arrow pointing to your doomed Google+ profile to Porsche 911 (996, 1998–2004 model) with their unloved “fried-egg” headlights.

Timelessness in the medium?

Is there just more inherent magic in the permanency of physical objects? Maybe something is lost in a two-dimensional space? But what about timeless graphic designsOr logos? There are certainly timeless two-dimensional examples one could think of.

Maybe the 911 is simply more charming? Or delightful? Well, Google indexes the world’s data and shows them to you in a digestible way at lightspeeds (a pretty delightful thing!). Not to mention, their doodles can be pretty darn charming. So what gives?

One of Google’s many homepage doodles.

One of Google’s many homepage doodles.

One could argue three-dimensional products have an advantage to become timeless based on their materials. In a literal sense, their designers have chosen materials that have longevity, are tactile, and get better with age: The Leica M body is made of brass that patinas the more you use it. Moleskin leather notebooks become more supple with use. Porsche engines run best when driven. Rolex watches patina and keep best time when worn.

The indices on this Rolex we’re once stark white, but have faded to a warm patina from being worn for 50+ years.

The indices on this Rolex we’re once stark white, but have faded to a warm patina from being worn for 50+ years.

Why don’t digital products have the same admiration? Facebook and Twitter show you better stuff the more you use it. Reddit’s Front Page and Instagram’s Discover show you tailored content the more you browse. Amazon’s recommendation engine gets more accurate every time you shop. Your Camera app gets filled with your favorite memories. Pinterest becomes your main source of inspiration.

Timeless design? Arguable if content on Facebook has gotten better over time, but Facebook’s Newsfeed design has fundamentally remained the same: a structured feed of your friend’s activity. Back in the day, while Myspace optimized for advertising over user experience (which ultimately led to their downfall), Facebook welcomed users with a starkly minimal design focused on the core problem at hand: connecting people.

Timeless design? Arguable if content on Facebook has gotten better over time, but Facebook’s Newsfeed design has fundamentally remained the same: a structured feed of your friend’s activity. Back in the day, while Myspace optimized for advertising over user experience (which ultimately led to their downfall), Facebook welcomed users with a starkly minimal design focused on the core problem at hand: connecting people.

Looking forward

While industrial designers prioritize longevity, digital designers prioritize elasticity in order to keep up with the internet’s blindingly-fast pace. This constantly evolving pace is the reason timelessness in digital design is so few and far between. But that doesn’t mean it’s not possible.

While I believe digital designers must continue to thrive for malleability; as the internet matures and companies like Facebook and Google have ample time to prove themselves just as Porsche and Leica have, I think we, as designers and consumers, will enjoy the hindsight to view digital designs as serendipitously timeless. And one day, these designs may find their place in our hearts and museums, alongside their three-dimensional brethren.



Design Better Data Tables by Gavin Lau

Data is useless without the ability to visualize and act on it. The success of future industries will couple advanced data collection with a better user experience, and the data table comprises much of this user experience.

Good data tables allow users to scan, analyze, compare, filter, sort, and manipulate information to derive insights and commit actions. This article presents a list of design structures, interaction patterns, and techniques to help you design better data tables.


Fixed Header

Fixing the row header as a user scrolls provides context on what column the user is on.


Horizontal Scroll

Horizontal scrolling is inevitable when presenting large datasets. It is good practice to place identifier data in the first column. As an advanced feature, enable individual locking of columns so users can compare data with multiple anchoring identifiers.


Resizable columns

Resizing columns allows users to see abbreviated data in full.

Row Style

Zebra Stripes, Line Divisions, Free Form.

The row style helps users scan data. Reducing visual noise by removing row lines or zebra stripes works well for small datasets. Users may lose their place when parsing larger datasets. Line divisions help users keep their place. Alternating rows (aka zebra stripes) help users keep their place when scanning long horizontal datasets. Although they cause usability problems when there is a small number of rows because users may ascribe meaning to the highlighted rows.


Display Density

Smaller row height enables the user to view more data without the need for scrolling. However, is effects scannability leading to visual parsing errors. That is why many successful data table designs incorporate the ability to control display density.


Visual Table Summary

A visual data summary provides an overview of the accompanying table. It allows the user to spot patterns and issues in aggregate before actioning summary insights.



Pagination works by presenting a set number of rows in a view, with the ability to navigate to another set. The above example provides the ability to customize the row count per view. This pattern is often replaced by infinite scroll. Infinite scroll progressively loads results as a user scrolls. Infinite scroll works well for discovery websites, but is often disastrous for prioritization apps.


Hover Actions

Presenting additional action when a user hovers reduces visual clutter. However, it can cause discoverability issues because the user needs to interact with the table to expose the presentation of actions.


Inline Editing

Inline editing allows the user to change data without navigating to a separate details view.


Expandable Rows

Expandable rows allows the user to evaluate additional information without loosing their context.


Quick View

Much like expandable rows, quick view enables a user to view additional information while staying in-context.



Modals allow the user to stay within the table view, but provides more focus to the additional information and actions.



A multi-modal feature is powerful for active use users to crank through a number of actions, or compare details of disparate items.


Row to Details

Clicking on a row link transforms the table into a view with list items on the left and additional details on the right. It enables a user to parse large datasets, as well as reference many items without losing their place.


Sortable Columns

Column sorting allows users to organize rows alphabetically and numerically.


Basic Filtering

Basic filtering allows users to manipulate the data presented in the table.


Filter Columns

This design pattern allows users to assign filtering parameters to specific columns.


Searchable Columns

This design pattern allows a user to search specific values within each column.


Add Columns

This pattern allows users to add columns from a dataset. It is a way to keep the table’s data limited to essential information, and allows the user to add additional columns based on their use case.


Customizable Columns

The customizable columns feature enables users to pick the columns they want to see and sort accordingly. The feature may include the ability to save presets for later use.


Why Tables Matter

Data is becoming the raw material of the global economy. The pursuit of data drives the reinvention of antiquated industries. Energy, media, manufacturing, logistics, healthcare, retail, finance, and even government are undergoing a digital transformation.

However, data is meaningless without the ability to visualize and act upon it. The companies that survive the next decade will not only have superior data, they will have a superior user experience.

Good user interface design is based on human goals and behavior. The user interface in-turn effects behavior, which further design decisions are based on. In subtle and unconscious ways, user experience alters how humans make decisions. What is seen, where it is presented, and how interactions are afforded, influence actions. It is important we make design decisions that lead to a better world, one data table design at a time.

Advice: How to Hold on to New Users by Gavin Lau

“Across all industries 80% of all app users churn within 90 days.”


A PumpUp Case Study

Users are fickle and impatient. With access to infinite choices, users can forget an app’s existence quicker than it takes Google to complete a search. Creating a positive experience is imperative. What’s the best way to do this? Ensuring your app is easy-to-learn, fun to use, and meets user expectations.

Leveraging usability principles is one of the best ways to improve UI and interaction designs. (You should also be talking to your users and analyzing your app’s performance metrics.) To help illustrate this point, let’s look at PumpUp. PumpUp is a social fitness app that I think has a lot of potential. Unfortunately, I noticed some usability issues within the app that I suspect are turning people off.

Tip 1: Highlight Benefits & Allow Users to Explore

  1. Problem: Varying shades of blue and abstract shapes makes it hard to see the text and images. 
    Solution: Stick to one dark shade to improve the visibility of the text and images.
  2. Problem: How will the users become the best version of themselves? Solution: Have the tagline focus on the supportive fitness community.
  3. Problem: Requiring users to sign up before engaging with your app turns off most users. 
    Solution: Inform the users upfront why it’s in their best interest to sign up.

Example Solution

a. Creating an account isn’t required for users to explore, but it’s encouraged to get the full benefits of the app.

Tip 2: Minimize Assumptions

  1. Here the benefit of PumpUp is clear. This would be better on the home screen.
  2. Problem: Without labels, most users don’t know what an icon means. Solution: Include labels for the icons.
  3. Problem: The only icon the user can click on is the camera. Users first need to know if they will use an app before they decide to upload their photos to it. 
    Solution: Provide this option when a user decides to sign-in and create a profile.

Example Solution

a. Clear statement on Momento’s function and benefits.

b. Allows users to take a short tour or just dive in.

Tip 3: Encourage Exploration and Maximize Individualization

  1. Problem: Inability to skip tasks forces a commitment before the userexplore app. 
    Solution: Omit task or allow users the option to skip.
  2. Problem: Users may go through endless scrolling before they see people whose fitness goals relate to theirs. Ex. Ladies who lift. 
    Solution: Provide searchable categories.
  3. Problem: Users may get frustrated and pick three profiles they aren’t interested in just to move forward. 
    Solution: As stated before, allow users to skip this option.
  4. Problem: The people followed don’t immediately show up in the feed. If the idea was to promote the PumpUp account and show users other accounts, why was the first step necessary? 
    Solution: The user should have the ability to limit their feed to only the accounts they decide to follow.

Tip 4: Clarify Categories

  1. Problem: The “Top” and “People” categories contain the same profiles. What are the differences?
    Solution: Replace the “Top” category with “New,” it can feature new user accounts.
  2. The hashtag category is good. This allows users to search for people that align with their goals.

Tip 5: Narrow Focus and Limit User Commitment

  1. It’s good that the user gets to see different pictures from different accounts related to their goal at once.
  2. Problem: When the user clicks on one picture, they may expect to see more pictures from that person. However, when they scroll down, they see different profiles.
  3. Problem : The user is unable to simply select the profile to see more pictures, they have to follow the person. Again, a potentially unwanted commitment.
  4. Solution: Allow users to explore a particular profile before committing to follow.


PumpUp has the potential for great things. In order to fulfill that potential though, it has to meet the needs of its users. Adhering to usability principles helps ensure that an app makes a good first impression and encourages people to stick around. Combine this with analytics and user research (two topics I’ll be covering in upcoming posts) and you’ll have an app that’ll be the envy of your competition.



Where Do We Go from Mobile First? by Gavin Lau

Have you heard “mobile first” recently? It was a buzzword, back… six or seven years ago. And now it’s coming around again, almost like we’ve been through a full wash and rinse cycle with design theories – mobile first to responsive web design, and now back to mobile first. But that can’t be right.

With all the immense change we’ve seen in mobile technologies, I don’t believe we’ve returned to “mobile first” design. Rather, when you hear that buzzword today, it’s a misnomer for a new phase in the philosophy of mobile design. Something I prefer to call user first design.

Let’s unravel how mobile design theory has evolved, consider each movement in the context of its time, and how we can move towards user first design. 

A brief history of mobile design theory

Mobile first design

Given how ubiquitous and essential smartphones are today, it’s hard to remember how futuristic they seemed just a decade ago. It was a time where tiny flip phones screens were common and users didn’t expect fast, full, and unfettered access to the web. I mean, remember dial-up?! In the mobile phone world of 2007, even Steve Jobs was excited – calling this shiny, flat brick a “revolutionary and magical product.”

By 2009, smart phones were just creeping out of the “novelty” phase, but hadn’t yet eclipsed flip phones. And then Luke Wroblewski gave his talk on mobile first design. Essentially, Luke suggested that designers should design for the tiniest screen size available, with the intention of adding more detailed experiences for larger screen sizes. The concept may seem simple, but it was revolutionary. Luke codified what designers and developers were beginning to experience: users now had access to wildly different sized devices. How were they to morph the site’s content to accommodate everything from little pocket screens up to desktops?

As time went by, this problem of scale became more and more apparent. In April of 2013, smartphones reached a tipping point: sales hit record highs and flip phones had lost all hope of ever catching up. While this was interesting to stock market hawks, it was revolutionary to the average mobile phone user. The internet was suddenly accessible to them from a multitude of screens. What Luke observed in 2009 was gaining traction. Website owners, marketers, and agencies saw people visiting their websites from different-sized portals and that their predetermined, fixed width designs were broken and unusable on these smaller screens. Luke’s recommendation of a mobile first design approach to website building was taking off.

Photo from Neil Hughes.

Photo from Neil Hughes.

Responsive design

How did designers and developers tackle the “many-sized screens, one website” problem? One option was building mobile-only sites—the famous While this provided a different experience from desktop to mobile for return visitors, it was a pretty good stop-gap. But it was a nightmare to maintain. Imagine having to create and serve a wide variety of weirdly sized versions of your website, or host and maintain two totally different versions. Pretty soon, mobile-only sites were falling out of compliance or rarely getting the updates their desktop partners were seeing. And web development teams were strapped under not just the daily load of code building, but also having to build for what felt like multiple versions of the same site. It wasn’t tenable.

In March 2015, Ethan Marcotte introduced us to a new methodology: responsive design. Responsive web design (RWD) operates on a desktop-to-mobile principle, taking all the chunks or pieces of a desktop-sized webpage and essentially rearranging them to stack neatly in a mobile viewport. Developers only had to set breakpoints where screen sizes changed and tell each chunk where to go to get a responsive design. No more “visit desktop site” on your pocket-sized computer phone.

This was a genius solution: only one code base to maintain and the same experience for users regardless of what device they were using. But much like mobile first design, RWD had some drawbacks. Namely, how do you fit a desktop’s worth of content onto a mobile screen? As we saw the growth of content strategy, mobile sites were becoming cumbersome – users had to eternally scroll to find relevant information. Taking an entire desktop website and transmogrifying it to fit on a tiny screen just wasn’t the right solution for a content-rich site.

User first design

In 2015, Google announced they’d hit a tipping point: more searchers accessed their site from a mobile phone than from a desktop device. The search giant began pushing tweaks to their algorithms that favored “good” mobile experiences and mobile traffic rankings over those of desktop or laptop. And in 2016, they offered their list of 25 tips for making your mobile experience a better one for users.

Since this announcement, people have returned to Team Mobile First Design. But I think we’re missing a key point: Google isn’t just recommending mobile first. Yes, they are re-gearing their search index to be mobile first, but with an eye towards tailoring the experience to the user’s needs. This is something new; it’s user first.

A shift towards context

Building a mobile friendly site isn’t just done by breaking the site into tiny pieces that rearrange nicely on a small screen. User first requires a shift in thinking. We need to start by thinking about a user’s context and how to meet their immediate needs on the device or platform that is readily available at that time. Essentially, as designers and developers, we should make the most of the context clues available and give the user our best guess of what they need, when they need it. 

A driving force behind user first design is something called micro-moments(Google keeps mentioning it). The idea is that while people use their phones for a number of things, mobile search is fantastic for on the spot, quick reference – your dentist’s phone number or address, for example. These micro-moments are intent-heavy; users want information quickly, so that they can buy, learn, see, show, or find. In this interaction, they’re not lazily browsing Facebook or playing games, they’re trying to accomplish a goal. They expect quick and accurate information, with a high quality experience. Remember the fiasco when Apple Maps first launched? That was the complete opposite of a successful micro-moment.

With ease of use, brand loyalty seems to be going out the window. (How many iPhone users prefer Google Maps or Waze?) Mobile users don’t care if you are the sole authority on your product or subject. If your answer or site doesn’t come up first on mobile search, it’s not valuable. The first to answer or fulfill a need wins. And Google is boosting the sites that are quickest to answer users’ needs.

Putting it into practice

So, how can a team implement user first design well? Here is my favorite example (ask my team how often I whiteboard it as an illustration of this context shift):

This is an image caption.

This is an image caption.

You own a restaurant and are building your website. From a mobile device, what are the handful of things a person will need to see? They’re probably in their car, on the way to your establishment, and need hours, the address, and a phone number (or a click-to-call button since it is a mobile phone).

On a tablet, they have more space and probably time to explore—provide a feel for the ambiance, a feel for the menu, the ability to make a reservation, and details of interest.

On desktop, where you have all the real estate to work with, provide pictures, bios, blog posts with photos of the most recent event hosted at your restaurant. Provide seasonal menus with local vendors and suppliers. Offer catering options, details on the party rooms, and so on.

I’m not advocating for a lesser experience on the mobile device than what you would find on a desktop site. We need to build for where a user is and for their specific needs at that time. By all means, add catering information in the drop-out menu. But on a mobile device, time is of the essence. Don’t cost your site visitor precious time by making them search for answers to their questions.

Know your users

All this context and mobile first talk comes back to a central tenet of web development: know your users. Just like Aristotle taught in his rhetoric lessons, your audience still dictates your presentation. 

In Google Analytics, we can see everything from device type and operating system to which page a user visited first on our website. This information provides a scent trail of desirable information—it’s our job to surface that trail and get users onto it more quickly, helping them achieve their goals more easily.

A great example that came up recently is the healthcare industry. Marli Mesibov and Jason Levin explain that in the healthcare industry, 50% of smartphone users download healthcare apps. But that means that 50% do not. How are we designing for half the population that prefers to use a desktop- or tablet-based browser to access their healthcare information? Suddenly, for them, the mobile first conversation isn’t very relevant. Marli’s recommendation, journey-driven design, is very similar to what I am calling user first design. 

Where we go from here

Design and technology will always be learning from and pushing again what came before. Mobile first design and responsive web design aren’t opposite forces, but rather steps along the way. I think Google has it right: a mobile-heavy focus with the underlying intent of providing the best experience possible for users. Users are still the heart and key to how we build—and they always will be.

Research your users. Know their needs, wants, patterns, and barriers to success. Then assess your team’s abilities and build a site that you can maintain. It’s not the theory of web design you subscribe to that matters—it’s the user-centered details. From site load times to menu options and interactive elements—everything on a site depends on that site’s users. Build the experience, not the technology. There’s no wrong answer here, as long as your users are getting the best experience, when they need it, and getting their answers fast.


How to design a robust chatbot interaction by Gavin Lau

Getting started with conversational UI design can be a bit overwhelming. What is the best way to design a chatbot interaction? Do you start with an information architecture, a flow diagram, a list of use cases or something else? Are there any special tools that you can use…

After spending months building a messaging platform, interacting with chatbots and designing chatbots here are my learnings in form of a quick step by step guide to chatbot design.

There are different kinds of chatbots. This article focuses on what I call “Transactional Chatbots” — Bots that help users perform certain tasks based on user input.

For purposes of this article, let’s assume we have gone through the activity of defining the key user outcomes, supported use cases and most importantly we have good reason to believe that conversational UI is the best solution for the problems we are trying to solve. If you want to read more on these topics, please read my earlier article — To build a successful chatbot.

Now, to the design steps.

1. User Intents — Scope

Start with defining key user intents that you believe your chatbot will encounter and the ones you should support. The scope is key here. Carefully define what you should cover and what you will not.

Let’s take an example. Say, I want to design a Reminder bot. The key user intents could be:

  1. Set a reminder for something I fear I might forget
  2. Set a reminder for someone else who I think might forget the task
  3. View upcoming reminders
  4. Edit/ Cancel reminders

For purposes of this activity let’s focus on setting simple personal reminders, viewing and editing them which means 2 is out of scope.

2. Key user inputs

Next, list down user inputs required for each intent you identified in Step 1. This will help you with Step 3 (Assistant) and Step 5 (Script). You might want to refine the user inputs after you have gone through the other steps. So, don’t worry about creating the perfect list.

As an example, here are the key inputs for “Setting reminders”

  1. What to remind
  2. Date for the reminder
  3. Time for the reminder

3. Play Assistant

Since chatbots are conversational, what better way to define the interactions than based on an actual conversation. After you have identified key user intents and user inputs required for each intent, find a couple of friends who can spare some time for a quick activity. Tell them to think of you as an assistant who can help with <key user intent> and start a dialog. The user inputs you defined in the previous step should help you with the conversation.

If you plan to create a bot for a particular platform like Facebook or Slack, I recommend you to use the respective platform for this dialog.

While you are performing this activity, note down the dialog flows. This should give you a good understanding of the different ways users approach the task. Keep in mind though, this is not the exhaustive list of all possible ways your users will interact but a small sample to get you started.

Repeat this exercise for each intent.

In my case, I found a couple of colleagues who were more than happy to have an assistant. I asked them to assume I am someone who can remind them of tasks they don’t want to miss. Then, I asked them to think about the last few reminders they had set and replay the same scenarios.

Here is sample of what I got

Friend: Yogesh, remind me to call my doctor at 10 am on coming Thursday
Me: Sure! I will remind you to call your doctor at 10 am on Thu, Apr 6th.
Friend: Remind me to pick up Julian at 5:30 today
Me: You got it! Reminder to “Pick up Julian” added for 5:30 pm today.
Friend: And, on Monday to go to the meeetup after work
Me: What time do you leave work?
Friend: 5:30 pm
Me: Cool! I will remind you to go to the meetup at 5:30 pm on Mon, Apr 10th
Friend: Also, remind me to call mom every day at 4
Me: I will remind you to “call mom” at 4 pm every day

As you can see from this example

  1. People tend not to follow a template when they are conversing. Each of those sentences is different.
  2. They assume you are intelligent enough to deduce some things like am/pm based on common sense — “…call mom everyday at 4”
  3. They might miss key inputs like time and date — “…go to the meeetup after work”
  4. At times they will misspell words — “…meeetup…”

I did a similar activity for all the other intents I had listed in Step 1.

4. Design Flow

Use the dialog flows you documented in Step 3 to create flow diagrams for each intent. Creating flows helps you articulate and critique the interaction early on.

Here is a flow I created for “update reminders”.

As you can see, updating reminders, the way I have here, turns out to be a multi-step process with a lot of back and forth communication. This also means added complexity, uncertainty and increased chances of error at each step.

For updating reminders, I decided to augment the conversational UI with a graphical UI interaction where set reminders are always visible with edit and cancel options next to them — see UI sketch below.

To help simplify the flow:
If you can, reduce the number of decision boxes without compromising the user experience.
Explore if you can augment the conversational UI with a graphical UI.

A little help from Graphical UI enabled me to reduce additional back and forth communication and simplify the flow significantly. It also enhanced the user experience by giving visibility of existing reminders. Here is the updated flow —

After you have defined the flows for key intents, consider these scenarios as well —

Reset or next intent — What will your bot do after the task has been performed? You can either leave it at Resolution and reset it for next input or you can move on to another intent. For instance, if it is a pizza ordering bot, after ordering a pizza it can move on to “tracking your pizza delivery”.

Switching intents — Since the interaction is conversational users can switch intents on your chatbot. For instance, while the bot is still waiting for input on the Time for Reminder, the user can ask the bot to update an existing reminder. You need to decide if you are going to support switching intents and in what cases, and design additional flows based on the approach you decide to take. Allowing users to switch intents might add some flexibility to your interactions but can also create additional cognitive load for them.

Abandon Flow — Have you ever faced a scenario when you are chatting with a friend and all of sudden they stop responding (maybe because they got a phone call). This will happen to your chatbot as well. You need to plan for this. Have a timeout for each input and remind the user upon inactivity.

5. The Script

In case you were wondering — “We haven’t, still written a single word of content for the interaction that is supposed to be conversational”, here it is [finally!].

Here are some of the scenarios to keep in mind while writing your script.

  1. Onboarding
  2. Missing or ambiguous inputs
  3. Verification
  4. Resolution
  5. Switching intents
  6. Abandon flow
  7. Fallback

Onboarding — Conversational UI can create additional cognitive load on users trying to figure out how they can interact with your bot, especially first time users. Write a script explaining what your bot does and how users can interact with it. Be upfront and explanatory — provide a sample statement if needed.

Here is an example — Hello Mike! I am your personal reminder bot. Just tell me what I can remind you of and when. For instance, you can say “Remind me to get milk at 6 PM tomorrow.”

Missing or ambiguous inputs — Your bot will need certain inputs from users to be able to service them. Assume users are going to miss key inputs and write a script for each missing user input. Here is one for Setting Reminders:

  1. Missing What to Remind — “What can I remind you of?”
  2. Missing Date of Reminder — “What date should I remind you to <task>?”
  3. Missing Time for Reminder — “What time should I remind you to <task>?”

You can also combine 2 statements into 1 in the case of missing inputs like date and time. However, exercise caution with this approach — combining 2 asks can sometimes confuse users.

Verification — In some cases, you’d want to verify user inputs before you perform the next action. For instance, if you were shopping online, you’d want to verify the order and total amount before you go the payment step.

Resolution and next intent — What would your bot say after it has performed the task it was asked to?

Here is an example for setting reminders — You got it! I will remind you to “get milk” at 6 PM tomorrow.

If you plan to move to another intent after resolution, you might want to add that to the dialog.

Switching intents — In the previous step, we went over the decision of whether or not you are going to support switching intents.

Here is how the script for the 2 approaches might look like

  1. I can sure help you with changing the time for “Getting tickets” but can you please specify the time for “Picking up Pete” first.
  2. Sure! Let’s update the reminder for “Getting tickets” first. What do you want me to update?

Abandon Flow — When you are writing the script for “Abandon Flow”, keep in mind that users might come back to the chatbot at a later date and they might have no recollection of the task they were trying to accomplish. An “Abandon Flow” script for Reminders could be -

Hey, you wanted me to remind you to “Pick up Pete” but you didn’t specify a date and time. Do you still want that reminder-

  • Yes, add date and time
  • Nope, move on

Fallback — Design a fallback script where your bot has no clue on how to respond. This will happen more frequently than you think.

6. Bring it all together

Once you have the flows and the scripts for intents, it is time to bring all the good stuff you have worked on together as you would with pieces of a puzzle. You can sketch the interaction on paper or use any design tool — whatever you are comfortable with. And that’s it! You have the first design for you chatbot interaction.

Once you have the interaction defined, I would highly encourage you to build a prototype and test it out.

There are few tools out there that you can use without writing a single line of code.

  1. — SMS, Facebook Messenger, Slack, Email, Smooch and Web-based conversational UI.
  2. — Facebook Messenger
  3.— SMS, Facebook Messenger, Slack, Cisco Spark, Amazon Alexa, Google Home, Skype, Kik, Twilio, Line, Telegram, Twitter and a couple more.

Finally, here are some other things to keep in mind

  • While writing the script try to add variety to the bot responses. It brings a human touch to your designs — “I will remind you to [task] at 10 am tomorrow”, “You got it! Reminder set for [task] at 10 am tomorrow” …
  • Every interaction with your bot does not have to be conversational. Some interactions are better with Graphical UI than with Conversational UI. For instance, you can leverage webviews if designing for Facebook messenger and interactive messages if designing for Slack.
  • It’s good to plan for some “Greetings” conversations but tie them with the primary purpose of your chatbot to avoid wandering off topic — “Nice to meet you as well. What task can I remind you of?”
  • And most importantly, have some fun


Stop talking, start listening by Gavin Lau

Good designers are good listeners. They start by understanding, not solving.

I recently found myself in a meeting with a designer who just started working on a design problem I had spent the last three months working on. I wanted to share some of the insights I gained, but I didn’t get the chance.

I’ve spent months working on this I thought, and this guy comes in and won’t even give me a chance to share what I learned.

I’m not going to lie, it wasn’t easy.

But instead of focusing on my emotions, I tried to force myself to listen. Because whenever you let those emotions get to you, you know you’re not making it about work, you’re making it about yourself.

Did this meeting make me rethink every design decision I made? No. Although that would be a beautiful story, that’s not what this is about. There are a few others things I learned though.

If there is one thing I took away from working at iA, it’s how important it is to be a good listener. You can often tell how experienced designers are not by the amount they talk but by the amount they don’t.

The upside of practicing our listening skills is that we’ll automatically help others become better listeners too. This will not just foster a better work atmosphere but also naturally improve every aspect of our designs.

So let’s see how we get there.

Passive vs. active listening

There are two basic types of listening, one which will help you create better work, the other leading to a life of solitude and misery.

Whenever you’re attending a meeting or talking to someone, ask yourself critically:

Am I listening actively or passively?

If you’re not really listening, then why not grab all your stuff, get up and leave the room right now? There is no reason for you to be there. Record a voice note, send it to everyone via email and block all incoming responses.

The effect might as well be the same.

Let’s try to be an active listener instead. You’re stuck in this meeting anyways…so why not make the best out of it?

There are some notable benefits in it for us.

1. Listening changes the nature of the conversation

People often turn into passive listeners because they don’t feel listened to themselves.

In the meeting I mentioned earlier, I noticed how the other person gradually became more open towards my ideas as soon as he felt like I listened and genuinely tried to understand his.

Even when the other person is saying something repetitive, or a thought you already had a while ago, try not to interrupt. Listening gives you the reassurance that you’re on the right path and went through the same design considerations.

An other person’s seemingly most insignificant insight, can often lead to new and better ideas. So let’s turn passive conversations into active ones.

2. Listening builds trust and support

Listening builds trust and helps establish an environment where everyone feels like they’re aspiring to the same ideal and working towards the same goal.

Whether you change your design based on the discussions you have is ultimately your choice. The important part is considering that you might be wrong and giving other ideas a real chance.

Immediately rejecting other opinions is easy. Challenge yourself to appreciate and understand alternative views.

3. Listening improves your work

It goes without saying that being a good listener will improve your work. Try to reach out to your peers and ask them for feedback.

Being a good listener doesn’t mean just sitting there and STFU. It means asking the questions you think are important for you to create great work.

Even though it might seem obvious, always avoid questions like, “How do you like it?”

Ask specific and neutral questions like, “Do you have any concerns about what you’re looking at?”

Critical feedback can be hard to digest. But it’s the only way to grow and improve.

Thanks for listening, erm… reading. I appreciate you made it till here.

UX design is a fast-paced industry. Every week we see new tools, trends, and patterns emerge and it’s hard to keep track of all of them. But there is one critical tool that remains remarkably unchanged. A tool we always have with us, even with our laptops closed: listening.

Design isn’t hard because of all the tools we need to master, it’s hard because we’re dealing with people.

Or as Mark Bolton nicely put it:

“The design process is weird and complicated because it involves people, who are weird and complicated.”
– Mark Bolton


The Essential Guide to Writing Effective Survey Questions by Gavin Lau

User surveys are popping up on websites and mobile apps everywhere. Well-designed ones yield helpful data. Poorly executed ones are a waste of time for users and researchers. Crafting a good questionnaire is a science, but luckily, substantial published research is available on the topic. It’s easy to write good questions when “survey best practices” are just a Google search away…

Indeed. There are about 68,300,000 results. All that information can be overwhelming to those new to survey writing. UX Booth is here to help. 

In this article, I will focus solely on writing effective questions and answers—the critically important and challenging part between a proper introduction and conclusion. Skipping the basics of question types, I’ll dive into proven techniques researchers rely on to craft effective inquiries and response options to gather useful data and results. 

(If you need help with survey planning, defining goals, or understanding the basics of structure and question types, check out How to Create an Effective Survey.)

Question Wording and Structure

The creation of effective survey questions is essential to accurately measure the opinions of the participants. If the questions are poorly worded, unclear or biased, the responses will be useless. A well-written question will mean the same thing to all respondents. It will communicate the desired information so that all participants interpret it the same way and understand the expected type of response. 

Use these guidelines for writing survey questions to yield informative and accurate information. 

Be clear, specific, and direct

Failure to clearly explain the intent of the question can lead to confusion and misinterpretation. Be very specific and avoid imprecise or vague words. Present the topic and define the behaviors, events, or timeframe. This will help ensure every participant is providing the same type of response.

Vague: What is your income?

For what time period? For just the respondent or the entire household? Before or after taxes?

Specific: What was your household’s yearly income before taxes in 2016?

Use the participants’ vocabulary

Consider the education level of the survey audience, and use words that will will be easily understood. Avoid jargon, complex terms, undefined abbreviations and acronyms. Use simple language and never assume knowledge; always provide the necessary information for the respondent to understand what is being asked. Define any concepts or terms that the respondent needs to understand in order to answer. If referencing something participants might not be familiar with, be sure to add details to help explain it.

Unclear: How likely would you be to subscribe to UIE’s library?

Whose library? The International Union for Electricity? What kind of library–documentation, podcasts, ebooks?

Clear: User Interface Engineering’s library offers online seminars by experts in UX design. You can access the recordings anytime for only $25 a month. How likely would you be to subscribe?

Tip: If the question requires a lengthy explanation, consider separating it from the question itself to help make the information easier to digest.

Talk like a real person and treat the questions like a conversation

Group similar topics together and order the questions in a logical way to create a natural flow as if having a conversation. The voice and tone of the survey should match who it is from and being designed for. The writing can be friendly and familiar but don’t sacrifice clarity for cutesy. Consider the MailChimp writing tone guideline, “It’s always more important to be clear than entertaining.” 

Formal: Would you be willing to participate in our 10-question feedback survey? Your responses to this questionnaire will help us improve your experience with Corporation ABC’s website.

Informal: Hi! Are you willing to answer a few quick questions? It’s won’t take more than five minutes. (And there’s a really good prize!)

Tip: Although I’m focusing on introductions and not question writing, it’s worth noting that being up front about the time-investment and offering incentives can also help with response rates.

Ask only one question at a time

Each question should focus on a single item or concept. This generally means that questions should have one subject and verb. Double-barrel questions ask a respondent to evaluate more than one thing in a question yet only allow for a single response.

Double-barrel: Was the content marketing seminar worthwhile and entertaining?

What if the seminar was educational but the presenter was a dreadful bore, and the response options are Yes or No? A double-barrel question is also known as a compound question. This is a common mistake, which can be corrected by breaking questions into two. Let’s look at an example with how to correct it:

Double-barrel: How satisfied are you with your work environment and compensation?

Single and separate:

  • How satisfied are you with your work environment?
  • How satisfied are you with your compensation?

By breaking the double-barrel question into two questions, one about satisfaction with the work environment and another question about pay, the participant is now able to provide a response to both inquiries separately. 

Practice good grammar

Keep the questions simple and grammatically correct. Maintaining a parallel structure and consistently using the same words and phrases improves respondents’ comprehension. Avoid two-part or complex questions which can be hard to interpret, as can double negatives.

Double Negative: Do you agree or disagree that user interface designers should never not know how to code?

Better: User interface designers should know how to code.

An agreement scale goes well with this reworked question—more on that later.

Avoid bias and loaded words

A biased question will lead participants in the direction of a particular answer. Some phrases, particularly adjectives and adverbs, may add bias to questions. Depending on how a question is presented, people can react in different ways (for example, asking a question using the word “loss” versus “gain”). The use of emotional, politically-charged, or sensitive words can also trigger a different response. Remain neutral regardless of topic and watch for wording that skews positive or negative. 

Biased: We think this UX Booth article on Survey Question Writing is very helpful. How helpful do you think this article is?

Unbiased: What do you think of this UX Booth article on Survey Question Writing?

Start with broad, general questions and progress to specific and harder ones

Beginning with basic, easier questions can encourage a respondent to continue. When possible, try to balance simple and complex inquiries. Interspersing easier questions among more challenging ones can make it seem less burdensome and help reduce abandonment. And remember to save sensitive questions like income for the end and make them optional.

Keep the survey short and don’t be greedy!

Don’t waste people’s time–only ask for what you really need. (Requiring answers to questions will slow people down, but it won’t necessarily get you want you and will increase drop off rates.) If there aren’t too many questions, and respondents can immediately understand what is being asked, they are more likely to be willing and able to provide useful information.
If the answers are also well-crafted…

Answer Wording and Structure

Since this article is concentrated on writing, I’ll focus on answers to closed questions, where responses need to be crafted by the survey designer. When providing responses to closed-ended questions, how each answer is described, the number of options, and the order can all influence how people respond. Whether presented as multiple choice, checklists, or in scales, just like when writing questions, the answers should use precise, clear wording. Here’s how to make that happen.

Present all the possibilities

The number of answers should be kept relatively small but include all the possible choices. Answers need to be balanced both ways (e.g. positive to negative, high to low frequency). 

All respondents need to be able to find an answer that fits their situation—including opting out. If there could be a situation where none of the answers apply, provide the option to select “don’t know,” “not applicable” or “prefer not to answer” for sensitive questions. Including an “Other,” with a free-form text field to provide a custom answer, is a great way to learn about alternative responses not provided in the defined answer set. 

Incomplete and Unbalanced:

  • Very Important
  • Moderately important
  • Slightly important

What if it is not important at all? Or not even applicable to the participant?

Complete and Balanced:

  • Extremely important
  • Very important
  • Moderately important
  • Slightly important
  • Not at all important
  • Not applicable

Say “no” only when necessary

Dichotomous questions present only two options and are clearly distinct. These answers, like yes/no and true/false, can produce less helpful data because they don’t provide context or specificity. (Though when using skip logic, these responses can often appropriate.) Formatting responses to use scales that measure things like attitudes or frequency yield more information-rich results. These answers can make a single question work harder.

Yes/No: Do you use the mobile app?

Frequency: How often do you use the mobile app?

  • Always
  • Very Often
  • Sometimes
  • Rarely
  • Never

Tip: These answers also follow the first guideline to cover all the possibilities in a balanced way, ranging from high to low or not at all. An even stronger set of choices would include references for the time period to clearly define what “sometimes” is versus “rarely.” Check out the UX Booth blog example below.

Keep answers mutually exclusive

If a participant can only select one response than each answer should be distinct and not cross-over. For example, options might be 0-5 or 6-10 rather than 0-5 or 5-10. Having the “5” in both answers makes them not mutually exclusive:

Not Distinct: Where is your work location?

  • In an office building.
  • From my home.
  • In the city.

The person could work in an office building in the city or from their home in the city.

Remove universal statements

Words like “never, none, always, all” are extreme choices that respondents might be hesitant to commit to. Rather than absolute words, provide answers with specific references for behaviors or timeframes.


  • I always read UX Booth’s blog.
  • I never read UX Booth’s blog.

Referenced Alternatives:
I read UX Booth’s blog: 

  • Once a week
  • 2-3 times a week
  • 4 or more times a week
  • I do not read UX Booth’s blog.

Use ratings and scales

The Likert Scale, where respondents indicate their level of agreement or disagreement, is the most commonly used approach to scaling options when measuring attitudes or behaviors. Likert scales should be symmetrical and balanced. They should contain equal numbers of positive and negative responses within the distance between each item being the same. 

Experts’ debates about scales—the number of levels (5, 7,10), and the inclusion of a neutral midpoint (neither agree nor disagree)—is too overwhelming to tackle in this article. Consult the many resources for Likert Scale best practices. SurveyMonkey suggests five scale points for unipolar and seven for bipolar. (My personal opinion is between five to seven is best; the higher the number the harder it is for people to gauge.) Always include word labels not just numbers to identify what each point on the scale means.

Common Scales: 

  • Agreement: Disagree to Agree
  • Familiarity: Not Familiar to Very Familiar
  • Frequency: Never to Always
  • Important: Not Important to Extremely Important
  • Likelihood: Not Likely to Extremely Likely
  • Quality: Poor to Excellent
  • More Examples (Iowa State PDF)

Use the expected, “natural” order for answer scales because it is easier for people to respond. For ranges (e.g. excellent to poor) it’s okay to reverse the order, such as starting with the favorable and ending with unfavorable answer, since it can also influence choices. 


Good survey design leads to good data.

The unfortunate result of bad survey design is bad data. Asking good questions and providing solid answers is not easy. Take advantage of what other researchers and academics have done and use starter templates when appropriate. It is the survey designer’s responsibility to be clear and unbiased. Make sure the questions will be informative, the answers accurate, and that the insight you can will lead to actionable results.


Design principle: Aesthetics by Gavin Lau

Today’s article is about understanding what is aesthetic design and its importance for the perception of usability. Humans like pretty and shiny design; they desire it much more than functional one.

We enjoy looking and using aesthetically pleasing design, because it satisfies our senses, it gives us pleasure.

Designers tend to think of aesthetics as the visuals of the design. However, aesthetic design consists of more elements than just how it looks.


What is aesthetic design?

There is a whole branch of philosophy exploring aesthetics. Let’s scratch the surface of the Aesthetics field and learn how it relates to our design work.

There is a phenomenon that social psychologists call “the halo effect”. It means humans tend to assume that good-looking people have other positive qualities aside from their looks.

The same is valid for product design. Good looking products and user interface are perceived as more valuable and having more qualities.

“Beauty is in the eye of the beholder”. Aesthetics are in all our senses, not just the sight. Aesthetic design is a 4D experience. Product designers, who are doing actual physical products are aware of that.

With the emergence of VR and AR technologies it becomes more important for digital designers to consider the 4D experience too.

There are 4 important categories, which can make or break the aesthetics of our designs.


The most dominant sense in majority of people is our sight. We can’t stop ourselves to look at what we find beautiful. It is as if the light that reflects from the beautiful design acts as a magnet for our eyes.

Visual aesthetics have these key elements: Color, Shape, Pattern, Line, Texture, Visual weight, Balance, Scale, Proximity and Movement. Using these element well will help us achieve good visual aesthetics.


Our ears are capable of perceiving a whole another level of aesthetic design. The ability to hear how your car engine works, how the digital product notifies you of new messages and etc. This is the power of sound aesthetics.

Sound aesthetics have these key elements: Loudness, Pitch, Beat, Repetition, Melody, Pattern and Noise. Using them well will create enjoyable “music” for our users.


Skin is the largest organ in human body. It also helps us experience the aesthetics. Material aesthetics are especially important for physical products.

Just remember, the last time you were buying cloths and feeling their texture or when you were checking out the latest mobile phone and feeling the frame material. Sometimes people make there buying decisions only based on the material aesthetics. Powerful stuff are these material aesthetics.

Material aesthetics key elements are: Texture, Shape, Weight, Comfort, Temperature, Vibration and Sharpness. By mastering them we can make our customers adore our products.

Taste and Smell:

Taste and Smell are sense that help us experience aesthetics even more deeply. Especially in food industry and different environment designs, these senses play an important role in experiencing aesthetics.

Key elements are: Strength, Sweetness, Sourness and Texture (for taste). Use these elements when possible to enhance the full picture, so our users can feel the aesthetics even deeper.

Now that we know a bit more about aesthetic design, let’s look at why it matters.


Why aesthetic design matters?

Not long ago user were expecting only functional and usable products when they were buying. Today, users expectations have evolved together with the design field.

People expect usability by default and are seeking products that are more than functional and usable. We want to experience pleasure, to stimulate our senses. We want the products we use to evoke positive emotion in us. Aesthetic design is crucial to satisfy these needs.

We all judge the book by its cover. The better the book cover the more we believe the content is better. This is phenomenon called “Aesthetic-usability”. Beautiful products/objects are perceived as easier to use and more valuable than ugly ones. Even if it is not true!

This phenomenon is especially valid when the products compared are equal in functionality and ease of use. The better looking product will win over the users swiftly.

Aesthetically pleasing designs are bringing up positive attitude in the users. It makes them care more about the product. Aesthetic design makes people more loyal of the brand and tolerant toward mistakes or failures. Imagine all the apple fans.

Early impressions of a product design matter! Aesthetic design is influencing how people think and feel. It influences how much pleasure we feel from the product. Aesthetic design affects our long-term attitude about products and even people.

Aesthetic design matters not only to make the first impression, but also to keep strengthening the bond with the user. The design of our products needs to be aesthetically pleasing consistently across the whole product and user journey.


Design for aesthetic pleasure

Let’s see how the words above can be useful for us to make better design. We have to design products that deliver pleasure to the user with aesthetics and usability.

But when aesthetics are in the senses of our users, how do we know what to design? The answer can be given by the people we’re designing the product/experience for. We need to understand them before deciding what is aesthetically pleasing.

When we are designing products for really wide audience it is wiser to keep things simple as much as possible!

There are 4 important pleasure aspect that we need to consider when we want to make our designs aesthetically pleasing.

Psychical pleasure

Pleasure derived mostly from touch, smell and taste. Think of designing hand-held product, computer devices, VR set even a normal pen.

We need to make sure the design is ergonomic, it feels comfortable and doesn’t overload the user senses. Consider how sensitive are your user’s senses, what is the average norm. Make sure the smell and taste is either neutral or brings positive associations.

Social pleasure

Pleasure derived from interacting with other people or with AI(still not that common). This context is very broad it can be from home assistant device and VR experiences to a room/building where social events will be hosted.

We need to make sure the design supports social interaction in the best way possible. It could be as simple as the sound aesthetics of the coffee machine that allows employees to communicate, while waiting for the coffee to be ready.

Psychological pleasure

Pleasure derived from completing a task or feeling in control and safe. This context is very tightly related to the usability of the product. But it can be also related to how the product design looks.

For example, a solid and stable looking car gives more psychological comfort than one that seems it might break if you open the door. Same is valid for digital products where the user feels in control and knows the task can be completed for sure.

Making things look and feel simple and stable. Guiding the user with great composition and motion. Using aesthetics plays a big role in making the users feel safe and in control.

Ideological pleasure

This context is mostly about abstract pleasure. I like to think of it as the glue that binds the other pleasure types. It is the meaning of the words in the books not the colors, font sizes and page layouts.

For example, in product design taking the sustainability angle can trigger pleasure in the user, making her feel well because she is responsible for the environment. Here are a 5 startups that are using that context.

We need to make sure that our designs communicate ideas and deeper meaning. This can frequently result in very deep aesthetically pleasure once the user realizes it.


Balancing aesthetics and usability

There are cases where we need to sacrifice aesthetics, due to different limitations depending on the context. Other times aesthetics could dominate the usability aspect.

Aesthetics and usability in balance

This is what most of the cases as Designers we should strive to achieve in our designs. There are many good examples from smart phones and apps to computer chairs that look and feel good, but also have the desired usability.

Aesthetics over usability

Some times products have dominating aesthetics that are not supported by good usability and ergonomics. This is mostly visible in the fashion industry.

I guess these might be nice in winter time :)

Shoes made to look nice and attractive, while at the same time destroying the feet of the user. This demonstrates clearly how humans can be seduced by aesthetic design and even at the price of their health.

Usability over aesthetics

Other times usability must be on focus no matter what. Equipment designed for emergency situations, where people cognition is compromised. In this cases aesthetics are with low priority. When designing for such cases there are a lot of constraints from different authorities and requirements. Using Hick’s law for quick decision making can help you make the better design decisions.


Final thoughts

First impression matters. When we perceive beauty with more of our senses we feel deeper pleasure from the design. Aesthetic design gives users pleasure from the start! It makes them form a bond with the design, bond that goes beyond the initial interaction.

Aesthetic design is perceived as more friendly, usable and valuable.


How Beacons Can Reshape Retail Marketing by Gavin Lau

Beacon technology is poised to change the way consumers interact with brands, making devices more helpful and revolutionizing the way retailers measure the offline impact of online ads.

When it comes to cutting-edge marketing, one technology is top of mind: beacons. In fact, more than a million beacons are expected to be installed in U.S. retail stores this year alone. But right now, many marketers only think about using beacons to push phone notifications.

At Google, we think beacons have the potential to do much, much more for consumers, brands, and marketers. To realize this potential, we created Eddystone and the Google beacon platform. With these platforms, beacons are no longer limited to communicating only with a brand's app. Brands can integrate beacons with Google products and services, as well as their own and their partners' apps.

For consumers, this means a frictionless shopping experience, with fewer gaps between channels. For retailers, it means reaching the right person at the right time with the right message, with new and improved metrics to measure success.

Enabling a seamless, cross-channel shopping experience

To understand beacon technology, look back at one of the oldest: lighthouses. Just as lighthouses mark locations with beams of light, beacons are physical landmarks that send signals to mobile devices.

These beacon signals enhance how people connect to their surroundings by giving their phones a much better idea about where they are. Think of a busy dad paying for parking through the Instant App associated with the beacon in a parking meter, or the young professional checking out popular times for her favorite restaurant so that she doesn't have to wait.

Nearby Notifications makes shopping better by helping shoppers get things done with their phone, such as scanning items to get reviews or splitting the bill for their table in a restaurant. The technology also makes it easier for consumers to get useful information, whether that means seeing if an item is in stock or locating that same item while in-store.

Source: Google Internal Data

Source: Google Internal Data

While these kinds of communications often rely on other types of location signals, beacon signals take precision and quality to the next level. For marketers, beacons can give a brand an edge in a world where omni-channel shopping is becoming the norm and consumers expect to get what they want, when they want it. And the opportunity is huge: Even today, Android devices pull more than 40 billion queries for beacon-related content from Google services every year.1

Eddystone and the unlimited potential of beacons

Beacon technology has been used in marketing for years, but Eddystone introduced a few really important improvements. Eddystone is an open-source beacon language, so it can be programmed by any developer, with specs and tools available on our developer site. It can also communicate with mobile devices across Android and iOS. And, with Eddystone, beacons can be used to communicate different things to different websites, apps, and services on mobile devices.

For example, in the last year, United Airlines installed beacons that work with Nearby Notifications on Android phones. These beacons help consumers prepare for an upcoming flight by helping them install the in-flight entertainment app that's available for mobile devices.

And, perhaps most importantly, Eddystone and the Google beacon platform are extensible. This means they will continue to improve as more capabilities are invented and developed, using the same physical infrastructure. We're excited to see how other brands and retailers use the technology to improve the consumer experience.


New insights into consumer behavior

Just as beacons enable consumers to become more attuned to their location, they also give marketers new insight into the real-life behavior of their consumers. As beacon technology becomes more widespread, it will help marketers see how Search Ads and Local Ads affect in-store visits.

For example, we ran a randomized controlled study with 10 of the largest U.S. big box retailers, including Target and Bed Bath & Beyond. We found that on average, the number of incremental store visits driven by mobile search ads exceeded the number of online purchase conversions. These were store visits that otherwise would not have happened, proving the substantial offline impact delivered by mobile search ads. Beacons are bringing this functionality to more stores through improvements in place detection.

Similar to other products—such as Popular Times—that use Google location data, safeguarding consumer privacy is top of mind. Users opt in to location services in order to benefit from extra functionality in a range of products from Search to Maps. The platform aggregates location data across many users and uses differential privacy to ensure that no individual user can be identified to a third party.

How your brand can get started with proximity marketing and beacons

Location-based marketing and proximity marketing with beacons are projected to grow exponentially in the next few years. To stay ahead of the curve, brands should invest in the beacon infrastructure that will enable consumer devices to work best within their stores.

Here are some things to consider before investing in beacon infrastructure:

What do you want to communicate to consumers? The most flexible approach is to deploy beacons with abstract identifiers that are linked to your Google Cloud Platform account. You can then use Nearby Notifications to help users interact with your store through the web or your brand's app. And, contrary to popular belief, you don't necessarily need an app to take advantage of this. You can also work with partners whose apps can interact with your venue, extending and enriching your visitors' experience. If you only want to point to a single webpage, broadcast its URL directly from the beacon.

How are users interacting with your venue? The place marker for your venue may already be emphasized in Google Maps if it's popular in your area or on a specific user's map if they're a frequent visitor. Ensuring that your visitors' devices know that they've visited improves your venue's presence across a range of Google products. In particular, we're piloting the use of beacon signals to bring Store Visits measurement to more venues, helping you understand the offline impact of your online ad spend. 


Guerrilla testing with your prototypes! by Gavin Lau

Why Guerrilla?

Whether you’re exploring a particular research problem or testing a design solution that you already have, guerrilla research can be a huge time-saver. Guerrilla testing in it’s simplest form is getting onto the locations where you would find users of your persona and asking them to use your prototype for a minute or so..

Most stakeholders and clients refrain from usability testing because it involves spending lots of time and money to see the results. But why would anyone object to a usability method which does not cost much and gives amazing insights before you jump to development? That’s guerrilla testing!

This article will walk you through the process of executing a guerrilla user test for rough and high fidelity prototypes. The beauty of this format of testing is that it doesn’t have a hard-and-fast approach. I’ll talk about how you can use CanvasFlip for guerrilla testing to save hours and money while getting closest to amazing experience every time.


Step 1 : Creating tasks to be tested

Create a list of task whose flows need to be tested

While designing an app, we always have a set of flows in mind that our users will be doing on the app. The first thing is to write down all these flows.

So just for example let’s check out few of the task flows for Whatsapp -

  1. Send a message to a friend
  2. Create a group of friends
  3. Send photos to your friends
  4. Broadcast a message
  5. Change your display picture and so on…..

Similarly, make a list of tasks for your app that you want to test. Think of everything that your user can possibly do your app and write it in the form of tasks.

Guerrilla user testing is easy and you’ll get valuable insights even if you’re doing it for the first time. You can do almost everything wrong — as long as you get your tasks right your user testing will always work.

Prioritize top 3 tasks — Convert to test scenarios

You can’t really test everything in a guerrilla testing, we really have to respect our users’ time. So we need to prioritize top 3 tasks. One does not really have to break his/her head on this. You just have to rank tasks in the order of frequency of usage of a task. For eg, when I’m on whatsapp, the one thing that I always do is send a message to a friend, second in the list migh be sending an image and so on… This pattern has to quick, like really quick. So just in case you miss out on something really important, you can always test it the next time.

Once 3 tasks are finalised, you need to convert tasks into scenarios which users can understand and grasp easily. Scenarios should be crisp and easy to follow. While finalising the scenarios remove any part that does not contribute and simplify the language.


Step 2 : Create a prototype

Honestly, users do not really relate to rough sketches much, but detailing it out a little before the test, might help a lot. On the contrary, testing with rough sketches sometimes gives a user a sense of ownership, that they are an integral part of the building process. The choice of the level of fidelity is completely yours.

To test your designs, you definitely need a prototype. There are multiple prototyping tools over the internet, but specifically for guerrilla testing I strongly suggest you use CanvasFlip. Why? Because it’s my baby? Well ya that too, but honestly, it helps you skip a lot of steps while testing. We’ll see how :)

Create a prototype for user testing

Create a prototype for user testing


Step 3 : Get out of the building and get started

Guerrilla testing is straightforward — have participants use your prototype, while you draw insights from their prompt sessions. This does not necessarily have to be the traditional way, where you stand right behind the shoulder and take down notes of the sessions or use cameras to record whatever is happening. With CanvasFlip, as I said you can skip a lot of these steps, yet not compromise on the insights.

During the test, make sure you don’t continuously keep taking notes. It only leaves the user stressed about what you are writing, good or bad or have they done something wrong. All the insights you require will be recorded in CanvasFlip, so I believe one should avoid taking notes all the time.

Get as casual as possible to avoid scaring your users — That’s when CanvasFlip does the magic.

Get as casual as possible to avoid scaring your users — That’s when CanvasFlip does the magic.

Here’s how to do it with CanvasFlip -

  1. Just share the prototype link with users you meet at a cafe, or bus stand, or any public platform over whatsapp or gmail or any convenient social channel.
  2. No plugin or app installation is required to get started with the sessions.

That’s it! All these sessions and more insights about the entire test is saved in your CanvasFlip dashboard.

Share your prototype and let users use it

Share your prototype and let users use it


Step 4 : Your guerrilla testing insights are captured. Analyse them.

Guerrilla testing is about finding and fixing the most severe problems, not agonising over every possible obstacle a user might encounter. And the best way to find the most severe usability problems is to replay the sessions of the users and analyse where users are getting stuck, or what is that grabbed the interest of your user.

Study the path taken by users and why: User videos on CanvasFlip, records and replays the sessions of the your users. I use user video to compare the path I imagined the user would take and the path user actually took. Surprisingly, most of the times the two differ a lot. Now that’s quite a valuable input for any designer.

Apart from that I also use it to find out parts of the sessions which were confusing or intimidating for the user.

Capture the task completion ratio: Conversion funnels are more of a cumulative insight for the entire test. It gives you numbers that you really really need for iterations on designs — drop-off rate and conversion rate. It gives you number of drop-offs on each screen, which is quite helpful to decide which screen needs to be taken up on priority.

I also use this report to find out the most popular flow for a particular task. I often come across situations when I end up designing a task from 3–4 sources. Later deciding which flow to crap off and which to retain is a dicey situation. Conversion funnel truly helps in clearing air in such situations.

Heat maps are quite handy when you want to decide which page area is getting enough engagement. More than often we are most concerned about our Call-to-action’s performance — Heat maps are the best to gauge that. I use heat maps to study the page areas that got enough attention from the users. It is a great input for iterating on the call-to-actions and important UI elements on the page.


Now, implement quick fixes and test again!

Final words

Guerrilla testing is the most amazing way of getting value out of a huge crowd in less time. But if you don’t have that time for testing, because an hour of your time costs 50+$, you can also resort to remote unmoderated usability testing.

Remote testing removes many of the challenges related to scheduling, travel, paperwork and setup. You can literally shave off days, or in some cases weeks, with remote testing. And with CanvasFlip you reduce those hours even further. :)



How to become a UX Designer at 40 with no digital or design experience! by Gavin Lau

User Experience Design is the process of enhancing a persons experience with a product or service and involves an understanding of their behaviour to create a successful design.

Example: A business has an app, they want the sign-up process to have a great User Experience (UX). You have business requirements. You find the engineers (computer programmers) limitations. You research, collaborate with designers and others. You create ideas and prototypes to test. You develop what is the best, test more and iterate on that. That’s UX.

There is a great demand for good UX Designers. If you have no previous digital or design experience don’t panic. I had neither and managed to get into the world of UX. I chose to be a UX Designer because it was creative, in technology and in demand (and I didn’t need to wear a suit to work!). My journey was not easy, I’ve had bumps along the way but I wouldn’t change a thing.

If you are willing to work hard, be patient, and work outside your comfort zone, it’s a really exciting career.



Your journey into UX Design

Topics I’ll cover:

Studying UX Design, the tools to learn, your UX portfolio, getting a job, the UX process, how to design, user testing , people you’ll work with and ongoing learning.



1. UX Study On Campus:

Bootcamp study provides you with a good foundation of working in User Experience Design. In Sydney General Assembly and Academy Xi are great places to start your UX journey. They don’t fully prepare you for the real world of UX work, but it certainly helps you in the door.


General Assembly

General Assembly is in several cities around the world and has a solid reputation. It focuses on short immersive technology learning courses.

In Sydney, it has a 10 week, 5 days a week, full-time immersive UX course. They also do a part time course for 10 weeks 2 evenings per week. I suggest if you are serious to move into UX (and have no experience) commit to the immersive 10 week course. Susan Wolfe taught me in Sydney in 2014 and I couldn’t have asked for a better teacher.

The 10 week UX Immersive (as of March 2017) : $13,500.00 (AUS)

The 10 week part time UX Course (as of March 2017): $5,000.00 (AUS)

General Assembly, UX Design (Sydney, Melbourne, Brisbane)


Academy Xi

Academy Xi is the new kid on the kid on the block in Sydney and they to have a good reputation. They teach full and part time technology courses. In Sydney they have a 10 week full time UX course. They also teach UX Design ina 10 week part time course 10am-4pm on Saturdays.

The 10 week UX full time UX Course (as of March 2017) : $10,000.00 (AUS)

The 10 week part time UX Course (as of March 2017: $3,500.00 (AUS)

Academy Xi, UX Design (Sydney, Melbourne)



2. UX Study Online:

There are quite a few companies that do UX courses online. For me online wasn’t an option. I wanted to get an immersive experience and learn quickly.

A few courses worth a look:



This would be my choice if I did an online course tomorrow. You get a mentor and it sets you up for an entry level UX Design job. It is also the best value of the online courses here.

The self paced 2–4 month UX Course (as of March 2017): $299.00 per month (USD)


Design Lab

I did a UI course with Design Lab and they are great. You get a mentor and the content is substantial.

The full time 12 week or part time 24 week UX Course (as of March 2017): $2799.00 (USD)


General Assembly

There part time course is reasonable value. You get a mentor and can do it outside your working life. I would not advise this if you have no previous experience. They say allow 8–10 hours per week.

The self paced 5 week course (as of March 2017) : $850.00 (USD)


Career Foundry

These guys are bit more pricey but go more in depth.They state it will be 10 months at 15 hours a week study. Looks interesting but is a big commitment.

10 month course (as of March 2017): $6000.00 (USD)



3. UX Design Tools:

Sketching on paper

Pick up a pencil or pen, some paper and doodle. Sketching is an important part of UX design. You DO NOT need to be a born artist to be able to sketch meaningful designs. You just need to get in the habit of sketching out ideas, app or web screens and customer journeys. I am not a sketcher or an artist, but getting into the habit of sketching has been invaluable. With sketching you can look at ideas quickly. If they don’t work you can throw them away and get onto the next idea..

I recently did a community college course in Sydney to practice cartoon drawing. I am no master but I wanted to create my own style to storyboard ideas. The Napkin Academy would be a great way to start your journey in sketching your ideas.



What is Sketch? Sketch is the modern day tool for UX Designers. In days gone by Adobe’s photoshop and illustrator where the tools to use. I never used Adobe’s software so jumped straight into Sketch. This will be slightly daunting at first but just dive in and get going. Go online and do some lessons. Be patient, practice everyday and you’ll get there.

Sketch lessons

Other options instead of Sketch?

New tools called Figma and Adobe XD have some great features. My advice would be to learn Sketch to get started.



4. Prototype Tools:

There are lots of new prototyping tools coming out all the time. Here is a snapshot of what to learn to get started:

Sketching out wireframes

The most simple of prototypes. This is a quick option to get things in front of users. Sketched or printed up designs can be a great way to get some quick user validation on an idea. You can even add sketches to make clickable prototypes with Pop App by Marvel.



This is a great tool for prototyping straight forward web and app journey’s. You design the screens in Sketch and export out and add to Invision. You can then create a clickable prototype. You will not able to do advanced interactions but it is a must learn. Don’t worry if this doesn’t fully make sense at the moment, it will.

Intro to Invision



Principle is a more advanced prototyping tool than Invision. It lets you create great little animations pretty quickly. Don’t learn this until you’ve learned Invision.

Principle for beginners

Lessons in Principle



This is a new tool that could overtake Principle. Essentially it will allow you to do a bit more that Principle can do. Don’t worry about this until you have learned Invision and got a hold of Principle. Just a good one to keep in mind for the future.



5. The UX Portfolio:

The UX Portfolio is the story of who you are and what you’ve done in your UX career. When I finished at General Assembly I decided to code my portfolio. I enjoyed the process but you DO NOT need to code your own UX portfolio. There are lots of great tools to help you do a great and simple portfolio to tell your story.

I will write a fuller article on the UX portfolio at some stage. Make sure you have a brief ‘about’ section with your contact details. Then have your portfolio cases. Document the problem you had to solve for each case and how you solved it. UX Managers will want to see your process. Remember to keep it simple with not to much jargon.

My first coded portfolio (excuse the UXGuy title!)

PDF Document

In many ways, this is a sensible option when you’re starting out. You avoid focusing too much time on the technical side of the portfolio and more on the content and UX. You can design it in Sketch (once you have got your head around Sketch!). It can be done in A4 pages which can then be sent as a PDF to the potential employer.



Squarespace has great website portfolio templates you can use off the shelf. Bit of thought is required but the results can be impressive.



Like Squarespace Dunked has portfolio website templates where you can add your content without too much trouble.



6. Getting a UX Job:

This’ll feel scary. You’ve studied and got your head around some of the tools. You don’t feel like a UX Designer, you feel like an imposter! Everyone started here, don’t panic, feeling like an imposter is part of the journey!



Get your profile on Linkedin up to date. Put in a simple photo. Give yourself a straight forward intro focused on your strengths. Put in your experience with a snapshot of your roles. Same for your education, plus add any short courses you may have done related to UX.

People want to get a snapshot of you on Linkedin, they don’t want to read a book. Keep the bullshit out, write naturally and avoid jargon and buzzwords.

Pay for the premium Linkedin if it helps you. You can direct message people with Linked Premium. This can be a great way to talk to a company that you’re keen to work at.

Good Tip: Message UX designers to ask questions about work at their company. This can be a great way to get in the door.



Photo from Tech Talks at Pivotal Labs, Sydney

Photo from Tech Talks at Pivotal Labs, Sydney

Give them your email for regular news and updates for your area. When you go to a meet up, ask questions, say hi to people, be open. I am not a big crowd person but you need to meet people, this could be the door you need.

UX Design Meet Ups in Sydney

Good Tip: set up a new email for all your UX stuff. This will mean it will not get lost in your sea of regular emails. Avoid being, just have your name or something close. I had UXGuy and it pains me to see it now!



Photo from

Photo from

Recruiters are good and bad. Stay away from recruiters who don’t know what UX is. If the role includes coding forget it. If you’ll be the only UX Designer at the company, don’t bother. If like me you have no previous experience, find somewhere that’ll have good people to mentor you. It is nice to get offers from recruiters, but do your research.


The Interview

There is a great article by Springboard about the questions you’ll be asked at a UX interview. Read up and be prepared.



7. UX Process:

What is the UX process?

The UX process is the structure that UX Designers follow to get a desired outcome.

Research > Insights > Design Concepts > Test Prototypes > Develop

There are many variations to the UX process. Typically there is a common sense A to Z journey to get the outcome. My advice would be to look at the options and create your own process. Not all projects will use the full journey, but it’s great to have a structure to follow.

Work for a business that follows a UX process

Many businesses don’t follow a UX process. They don’t see it as important. Working for companies with no process will make life tough. I did this for a UX contract when I started and it was no fun. It did nonetheless teach me what not to do!

Work for a business with a UX process, as you will learn so much more. A mature UX business will really give you a great start to your UX career.

Do a side project and go through your full UX process

A side project can be great for your learning. Once completed you can add it to your portfolio. A side project could be a re-design of an existing website or app, provided you are solving a genuine problem. Or you could work for a business that can’t afford a full time UX Designer but would like some help.

UX books

Here are some great books to get started in UX Design:

  1. The Design of Everyday Things by Don Norman

2. 100 Things Every Designer Needs to Know About People by Susan Weinschenk

3. Don’t Make Me Think (revisted) by Steve Krug

4. Simple and Usable: Web, Mobile, and Interaction Design by Giles Colborne

5. Smashing UX Design by Jesmond J. Allen and James J. Chudley

6. The Elements of User Experience by Jesse James Garret

7. A Project Guide To User Experience Design by By Russ Unger and Carolyn Chandler

8. Sketching User Experiences by By Saul Greenberg, Sheelagh Carpendale, Nicolai Marquardt and Bill Buxton

9. Universal Principles of Design by By William Lidwell, Kritina Holden and Jill Butler

10. Designing Web Usability by Jakob Nielsen

11. Measuring the User Experience by Tom Tullis and Bill Albert



8. How to Design:

Don’t be precious with your designs

One great trait of a designer is to be flexible. Don’t get attached to your designs. You need to be able to throw them away if they don’t work. Embrace failure of your designs, it means you are one step closer to reaching the end goal.

Don’t be scared to get feedback

Get up from your desk and talk to designers, developers, managers, whoever. My experience is that if you talk to five people at least one comes up with great feedback. The quicker you do this, the quicker you can fail and go on to create a great experience.

Talk to developers

You need to confirm with the developers that what you have designed can be developed and how long it’ll take. Normally this would be done at the sketching stage but be sure to confirm when designed. When showing stakeholders you want to be able to clearly state that your designs can be developed and the time it will take. Gaining trust from stakeholders by having this information is invaluable.

Concept Designing

It’s great doing concept work for a project if you have time. This is a good way to stay inspired and some of the work may filter through to get developed. My advice would be to do designs that disrupt what is being done. This can open the innovative culture in your team. I don’t do enough of this, but I can see the value and plan to do more.



9. User Testing:

User testing is a crucial part of the UX process. Get into some user testing yourself to see the process. At Tabcorp we have a great UX Research team. They give us great direction in how we should test our designs, to get the best insights.

Great free e-book on testing:



10. People you’ll work with:

Be thoughtful of your fellow designers

Give positive feedback. When something seems odd maybe “looks great but might be worth looking at the option of…”. Never makes sense to trample on someones designs, doesn’t benefit anyone.

UX Researchers

UX researchers will organize and often do the user testing. If you need to get prototypes to UX Researchers be thoughtful. They may have lots of different prototypes so make their life easy. Check the prototype links on test day to make sure all is in order. If you are testing beta sites then make sure everything is in order. The research team does such an important job, so it’s worth keeping them onside.

Choose your battles and learn to fight

As a UX Designer you need to fight your corner.

“If you don’t battle you’ll end up a UI Designer”
(wise words from an old colleague of mine)

There will come a time when the business wants to do something that is bad for the customer. Go to battle with stats, testing results or any info that provides proof that it’ll be a problem. Your opinion alone will not be enough, so be prepared. Andrew Doherty (a designer at Google) writes a brilliant article about being prepared to fight:

Choose your allies wisely

Once you’re settled into your new job, find your allies. These are the ones you can ask the stupid questions to. It’s so important to have a few go to people who can help you out when needed. I have a few people at Tabcorp that can always help me out when I need.

Don’t miss out on lunches with your team

Any chance you get to do social stuff with the team do it. This is a great time to make some mates at your work. Creating relationships with your colleagues is key to making the team work well together.

No doesn’t always mean ‘No’

Ask a team lead if something can be developed, they may say ‘no’. Ask a developer the same question and they may say ‘yes’. Different people in the business have different priorities. A team lead may be saying no because of a time constraint. That doesn’t mean it can’t be done, so ask a few people before you park a great idea.

Get up from your desk and talk to people

Insights can come from anywhere. You normally don’t find them looking at your computer screen. The real insights come when you talk to people in the kitchen, at their desk or at the pub. Be open to peoples ideas from a top manager to a developer intern. Everyone’s voice is important, so keep your ears pricked!



11. Ongoing Learning & Staying Inspired:

Find UX mentors

People who have lots of experience are gold. I have a few friends who are gold but I don’t use them enough. Experienced designers are great mentors. They are also very giving. Chose the people that you want to be like and learn from them.

Have a strategy to stay inspired

“It’s easy to be creative but more difficult to stay inspired.”

I read the above quote on Medium but forget who wrote it. It could have been Julie Zhuo, from Facebook. There are lots of online resources to keep you inspired. I use Panda which a great Chrome plug in which lets you flick through lots of different tech and design news. I spend 15 mins a day flicking through news. Any articles that interest me, I save them and read later. UX Weekly and Sidebar are also good resources.

Go to Conferences

This is a great way to get out of the office and refresh. Going to conferences or workshops can be inspiring. You meet new faces and with that comes new ideas.

Carry on learning

This is a must as a designer. You are always learning and always growing. Read medium articles, on your Kindle or on your computer. Don’t stick to just UX Design. Read about programming, product management and other areas that you work with. Great to get some insights on what is happening around you. Take short courses that fit with your life. When you are at your desk instead of listening to music try a few podcasts instead. This is a great way to learn and work. Product Hunt have a great list of design podcasts that are worth listening to.



12. Final words:

Use Android & Apple phone

Learn the patterns of these two operating systems. If you are an Apple user then switch to Android and vice versa. Get a feel for what you don’t know. Look at Google’s Material Design guidelines and Apples iOS ones.


To become a good UX Designer you need to listen. Lots of listening and noting down comments.

Avoid Jargon

The tech world has too much jargon for me. Too many buzzwords and not enough straightforward talk. Say things as they are and you should make good headway.

Have humility & fail fast

This is a great quality for any designer. Humility comes from being humble. Being humble allows you to fail fast.

Be authentic & don’t bullshit

This is a life rule. You are never the smartest one in the room in a tech company. If you attempt to know more than you know, you’ll get yourself in a pickle. People can see through it so keep yourself honest. If you don’t know something, you can get back to people once you’ve figured it out.

A must read article for new Designers

Alana Brajdic (a fellow UX designer at Tabcorp) has a great article on ‘22 things new UX Designers should know before entering the workplace’. Make sure you read it.

Alana’s article



Having UX Designer as your job title is easy. Getting your head around the full process takes time. Study, learn the tools, read lots, do projects, get your portfolio out there and get a job. Once you have a job this is when the learning really starts. Enjoy the journey as it is a unique time to be a UX designer. Good luck!



Creating Usability with Motion: The UX in Motion Manifesto by Gavin Lau

The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?”

Over the last 5 years, it has been my privilege to coach and mentor UX & UI designers in over 40 countries, and at hundreds of the top brands and design consultancies through my workshops and tutorials on UI Animation.

After over fifteen years studying motion in user interfaces, I have come to the conclusion that there are 12 specific opportunities to support usability in your UX projects using motion.

I call these opportunities ‘The 12 Principles of UX in Motion,’ and they can be stacked and combined synergistically in a myriad of innovative ways.

I’ve broken the manifesto into 5 parts:

  1. Addressing the topic of UI Animation — it’s not what you think
  2. Realtime vs non-realtime interactions
  3. Four ways that motion supports usability
  4. Principles, Techniques, Properties and Values
  5. The 12 Principles of UX in Motion

As a quick plug, if you want me to speak at your conference or lead an onsite workshop for your team on the exciting topic of motion and usability, go here. If you want to attend a class in your city go here. Finally, if you want me to consult on your project, you can go here. To get added to my list, go here.


It’s not about UI Animation

Because the topic of motion in user interfaces is mostly understood by designers to be ‘UI Animation’—which it is not — I feel like I need to create a bit of context before we jump into the 12 Principles.

‘UI Animation’ is typically thought of by designers as something that makes the user experience more delightful, but overall doesn’t add much value. Thus, UI Animation is often treated like the red-headed stepchild of UX (apologies to red-headed stepchildren everywhere). If at all, it usually comes at the end, as a final lipstick pass.

Additionally, motion in the context of user interfaces has understandably been held to be under the domain of Disney’s 12 Principles of Animation, something I argue against in my article ‘UI Animation Principles — Disney is Dead.’

In my manifesto, I will be making the case that UI Animation is to the ‘12 UX in Motion Principles’ as construction is to architecture.

By this I mean, that while a structure needs to be physically built to exist (requiring construction), the guiding hand which determines what gets built comes from the domain of Principles.

Animation is all about tools. Principles are the practical application of ideas that guide the usage of tools and as such, Principles provide high leverage opportunities for designers.

What most designers think of as ‘UI Animation’ is in fact the execution of a higher modality of design: the temporal behavior of interface objects during realtime and non-realtime events.


Realtime vs non-realtime interactions

At this juncture, it is important to distinguish between ‘state’ and ‘act.’ The state of something in UX is fundamentally static, like a design comp. The act of something in UX is fundamentally temporal, and motion based. An object can be in the state of being masked or it can be in the act of being masked. If it is the latter, we know that motion is involved and in a way that could support usability.

Additionally, all temporal aspects of interaction can be thought of as happening in realtime or non-realtime. Realtime means that the user is directly interacting with the objects in the user interface. Non-realtime means that the object behavior is post-interactive: it occurs after a user action, and is transitional.

This is an important distinction.

Realtime interactions can also be though of as ‘direct manipulation,’ in that the user is interacting with the interface objects directly and immediately. The behavior of the interface is happening as the user is using it.

Non-realtime interactions happen only after input from the user and have the effect of briefly locking the user out of the user experience until the transition completes.

These distinctions will give us leverage as we continue our journey into the world of the 12 Principles of UX in Motion.


Motion supports usability in four ways

These four pillars represent the four ways where the temporal behavior of user experiences supports usability.


Expectation fall into two areas — how users perceive what an object is, and how it behaves. Another way of saying this is that as designers, we want to minimize the gap between what the user expects, and what they experience.


Continuity speaks both to the user flow and to the ‘consistency’ of the user experience. Continuity can be thought of in terms of ‘intra-continuity’ — the continuity within a scene, and ‘inter-continuity’ — the continuity within a series of scenes that make up the total user experience.


Narrative is the linear progression of events in the user experience that results in a temporal/spatial framework. This can be thought of as the series of discreet moments and events that connect together throughout the user experience.


Relationship refers to the spatial, temporal, and hierarchal representations between interface objects that guide user understanding and decision making.


Principles, Techniques, Properties, and Values

Tyler Waye says it as good as any when he writes, “Principles… are the underlying premises and rules of function giving rise to any number of techniques. These elements remain consistent, no matter what is happening.” It bears repeating that Principles are agnostic of design.

From there, we can imagine a hierarchy with Principles at the top, Techniques further down, Properties below that, and Values at the bottom.

Techniques can be thought of as the various and unlimited executions of Principles and/or combination of Principles. I think of technique as akin to ‘style.’

Properties are the specific object parameters that are being animated to create the technique. These include (and are not limited to) position, opacity, scale, rotation, anchor point, color, stroke-width, shape, etc.

Values are the actual numeric property values that vary over time to create what we call ‘animation.’

So to land the plane here (and jumping ahead a bit), we could say that a hypothetical UI animation reference is using the Obscuration Principle with a ‘blurred glass’ Technique that affects the Blur and Opacity Properties at a Value of 25px and 70% respectively.

Now we have some tools to work with. And more importantly, these linguistic tools are agnostic of any specific prototyping tool.


The 12 Principles of UX in Motion

Easing and Offset & Delay relate to timing. Parenting relates to object relationship. Transformation, Value Change, Masking, Overlay, and Cloning all relate to object continuity. Parallax relate to temporal hierarchy. Obscuration, Dimensionality and Dolly & Zoom both relate to spatial continuity.


Principle 1: Easing

Object behavior aligns with user expectations when temporal events occur.

All interface objects exhibiting temporal behavior (whether realtime or non-realtime), ease. Easing creates and reinforces the ‘naturalism’ inherent in the seamlessness of user experiences, and creates a sense of continuity when objects behave as users expect them to. IncidentallyDisney refers to this as ‘Slow In and Slow Out.’

The example on the left has linear motion and looks ‘bad.’ The first example up top has eased motion and looks ‘good.’ All three above examples have the exact number of frames and take place over the exact same amount of time. The only difference is in their easing.

As designers concerned with usability, we need to require of ourselves rigor and inquire, aside from aesthetics, which example supports usability more?

The case I am presenting here is that a certain degree of skeuomorphism is inherent in easing. You can imagine an ‘easing gradient’ wherein behaviors that fall outside user expectations result in less usable interactions. In the case of properly eased motion, users experience the motion itself as seamless and largely invisible — which is a good thing in that it is non-distracting. Linear motion is visibly obvious and feels somehow off, unfinished, and jarring, and distracting.

Now I’m going to completely contradict myself here and talk about the example on the right. The motion isn’t seamless. In fact, it has a ‘designed’ feel to it. We notice how the object lands. It feels different, yet it still feels more ‘correct’ than the example with linear motion.

Can you employ easing and still have it not support (or worse case undermine) usability? The answer is yes, and there are several ways. One way is timing. If your timing is too slow (mushy to borrow from Pasquele), or too fast, you can break expectation and distract user attention. Similarly, if your easing is misaligned with the brand or overall experience, this can also negatively impact expectation and seamlessness.

What I want to open you to is a world of opportunity when it comes to eased motion. There are literally an infinite number of ‘easings’ that you as a designer can create and implement in your projects. All of these easings have their own expectation response they trigger in users.

To summarize: when to use easing? Always.


Principle 2: Offset & Delay

Defines object relationships and hierarchies when introducing new elements and scenes.

Offset & Delay is the second of only two UX in Motion Principles that is influenced by Disney’s Animation Principles, in this case from ‘Follow Through and Overlapping Action.’

It is important to note, however, that the implementation, while similar in execution, differs in purpose and outcome. While Disney’s Principles result in ‘more appealing animations,’ the UI Animation Principles result in more usable experiences.

The utility of this principle is that it pre-consciously sets the user up for success by ‘telling’ the user something about the nature of the objects in the interface. The narrative in the above reference is that the top two objects are united and the bottom object is separate. Perhaps the top two objects could be a non-interactive image and text, while the bottom object is a button.

Even before the user registers what these objects are, the designer has already communicated to her—through motion — that the objects are somehow ‘separate.’ This is extremely powerful.

Credit: InVision

Credit: InVision

In the above example, the floating action button (FAB) transforms into header navigation elements comprised of three buttons. Because the buttons are ‘offset’ from each other temporally, they end up supporting usability through their ‘separateness.’ Said differently, the designer is using time itself to say — even before the user registers what the objects are — that the objects are separate. This has the effect of telling the user, completely independent from the visual design, part of the nature of the objects in the interface.

To better show you how this works, I’ll show you an example that breaks the Offset & Delay Principle.

Credit: Jordi Verdu

Credit: Jordi Verdu

In the above example, the static visual design tells us that there are icons over a background. The presumption is that the icons are all separate from each other and do different things. However, the motion contradicts this.

Temporally, the icons are grouped into rows and behave like a single object. Their titles are likewise grouped into rows, and also behave like a single object. The motion is telling the user something other than what her eyes see. In this case, we can say that the temporal behavior of the objects in the interface are not supporting usability.


Principle 3: Parenting

Creates spatial and temporal hierarchal relationships when interacting with multiple objects.

Parenting is a powerful Principle that ‘relates’ objects in the user interface. In the above example, the ‘scale’ and ‘position’ property of the top or ‘child’ object is parented to the ‘position’ property of the bottom or ‘parent’ object.

Parenting is the linking of object properties to other object properties. This creates object relationships and hierarchies in ways that support usability.

Parenting also allows designers to better coordinate temporal events in the user interface, while communicating to users the nature of the object relationships.

Recall that object Properties include the following — Scale, Opacity, Position, Rotation, Shape, Color, Value, etc. Any of these Properties can be linked to any other Properties to create synergistic moments in the User Experience.

In this above left example, the ‘y-axis’ Property of the ‘face’ element is the ‘child’ to the ‘x-axis’ Property of the round indicator parent. When the round indicator element moves along the horizontal axis, its ‘child’ element moves along with it horizontally and vertically (while being Masked — another Principle).

The result is a hierarchal temporal narrative framework that occurs all at the same time. Of note is that the ‘faces’ object works as a series of ‘lockups’ in that, at each number, the ‘face’ is fully and not partially visible. The user experiences this seamlessly, though we can make the claim there is a subtle ‘usability cheat’ in this example.

Parenting functions best as a ‘realtime’ interaction. As the user directly manipulates the interface objects, the designer communicates to the user — via motion — how the objects are linked, and the relationship between them.

Parenting occurs in 3 forms: ‘direct parenting’ (see above two examples, ‘delayed parenting,’ and ‘inverse parenting,’ see below).

Inverse Parenting (Credit: AgenceMe)

Inverse Parenting (Credit: AgenceMe)


Principle 4: Transformation

Creates a continuous state of narrative flow when object utility changes.

Much has already been written about the UX in Motion Principle ‘transformation.’ In some ways, it is the most obvious and penetrable of the animation principles.

Transformation is the most discernible, largely because it stands out. A ‘submit’ button changing shape to become a radial progress bar and finally changing shape again to become a confirmation check mark is something that we notice. It grabs our attention, tells a story, and has completion.

Credit: Colin Garven

Credit: Colin Garven

What Transformation does is seamlessly transition the user through the different UX states or ‘is’s’ (as in this is a button, this is a radial progress bar, this is a check mark) which eventually result in a desired outcome. The user has been drawn through these functional spaces to the ultimate destination.

Transformation has the effect of ‘chunking’ cognitively separate key moments in the user experience into a seamless and continuous series of events. This seamlessness results in better user awareness, retention, and followthrough.


Principle 5: Value change

Creates a dynamic and continuous narrative relationship when value subject changes.

Text based interface objects, that is to say numbers and text, can change their values. This is one of those ‘elusive obvious’ concepts.

Text and number changes are so common that they pass us by without us bringing to them distinction and rigor to assess their role in supporting usability

So what is the user experiencing when values change? In user experiences, the 12 UX in Motion Principles are opportunities to support usability. The three opportunities here are to connect the user to the reality behind the data, the concept of agency, and to the dynamic nature of the values themselves.

Let’s look at the example of a user dashboard.

When value based interface objects load with no ‘value change,’ what this conveys to the user is that the numbers are static objects. They’re like painted signs displaying a speed limit of 55 mph.

The numbers and values are representations of things that are happening in reality. That reality could be time, income, game scores, business metrics, fitness tracking, etc. What we are distinguishing through motion is that the ‘value subject’ is dynamic and the values are reflecting something from that dynamic value set.

Not only does this relationship get lost with static objects comprised visually of values, but another deeper opportunity is also lost.

When we employ representations of dynamic systems in the form of motion based values, it activates a sort of ‘neurofeedback.’ Users, grasping the dynamic nature of their data can now be cause in altering those values and are empowered to become agents. When the values are static, there is less connection to the reality behind the values, and users lose their agency.

Credit: Barthelemy Chalvet, Gal Shir, Unknown

Credit: Barthelemy ChalvetGal Shir, Unknown

The Value Change Principle can occur both in realtime and non-realtime events. In realtime events, the user is interacting with the objects to change values. In non-realtime events, such as loaders and transitions, the values change without user input to reflect a dynamic narrative.


Principle 6: Masking

Creates continuity in an interface object or object group when utility is determined by which part of the object or group is revealed or concealed.

The act of masking asking can be thought of as a relationship between the shape of the object and it’s utility.

Because designers are familiar with ‘masking’ in the context of static design, it behooves us to bring distinction to the UX in Motion Principle ‘Masking’ as it occurs in timeas an act, and not as a state.

Through the temporal use of revealing and concealing regions of an object, utility transitions in a continuous and seamless way. This also has the effect of preserving narrative flow.

Credit: Anish Chandran

In the above example, the header image changes bounding shape and position but not the content, and becomes an album. This has the effect of changing what the object is, while preserving the content within the mask — a fairly neat trickThis occurs in non-realtime, as a transition, that is activated after a user takes an action.

Remember, UI Animation Principles occur temporally and support usability through continuity, narrative, relationship, and expectation. In the above reference, while the object itself remains unchanged, it also has boundary and location, and these two factors determine what the object is.


Principle 7: Overlay

Creates narrative and object spatial relationship in visual flatland when layered objects are location dependent.

Overlay supports usability by allowing users to utilize flatland ordering properties to overcome a lack of non-spatial hierarchies.

To land the plane a bit, Overlay allows designers to use motion to communicate location dependent objects that exist behind or in front of others in non 3D space.

Credit: Bady,

Credit: Bady,

Credit:  Javi Pérez

Credit:  Javi Pérez

In the example on the left, the foreground object slides to the right to reveal the location of additional background objects. In the example on the right, the entire scene slides down to reveal additional content and options (while using the Offset & Delay Principle to communicate the individuality of the photo objects).

To a certain degree, as designers, the idea of ‘layers’ is so obvious as to be self-evident. We design with layers and the concept of layers are deeply internalized. However, we must be careful to distinguish between the process of ‘making’ verses ‘using.’

As designers who are continually engaged in the process of ‘making,’ we are intimately familiar with all of the pieces of the object (including the hidden pieces) we are designing. As a user, however, those non visible pieces are by definition and practice, hidden both visually and cognitively.

The Overlay Principle allows designers to communicate relationship between ‘z-axis’ positioned layers and in so doing, promote spatial orientation to their users.


Principle 8: Cloning

Creates continuity, relationship and narrative, when new objects originate and depart.

When new objects are created in current scenes (and from current objects), it is important to narratively account for their appearance. In this manifesto, I argue forcefully for the importance of creating a narrative framework for object origin and departure. Simple opacity fades tend to not achieve this result. Masking, Cloning, and Dimensionality are three usability based approaches to produce strong narratives.

Credit: Jakub Antalík,

Credit: Jakub Antalík,

Credit: Jakub Antalík,

Credit: Jakub Antalík,

Credit: Unknown

Credit: Unknown

In the above three examples, new objects are created from existing hero objects during the time the user’s attention is focused on those objects. This two fold approach — the directing of attention, and then leading the eye through the creation of a cloned new object — has the strong effect of communicating a clear and unambiguous chain of events: that action ‘x’ has the result ‘y’ of the creation of new child objects.


Principle 9: Obscuration

Allows users to spatially orient themselves in relationship to objects or scenes not in the primary visual hierarchy.

Similar to the UX in Motion Principles of Masking, Obscuration lives as both a static and temporal phenomena.

This can be confusing to designers who don’t have experience thinking temporally — that is, the moments between moments. Designers typically design screen to screen or task to task. Think of Obscuration as the act of being obscured and not the state of being obscured. A static design represents the state of being obscured. Introducing time gives us the act of an object being obscured.

Credit: Virgil Pana,

Credit: Virgil Pana,

Credit:  Apple

Credit:  Apple

From the above two examples, we can see that obscuration, which looks liketransparent objects or overlays, is also a temporal interaction involving multiple properties in time.

Various common techniques of this involve blur effects and a lessoning of overall object transparency. The user is made aware of an additional non primary context that she is operating in — that there is another world, as it were, ‘behind’ her primary object hierarchy.

Obscuration allows designers to compensate for a single unified field of view, or ‘objective view,’ in user experiences.


Principle 10: Parallax

Creates spatial hierarchy in visual flatland when users scroll.

‘Parallax,’ as a UX in Motion Principle describes different interface objects moving at different rates.

Parallax allows user to focus on primary actions and content while maintaining design integrity. Background elements ‘recede’ perceptually and cognitively for the user during a Parallax event. Designers can use Parallax to separate out immediacy content from ambient or supportive content.

Credit: Austin Neill

Credit: Austin Neill

Credit: Michael Sevilla

The effect this has on the user, is to clearly define for the duration of the interaction, the various object relationships. Foreground objects, or objects that move ‘quicker’ appear to the user as ‘closer.’ Likewise, background objects or objects that move ‘slower’ are perceived as being ‘further away.’

Designers can create these relationships, using time itself, to tell the user what objects in the interface are higher priority. Therefore it makes sense to push background or non-interactive elements further ‘back.’

Not only does the user perceive the interface objects as now having a hierarchy beyond that which is determined in the visual design, but this hierarchy can now be leveraged into having the user grasp the nature of the user experience before being consciously aware of the design/content.


Principle 11: Dimensionality

Provides a spatial narrative framework when new objects originate and depart.

Critical to User Experiences is the phenomenon of continuity as well as the sense of location.

Dimensionality provides a powerful way to overcome the flatland non-logic of User Experiences.

Humans are remarkably adept at using spatial frameworks to navigate both in the real world and in digital experiences. Providing spatial origin and departure references helps reinforce mental models of where users are in the UX.

Additionally, the Dimensionality Principle overcomes the layering paradox in visual flatland wherein objects lacking depth exist on the same plane but occur as ‘in front of’ or ‘behind’ other objects.

Dimensionality presents itself in three ways — Origami Dimensionality, Floating Dimensionality, and Object Dimensionality.

Origami Dimensionality can be thought of in terms of ‘folding’ or ‘hinged’ three dimensional interface objects.

Examples of Origami Dimensionality (Credit: Eddie Lobanovskiy

Examples of Origami Dimensionality (Credit: Eddie Lobanovskiy

Examples of Origami Dimensionality (Credit: Virgil Pana

Examples of Origami Dimensionality (Credit: Virgil Pana

Because multiple objects are combined into ‘origami’ structures, the hidden objects still can be said to ‘exist,’ spatially even though they are not visible. This effectively renders the User Experience as a continuous spatial event that the user navigates and creates an operating context both in the interaction model itself, and in the temporal behavior of the interface objects themselves.

Floating Dimensionality gives interface objects a spatial origin and departure, making the interaction models intuitive and highly narrative.

Example of Floating Dimensionality (Credit: Virgil Pana)

Example of Floating Dimensionality (Credit: Virgil Pana)

In the above example, Dimensionality is achieved through the use of 3D ‘cards.’ This provides a strong narrative framework that supports the visual design. The narrative is extended by ‘flipping’ the cards to access additional content and interactivity. Dimensionality can be a powerful way to introduce new elements in ways that minimize abruptness.

Object Dimensionality results in dimensional objects with true depth and form.

Examples of Object Dimensionality (Credit: Issara Willenskomer

Examples of Object Dimensionality (Credit: Issara Willenskomer

Examples of Object Dimensionality Credit: Creativedashr

Examples of Object Dimensionality Credit: Creativedashr

Here, multiple 2D layers are arranged in 3D space to form true dimensional objects. Their dimensionality is revealed during realtime and non-realtime transitional moments. The utility of Object Dimensionality is that users develop a keen awareness of object utility based on non-visible spatial locations.


Principle 12: Dolly & Zoom

Preserves continuity and spatial narrative when navigating interface objects and spaces.

Dolly and Zoom are filmic concepts referring to the movement of objects relevant to the camera, and the size of the image itself in the frame smoothly changing from a long shot to a close up shot (or vice versa).

In certain contexts, it is impossible to tell if an object is zooming, if it is moving towards the camera in 3D space, or if the camera is moving towards the object in 3D space (see below references). The below three examples illustrate the possible scenarios.

Is the layer dollying, zooming, or is the camera moving?

Is the layer dollying, zooming, or is the camera moving?

As such, it is appropriate to treat the instances of ‘dollying’ and ‘zooming’ as separate but similar in that they involve continuous element and scenic transformations, and meet the requirements of the UX in Motion Principles: they support usability through motion.

The two images on the left are dollying, while the image on the right is zooming

The two images on the left are dollying, while the image on the right is zooming

Dolly is a film term and applies to camera movement either toward or away from a subject (it also applies to horizontal ‘tracking’ movement as well, but is less relevant in a usability context).

Credit: Apple

Credit: Apple

Spatially in UX, this motion could refer either to a change in the viewers perspective, or to the perspective remaining static while the object changes position. The Dolly Principle supports usability through continuity and narrative, seamlessly transitioning between interface objects and destinations. Dolly can also incorporate the Dimensionality Principle, resulting in a more spatial experience, more depth, and communicating to the user additional areas or content that is ‘in front’ or ‘behind’ the current view.

Zoom refers to events where neither the perspective nor the object is moving spatially, but rather the object itself is scaling (or our view of it is decreasing, resulting in the image enlarging). This communicates to the viewer that additional interface objects are ‘inside’ other objects or scenes.

Credit: Apple

Credit: Apple

This allows for seamless transitions — both realtime and non-realtime — that support usability. This seamlessness employed in the Dolly & Zoom Principle is quite powerful when it comes to creating spatial mental models.



UX Study: The Search for Wine by Gavin Lau

It all began one night at the Press Club in San Francisco, where I was attending my first company event. As the youngest guy in the company, I was the least knowledgeable when it came to alcohol (debatable) and wine. When I was asked which wine I preferred, the only two things that came to my mind were red and white.

Let’s be honest, we’ve all experienced a similar situation, and it didn’t help that Press Club has a 17-page long wine list. I waited until everyone ordered, and kindly said “I will get that one too.” After that night, it’s been my goal to better understand wine. I found Vivino, an app for wine lovers and it has been my best drink companion ever since.

A few pages of endless wine list at Press Club

A few pages of endless wine list at Press Club

So What’s Vivino?

Vivino is a mobile app that allows users to photograph any wine, and instantly see ratings, price, and reviews. While my experience with the label scanning feature has been amazing, I have always struggled with the search (explorer) feature. Trying to find a bottle that suits both my taste and my wallet is difficult. Putting on my UX designer hat, I conducted usability tests to discover pain points and redesigned this feature of my beloved Vivino.


What I Accomplished from This Study


How I did it

I used guerrilla usability testing, affinity mapping, and persona creation for my initial user research. During the redesign process, I discovered two pain points that I wanted to focus on, then created task flows and wireframes for the changes I wanted to make. Through building an interactive prototype, I was able to validate my assumptions. To better emulate a real-world startup time frame, I gave myself only a week for this case study. Now let’s go deeper into each step.


User Research

Guerrilla Usability Testing

To eliminate any personal bias, I carried a bottle of wine to Yerba Buena Gardens. I then asked five people who had never used Vivino to complete the following tasks, “Imagine it’s Thursday’s evening, and you are looking for a bottle of cheap, good wine to bring to a housewarming party. How would you go about it?” I filmed their interaction with the app (with permission), so I could analyze their interactions later.


Affinity Mapping

To organize my findings from the conversations, I watched the user interactions with the app, and I jotted down insights on a pile of sticky notes. I then categorized similar insights into an affinity map and weighed them against the Importance to User vs. Importance to Business on a 2x2 metric.

Users need to be able to find the list of wine quickly and accurately to help them make their purchasing decision. Since I don’t have access to Vivino’s business goals, I made the assumptions that user engagement and satisfaction are the most important things to the company.


Persona Creation

From the usability tests, I learned the following:

To better understand the typical user, I collected the information above, and created a persona that reflects the characteristics of those I had interviewed.

I also created a scenario that my persona might go through.

Images by Katie Chen!

Images by Katie Chen!




Define & Analyze

While none of users had a problem finding a wine, most of their interactions showed that they were either confused or frustrated with the inability to complete a certain action. I mapped these interactions out using the task flow below.

Original Task Flow

Original Task Flow

With this task flow, I was able to discover the two pain points that users were having. Below are my proposed solutions based on each of the pain points.


Pain Point 1

Users struggled to move the minimum rating slider


Pain Point 2

Users expressed frustration when they couldn’t sort the result and list of wine by price


Bringing It All Together

In order to make sure that my changes are reflected well in the overall user experience, I revisited the task flow created earlier, and made an update to it.

New Task Flow

New Task Flow


Validation Testing

After a week of user research, analysis and redesign, I was able to validate the assumptions and changes I had made. I did this by testing my interactive prototype with five new users. The results are:

  • The average time taken on using and reusing the filter was reduced from 11.4 seconds to 3.7 seconds
  • All users were confident and happy in selecting the wines that fit their price range



This UX case study has been a challenging and rewarding experience for me. Not only did I get to exercise my UX skills, I was also able to make a positive impact with the proposed changes for my wine buddy, Vivino. With these changes, I hope that people will be able to search for their perfect wine with ease and become a wine connoisseur at their company events and business meetings! For now we all need…

Every Week is a Design Sprint by Gavin Lau

An evil, hipster voice inside me says: I did design sprints before it was cool. But it is true, years ago when there were no books about it, and far fewer blog posts, we were doing design sprints at UX studio. It started as a natural step to sync our work to developers’ sprints and to make sure we designers were consistently iterating. Now, we use weekly design sprints as part of our ongoing design process.

In this article I will share what we’ve learned so far, how we’ve adapted the original idea of design sprints to our team, and some ideas about adopting design sprints to continuous development.


What is a design sprint?

Since the agile revolution in the IT industry, many development and design teams organize their work into sprints. As Monika Adarsh explained in her team’s experience with Google Venture’s design sprints, a sprint is a fixed timeframe, usually between 1 and 4 weeks, during which a finite amount of work can be accomplished. Each sprint starts with planning, where the team agrees upon what they will accomplish during the sprint. At the end of the sprint, the team gathers to review what was completed and discuss what could be improved upon.

Design sprints are a part of the agile landscape. The idea is that by time-boxing the design process and adhering to a set of goals (Understand, Diverge, Converge, Prototype, and Test), the team has a chance to consider a problem, try it out, make mistakes, and try again – all in a very short period of time. Developed at GV (Google Ventures), design sprints last a week. In their own words, this is what GV’s schedule is like:

On Monday, you’ll map out the problem and pick an important place to focus. On Tuesday, you’ll sketch competing solutions on paper. On Wednesday, you’ll make difficult decisions and turn your ideas into a testable hypothesis. On Thursday, you’ll hammer out a high-fidelity prototype. And on Friday, you’ll test it with real live humans.
The Design Sprint

People wonder if it is sustainable to complete a sprint every single week. It’s a lot to accomplish: choose a serious challenge, do prototyping and research, involve stakeholders, etc. But believe me, working in design sprints is still better than waterfall. That said,our team has modified GV’s original recipe to fit our needs, with a focus on these four areas:

  • the participants
  • the structure and timing
  • the planning
  • the goals


Getting Everyone on Board

The hidden magic of the design sprints is participation. When teams schedule a single week for collaboration, everyone gets invited: business leaders, developers, designers, sometimes even the whole product team. This creates team alignment: everyone is aware of the important findings, so that the implementation will go smoothly afterwards. However, when every week is a design sprint, it’s unsustainable to ask everyone to participate. They have their own jobs to do! 

When your team decides to implement design sprints, the first step is to get buy-in from the whole product org. This shouldn’t be too hard—they won’t have to do much, after all most of the work (prototyping, design and research) will be done by the designers and UX researchers. The only ask is that some members join the weekly brainstorming sessions (more on that later).

We believe it is vital to include all departments in the design process. When teams are left out, it can end in disaster. When those left-out departments finally see the results of the design process, they may raise an unknown issue—leading to tense discussions and last minute changes. It’s better to involve everyone, and show them how the design is born step-by-step. This gives all teams the chance to put in their ideas and raise any concerns.


Our Weekly Sprint

After your product team has agreed to the design sprint, it’s time to figure out your cadence. Our design sprint lasts one week. While we do have an expected pace, we do not establish rigid goals for each day. After all, my designers are the pros. I trust them to do the ideation and elaboration part in their own pace. 

As you get started, it can be hard to maintain a rigid structure. When that happens, remember the core goal of design sprints: choose the problems, design the solutions, and test them in the same sprint.

The cadence that works well for our team is to spend 1 day meeting, 2 days designing, and 2 days testing.

The cadence that works well for our team is to spend 1 day meeting, 2 days designing, and 2 days testing.


Monday: Weekly Design Meeting

A sprint starts with the weekly design meeting. This meeting is our main forum for collaboration, and while everyone from the product team is invited, it is mandatory that a teammate from business and development attends. Why those two departments? Business people help designers to focus on the main business objectives and give the authority and the resources the design team needs. Devs help designers stay on the ground, and design something that is feasible to build.

We also use these meetings to share research results from the previous sprint. This way, design, development, and business agree upon the direction of the sprint and are up to speed on why designers are making certain choices.


Tuesday—Wednesday: Designers are head down

After the design meeting, the team gets to work. Figuring out many issues to tackle in a sprint is more of an art than a science. In general, we’ve found that 2, or a maximum of 3, threads are OK. We expect to make some modifications to the results of the last sprint while we start designing a new feature. But on the other hand, we want everything designed to be tested in the same sprint. 

Two good examples of a sprint workload would be: 

  • a designer would try new copy for the button that failed on last sprint’s usability test and draw a wireframe for the new profile page
  • a designer would finish the pixel perfect design for a module and try to solve the usability issue found on a subscription page

Normally, designers will do the ideation and elaboration aspects of the design work themselves. Sometimes, however it is necessary to organize group brainstorming sessions with other members of the product team. The designer’s job is to update the rest of the product team with their progress, and provide them a channel to give feedback.


Thursday—Friday: Research time

When the design is ready, the research begins. This is the heart of the design sprint and we take it very seriously. In fact, in our UX Minimum Checklist, we suggest every product team have at least one user test every week. The findings are integral to the next sprint’s design review and provide essential insights and feedback from the customers. 

We believe that a dedicated UX researcher is necessary to the team and to making design sprints work. After all, running weekly user tests in not easy. It’s time consuming to recruit participants, create a test plan, analyze the results, and create reports (not to mention run the tests themselves). If the designer was also responsible for research, her design work would suffer. This time crunch leads to some bad habits, like skipping research entirely. 

The researcher’s work doesn’t start on Thursday. During the week, she meets with the designer to collaborate on the tasks and the timing. The design needs and the product type will determine the type of testing. For a new design, the researcher may want to run usability tests with real people from the target group. For products that already have a large audience, she might prefer A/B testing. As I mentioned timing is very important. For example, if the researcher has a test participant scheduled from Thursday at 10am, the wireframes must be ready before that.


Why not have the same cadence as developers?

Some people will suggest that design sprints last 2 or 3 weeks, in order to line up with the developers’ sprints, but I don’t think it is a good idea. Design is usually faster than development, but requires more iterations. The design sprint should be as long as the time it takes to do an iteration, and it shouldn’t depend on outer circumstances. As we wrote in our Agile Design Process Guide, it is okay to have different length of sprints for designers and developers, even in the same team. They just have to be synced. So when the devs have their sprint turns (when they close the previous sprint and plan the following one), designers have that too.


The first steps to start working in design sprints

Now that you know the most important steps, it’s time to get started. Design sprints are easier to practice than most people think.

  1. Get buy-in from your organization.
  2. Figure out the core design sprint team: form a designer-researcher pair and get a firm commitment from your business and development teammates.
  3. Schedule a recurring design meeting for the beginning of the week and make sure your collaborators will be there too.
  4. At the first meeting, review the current state of the product and choose an easy task to tackle. Be specific: define what will be delivered by the designer, how will it be tested by the researcher, and what the timeline is.
  5. At the next design meeting, present the design and the research results. Make design decisions together, and plan the next sprint. Talk about what worked and what didn’t work, so the team can learn and improve the sprints.


User Research. Empathy Is the Best UX Policy by Gavin Lau

Starting any project, which is not their personal presentation but a product for users, designers should be deeply aware: they work primarily not for self-expression, not for showing their creativity to the world, not for creating something revolutionary new that will make the world go round in opposite direction. They work to solve users’ problems, satisfy their wishes and achieve business goals.

That is why it’s vital to establish who the potential users of the future product are and which their wishes and needs could be met. This is the time when the designer turns into the researcher to get as much information as possible and analyze it for the sake of user-friendly solutions in design and interactions. In our earlier articles, we have already mentioned the significant role of user research in creating problem-solving user-friendly designs, and today we suggest getting deeper into its definition, methods, techniques and benefits in the process of creating a digital product.


What is user research?

Generally, the word «research», being quite universal for the diverse spheres of professional activities, roots into the Old French word recercher meaning «seek out, search closely»; first, it was the verb and later transformed into the noun of the same semantics. The modern definition of the noun according to Cambridge Dictionary state the meaning as «a detailed study of a subject, especially in order to discover (new) information or reach a (new) understanding». This sort of activity is widely applied in a variety of sciences and practical fields, including informational architecture and user experience design.

Basically, user research is the comprehensive and multilayered activity whose aim is to collect information about the potential target audience of the product. Via a number of techniques, user researchers collect and then analyze the information obtained from real users, and this outcome usually allows the design team to work on the optimal solutions which will make the product user-friendly and attractive.

Therefore, user research means getting deeper into details of core target audience to understand their preferences and psychological peculiarities, the influence of different factors like colors, stylistic decisions, and logic of interaction on emotions and experience of the defined group, the sources of information and creative performance ways which could engage users and make them active. On this basis, visual design presumes to create the original and recognizable style that will make the product stand out of the crowd and draw potential customer’s attention.

User research is actually the way by which designer is able to step into the shoes of the user and go along his or her path feeling all the stones on the way. This is the way to create designs based on empathy — the ability to place yourself onto the place of the other person, to feel what they are feeling and see what they are seeing. This precious ability enables designers to create things which not only work well and look good but also do what the particular users need them to do.


Why is user research needed?

Famous guru of advertising David Ogilvy emphasized the great importance of research for creating effective result: «Advertising people who ignore research are as dangerous as generals who ignore decodes of enemy signals.» Time has changed the means, goals and technologies, still, the vital role of research established even stronger. Neglecting the research stage and relying only on their creative intuition, experience and talent, designers risk failing this task as they will not know the conditions of the app functioning and will not be able to make it efficient, user-friendly and original.

As we mentioned before, designers who start creating a product just at once when they get the task are quite risky guys. There are plenty of things to do before the designing process itself. Ignoring those things can give the interesting but not viable result. It’s important to analyze the competition, to understand the target market, to find out the sources of traffic and potential expectations of the users before setting off. Otherwise, you can waste much more time on loads of inefficient variants.


When is user research applied?

Describing the typical stages of product creation process here in Tubik, we have mentioned the set of the following stages: setting the task and initial scope of works; estimation; user/market research; UX wireframing; prototyping; UI design; animation; software architecture planning; development; testing; release; updates. Still, it doesn’t mean that all these stages go one-by-one in this order — some of them are interconnected and some of them are spread around the whole creative process. User research is applied at several different levels of creation, somehow changing the perspective and the goals on the data which should be obtained and analyzed.

We would mark out three typical stages when user research is a must-do essential for creating the efficient design.

Pre-design research: this is actually the initial stage of the creative process when designer working over the project is exploring the requirements of the stakeholders and collects the maximum information about the target audience. As well as in a scientific project, the scientist collects and analyzes the heritage of the previous specialists involved in the sphere to make the product actual, the UX designer needs to do the same to offer the solutions correspondent to what users need and want. This is the time to talk, read and analyze a lot. This is when the designer needs to dive into psychology and behavior, together with the stakeholder set the goals of the product and investigate the factors which influence choices in this domain. Certainly, with every next project and each next dose of experience, the designer can get accustomed to user research techniques and needs less time for them. However, there never comes the day when the designer doesn’t need any time for research as long as every project has its unique requirements and its own USP which should be enlightened by design.

In-process research: it is applied at different stages of the actual design process when, having the chances to interact with users, discuss their wishes, watch their behavior and analyze the problems they have, designers explore the offered solutions in action and on that basis can alter some positions of their research and add more efficiency to the user interfaces.

Real product research: this is the another level of research applied to actually existing digital product users operate with. Applying various techniques of user testing, designers collect actual experience, analyze it and make improvements in terms of real cases of the product usage in different environments and conditions.


What are the dimensions of user research?

Certainly, there are numerous approaches to the process of research. Among them, we would like to draw your attention to the dimensions outlined by Nielsen Norman Group, highly experienced in the domain of research and analysis and regularly sharing their findings in this sphere. They offer to view the methods of user research along a 3-dimensional framework with the following axes:

  • Attitudinal vs. Behavioral
  • Qualitative vs. Quantitative
  • Context of Use


As we can see from the scheme, attitude is what people say while behavior is what people do. In real life, they are often different things and aspects, due to numerous reasons like individual traits of character, temper, education level, age, gender, beliefs and so on. Another opposition presents qualitative analysis, which is usually measured by definite numbers (like «how many clicks the user makes before accomplishing the payment») and qualitative analysis («why user can leave the page without registration and how this problem could be fixed»). And the context of use analyzes all the additional factors which can influence the outcome of interaction with the product, for example, is the user goes along the preliminary given script or interaction is full improvisation.

Analyzing the data in terms of different dimensions, designers are able to take the comprehensive outcome enabling to make solid decisions about the interactions and visual performance.


What are the methods of user research?

Today, user experience design has already grown into a sphere with the considerable background of project and research cases, which have resulted in the extensive set of different research methods. Some methods are used on a regular basis, some are more rare and specific, yet it’s good for designers to be aware of a variety of them. Let’s briefly review the popular ones.

Interviews. Perhaps the most widely spread method when, having set the target audience of the product, people involved into the creative process interact directly with potential users and ask them questions to collect information. The quality of questions is the issue of high importance here. It’s effective to apply both close (yes/no) and open (giving the detailed answer) questions to let users provide diverse information.

Personas. The technique which has been applied in marketing and sales for a long time with client/buyer personas and now has transformed into a new perspective of user personas. With this technique, designer collects the data about the potential target audience, its psychological and behavioral preferences and habits and creates a bunch of imaginary users with these characteristic. On the ground of this data, the designer models users’ interactions with the product and possible issues that can arise in the process.

Sorting cards. This technique is effectively applied in cases when designers deal with the products presenting complex interfaces and variety of diverse content. The users are asked to categorize the content and set the hierarchies. In this way, the designers obtain the data showing how users see this sort of content and what way of its organization would be efficient for quick and easy navigation around the app or website.

Surveys. Another traditional method of scientific and social explorations when users are offered the set of questions. Answering them, users give the actual information enabling designers to understand their preferences and wishes deeper.

Focus group. Popular method presenting the moderated discussion of the product, its features, benefits and drawbacks within the group of people potentially close to the target audience. Altering some characteristics of the group, for example, age, gender, education level, tech literacy, researchers can receive the variety of data and see how these features can influence user behavior.

Task analysis. The method exploring the tasks and goals which users have interacting with the product. Understanding what users want to do enables designer to consider the fast and effective ways to achieve these goals.

Eyetracking. Special devices enable the designer to review which zones of the website or app users interact with more actively and use these zones in the most efficient and informative way.

Participatory design. Users are offered the set of elements for the layout and can suggest their own vision of the construction.

Clickstream testing. The analysis of the most clickable parts of the layout with the aim of designing clear interactions and reveal the problems.

A/B Testing. The users deal with one variant of design (version A) for some time and then another variant (version B) while the researcher collects the information along the necessary metrics and makes the conclusion about the efficiency of the versions.

Daily Reports. The user is asked to interact with a product for a particular period providing the reports on a daily basis. This helps to check the usability of the product in the perspective of long-term use.

Desirability testing. The users are usually offered visually and stylistically different versions and provide the feedback which version they would prefer and why.


What are the important points to consider in user research?

Collecting the data about user behavior and preferences via diverse methods and techniques, the designer has to take into account the following factors:

  • the environment of use (the factors of using the product indoors or outdoors, the level of light, noise, available time and tons of other things can have an impact on design solutions)
  • factors of intrinsic motivation (the internal personal stimuli moving the person to act)
  • factors of extrinsic motivation (the outer factors of getting a reward or avoiding punishment that encourage people’s behavior)
  • longevity of the product (based on the period for which the product is planned for use: if it grows together with the user or is applicable only in a particular age).

It’s should be remembered that removing the mistakes in design, even if its already high-fidelity level, is faster, cheaper and less painful for users than fixing negative issues with already launched and operating product.

The bottom line is simple. Don’t be lazy to research vital points of the project before you start designing. Don’t fancy doing the research? No problem, go to duck and dive in loads of baseless concepts instead of going along the solid path of understanding the user’s needs and wishes. Just don’t forget: it’s not you who decides that the product is successful, it’s not even other designers or stakeholders. It’s users. So, empathy is the best policy.


Recommended reading

Here are some articles we recommend for those who would like to get deeper into the topic:

Complete Beginner’s Guide to UX Research

When to Use Which User-Experience Research Methods

User Research Basics

Pareto Principle-Based User Research

How To Conduct User Experience Research Like A Professional

Open-Ended vs. Closed-Ended Questions in User Research


MyFitnessPal: A UX Case Study by Gavin Lau

I’m passionate about products and services that enable individuals to live healthier lives. I conducted a usability study as a way to dive deeper into the world of behavior change, and as an exercise to help me improve as a designer.



My goals were to:

  1. Understand and identify usability issues in the MyFitnessPal iOS application through user research
  2. Create and validate potential design solutions
  3. Communicate my thinking and process
  4. Learn more about the most popular health tracking application

I used a variety of design techniques to categorize and improve user pain points and was able to demonstrate a significant increase in comprehension and task completion. You can find a comparison of the current application and my design solutions towards the end of this article.


Why MyFitnessPal?

With over 165 million users, MyFitnessPal felt like a solid starting point to help me understand how a product can help individuals create and maintain new health habits.

According to B. J. Fogg’s Behavior Model, a customer adopts a new behavior based on a combination of their motivation and ability to complete a task. When a customer opens the MyFitnessPal application for the first time, they have a heightened level of motivation to improve their health, but may not have experience with health tracking. I focused on this critical, new user segment.

In David Jones’ podcast on mobile engagement, he interviews former MyFitnessPal product manager, Nick Crocker, who states, “If (MyFitnessPal) didn’t get you to log food on the first day, the chances you’d log a food on the second day were very low.” It is difficult to influence a customer’s motivation. Therefore, MyFitnessPal should focus on minimizing friction and increasing the customer’s ability to complete certain tasks.



“Yes, I’ll have a free teriyaki sample, and would you like to test my app?!”

The first step was to conduct guerilla usability tests as a way to uncover user pain points. I headed to the Westfield mall in San Francisco to conduct testing with 5 wonderful strangers on their lunch break. I asked individuals to perform tasks related to food tracking and progress, and asked that they verbalize their thoughts throughout the test.

Amazingly, 3 out of 5 users had used MyFitnessPal in the past. You go, MyFitnessPal! Fortunately for my testing purposes, MyFitnessPal has released updated versions of the app so these users were not familiar with the new interface.

User demographic from usability test

User demographic from usability test

Based off my usability testing, I wrote a job story using the Jobs to be Done framework. This helped me wrap my head around customers’ situations, motivations and expected outcomes when hiring the application to achieve their health goals.

Most individuals that I tested had focused on their health regimen early in the year. The spike in motivation in the New Year is also known as the Fresh Start Effect, and I used this as the “scenario” in which someone might download the app.

Job story to help highlight a user’s motivation and expected outcome

Job story to help highlight a user’s motivation and expected outcome


The next step was to review and sort my insights. First, I used affinity mapping (grouping ideas based on similarities) to identify common pain points.

Affinity mapping to identify pain points

Affinity mapping to identify pain points

Next, I created a 2x2 matrix to understand what issues might be both important to the business* and to the user.

Paint point categories organized in 2x2 matrix

Paint point categories organized in 2x2 matrix

I used empathy mapping (grouping ideas based on a user’s actions and emotions) to dig deep and understand what was happening for users when they experienced each pain point. What did they say and how did they act? Were they frustrated with themselves or the application?

Empathy mapping to dig deep into what the user was feeling

Empathy mapping to dig deep into what the user was feeling


“Ugh! Why do I keep tapping “Create a Food” instead of using the search to find a food item?”



Organizing my insights helped me narrow it down to two major pain points.

Pain point 1: Individuals are confused and not confident about how to search for and add a new food item.

Hypothesis: Emphasizing the search function on the food tracking page would allow users to identify the search action swiftly and confidently. I would know this is true when users were able to locate search during testing.

Pain point 2: Individuals have trouble understanding their food progress.

Hypothesis: Moving food progress information to the “Progress” tab would allow users to easily locate and understand their progress towards their nutritional goals. I would know this is true when users were able to locate food progress during testing.


Now that I identified two major pain points, I created task flows to understand exactly where the user flow was breaking down and further analyzed the existing app screens where customers experienced trouble.

I sketched several potential solutions and conducted comprehension tests with colleagues who fit the user testing demographic and job story. I incorporated their feedback before creating hi-fidelity mockups. I moved forward with one solution for validation.

Lo-fidelity Wireframes

Lo-fidelity Wireframes

Prototype and Validate

Next, I jumped into Sketch and InVision to craft my prototype. I tested version 1 of my prototype on 5 new individuals.

Version 1 — The good news: individuals were able to confidently locate and understand their food tracking progress.

Version 1 — The bad news: searching for and adding a new food item was still extremely confusing.

How I felt after my first round of validation (Source:

How I felt after my first round of validation (Source:

After testing my first prototype, I found that the changes I had made were not significant enough to draw the user’s attention to search. In fact, search was competing with twelve other possible actions on the “Add Food” screen creating a very high cognitive load for the user.

List of the twelve actions users can currently take on the “Add Food” screen in the MyFitnessPal application

List of the twelve actions users can currently take on the “Add Food” screen in the MyFitnessPal application

At this stage, my objective was to make search as clear as possible for new users while keeping the other core functions on this screen intact. In my research, I found that a new user may not yet understand what “multi-add” will do, or what the location icon does, so how might we reorganize and reconsider hierarchical importance of actions on this screen?

I sketched, prototyped, and tested an additional five iterations until users were able to successfully and efficiently enter their meal items.

Six versions of my prototype throughout the validation process

Six versions of my prototype throughout the validation process

Here is a recap of the pain points I identified from user research, my proposed design solutions, and the success rates before and after implementing the new design.



TL;DR: Through user research, I discovered that users expressed confusion and frustration when trying to add a food item to the MyFitnessPal tracker and also had trouble understanding their health progress. My suggested design solutions aim to match users’ mental models (who associate nutritional goals with “Progress”) and reduce cognitive load (reconsider hierarchy on the “Add Food” screen) which increases a user’s ability to complete the task at hand. Improving the user experience for these tasks would mean users are more easily able to add food items, understand their success, and create and maintain healthier habits and lives. For MyFitnessPal, this would mean an increase in new user engagement and retention leading to a higher customer lifetime value.

I learned just how integral research and validation was to my design process, and to test, empathize, and test again.


Asking the right questions during user research, interviews and testing by Gavin Lau

Interviewing users is an art — whether you are running usability testing, focus groups, ethnographic research or whatnot. Here are some good practices for asking users the right questions, and asking the questions the right way.


Formulating the questions

Interviewing users require a lot of effort and planning. Depending on how extensive the research is, you might spend several weeks preparing for the sessions, several days talking to your users and several hours capturing and organizing your notes. You want to make sure all that effort won’t be thrown away because you didn’t take the time to properly plan your questions.


Start by defining broader themes

This may sound a bit obvious, but the first step is to really think through what you are trying to get out of the interviews. At this point, think about themes you are trying to uncover, not specific questions just yet. Make sure you are aligned with the rest of the team that those are the topics you want to touch upon when talking to users.

A few examples of what these themes may look like:

“Why do people shop online?”
“How do people shop online?”
“For your customers, what is the difference between online and offline shopping?”


Break down your questions to make them answerable

The themes above sound similar, but there are fundamental differences between the topics each one is trying to uncover. Make sure you align with your team on the broader goal of research; this can save everyone tons of time later in the project.

The examples above are themes, and not the actual questions you would ask your users — if you did, you would get answers that are just too generic or vague. The next step is to break down, for each theme, the specific questions you want to ask your users:

“Why do people shop online?”
“What types of product do you buy online?”
“What types of product do you avoid buying online? Why?”
“What do you like the most and the least about the checkout process?”


Don’t ask questions that will influence the answer

A common mistake when framing questions for the interview is to rush things out and try to get to the expected answers as quick as possible. When you walk in the room for an interview, there is a good chance you already have an idea about the answers users will give you — but don’t let that intuition get in the way of extracting impartial, unbiased results.

“How anxious do you feel when an online purchase can’t be completed successfully?”
“Try to remember the last time an online purchase couldn’t be completed for some reason. How did you feel then?”


Ask about specific moments in the past

Answers become less generic and more accurate when user are thinking about a specific time in the past when that situation happened. They are more like to give you more genuine and detailed answers — and they will try pretty hard to remember that specific occasion. Make sure your question is prompting that moment in the past:

“What goes through your head when an online purchase fails?”
“Tell me what went through your head the last time you tried to buy something online and the purchase failed.”


Prioritize open-ended questions

Some users feel very comfortable in interviews, and will give you thorough and complete answers, even without too much prompt. But in some cases, users will answer only what is being asked. Not because they’re lazy or mean, but just because different people have different personalities.

To avoid unproductive interview sessions (or sessions that will end too soon), make sure your questions are open-ended. Give users some room to elaborate their answers, as opposed to making super binary questions.

“What was the last thing you bought online?”
“Tell me about the last time you bought something online.”


Starting the interview

You’re finally walking into the room to start the interview, with your script in hands. It’s time to meet the user and make sure they feel as comfortable as possible being interviewed — a situation that can make most people nervous. Here are some tips to break the ice before you get the questionnaire going.


Get into character

You’re not the designer anymore. You are a researcher, who is overall very curious about how people behave online, and is particularly excited to hear that one story from that one user you are about to meet.

Take a few minutes before the interview to get into this new character. Breathe, stretch your facial muscles, and leave all the skepticism and attitude that are typical of designers outside of the room.


Keep the right posture

Your body language should reflect the fact you are sitting there to learn as much as possible from your user. Make eye contact, lean your body forward, don’t cross your arms, and keep your facial expressions always positive — regardless of what you are hearing back from the users.

Most importantly: remember to smile. Smiling makes your voice and attitude seem friendlier, which will certainly make the user more comfortable and open to being honest on their answers.


Explain there’s no right or wrong

This sounds a bit obvious, but it works every time: let your user know, right from the start, that there is no right or wrong answer. Make sure they understand you are not sitting there to test their ability to do something; you are testing your product’s ability to be clear, useful and easy to use.


Start with warm-up questions

Start your session with simple, friendly, lightweight questions before diving deep into the topics you want to uncover. In general, these warm-up questions should be related to the broader theme of the session, but should not be too specific of elaborate.

“What do you do for a living?”
“Can you tell me about your hobbies?”
“How often do you use your computer at home?”
“How often do you buy things online?”


During the interview

You are on a roll, now. Hopefully at this point the interview is flowing quite nicely, you are following the script you had originally set up, and are also able to adapt the questions according to the direction the conversation is heading. Now here are some tips to make sure you can keep the momentum going.


Don’t try to sell your product

You are running the research study to gather people’s honest feedback about your product, not to convince them that your product is the best thing they have ever tried. Don’t even try.


Control your reactions

Make sure you control your reactions, even when receiving negative feedback about something you are passionate about. If users sense you are being defensive about the feedback they are giving, they will stop giving you honest answers — which can defeat the purpose of doing user research in the first place.


Give yourself time to listen

You should not be doing most of the talking. Ask your question and quickly stop talking, so that users can actually answer it. There might be an awkward moment of silence (and an impulse from your side to fill that up), but shhh.


Paraphrase what you heard

You are meeting that person for the first time, so communication will be hard at the beginning. Every time you gather a new insight from the participant, take the time to summarize it and repeat it back to them. This will give them a chance to either confirm or clarify, and will keep you from going the wrong direction later in the interview.


Answer questions with questions

It’s natural that participants get stuck, especially if you are leading a usability test where they are asked to complete a certain task using your product. They will ask you questions (“Should I click here?”), but resist the temptation of giving them the answer. Instead, answer with another question:

“Where would you click in this case?”
“How do you think that would work?”
“How might you get assistance to figure this out?”


Watch out for non-verbal clues

Pay attention to facial expressions, body language and tone of voice. A lot of the feedback users give come in a non-verbal way. That awkward frowny face users do while browsing your website probably means they have a question and don’t feel comfortable asking. Ask them what it is.


A continuous learning process

Running user interviews, like any other skill, only gets better with time. You have to try and fail, try and fail — several times — until you get the right confidence to get things going more fluidly. Hopefully the tips above will give you a head start.