Designing experiences for startups

Partnering with startups represent a shift in how designers think, feel and operate throughout the design process. Are your collaboration muscles flexible enough for that change?

 

Over the last few years, R/GA Ventures has partnered with more than 80 early- and growth-stage startups from different verticals and industries. From defining their go-to-market strategy, to creating brand and design systems, to redesigning product experiences — we have been using our creative capital (our talent) to help accelerate and augment the reach of startups that are already disrupting their field.

We are talking about a wide range of products and services here.

Connected devices, artificial intelligence technology, logistics, analytics tools, retail systems, wearables, chatbots, physical installations, sensors, educational platforms, CRM tools, and more.

Personally, as a designer who has always worked with huge brands (Google is one of our main clients at R/GA San Francisco), moving into these Ventures programs represented a big shift in terms of how I think, feel and operate throughout the design process.

What are the differences when it comes to collaboration, design process and solutions?

The product is often still being defined

For some of the startups working with R/GA in our Ventures programs, the product is still at its early stages of concepting and testing. It’s not uncommon to find startups that have focused their efforts in developing a powerful technology, but haven’t fully defined their product’s value proposition and how its functionalities map to their users’ needs.

In early interviews with the startup founders, we often times hear that “all we need is a few usability improvements to our existing interface” — but as they start to collaborate with R/GA’s strategists and designers, they realize the different parts of their ecosystem is more connected than they thought. A simple change in one of the pieces will have a huge impact in other parts of the system. So the best solution might be to step back and think about the user experience more holistically, as a broader ecosystem, and instead of usability fixes, come up with a new design system that will avoid usability problems from happening in the first place.

UX improvements have higher value

We are working with new products that are still trying to expand their user base and reach new audiences.

For that reason, the onboarding experience plays a really important role in the overall success of the company. It’s the moment of truth: the initial steps of the interaction between users and product that will make them decide whether that will be a relationship of love or hate.

As a designer, it is important to help the startups understand the impact design can have in those initial moments. The more traction the company gets, the more people will be accessing the website, signing up for the service, downloading the app and spreading the word about the service. Even the smallest improvements to the user experience can have a huge impact on conversion rates and satisfaction scores.

You have to be ready for change

These companies are usually trying to disrupt a certain market, which also means a lot more uncertainty when it comes to the company’s position in the market and how the fluctuations happening externally might affect the company.

For designers, working with startups means the design process has to be flexible enough to quickly adapt to change. It’s not uncommon to see foundational changes in the product direction halfway through the engagement with the startup.

Be ready for change. Knowing how to work with an agile mindset, having alternative versions of the product ready to implement, and learning to think beyond the current product functionalities are some of the good practices for designers who are looking to add value to the startups.

You’ll be white-boarding with the CEO

When you are working with startups, you have much more access to the company’s founders and partners on a daily basis. A quick walk around one of our Ventures Studios will let you see R/GA’s designers white-boarding UI ideas with the startup CEOs in a room.

Don’t be alarmed if these CEOs don’t match your expectations of what a CEO looks like; these are hands-on entrepreneurs that are trying to disrupt an industry, make a change, and who have been trained in a much more collaborative mindset than more traditional founders and leaders.

All this access to the C-suite is extremely powerful for the partnership between agency and startup. It speeds up the decision-making process and enables ideas to go from paper to product in a matter of weeks.

No bureaucracy. Everyone wins.

Ideas have to be validated as quickly as possible

As in any other client engagement, the role of Experience Designers in the process is to represent the user’s voice as the team makes design decisions about how the product is going to function, behave or look.

When working with startups, user research is more important than ever — exactly for the other reasons aforementioned. But we often take a more nimble and recurrent approach to user research, instead of treating it as a project in itself; every decision goes through some sort of validation, whether that means in-house user-testing sessions or a quick focus group exercise. Startups in earlier stages usually have great relationships with their beta users, which makes it fairly simple to get on the phone and invite some of those users over for a quick conversation.

Brand and product are being shaped together

When working with big companies, our role as designers is to understand the organization’s values and beliefs and to translate them into product interface moments that will shape one’s experience with that brand.

In a lot of startups, the brand is being defined at the same time as the product — and often times these two things mix up more than one would expect. Design works hand-in-hand with branding, and the process becomes much more bi-directional and collaborative: product definitions help shape the brand, and brand definitions influence product decisions.

Airbnb First Date Concept - Explore your host’s favorite… with your host

Jacob is a full-time Accountant from Guam. He has always been interested in Japanese culture and is planning a trip to Tokyo, Japan. He wanted to learn about Japanese culture and what Japanese people do in their everyday lives. He went on Airbnb to look for places to stay, where he can also hang out with his host. He searched through the listings, picked his favorite one, got super excited to be spending time there. However, when he got there, he found that the host was rarely at home and he felt uncomfortable asking if he could show him around because he wasn’t sure how much the host was willing to share.

Not only Jacob who faces this problem, several Airbnb users I met during my trip to Japan have experienced similar situations. “Spending time with hosts” is like a hidden decision metric when selecting a listing on Airbnb. People often realize after they arrived at the place.

“You see, a house is just a space, but a home is where you belong.”

— Brian Chesky, Co-founder of Airbnb.

Photo Courtesy of Airbnb

The core idea behind Airbnb is Belonging. And the core idea behind belonging are meaningful relationships.

IKEA’s survey found that 48% of respondents defined home as “where I have my most important relationships”

Also, what differentiates Airbnb from other travel accommodations is actually being able to actually live like a local. Is the host not the local expert here?

So, how might we build a relationship between hosts and guests?

Ideation

Figuring Out What Features to Develop

I brainstormed with my friend, Sahil Khoja, to explore possible ideas. After that we made a graph including the ideas to identify valuable ones.

I then focused on the ideas in awesome-difficult are because those are the riskiest, but are potentially most “awesome” and valuable.

I also found that the ideas we came up with tackle different touch points in the ideal end-to-end traveling experience. I decided to tackle the “before” phase because that determines the development of the relationship between a host and a guest during the stay.

At the end, I narrowed down to three potential ideas:

Which Idea Actually Solves The Problem?

After determining the ideas to explore, I hand-sketched them to visualize the concepts and conducted user interviews to find out whether they solve the problems and which idea is worth pursuing most.

Idea 1: Bingo: Breaking the Ice Before They Meet

Bingo Concept Low-Fidelity Sketch

The goal of the game is not to get a Bingo, but for them to start a conversation so they don’t find it awkward to build a relationship. Here is how it works:

• Once the booking is confirmed, the pre-filled Bingo Interest Board of both the guest and the host will be shared on their profiles and “Play Bingo” button will appear on their inbox.
• After both click “Play Bingo”, the game will start. Each has 5 minutes to answer each other questions about their interests. (Ice breaker!)

Idea 2: First Date: Get It Right Since The First Time

Current Format of Directions From Hosts

First Date Concept Low-Fidelity Sketch

The core idea behind this concept is to make sure that the host gets everything right since the first day, so things don’t go wrong before they build a relationship. The First Date page will include:

• Hosts’ directions will be presented as a “checklist” instead of a chunk of paragraphs so guests don’t miss it.
• Activities that the hosts are willing to offer e.g. local supermarket tour.

Idea 3: Digital Gift

Digital Gift Exchange Concept Low-Fidelity Sketch

The core idea behind this concept was inspired by how Japanese people have to bring gifts to the hosts upon their visit. Also, in order to give someone a gift, you have to know about that person to a certain extent, so it indirectly encourages them to start a conversation. Here is how it works:

• Once the booking is confirmed, a countdown to the “Gift Exchanging” day will appear in their inbox.
• They are then expected to talk to each others and exchange their interests.
• On the “Gift Exchanging”, they can choose a digital gift from the system e.g. in a form of gif/illustrations and can customize a message.

Key findings:

Iterations

After synthesizing the insights, I re-iterated on the concepts to alleviate the weaknesses and further highlight the strengths.

Idea 1: Bingo x Digital Gift

Combining Bingo and Digital Gift Exchange Concepts

Medium Fidelity Wireframes of Situations Where Their Interests Matched and Don’t

After testing, I decided to remove the gamified portion of the concept and replaced it with an automatic matching process by the system. I tackled the weakness of this idea, which is the awkwardness if they don’t share a common interest, by diverting their focus from “not sharing common interests” to “they can share amazing stories because they are different” (above right).

Idea 2: First Date (Highlighting What The Host Offers)

Medium Fidelity Wireframes of Developed First Date Concept

The main weakness of this idea is that it can be too much of a hassle for the hosts, so this feature will be optional for both the host and guest. I also found later that guests are often very tired from traveling on the first day and the common check-in time is relatively late (4pm), meaning that there won’t be much time and energy for them to spend time together. I decided to redirect the core idea to it being the “First Date” — to focus on them spending quality “living like a local” time together, rather than guests following the hosts’ house directions on the first day.

Building relationship face-to-face rather than through screens

I settled on the First Date idea for two main reasons:

• This idea focuses on building relationship face-to-face rather than through screens
• Nice gestures and cues about how much time the host is willing to spend time with them. It’s clear that a host is willing to show the guests the “living like a local experience” if a host offers this and it’s not too pushy.

Develop

Where in the “before” process will First Date fit into?

I found that some hosts indicate their level of commitment to spend time with their guests under About section on their listing. But most of the times, the information is lost in chunks of paragraphs. Also, because the guests are often not aware of their expectations to interact with hosts until they arrive at the place. Therefore, one of the main challenges I tackled while developing the flow was to make sure the feature is prominent to users during the reviewing and booking process.

The guests are often not aware of their expectations to interact with hosts until they arrive at the place

Task flow of how guests are informed about the First Date offers

As shown in the diagram above, users can review the First Date plan before they start booking (as a part of the decision metrics) as well as during the booking process, as one of the steps.

Final Interaction for Reviewing and Accepting (/Declining) First Date offer During the Booking Process

What can go wrong?

After developing the flow, I brainstormed around this question: “What can go wrong?”. I decided to go with the most potential common case: a guest has some kind of restrictions e.g. food and want (/need) to request changes to the plan. Just like when you are meeting a new friend for the first time, you don’t want to end up taking a friend who can’t eat beef due to religious restrictions to a local restaurant that’s known for steak.

After interviewing, I found that some guests don’t review their trip plans until the day before or even the day of traveling. This means that if they want to make changes, the host might not have enough time to prepare. Therefore, it is important that the guests are aware of the plans and inform any changes ahead of time.

Scheduling a Friendly Reminder, Keep it Conversational

I quickly brainstormed ideas and decided to settle on the idea of host scheduling a friendly reminder (shown on the right) through their inbox. This is because inbox is already used as the main contact medium (and the message also goes to the guest’s email inbox). This increases the chances of guests seeing the message and reacting upon it.

Conclusion

This design sprint has become one of my favorite projects of all time because it is the first design case study I developed from insights I discovered from traveling. Inspired by my solo trip to Tokyo, this project started from observations, conversations then problem-solving.

I learned that finding the right people to test the ideas with is very important for valuable insights. I didn’t have access to the group of people I met in Japan to test the idea throughout, so I ended up spending a large amount of time searching for the “right” people on campus to test with. During the searching process, I came across some Airbnb users who are not the target audience for this feature, learned about reasons why they use Airbnb (e.g. lower prices, nicer interiors) and understood the product positioning of Airbnb more.

Looking Forward

After developing this case study, I realized that there are many opportunities spaces where Airbnb could work on to become an end-to-end “live like a local” experience provider. Host-guest relationships development would differentiate Airbnb from other travel services even more.

 

6 Tips How to Apply Information Architecture in UX Design

Being a good designer means constant learning various sciences and methodologies helping to improve professional skills. One of the essential studies recommended to designers is information architecture. In our previous articles, we’ve defined the essence of IA and described the efficient techniques assisting designers in the workflow. We discovered that information architecture is believed to be a foundation of efficient UX and UI design. Moreover, the appropriate IA may become a compelling tool for designers when all its principles are considered. Today’s post continues this theme unveiling useful tips for designers on IA implementation.

Keep product goals in mind

Definition of product goals is a core stage which influences every team working on the project, be it developers or designers. So, before you start building information structure, you need to learn what your client expects from the website or app. To achieve the general vision and see the whole picture, the product goals should be established. They should respond to the product strategy, be understandable to all the members of the creative team and achievable. Awareness of the goals gives a clear idea of what the tasks are and where to start. When the goals are set, designers can agree on the content elements and the purposes with the clients so that they could avoid possible misunderstandings resulting in additional work hours in the future.

Conduct user research

IA experts consider the specifics of the target audience needs because IA puts user satisfaction as a priority. To learn more about the potential users, designers are recommended to conduct user research. It’s a process of collecting information about the consumers of the product via various techniques. When the data is gathered, the design team analyze it and work on the optimal solutions which will make the product user-friendly and attractive.

User research helps to dive deep into the details of core target audience to understand their needs and psychological peculiarities. Considering preferences of the users, designers are capable of creating a user-friendly product that will stand out of the crowd and draw potential customer’s attention.

Consider cognitive psychology principles

To comprehend the nature of the visual perception and the factors affecting users’ attention, designers learn the сognitive psychology principles. It is the science studying information processing that goes inside people’s minds. Cognitive psychology experts state that there are various ways of data perception and different factors influencing people’s attention.

Based on the cognitive psychology studies and principles, designers developed many techniques helping to create powerful content. In the article Psychology in Design, we described some effective psychological principles often applied in design including Gestalt principles and recognition patterns. The former theory explores users’ visual perception of elements in relation to each other. In other words, it shows how people tend to unify the visual elements into groups according to their similarity, continuation, or closure. Speaking of recognition patterns, people visiting a website or using an application are expecting to see certain features associated with the definite kind of product. That’s why designers apply various recognition patterns to help users be oriented in the structure.

Plan the navigation system

Information structure and navigation are two essential components of any digital product. In one of our UX Glossary articles, we’ve defined navigation as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product. The navigation system, in terms of IA, involves the ways how users move through content.

Navigation of a digital product is based on the information architecture, so it’s vital to make sure it reflects and supports IA, otherwise the product may be unsolid. Therefore, designers are recommended to plan the navigation system while creating information architecture of the product.

Don’t forget about visual hierarchy

To organize and prioritize content in interfaces clearly for users, designers apply a well-known technique called visual hierarchy. Its main goal is to present the content on the carrier, be it a book page or poster, web page or mobile screen, in such a way that users can understand the level of importance for each element. It activates the ability of the brain to distinguish objects on the basis of their physical differences, such as size, color, contrast, alignment etc. This allows users to see where the needed information is so that they could navigate easily.

The Big Landscape

Visual hierarchy plays a significant role in visual performance and readability of the copy content in digital products. Giving tips on applying copy content in UI, we distinguished core aspects helping to build powerful visual hierarchy. One of the essential points to consider for designers is scanning patterns. Lots of studies have shown that before reading a web page people scan it to get a sense of interest. According to different studies, including the publications by Nielsen Norman Group as one of the pioneers of this field, UXPin team, and others, there are several popular scanning patterns for web pages, among which “F” and “Z” patterns. Detailed information about scanning patterns you can find here.

Knowing the principles of visual hierarchy, designers can create effective information architecture placing the key components of the content on the most scanned spots making users take expected actions.

Things to consider

The science of information architecture may seem too complicated and demand much efforts but when you learn its basics and start applying them in design projects, you see how useful it is. Summing up the set of Tubik articles devoted to this theme, we’d like to single out a few main points.

• IA forms a skeleton of any design project for a digital product. Visual elements, functionality, interactions, and navigation are built according to the information architecture principles.
• Powerful IA is a guarantee of the high-quality product since it reduces possible problems of poor usability and navigation.
• Good information architecture is a foundation of efficient user experience.
• Information architecture is like a blueprint of the layout which needs to be generated by a visual scheme like a wireframe.
• Defining product goals is a core stage before IA creation.
• User research and cognitive psychology principles assist in predicting possible users’ reactions to the product and creating a user-friendly outcome.
• Clear visual hierarchy plays a significant role in the visual performance of the content.
  
  
  
   

Touch Heatmaps: The Future Of Mobile App Usability Testing

Testing the usability of your mobile app in 2017 means going well above and beyond what is usually considered ‘best practices’. Opting for focus groups to test both during development and after release is a welcome approach, but it is not without its drawbacks. Same goes for monitoring your app with traditional, quantitative analytics that provide you with numerical data.

Obviously, you will want to have real people, and a part of your target audience at that, to test your app and tell you if they see anything in its user interface or user experience that they found unappealing or lacking. There is no more hands-on or direct way to understand your app’s strengths and weaknesses than through the eyes and hands of your users. 

However, placing people in a testing environment changes their mindset. Knowing that they are being watched and monitored affects the way they use the app – it changes the use of gestures, as well as the time spent on different screens, skewing your results.

On the technical side, your app can perform differently in a testing environment versus out in the real-world.

As you might imagine, having distorted results on the use of gestures in an app can have profound effects on the usability of an app and, consequently, on the user experience.

As for quantitative analytics, having numerical data is a great first step to learning more about the gesture usage within an app. Its biggest drawback, however, is that it cannot help you visualise key user inputs.

Yes, you know 25 percent of your users attempt to swipe up to bring the full menu, but why? The key question remains unanswered. This is where you can harness the power of a relatively new, qualitative analytics tool – touch heatmaps.

Touch What?

Heatmaps. This is a tool that aggregates all the data on the various gestures used to interact with an app (taps, double-taps, swipes, pinches, etc.). This data is then presented visually, as a heatmap, on a layer placed over the actual app. That way it becomes easy to literally see where people are interacting with the app and in what frequency.

The frequency of these interactions is colour-coded, using a typical heatmap gradient from blue to red. Blue represents places where interactions are at the lowest, while red represents the exact opposite. Spotting most (and least) popular navigation elements, app pages and features becomes effortless.

Image Source: Appsee

Touch Heatmaps and Usability Testing

Testing the usability of an app essentially means paying close attention to all UI elements and the UX, in general, to make sure the app is intuitive and straightforward, that it is allowing users to go about their business quickly and get a problem solved promptly. This is what makes watching for unresponsive gestures one of the pillars of modern usability testing.

Unfortunately, many app pros are oblivious to unresponsive gestures and are clueless to the fact that unresponsive gestures that are left unresolved can ruin months and months of hard work. Unresponsive gestures are moments whenever a user interacts with an app, and his/her gesture is met with no response from the app, whatsoever.

There could be many reasons behind unresponsive gestures. Maybe the app has a bug causing a particular button to be unresponsive. Maybe the user is attempting an incorrect gesture (swiping instead of double-tapping, for example). Another reason may be that users are trying to interact with an app’s element that was not designed to be interacted with at all (for example, confusing an image for a button, or trying to swipe away from the app’s final screen). 

An example of unresponsive gesture occurrences at the bottom of a ‘Login’ screen. Image Source: Appsee

Whatever the case may be, unresponsive gestures are an important issue for an app’s usability and require immediate attention. Traditional, quantitative analytics will not be able to provide useful insight on unresponsive gestures. Focus groups might come across unresponsive gestures, but they might not react in the same manner as they would in the ‘real world’. They know they are supposed to test the app, so their perception of unresponsive gestures might be distorted. In a real-life scenario, however, this could lead to frustration, app abandonment and poor reviews in app stores.

Tracing Patterns

Monitoring unresponsive gestures should be a fundamental practice for all product managers and developers. But that is not the only way touch heatmaps should be used to test for usability issues. With the help of such a tool, devs and product managers can identify other usage patterns that might signal UI or UX issues, like the problem of various screen resolutions breaking the app’s design. This typically was more important for Android developers, as those devices come in all shapes and sizes.

However, Apple’s iPhones are growing bigger, and the iPad portfolio is growing stronger, making screen size optimisation equally important across both major mobile operating systems. With touch heatmaps, developers can spot if individual app elements appear off-screen, or if certain screen sizes break the app’s design.

Image Source: Gottabemobile

Then, there is the issue of distractions. Are your users being distracted by elements that they should not be distracted by? With touch heatmaps, it is relatively easy to discover if your users’ attention is all over the place. If gesture activity is spread all across the screen, instead of being focused on a couple of essential functions or CTAs, your users are most likely distracted. Once discovered, you can use focus groups or other types of polls to ask your users what is missing on a specific app screen, or ask for suggestions how to improve.

To Usability and Beyond!

Usability testing continues to be a key factor when creating a well-built, successful mobile app. However, a decade into mobile apps development, user expectations have changed, and with them our approach to testing mobile app usability.

While some ‘classic’ methods have managed to endure through the shifting tides of the mobile industry, new ones have emerged to fill in the blanks and complement them in critical areas. Organizing focus groups and having people test the app in person is still essential. So is the use of quantitative analytics tools, as numerical data will always remain a sturdy alarm trigger.

App pros are finding multiple ways to employ touch heatmaps when building apps, usability testing included. Tracking and eliminating unresponsive gestures, tracing patterns of user behaviour on various screen sizes, or highlighting user distraction are all great use cases for touch heatmaps. They are offering app pros a new, clear and unbiased picture of their app’s usability, eventually helping them build better apps, easier.

 

UX Meets MBA: What Happens When A Designer Goes To Business School

If great design can imbue customers with trust, why are designers so removed from product management and the larger business strategy? As a VP of UX with an MBA, I strive to bring both worlds together to create a new model in which user experience and design align with overall business strategy and company vision to drive increased revenue and customer engagement.

A Seat At The Table

As the Internet became commercially viable, “first to market” generally prevailed as a dominant corporate strategy. However, as technology has become more open and reusable, product differentiation is now a proven strategic blueprint. This tectonic shift has been a boon for the design discipline. Consequently, design has gotten the proverbial “seat at the table” and is now expected to be a driving, strategic function.

For designers, this is a celebrated, exciting advancement, yet it has also exposed a severe skills gap. Specifically, design leaders are being thrust into overarching, cross-functional executive positions, with little to no formal training in business or strategy skills.

Consider the context: Most BFA and MFA programs don’t cover traditional business skills, and companies certainly aren’t investing in cross-functional training for creative professionals. The resulting condition is tragic: Design teams and leaders are not set up for success and, subsequently, are unable to deliver, thus relegating the collective back to a service function.

I’ve experienced this first-hand. I unexpectedly found myself in boardrooms and strategy sessions armed with nothing more than Photoshop and front-end programming competencies. I knew the value of design work but simply couldn’t articulate it in a convincing and relatable form to a corporate audience.

Designer Goes To Business School 

Out of frustration, I formulated a hypothesis: If I were educated in core business skills, I could shift myself (and design teams) from a service to a highly strategic functional asset, driving larger organizational direction.

Very soon, I found a workable solution: a part-time MBA program where I would study and learn actionable skills of business frameworks and best practices of management. So, for just over three years, I was a senior user experience designer by day and an MBA student by night.

Though I studied many illuminating topics (economics, financial accounting, business law, supply-chain management, corporate ethics) as they relate to design, three particular areas of study were highly impactful: statistical analysis, competitive strategy and organizational management. These subjects were most impactful because, to be candid, I had never studied or considered them at depth professionally. Yet, the more I learned, the greater the impact these courses had on my professional development and approach to design.

For just over three years, I was a senior user experience designer by day and an MBA student by night. Armed with this new statistical skill set, I was able to incorporate business thinking as an early step in my design process.

A Bit Of Math Goes A Long Way

When it came to statistical analysis, as a creative professional, I had an adverse physical reaction to the very idea of spending four months pouring over Excel spreadsheets. In fact, I had done just about everything possible to avoid “math” during my academic and professional career. I was guilty, like so many, of being stuck in the construct of a left-brain and right-brain duality.

It was surprising to me that my first weeks in statistics had very little to do with mathematical calculations, but rather, with theory. I learned that statistics actually rest upon a singular premise: ratios. If you boil down ratios to their core, it’s basic: X ÷ Y = Z. Simply, you take two forces, stack them against each other, and you achieve an output that is influenced against both forces.

Surprisingly, as a designer, the concepts and application of ratios were very familiar to me. I had comfortably worked with ratios in everyday design tasks (grids, padding, aspect ratios) throughout my career.

As I progressed through the course, week after week, I waded through increasingly complex financial models that leverage statistics. Over time, this repetition built up a muscle, and without even thinking about it, I found myself toying with basic statistical models to help guide my design decisions.

Normally, as a designer, I’d go through my design process (competitive auditing, high-level concepts, interactive wireframes, visual design, usability testing), and leave it to the business unit to figure out the impact on our company and users. Armed with this new statistical skill set, I was able to incorporate business thinking in my design process as an early step.

Let’s consider a simple redesign of a home page. For many designers, this can be very challenging because there are so many competing priorities: search functionality, email registration, illustration of the brand’s value, testimonials, etc.

Prior to using statistical analysis, I’d just try to find a design that represented a compromise for all use cases and moved on. Now, I’ve been able to step back and use statistics to help prioritize my layout. Rather than “just” designing a variant or two, I’m able to provide a thoughtful overview of the revenue impact correlated to my design decisions.

Let’s take a hypothetical example. In a first pass of a design, the layout would prioritize email registration as the primary action for a user. Consequently, this would have the immediate impact of fewer orders. Using standard Google Analytics, I was able to show the potential revenue ripple effects of that approach.

Conversely, for a second pass at the design, my layout would feature a search bar. Of course, this would lead to a decrease in email registrations but would also lift the number of immediate orders, as well as conversions (users would convert better because they found more relevant results).

Once I was able to build this sort of analysis into my design practice, more and more of my initiatives got investment. 

This is a basic application of a statistical model, but as it scales, it becomes even more powerful for larger design initiatives (launch of an app, new product offering, new checkout page, e-commerce feature, brand campaign). What’s more, the model becomes more specific and predictive the more it’s used.

As I progressed, I was able to genuinely factor in cost reduction as a critical variable into my models. Consider a chatbot that can easily answer questions for a customer; that feature cuts down on call-center operations, thus reducing a cost driver to the business. Or consider an engaging feed, constantly being populated by fresh content; this boosts organic repeat visits, reducing pricey SEO spend. Of course, raw revenue generation will always be a key driver for business, but as designers, our work actually has a profound impact on cost reduction for the company. This type of analysis gave financial credibility to design-led projects that would have previously been considered “non-revenue generating.”

In all, once I was able to build this sort of analysis into my design practice, more and more of my initiatives got investment. It became formulaic. I would not only present a jaw-dropping, visually striking design prototype that solved actual customer problems, but would also offer precise measurement and financial gains (or savings) to the company.

Build Your Moat

Even armed with statistical analysis, I still struggled with the ask to be more “strategic.” But, to be honest, I had no idea what that really meant. How does one actually be strategic? Is it planning? Is it innovation?

In my study of competitive strategies, I read extensively about strategic frameworks to help guide decision-making. In particular, we spent a great deal of time understanding the work of Michael Porter, who is basically the Jony Ive of business thinking.

Porter constructed a simple yet far-reaching structure to guide corporate decision-making (The Economist has a good summary). It all rests on the premise of achieving an enduring advantage over your competitors (Warren Buffett calls it the moat).

To summarize, Porter defines the two ways in which an organization can achieve competitive advantage over its rivals: cost advantage and differentiation advantage. In short, to stand apart, you can either have a very different offering or win on price. (Mind Tools has more on this.) If executed correctly, the business will have achieved a competitive advantage over its competitors.

Differentiation is a strong strategic approach, as opposed to cost leadership. We identified a pain point and a product for an emerging customer segment.

Today at Shutterstock, we certainly offer exceptional content at competitive prices, but many in the industry offer similar products. Using Porter’s model, we knew that differentiation would be a strong strategic approach, as opposed to cost leadership. Aligned with traditional user experience and product strategy, we identified a pain point for an emerging customer segment. Customers want to be able to quickly edit and design off our images without leaving the website. From there, our integrated editor tool was born. As it moved from beta to production, we have emerged with a highly differentiated experience for a new customer segment.

Porter’s model is powerful for larger-scale strategic initiatives, but is equally important for feature development. How often have we seen decision-makers deploy a strategy to merely copy existing functionality (see Instagram and Snapchat)? To this, Porter would say, “… bad strategy simply ignores competitors; average companies copy; and winning companies lead their competitors.”

From a design standpoint, articulating the flawed logic of replication becomes simple and powerful. A series of designs showing our product changes to be benchmarked to company B’s advantage showed the futility of the effort and how differentiation would never be achieved. In contrast, a differentiated product (alongside a statistical modeling) can clearly illustrate that the optimal path allows for both differentiation and long-term revenue gain.

Management Is Highly Underrated

Designers are natural optimists. Where others see disorganization, designers see the prospect of beauty. Where others wish to cut corners, designers take pride in completeness and quality. Moreover, designers are problem solvers, collaborators and, yes, a bit eccentric, too! We are the people who are wanted — who are needed — to be constant, positive creative, cultural and strategic forces within companies.

However, I would argue that while we can be epicenters of culture and innovation, our discipline hasn’t devoted much attention to successful management of our organizations. Far too often, we manage work, not the individual or the collective.

For me, a breakthrough in thinking about how to structure design departments was found in the work of Edward Deming, often referred to as the father of quality.

Deming, an academic who was brought to Japan in the 1950s following World War II, is credited with being a leading figure in post-war Japan’s economic rise. Deming based his entire business philosophy on an ideal of cooperation and complete employee fulfillment. Much of his experience and life work were codified in his brilliant 14 points.

To me, these 14 points are an exact blueprint for how to build and scale a thriving design organization. I encourage every reader to share these with their teams and to ask for a grade on each point. I promise that you’ll find immediate areas of opportunity. If you commit to the changes, you will have all the guidance needed to build a connected, high-morale and thriving organization.

I would like to leave you with Deming’s final point, point 14: “Put everybody in the company to work to accomplish the transformation. The transformation is everybody’s job.”

To me, this point — and my entire MBA experience — reaffirmed that the foundation of design thinking, customer empathy and long-term vision is, in fact, the foundation of an enduring corporate strategy. Far too often in today’s economy, strategy is subject to the whims of short-term gains, which, over time, comes back to haunt company and consumer alike. Or, inversely, as the adage goes, if you solve your customer’s problems, they’ll solve your business problems.

I’ll end with this: Invest in yourself. Invest in learning new skills. Invest in your design team. When you do, you’ll see great returns for yourself, the team, the customer and the business.


 

How to choose a user research method

“What’s your process?”

This is a question that you’ll often get from prospective clients, or in an interview for a UX design position. Of course, your exact process will end up being at least a little bit different for just about any UX design project you undertake. Whatever your full answer may be, as I recently wrote, user research has to be a part of that process. In most cases, you just can’t afford not to do it.

What’s less clear is what kind of user research you should do. There are a lot of different techniques to choose from, each with different strengths, weaknesses, and research goals. This article is intended to give a quick rundown of how to decide on what your research goals are, and what techniques you can use to achieve those goals.

Understand the goal

The most important question to ask yourself before deciding on what research methods to use is: What do I want to know?

How do you go about answering that question? You could start by asking yourself why you want to learn that thing. Identify what you already know about your users, and what you don’t know about them. What are your knowledge gaps? Some examples of useful questions that you may or may not already know the answers to:

• Who are the users?
• What are their behaviours, goals, motivations, and needs?
• What assumptions have you made about them?
• How do they currently use your product?
• What other products do they use?
• Where do they have problems with their workflow?
• Do they like using your product?

Once you know what you’re trying to learn, you can start thinking about how to learn it.

One way to break down the methods, suggested by Christian Rohrer, is on two axes: Attitudinal vs. Behavioural studies, and Qualitative vs. Quantitative studies. In attitudinal studies, you’re trying to find out what people say about a subject, while in behavioural studies, you’re analyzing what people are actually doing. Qualitative methods tend to be stronger for answering “why” types of questions, while quantitative methods do a better job of answering questions like “how many” and “how much”.

For example, if you’re asking the question: “How many users give up partway through our sign up process?”, then you might want to consider a more quantitative, behavioural study.

Tomer Sharon has offered a different framework for categorizing research questions, which I’ve found very useful. He suggested that there are broadly three types of questions that UX research is helpful for answering:

• What do people need?
• What do people want?
• Can they use it?

You need to understand what your product should be doing (the needs and wants of users) before worrying about whether the product is doing that thing correctly (usability).

So, which techniques can you use to answer each question type? I’m going to break some of them down below. This is by no means an exhaustive list of user research techniques, and some of these techniques could be used to answer more than one of the question types, but nevertheless it should provide a good starting point.

A quick aside: Before starting any user research project, it’s important to keep a couple of things in mind:

• In general, it’s better to observe what users need or want, rather than asking them directly
• Choosing the right methodology only gets you part of the way there, as user research is a skill that takes practice

What do people need?

Contextual inquiry

Also called observation, or a site visit, contextual inquiry involves studying people as they go about their everyday lives or tasks. If you’re performing a contextual inquiry study on engineers who produce intelligent piping and instrumentation diagrams, you would go to their office and watch an engineer go about their job. Have them show you how they do things. Ask them questions such as “How do you do that?” or “Can you show me how you did that?” to try to dig more deeply into how they’re accomplishing their tasks.

Observe how users typically accomplish their tasks (Image from Pexels)

Take notes about what they’re doing, what difficulties they face, and your own thoughts on it all. You want to try and get into their head to help understand their needs and expectations, but try not to interrupt them more than necessary. As much as possible, you should be trying to observe what would they typically do to accomplish their tasks.

I’m going to lump ethnographic research in here as well. Ethnographic research tends to focus more on social groups and how they collaborate or interact together, but it has a lot of overlap with contextual inquiry and can be useful for answering some similar types of questions.

Interview

In user interviews, you’ll typically meet with users, one at a time, and ask them questions relevant to your project. Usually this is done quite early in the process, and it can be useful for reviewing your product goals. You need practice to get good at interviewing users. Questions often have to be asked in the right way to get good responses, you have to know when to follow up and dig in to an answer, and you have to be able to listen well. You should definitely have an interview protocol or script prepared beforehand.

Interviews can be very powerful, but take skill to do well (Image from Pexels)

Remember that during an interview, users can often make up an opinionthat they don’t actually feel strongly about. They can also talk a lot about things that don’t actually matter to them, which can be misleading.

One technique that can help with this is called the critical incident technique. Your interview subjects may remember some specific cases where the product worked particularly well or poorly, and can often provide more vivid details about these incidents. You can use this to get an idea of the strengths and weaknesses of your product when it comes to helping users accomplish their tasks.

You can also use interviews to help you identify questions to ask in a broader questionnaire or survey. On the other hand, you can use interviews after you’ve seen the results of a questionnaire and want to dive into some of those questions more deeply.

Surveys and Questionnaires

Surveys and questionnaires can provide you with some answers similar to what you’d get from user interviews. The downside is that you don’t have the ability to dive more deeply into those answers as there’s no direct interaction with the users. On the plus side, they allow you to get a larger volume of responses, which can open up the opportunity for more quantitative analysis.

Just like in user interviews, you need to be careful about how you’re writing your questions. You’ll want to keep the survey as short as you can while still getting the information that you want; if the survey is too long, you may find that you don’t get as many responses as you’d like. Surveys can be relatively inexpensive to run, and there are a lot of survey tools out there to choose from.

Diary Study

A diary study can be used to see what users do and how they interact with your product over a longer time frame. Diary studies can often be used as a follow up to a contextual inquiry or an interview, to get some additional information from some of the more engaged and informative users that you encountered.

In some cases you may ask users to take photos, scrapbook, or other similar activities. You have to make sure that you give the users good instructions so that they’re clear on what they should be doing, and follow up with them at certain intervals to try to keep them engaged.

What do people want?

A/B testing

In A/B testing, you create two variations of an element of your product, such as a registration form. The variations could be represented by anything from a simple paper prototype to a live website. You then define a metric that will measure the success of each variation that you’ve created. For example, you could measure the bounce rate or the NPS of a landing page.

Two variations of an apple (Image from Pexels)

Next, you run an experiment with users where one group sees “Version A” and another group sees “Version B”. Using the metric you defined, you’ll measure which version was more successful. That’s the one the users want. You can do this process with more than just two variations, in which case it’s called multivariate testing.

You can use A/B testing to examine a wide variety of things, such as:

• CTA wording, size, colour, placement
• What images you’re using
• The amount of text on a page
• Layout and style
• Typography
• Product descriptions

A/B testing is an excellent and powerful user research tool. There’s a lot of nuance to doing an A/B test correctly, so make sure you’re designing your study appropriately and that you’ve brushed up on concepts like statistical significance so you know when to stop the study.

Rapid prototyping

The idea behind rapid prototyping is to get your designs in front of users early and often. Rapid prototyping is done iteratively, in a three-step process:

1. Prototype — Create interactive mockups of your interface
2. Review — Test the prototype with users
3. Refine — Make adjustments based on feedback

(Image from Smashing)

The more you can do this early on, the less you’ll (ideally) need to make changes during development, when it can be far more expensive.

The fidelity of your prototypes can vary. You might start out with paper, and end up with pixel-perfect high-fidelity mockups. In some cases you might even use some live code.

If you’re going the paper route, you can put together a sketching kit and start drawing. You can use products like UI Stencils to give you a head start if you feel like you can’t draw particularly well. You can also use an app like Marvel to make your sketches interactive.

Paper prototypes allow you to test your designs quickly, cheaply, and easily. If you have a real budget crunch, this can be a good way to go. However, it’s worth keeping in mind that it can be distracting for users if your prototype is too low fidelity. Jake Knapp actively discourages paper prototyping with users, saying that:

“If the product doesn’t look real, the customer response won’t be real”

Depending on your skill level with your design tool(s) of choice, you might be able to jump directly to high fidelity prototypes. Whichever direction you take, the important thing is to get prototypes in front of users, learn from how they respond to it, and iterate.

Of course, this isn’t always going to be possible, as some systems are just very difficult to prototype. At ThinkUX, we worked on a VR project where we simply weren’t able to meaningfully prototype and test some parts of the system before implementing them in code.

Focus groups

I could easily write an entire article about the pitfalls of focus groups. There’s no shortage of such articles out there. Among the primary issueswith focus groups are observer dependency, which is when the researcher reads their own feelings into the results of the group discussion. There’s also groupthink, and the fact that some particularly vocal members of the group can make it seem like there’s a consensus even when some quieter members of the group disagree. Further, it’s worth emphasizing once again that there can be a significant difference between what people say and what they do.

Consensus achieved? (Image from Pexels)

However, when done correctly, focus groups can uncover a lot of very useful information. One of the most interesting results can be discovering a customer language that can help you to understand and describe similar experiences that your users shared. Having a group of users together can also help them to jog memories and ideas in each other that they may not have otherwise remembered.

Can people use it?

Usability test

According to the Nielsen Norman Group, if you do only one type of user research on your project, it should be qualitative usability testing. In usability testing, you recruit some users, come up with a list of tasks for the users to accomplish, and set them loose on your system (or prototype). You can do this formally (create a screener, schedule participants, have them come into your lab, record the session, etc.), or with guerilla usability tactics.

You should test with approximately 5 users, as beyond that you’ll start to see diminishing returns. At the conclusion of a usability test, you’ll often find that parts of your design worked, but that users uncovered problems that you’d never have thought of, and a lot of things need to be tweaked or reworked. This is why it’s so important to test your designs with real people.

Card sorting

Card sorting is a technique that can help a lot with your information architecture. Write down the major features or topics for your system on cards, then recruit some users and ask them to organize the cards into categories that make sense to them. You can do open sorting, where participants put the cards into groups and then name the groups themselves, or closed sorting, where you give them defined categories to sort the cards into. The results of a card sorting study can help you to decide the structure of your website, how to label your menus, how to group your content, and so on.

Card sorting can be done in person with index cards, or using an online tool such as Optimal Sort. If you’re doing the study in person, the most difficult part will likely be analyzing the results, particularly if you’ve recruited a large number of participants.

Card sorting equipment (Image from Pexels)

You’ll typically recruit more users for a card sorting study than with a usability test, but don’t go overboard here as you’ll tend to get diminishing returns beyond 15 or so users.

Tree testing

Tree testing is another research technique that will help you to assess the information architecture of your product. It can (and likely should) be used along with a card sort. Tree testing helps you to answer questions like:

• Can people easily find information on your website?
• Do your menu/category names make sense to your users?
• Is information categorized in a way that users expect?

In a tree test, users navigate the site to complete tasks (e.g. “buy a sweatshirt”) using only links — the user interface is stripped away entirely. If, through previous research, you’ve found that users aren’t reaching an important page on your website, a tree test can help you to determine if the issue is caused by a problem with your information architecture or by something to do with your UI.

At the end of the study, you’ll end up with metrics such as task success rate, failure rate, time to complete the task, and what routes users took through the site tree before selecting an answer (correctly or incorrectly).

Wrap up

Before you can decide on what research techniques you’re going to employ, you need to figure out what you’re trying to learn, and why you want to learn it.

Again, this is not an exhaustive list of UX research techniques. There are a lot of different ways to attack a given problem, but this article should help give you some idea of what techniques you can use in your research, and what kinds of questions they can help you to answer.

 

Designing Better Form

Forms can be boring, forms can be fun, but when it comes to online user interaction, there is nothing more important than your web form. In fact, it is like a front door to your business and the avenue that visitors utilize to begin their relationship with you and your business. Forms is how your potential clients/visitors/customers get in touch with you, hence creating an effective, high-performance web form that provides your visitors with the right kind of information is the backbone of your online presence.

You can make a form interesting, simple to fill out, but then, the real challenge is to deliver great user experience. Users don’t fill up forms for the fun of it, they fill it up to get results, they are sharing their personal information with some trust put in but generally it often ends up being a pain point for both designers and users. Enhancing functionality of a form requires more than good-looking visuals with robust code, it requires a deep understanding of the user. Here are few incredibly effective pointers that can help fellow designers to improve UX and conversions while designing forms.

We have taken an example of a registration process of a travel portal to help you understand better. It may sound extremely simple but, pay close attention, as the devil is in the detail. This flow highlights 6 most prominent tips that you need to follow while designing a form.

Human Touch — because it’s all about ‘Trust’

Everybody looks for a better experience and this can be achieved only when the content and design elements are well understood by your target audience. Also, while designing it is critical that users feel the strong connection with the brand and not feel alienated or disconnected with machine driven process; adding a hint of personal touch goes a long way.

Keep in mind that design elements such as illustrations, images or icons should be complementing the content, and not overwhelming it. In the below example we have used the image of the travel portal instead of just displaying the form.

Simple layout makes information easier to process

Human eyes are very picky when it comes to reading, and if too many color and design elements are used, chances are that your user might find it incredibly difficult to focus on the information the business is trying to gather.

Lighter Background color with the focus on content is a smart move. It is also a good idea to have small descriptive elements to help users break down the kind of information required, this just speeds up the input speed and increases the intuitiveness of the form. In the image, data like Username’, ‘Password’ are the descriptive parameters that acts as a guide.

Increase the Awareness

Always remember, your main goal for designing a form is to create trust in your user and gather information swiftly. Be upfront and honest about each step, this help users understand the time required and keeps them patient. If the form is lengthy, this is an absolute must, because hiding steps will only make the user’s frustrated. Please note that always try to show information which is absolutely necessary and not clutter the form, because, ‘Less is always More’ here.

In the example users can easily identify that they have to go through three simple steps of ‘Identify’, ‘Address’ and ‘Payment’.

Be subtle in showing Error Messages

The message should always make your user feel guided and not the other way round. It is important to keep the language conversational, remember it is you who want the information from the user.Error messages shouldn’t make the users feel that they has done a terrible mistake, instead it should come across as a guided tour to reduce the effort and time.

The below example begins with ‘Sorry’ communicating that it might be us and suggests if the user could help us.

Always be available to help the user

Helping out the users when they are stuck will not only diminish frustration but also build comfort and trust. It might be in any form but providing instant help is the key be it in the form of a pop-up, faq or chat box.

In the below example, we have used chat box as one of the option to help users, because at times it is necessary to think one step ahead, the proactive behaviour on your part can enthuse and drive trust factor little further.

Greet the users on successfully completing the task

Human mind is wired to receive rewards when they complete a task. It is psychologically proven fact that our body releases Dopamine when we are awarded that leads to instant gratification. Hence, greeting your users or congratulating them after successful submission of a form will help them feeling good and satisfied. Fun fact, Dopamine is a neurotransmitter often referred to as the ‘chemical of reward.’

Just a simple ‘Thank You’ message can leave your users with a ‘Feel good’ motion and a smiling face.

Forms may be one of the simplest section of a website or application, but don’t be deceived. They are extremely crucial for a business and many designers mess it up by keeping user experience in the back burner and ends up doing what ‘everyone does’. Forms are the last thing that people want to fill up- keep it short, keep it conversational and do the unexpected.

Alternatives of hamburger menu

When it comes to controversial UI, the hamburger navigation pattern has had its fair share of criticism, dismissed as everything from ‘mystery meat’ to ‘the devil’. In this article, we’ll take a closer look at the hamburger icon and alternative navigation patterns.

1. Bottom navigation for mobile

This has become the go-to alternative for teams who wanted to ditch the hamburger menu. It’s been adopted by big boys in the industry — Facebook, Flipagram, Buffer, and many others for good reason. The navigations at the bottom allows the user to see the core features and functionality immediately on the home screen, as well as tells users what page they are on at a glance. Direct access is key here, as users can rapidly switch to different features using a single click and without the need to return to the home screen.

Bottom navigation

2. Tabs

Similar to tabbed menus on the bottom of the screen, tabs at the top of the screen are a decent alternative. They allow users to have direct access to different features, as well as receive visual cues as to where they are within an app. They may also be more intuitive, as they work similarly to tabs on a browser. However, since they’re located on the upper ⅓ of the screen, they’re not quite as accessible as tabs on the bottom screen are. I have yet to see them used alone, as most apps opt to add them as additional navigation in conjunction with another system.

Tabs transition by Andrew Littmann on Dribbble

3. Navigation with vertical lettering

Vertical lettering is a brand-new trend these days. It looks increasingly fresh, and naturally stands out from the usual horizontally-oriented content. What’s more, it takes less space: just a narrow line. Nonetheless, it is visually weighty since it is stretched almost to the height of the screen. Compact, informative and zingy — an ideal solution for contemporary designs.

Checkout this website with the trendy vertical lettering navigation bar!

4. Progressively collapsing menu

A more sophisticated modification to a hamburger is to design a menu that adapts to the screen width, shows as much of the navigation as possible, and puts everything else under a “More” item. One might then argue that the ‘more’ item isn’t better than the hamburger menu (it’s kind of hidden and its label does not refer to its content at all), however, if you have made the prioritisation right, most users will be looking for one of the four visible items anyway so the navigation experience for the majority will still be improved.

Progressively collapsing menu

5. Menu scattered around the perimeter of the fold

This one is unique and catches the eye. It is not a widely-used solution, and usually, it requires a proper environment, like a centered layout with perceptible gutters around the structure; nevertheless, it is a good way to give some zest to your navigation.

It’s tricky but when done well, looks really different and amazing! Each corner is reserved for its piece of information: logotype, socials, menu icon and quick access to the ‘about’ section.

http://www.proudandpunch.com.au/

6. Labeled Menu Button

James Foster of Exisweb ran a few very interesting A/B tests to see if simply tweaking the hamburger menu icon would significantly increase usability and reduce confusion. He found that icons labeled with the word “Menu” significantly increased the amount of clicks as compared to a normal hamburger menu, by as much as 20%.

If you’re not looking to make a big change to your app, but want to increase usability, this would be a good alternative. The Nielsen Norman group also recommend labelling the hamburger menu for increased conversions.

Tweaked the hamburger in https://dribbble.com/shots/971412-Hamburglar

[IMP] Keep in mind — test whatever you create

Every design is amazing until tested with real users!

Honestly, how much ever we talk about the best practices, fads and trends in the field of UX, you can never be sure how your users might respond to an interface. The response might vary based on a lot of parameters — you users’ exposure to UI trends, the kind of apps they use, the age group they belong to and so much more… It’s best to design versions of form and test them with your users to know which works best for your brand.

We use CanvasFlip to check heatmaps and user videos on any variation in interface. I believe you would benefit from the same. An A/B testing of the same would be quite helpful in taking any decision.

Heat map of bottom navigation interface

Conclusion

As the saying goes, small details make a big difference; and such a common element of the website design as the menu is capable of enriching the general aesthetic, adding some nice twists to the structure, and enhancing the user experience when it stands out from the crowd. These four types of navigation might not impress your visitors with their incredible dynamic behaviour, nor intricate realisation.


 

When User Personas Just Don’t Matter

I sat down with a new client a few weeks back to discuss an upcoming project of ours. I was set to learn their hopes and dreams, to see what exactly they needed from us. They were super eager to discuss personas—they’d even done a ton of reading on them, and had done some initial discovery of their own to better understand their users. Awesome, right? I listened, nodded, got excited, and then finally asked how they intended to incorporate these personas into their internal design philosophy or system. Suddenly, blank stares.

This is not an uncommon problem. I’ll provide a quick caveat and say, I work almost exclusively with websites and web applications, with the occasional foray into virtual reality. And I’m at an agency, so the problem I encounter is specific, perhaps, to that experience. However, more often than not, user experience personas become functionally useless for my teams. Rather than being used for informing ongoing design decisions, they get stuffed into drawers or handed off to marketing teams, where they don’t meet said-marketers’ needs.

Even when I wind up working with the team to help them strategize how to effectively use or evangelize personas, they’ve still ended up in drawers by the time we’ve checked back in.

So why are these documents not useful for some teams? While I don’t have all the answers, I know I’m just really tired of spending many, many hours on creating things that wind up in drawers. So here are some of the problems I’ve noticed, and then I’ll end with an open question to you all; I know I don’t have the end-all, be-all opinion on these matters.

[Note: this topic came up for me again today because of a cool talk at the upcoming LavaCon in Portland, OR. The talk is A Gameful Approach to Creating Relevant Personas, and should be pretty sweet. If you’re interested in checking out LavaCon Portland November 5 – 8, check out their registration page and use UXBOOTH as a promo code to get $200 off. Yay! They’re our partners and we love them.]

Where confusion sets in

We’ve written about them in the past, but this causes a lot of confusion. To quote our own author, Jennifer Leigh Brown, there are two primary kinds of personas (and a few others you can read in her article):

Design or user personas: Focus on goals, current behaviors, skills, attributes, pain points, and environment. They use specific details related to a particular design problem and not generalities.

Marketing or brand personas: Represent user types within a targeted demographic that might use a brand, product or service in a similar way. They are more general and used in relation to marketing messages or sales potential.

Jennifer Leigh Brown, in “One Persona to Rule Them All”

As it turns out, many organizations just don’t have a need for personas to drive design decisions, because most of their design needs just aren’t that complex. I know many folks out there who are a bit more idealistic than I am might bristle on this—and I want to hear from them—but there comes a point where a team just needs to make a decision on where to invest time and resources. For smaller, leaner organizations, design teams might benefit a lot more from investing elsewhere, such as usability testing or accessibility reviews.

User personas are much less actionably useful for less complex products than, say, marketing persons that directly inform communication needs and potential impact.

They’re also not-at-all-cheap to develop; when teams realize this, you know what happens next? They fill in the persona’s blanks with assumptions, which makes them functionally useless. Well, maybe not completely useless, but the personas are now something else entirely—speculation.

A rollout problem

Even if a team has created the most useful, awesome personas, and the product has pretty complex design needs, there are still more hurdles. Most importantly, communication and rollout.

Any teams with stakeholders need to understand the importance of personas and user-centered design (and the time and cost they require), and that’s…well, it’s hard. Especially for non-tech-centric companies (though those are fewer and farther between these days). This means that a very dedicated and enthusiastic evangelist will need to “sell” the personas to everyone, not just design nerds.

Maybe for the big sexy products this isn’t a problem, but it sure is for the everyday Janes and Joes out there just trying to redesign their not-overly-complex websites. It’s not worth their time and limited resources to invest energy into something that will require such heavy lifting of stakeholder management.


 

Why Successful Startups Stumble at 40+ Employees

Last week I got a call from Patrick an ex-student I hadn’t heard from for 8 years. He was now the CEO of a company and wanted to talk about what he admitted was a “first world” problem. Over breakfast he got me up to date on his life since school (two non-CEO roles in startups,) but he wanted to talk about his third startup — the one he and two co-founders had started.

“We’re at 70 people, and we’ll do $40 million in revenue this year and should get to cash flow breakeven this quarter. ”

It sounded like he was living the dream. I was trying to figure out why we were meeting. But then he told me all about the tough decisions, the pivots and how he had to fire his best friend he had to do to get to where he was. He had been through heck and back.

“I made it this far,” he said, ”and my board agreed they’d bet on me to take it to scale. I’m going to double my headcount in the next 3 quarters. The problem is where’s the playbook? There were plenty of books for what to do as a startup, and lots of advice of what to do if I was running a large public company, but there’s nothing that describes how to deal with the issues of growing a company. I feel like I’ve just driving without a roadmap. What should I be reading/doing?”

I explained to Patrick that startups go through a series of steps before they become a large company.

Search

In this first step, the goal of a startup is to search for a repeatable and scalable business model. It typically takes multiple iterations and pivots to find product/market fit — the match between what you’re building and who will buy it.

You’ll realize you’re ready to exit the Search step when you have customer validation:

• You’ve found a sales channel that matches how the customer wants to buy and the costs of using that channel are understood
• Sales (and/or customer acquisition in a multi-sided market) becomes achievable by a sales force (or network effect or virality) without heroic efforts from the founders
• Customer acquisition and activation are understood and Customer Acquisition Cost (CAC) and Life Time Value (LTV) can be estimated for the next 18 months

Startups in Search mode have little process and lots of “do what it takes.” Company size is typically less than 40 people and may have been funded with a seed round and/or Series A.

Most startups die here.

Build

At about north of 40 people a company needs to change into one that can scale by growing customers/users/payers at a rate that allows the company to:

• achieve positive cash flow (make more money than it spends) and/or
• generate users at a rate that can be monetized…

Unfortunately as you hire more people, the casual, informal “do what it takes” culture, which worked so well at less than 40 people becomes chaotic and less effective.

Now the organization needs to think about:

• culture
• training
• product management
• processes and procedures, (i.e. writing the HR manual, sales comp plan, expense reports, branding guidelines, etc.)

This Build phase typically begin with around 40 employees and will last to at least 175 and in some cases up to 700 employees. Venture-backed startups will often have a Series C or D or later rounds during this phase.

Grow

In the Grow phase the company has achieved liquidity (an IPO, or has been bought or merged into a larger company event) and is growing by repeatable processes. The full suite of Key Performance Indicators (KPI’s) processes and procedures are in place.

At this stage, a founder is just lucky if you’re not the ex-CEO.

What breaks in the Build stage?

I pointed out to Patrick that he was in the middle of the transition from Search to Build. And I suggested that he was lucky to be encountering this problem as a 21st century startup rather than one a decade or two ago.

In the past, when venture-funded startups told their investors they’d found a profitable business model, the first thing VC’s would do is to start looking for an “operating exec” — usually an MBA who would act as the designated “adult” and take over the transition from Search to Build. The belief then was that most founders couldn’t acquire the skills rapidly enough to steer the company through this phase. The good news is that VC firms are beginning to appreciate the value of keeping the founder in place.

I reminded Patrick that the reality is startups are inherently chaotic. As a founder he got the company to the Build phase because he was able to think creatively and independently since conditions on the ground changed so rapidly that the original well-thought-out business plan became irrelevant.

He managed chaos and uncertainty, and took action rather than waiting around for someone on his board to tell him what to do, and his decisions kept his company from dying.

Now Patrick would have to shift himself and the company. In this Build phase he was going to have to focus on how to thoughtfully start instituting things he took for granted in the Search phase.

He was going to have build into his organization training, hiring standards, sales processes and compensation programs, all the while engineering a culture that still emphasized the value of its people.

Patrick took a bunch of notes, and said, “You know when I figuring out how to search for a business model, I read the Startup Owners Manual and Business Model Generation, but where are the books for this phase? And come to think of it, in the Search phase, there are Incubators and Accelerators and even your Lean LaunchPad/I-Corps class, to give us practice. What resources are there for me to learn how to guide my company through the Build phase?”

Surviving the build stage

I realized Patrick just hit the nail on the head. As chaotic as the Search phase is in a startup, you are never alone. There are tons of advice and resources. But in the past, the Build phase was treated like a smaller version of a large company. Operating execs hired by investors used the tools they learned in business school or larger corporations.

I suggested it was time for Patrick to consider four things:

1. Read the sparse but available literature that did exist about this phase. For example, The Four Steps to Epiphany Chapter 6, Company Building, Ben Horowitz’s The Hard Thing About Hard Things (a series of essays) or Geoff Moore’s classic Crossing the Chasm
2. If he already had an advisory board (formal and/or informal), add CEO’s who have been through this phase. If not, start one
3. Get a one-one CEO coach or join a CEO peer group
4. And potentially the most difficult, think about upgrading his board by transitioning out board members whose expertise was solely rooted in the Search stage

As we finished our coffees, Patrick said, “Thanks for the advice, though I wish someone had a methodology as simple as the Lean Startup for how to scale my company.”

Lessons Learned

• Startups go from Search to Build to Scale
• The Search to Build phase happens ~40 people
• Very different management tools and techniques are needed to guide your company through this new phase
• You need to reset your board and your peer advisers to people who know how to manage building a company versus starting one
  
  
   

3 alternatives to the floating action button

UX-friendly alternatives to the Floating Action Button, Google’s cute UI design element that doesn’t always cut the mustard

Everybody loves the Floating Action Button, right? That little action button at the heart of Google’s Material Design language is appealing, useful and makes for streamlined UI design.

But cute as it may be, the Floating Action Button has critics as well as admirers. Possibly “detrimental to the overall UX experience of (an) app” according to one commentator, the Floating Action Button isn’t always the right UI element to use.

Justinmind hunted down some user-friendly alternatives to the floating action button, and found out some interesting stuff about UI design patterns along the way.

What is the Floating Action Button?

Back in 2014, Google launched Material Design, a design language that tries to unify the user experience of all Android web and mobile app users. You’ll recognize Material Design by it’s heavy use of grid and card layouts, animated transitions and, most strikingly, illusion of depth created by smart shadows. The UI design system harks back to the paper and ink days when things had “physical surfaces and edges”, but the result is clean and modern.

The Floating Action Button (or FAB to its fans) is one of the most striking elements of the Material Design UI language. It’s that colorful button you’ll see in Android apps, often on the lower right of the screen. It’s just kind of floating there, apparently just situated somewhere above the rest of the user interface.

Credit: material.io

Functionally, the Floating Action Button represents the most common user action on the screen. Take the example of the home screen of Gmail’s Android app. When a user opens Gmail, the action they are most likely to perform is that of writing a mail. And that’s exactly what the FAB calls them to do: the UI element is bold in color, eye-catching and intuitive. The little pen icon helps with the last part.

Whats so good about the Floating Action Button?

The Floating Action Button’s biggest selling point is that it’s a recognized, standardized UI navigation pattern. Standardized navigation patterns lighten users cognitive load substantially and are predictable. Minimum cognitive load means maximum usability, as pointed out by Kathryn Whitenton of NN Group.

The Floating Action Button also allows Android app prototypers and designers to improve design consistency. It’s pretty convenient, as a UI designer, to know that if you’re prototyping an Android app, you have a universally spoken design language at your disposal, for free.

Add to that the admirable concision of the floating action button. It captures the core function of your appear screen in one simple, space-saving UI element. And it’s attention-grabbing, helpfully guiding users through the app’s functionality.

If the Floating Action Button is so great, why do we need UX-friendly alternatives?

Good question. Like all UI elements, the Floating Action Button works for some UIs more than others. Here are some occasions when a Floating Action Button detracts from usability rather than enhancing it.

• Sometimes floating action buttons can hide content that people need to see. If you have a floating button that covers part of an email, or the time that it was sent, this can cause frustration among users as it blocks important content.
• Perhaps you want to include more than one option behind the button. For example, the floating action button may interfere with other UI elements on the page such as non-floating, less fabulous buttons.
• Direct conflict with Apple’s iOS 10 Human Interface Guidelines (HIG). If you’re making an iOS app then stay clear of the floating action button. While FABs make great CTAs, Apple tends to prefer top-right navigation.
• It can mask the true primary action of a screen if not used judiciously. Take Gmail, whose floating action button makes little sense when you consider that most people prefer to read emails on the go and can compose a reply within the opened email itself, making the button almost obsolete.
• A floating action button without an icon is mystery meat but icons are hard to make intuitive. Icons are understood by a user’s previous experience and since there is no standard, getting icons right is hard enough, let alone making sure they’re universally understood.

3 UX-friendly alternatives to try in your next app wireframe or prototype

Dynamic action button

A dynamic action button is a button which appears when a particular event occurs. For example, you might want to hide the floating action button when you scroll so that it doesn’t get in the way of important content (or accidentally click it resulting in frustration), having it reappear when the action stops. No good UX designer wants to pollute a page with unnecessary items or content, so a button that hides itself when another action is performed and reappears intuitively when needed is a good option.

This is a nifty alternative, especially if you don’t want your action button to block important content.

Floating action expansion button

One way to really exploit the floating action button is to add more options within the button and make it expandable. An expandable FAB’s additional options must, of course, be related to the purpose of the floating action button otherwise it can cause major confusion. But don’t exhaust your users with a heap of extra options, keep it simple — a maximum of 3 should suffice. Anymore may create decision fatigue.

Credits: Ehsan Rahimi

Nick Babich highlights how the floating action expansion button, however, can be an opportunity transition to a new screen, giving you a lot more space to put content. For example, in your notes app the floating action button can expand into a new sheet to compose a new note. These sort of intuitive transitions are used when creating new content and are a useful and practical way to add more options without necessarily hindering the user experience.

Bottom or top toolbar

Sometimes the most obvious solution is the best one. The trusty old toolbar can be used to replace the floating action button in apps that are content-heavy or have more than one primary action. A bottom toolbar is within striking distance of the thumb zone and doesn’t conflict with iOS UI layouts. With Justinmind, prototyping navigation bars is simple and heaps of fun.

If you do decide to replace a floating action button with a toolbar, take care not to mix Actions with Navigation in the bar, and ensure you’re using recognized, consistent icons. And be sure to create a strategic and consistent information hierarchy that makes sense.

Conclusion

The right UI navigation depends on the screen that you’re using. Sometimes a smaller screen just screams out for a glorious, useful floating action button. Other times, the floating action button needs to take a backseat when there’s plenty of real estate to work with, such as in web design. Whichever option you decide to implement in your interactive prototypes, be sure to stay consistent and always have the end user in mind when designing. After all, what’s cool today can be a functional nightmare tomorrow.

 

You don’t need to know everything about UX - This is a story about anxiety

“You don’t need to know everything about UX”.

I find myself saying this to other people quite often. You don’t need to be a specialist in all possible verticals within User Experience Design.

And you probably can’t.

A lot of people are starting in UX just now. The high level of attention our discipline has been getting, and the increasing awareness around the importance of designing intuitive, efficient, easy-to-use experiences, ended up bringing a wave of new professionals to UX Design in the last few years.

But UX is huge.

And it overlaps with a number of other disciplines.

The Disciplines of User Experience, by Dan Saffer

It doesn’t take long for newcomers to realize how wide User Experience Design can be, and how as UX Designers we wear many different hats within a given project. It’s quite common to see the UX Designer involved in a project from the kickoff meeting all the way through launch day — and in most cases way beyond that: tracking, improving and iterating new versions of the product after launch.

Throughout this process, there are hundreds of meetings, hallway conversations and decisions being made that will have an impact in the user’s experience — and sometimes they involve strategists, data analysts, visual designers, copywriters, brand designers, technologists. The UX Designer is usually involved in each one of these conversations, in each one of these phases, advocating for the user’s interests when the team is about to make a decision that will impact the experience. Through this process, it is important that UX professionals have enough vocabulary and technical knowledge to be able to engage in healthy discussions with other disciplines — and help shape those decisions before it is too late.

Once their first project is finished, a novice UX designer can start to feel overwhelmed with the breadth of technical knowledge needed to design and build a digital product.

But sometimes, all the exposure to other areas can lead to anxiety.

How am I supposed to learn about each one of these tangent disciplines (tech, metrics, strategy, copywriting, branding), while still performing the tasks that are expected from me as part of my UX duties (interaction design, information architecture, usability testing, etc.)?

The million-dollar advice

You don’t need to learn all of it from the start.

A lot of people get overwhelmed with the amount of information, jargon, and technical details surrounding UX. This sounds obvious, but it has to be said: choose a more specific place to start from.

Understand your natural abilities as a person, and start from there.

• Do you enjoy talking to people and feel comfortable doing that? Start moderating user research and user testing sessions.
• Do you prefer designing simple, innovative interactions? Start with wireframing and sketching.
• Do you like numbers and feel comfortable speaking to that? Start getting involved more closely with analytics and metrics.
• Do you like to write and appreciate how the choice of words can impact the user’s experience? Start partnering with a professional copywriter to learn from them.
• Etc, etc, etc.

But make sure you choose a starting point.

Don’t force yourself to learn everything at the same time. You will end up in a loop of anxiety that will only accentuate weaknesses and knowledge gaps, not your strengths.

If you don’t have a particular preference, that’s fine too. As time goes by, you will start to familiarize yourself with the multiple disciplines within User Experience and will naturally start leaning toward one area or another. Keep an eye on that, and set yourself goals of diving into specific UX verticals one by one.

The good old “generalist vs. specialist” dilemma

• A Generalist knows a little bit of everything. From interaction design and usability, to being able to articulate with clarity the UX strategy, to knowing how to apply design thinking methods to a project, and someone who can also plan, run, analyze and apply user research insights into the design process.
• A Specialist might decide to dive deeper into one or two of these verticals, and learn everything they can possibly learn about that area of focus. Specialists are more common in larger companies that have a large UX team and can afford specialization.

If you’re interested in reading more about generalists vs. specialists, and its advantages and disadvantages, check out this article from UX Matters:

But even that choice between Specialist and Generalist is not something you have to make on day one.

Give yourself time.

Try different things.

You don’t need to make that decision today.

You don’t need to learn all of it now.

No one really knows everything about UX. At least not in depth.

Don’t feel guilty for what you don’t know.

Be proud of what you know.

“The person who removes a mountain begins by carrying away small stones.” — Chinese Proverb

Why you should talk to a designer earlier than you think

Designers design. You know that you should contact a designer when you need to have something designed (and when you have the budget for it). That’s common sense (well, except maybe the budget part).

The thing is:

• Designing is problem solving. When you think about it this way, it changes your perspective on when you can contact a designer.
• No one is born with the skill of buying design services. It can be intimidating. It’s a skill, so it needs to be learned. It requires time and money and attention and building trust. It sounds like a big deal. Well, it is. And mature designers are equipped with tools to help you become fantastic at buying design services. Know that and contact a designer when you feel you should do so but don’t know where to start.

Here are three things designers can help you with:

1. A white sheet of paper and constraints

A white piece of paper is probably the cheapest item that can be intimidating. You don’t even need a physical piece of paper — a white sheet of digital paper from Microsoft Word will do the job.

You may think you are in a place where you don’t have too many restrictions. You may think you can afford everything and that money does not play a role. You may think that time is irrelevant and that the most important thing is quality. You might think… a lot of things. These delusions can paralyze you, stop you, send you into hibernation, and feature you in “Groundhog Day”. However, the truth is that there are limitations in each project. Limitations that allow you to constructively fill even the most intimidating white piece of paper. In a finite amount of time. In a satisfactory manner.

Part of the designer’s job is to build constraint systems that, over time, make it easier to make further decisions and ensure coherent work results.

Think about talking to a designer if you feel uncomfortable with your white piece of paper, if you don’t want to face it alone, or when you feel like you’re starring in “Groundhog Day”. There is no reason to wait until you have something “concrete” to draw. Design begins before anyone even touches a piece of paper.

2. Data and goals

There are two types of people: those who collect data and those who don’t. There are two types of people who collect data: those who analyze it and those who don’t. There are two types of people who analyze data: those who do it meaningfully and those who don’t.

To meaningfully analyze data, you must have clearly defined goals. To have clearly defined goals, you must have clearly defined metrics. It’s next to impossible to improve something that you are not measuring.

Including the simplest Google Analytics tracking code in your website or application is not enough.

Goals aren’t easy, either: They must be at least SMART (Specific, Measurable, Achievable, Realistic, Time–bound).

A mature designer can also help you in your journey on this topic.

3. Roadmaps and actions

A designer most likely has a different vision of your project’s roadmap than you. Questions to answer and hypotheses to test instead of a list of the software functions? I think this different vision may interest you.

Also, an integral part of the design process is defining a design problem. Only after getting to know the problem can one explore potential solutions and measures to solve it. Designers have experience in this.

You don’t have to do this work alone, either.


 

Rethinking drag and drop - Taking something basic and making it beautiful

Drag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible.

Physicality

The core design idea of react-beautiful-dnd is physicality: we want users to feel like they are moving physical objects around. This is best illustrated through contrast — so let’s explore some standard drag and drop behaviour and how we have tried to do better.

jquery-sortable

This example uses the amazing jquery-sortable. It’s drag and drop mechanism is fairly standard and serves as a good reference point.

Movement

instant movement is standard

When dragging items around, other items disappear and reappear as needed. Also, when you drop an item it appears in its new home position immediately.

a more natural movement

For a more natural drag we animate the movement of items as they need to move out of the way while dragging to more clearly show a drags effect. We also animate the drop of an item so that it animates into its new home position. At no point is an item instantly moved anywhere — regardless of whether it is dragging or not.

Knowing when to move

It is quite common for drag and drop interactions to be based on the position that user started the drag from

impact based on selection point

In this example the user is grabbing the top right corner of the first item. The user needs to drag a fair way down before the second item moves to its new position. This is because the calculations are based on the initial selection position of the user.

impact based on centre of gravity

In react-beautiful-dnd a dragging items impact is based on its centre of gravity — regardless of where a user grabs an item from. A dragging items impact follows similar rules to a set of scales ⚖️. Here are some rules that are followed to allow for a natural drag experience even with items of flexible height:

• A list is dragged over when the centre position of a dragging item goes over one of the boundaries of the list
• A resting drag item will move out of the way of a dragging item when the centre position of the dragging item goes over the edge of the resting item. Put another way: once the centre position of an item (A) goes over the edge of another item (B), B moves out of the way.

Accessible

Traditionally drag and drop interactions have been exclusively a mouse or touch interaction. react-beautiful-dnd ships with support for drag and drop interactions using only a keyboard. This enables power users to drive their experience entirely from the keyboard. As well as opening up these experiences to users who would have been excluded previously.

Respecting the browser

In addition to supporting keyboard, we have also audited how the keyboard shortcuts interact with standard browser keyboard interactions. When the user is not dragging they can use their keyboard as they normally would. While dragging we override and disable certain browser shortcuts (such as tab) to ensure a fluid experience for the user.

Carefully designed animations

With things moving a lot it would be easy for the user to become distracted by the animations or for them to get in the way. We have tweaked the various animations to ensure the right balance of guidance, performance and interactivity.

Maximise interactivity

react-beautiful-dnd works really hard to avoid as many periods of non-interactivity as possible. The user should feel like they are in control of the interface and not waiting for an animation to finish before they can continue to interact with the interface.

Dropping

When you drop a dragging item its movement is based on physics (thanks react-motion). This results in the drop feeling more weighted and physical.

Moving out of the way

Items that are moving out of the way of a dragging item do so with a CSS transition rather than physics. This is to maximise performance by allowing the GPU to handle the movement. The CSS animation curve has been designed to communicate getting out of the way.

How it is composed:

1. A warm up period to mimic a natural response time
2. A small phase to quickly move out of the way
3. A long tail so that people can read any text that is being animated in the second half of the animation

animation curve used when moving out of the way

Plays well with others

We have done a lot of work to ensure that things work intuitively while providing flexibility.

Sloppy clicks and click blocking

When a user presses the mouse down on an element, we cannot determine if the user was clicking or dragging. Also, sometimes when a user clicks they can move the cursor slightly — a sloppy click. So we only start a drag once the user has moved beyond a certain distance with the mouse down (the drag threshold) — more than they would move the mouse if they where just making a sloppy click. If the drag threshold is not exceeded then the user interaction behaves just like a regular click. If the drag threshold is exceeded then the interaction will be classified as a drag and the standard click action will not occur.

This allows consumers to wrap interactive elements such as an anchor and have it be both a standard anchor as well as a draggable item.

Focus management

react-beautiful-dnd works hard to ensure that it does not impact the usual tab flow of a document. For example, if you are wrapping an anchor tag then the user will still be able to tab to the anchor directly and not an element surrounding the anchor. We add a tab-index to draggable items to ensure that even you are not wrapping something that is usually interactive (such as a div) then the user will still be able to access it with their keyboard to drag it.

Not for everyone

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for vertical and horizontal lists. Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So this library might not be for you depending on what your use case is.

Engineering

Clean, powerful API

Before this library was released a lot of time an attention was given to crafting a declarative, clean and powerful api. It should feel really easy to get started with and provide the right level of control over the whole drag experience. It is based off a lot of research into other libraries as well as collective experience in building drag and drop products. I won’t go into all the details of the api here — but you can find a comprehensive guide repo

Performance

react-beautiful-dnd is designed to be extremely performant — it is part of its DNA. It builds on prior investigations into React performance that you can read about here and here. It is designed to perform the minimum number of renders required for each task.

Highlights

• Using connected-components with memoization to ensure the only components that render are the ones that need to — thanks react-redux, reselect and memoize-one.
• All drag movements are throttled with requestAnimationFrame — thanks raf-schd
• Memoization is used all over the place — thanks memoize-one
• Conditionally disabling pointer-events on all draggable items while dragging to prevent the browser needing to do redundant work — you can read more about the technique here
• Non primary animations are done on the GPU

minimal amount of react updates

minimal amount of browser paints

Tested

react-beautiful-dnd uses a number of different testing strategies including unit, performance and integration tests. Testing various aspects of the system helps to promote its quality and stability.

While code coverage is not a guarantee of code health, it is a good indicator. This code base currently sits at ~95% coverage.

Typed

This codebase is typed with flowtype to promote greater internal consistency and more resilient code. It also provides for a greater developer documentation story as the whole api is typed.

Final words

We think the web will be a more beautiful and accessible place because of react-beautiful-dnd. For more information and examples 🎉 head over to the repository.


 

The 90% agreement rule

I can recall many examples when I’ve had a conversation, meeting or discussion with someone (who I generally agree with) turn into a fully fledged debate. We often describe these conversations as ‘going sideways’ as that’s how it feels to both parties. It’s a feeling that you’re marching alongside each other and then suddenly, someone takes a hard right turn. Both parties usually walk away from those conversations with the sense ”I thought we were pretty aligned — turns out we’re not”. Sometimes this is true - there’s a fundamental disagreement that just surfaced. But in the vast majority of these cases, I believe the feeling of misalignment is more one of perspective than a real difference of opinion.

I’ve witnessed this a during the workplace but perhaps given the current political and social climate, it’s happening a lot more outside as well. Here’s an observation I’ve made about these types of situations, as well as how I now try to handle them. The observation is this:

We spend 90% of our time, talking about the 10% of things we disagree on

Expressed visually — it looks like this.

Stop for a minute. Think back over the past week and see if you can recall an example of this. If you can, the counter-productiveness will feel obvious. But to be specific about the downsides of this phenomenon, here’s why it’s not awesome:

• All the creativity and energy goes into arguing and articulating the minor differences in interpretation or point of view, rather than building on shared beliefs and values
• If there are people who are dependent on you to resolve a conflict, their progress is blocked as there’s no clarity on where there is agreement
• You feel more misaligned / distant / out of sync with someone than you need to be. This can reduce the likelihood you’ll want to engage with that person in the future

These discussions often painful or “low bandwidth” … If you’re a leader or manager at work, the issue can sometimes stem from prioritizing ‘being heard’ over ‘creating clarity’. But if we flip that, our role becomes obvious — to provide maximum clarity on wherever there is agreement (and where there is not). If we rethought our roles, we’d find the % of agreement is higher than we thought.

This doesn’t mean we have to agree on everything. Creating space for disagreement is actually really important — it helps flesh out important differences that can be amplified if wallpapered over or dismissed. This is captured well in Amazon’s “disagree and commit” leadership principle. But for me, sequencing is super important… Create clarity (and build on) wherever there is ‘about 90% agreement’ first— then come back around and address the disagreements after. Articulating this through a series of steps, this is how I try [not always successfully] to manage a discussion:

1. Actively look for common ground by asking “what do we agree on”, “what shared points of view do we have”, “where are we aligned”? As these are shared, write them down. The goal isn’t to find agreement on everything, but to look for areas where there is 90% agreement and spend time on those. As disagreement emerges, make sure these areas are articulated / written down but resist the urge to debate or resolve them at this point.
2. As the list of agreed upon items grows, spend time articulating them to make sure it’s actually the case. Have individuals try to express the other person’s point of view to make sure it’s roughly aligned. Perfection isn’t required — remember, we’re looking for 90% agreement. If there’s someone / something dependent on a decision then ask “is there enough of a shared view here for this [team / person / decision] to move forwards?”. If so, make sure that happens.
3. Finally, loop back around to where there is actual disagreement and work on that.

There’s lots we could say now about how to resolve real differences (#3), how to break deadlocks and making sure a decision isn’t ‘the average of all opinions’ but that’s out of scope for this article. For now, my main hope is to help those situations where common ground is closer than you may believe or perceive.

So, the next time we feel compelled to explain to someone how wrong they are or someone feels the need to do the same to us, before launching into an incredulous debate we can first ask ourselves “what do we actually agree on?”. Once in a while the answer will be “nothing at all” — but if we can lean into that question with curiosity, we may find the answer is “actually, quite a lot”.

Voice Interfaces: New Era Of Human-Computer-Interactions

Voice interaction is the ability to speak to your devices, have them proceed your request and act upon whatever you’re asking them. Today voice user interfaces are everywhere: we can them in smartphones, TVs, smart homes and a range of other products. The rapid development of voice interaction capabilities in our daily lives makes it clear that this technology will soon become an expected offering as either an alternative or even a full replacement to, traditional graphical user interfaces.

According to Gartner, by 2018, 30 percent of our interactions with technology will happen through conversations with voice-based systems.

Apple’s Siri, Amazon Echo and Google Now, which have been available for a few years, prove that this technology is no longer in its infancy.

Voice interaction is the next great leap forward in UX design.

In this post, we’re going to explain why voice interfaces will be the next big thing and what does this trend actually mean for designers of the user experience.

What Are Driving Forces Behind Voice Interaction

Before we dive into the specific implications of voice interaction systems or design aspects for them, it’s important to understand what’s lead to rapid adoption of this new interaction medium:

Technology is Ready

It’s clear that improvements in natural language processing have set the stage for a revolution. In 2016 we saw a significant breakthrough in natural language processing, and we’ve reached a point where advances in computer processing power can make speech recognition and interaction a viable alternative to visual interfaces. Another important thing is a number of devices that support voice interaction — today almost a 1/3 of the global population is carrying powerful computers that can be used for voice interaction in their pocket, and it’s easy to predict that a majority of them are ready to adopt voice interfaces as their input method of choice.

Image credit: Samsung

Natural Means Of Interaction

People associate voice with communication with other people rather than with technology. This means that voice interaction systems can be a more natural way of interaction for the majority of users.

Image credit: Google Mobile Voice Survey 2014

People Want a Frictionless Experience

To interact with a voice interaction system all users need to do is to simply speak to the devices and be understood. In comparison with graphic user interfaces (GUI) where users have to learn how to interact with a system, voice interaction systems can significantly reduce the learning curve.

Even the most advanced graphical user interface still requires humans to learn a computer’s language.

Opportunities For Business

Adding Personality To Branded Content

Companies can leverage the medium of voice interaction as an extension of their personalities. Gender, tone, accent and pace of speech can be used by experience designers to craft a particular customer experience with their brand. For example, kids may finally get to talk directly to their favourite cartoon characters.

Make Experience More Personalization

Using voice-based system it’s possible to create a deeper personal connection to the system. Even today if you look at the online reviews for Amazon’s Echo speaker, it’s clear that some people establish a close bond with their device in a way that more resembles a pet than a product.

Samantha from Her

Voice Interfaces Aren’t a New Direction, They Just a New Step In UX Design

If you are new to designing voice user interfaces, you may quickly find yourself unsure of how to create great user experiences because voice interaction represents the biggest UX challenge since the birth of the iPhone. They are very different from graphical user interfaces and designers cannot apply the same design guidelines and paradigms. But while designing for voice differs from traditional UX, classic usability principles are still critical to the quality of the user experience.

Understand The Basics Of Human Communication

To design great voice user interfaces, you must handle the expectations users have from their experience with everyday conversations. And for that, we must understand the principles that govern human communication: how people naturally communicate with their voices.

Understand User’s Intent

Voice-based interactions between a user and a machine can lead (potentially) to infinite possibilities of commands from a user. While designers may not be able to predict every possible user command, they need to at least design an infrastructure that is contextually driven. For that, it’s important to start with a use case (a reason for interacting in the first place) and try to anticipate users intent at each point in the conversation (to shape the appropriate response).

The processing flow of a comprehensive speech interface. Image credit: API

Provide Users With Information About What They Can Do

While on a graphical user interface, a designer can clearly show users what options they can choose from, it’s impossible to do this on a voice interface. In voice user interfaces, it’s almost impossible to create visual affordances. Consequently, looking at a device that supports voice interaction, users will have no clear indications of what the interface can do or what their options are. Therefore, it’s still possible to provide the user with the options for interaction. For example, if you design a weather app you can make it say: “You can ask for today’s weather or a forecast on this weekend.”

Limit the Amount Of Information

While with graphic user interfaces you can present a lot of different options, with verbal content, you need to keep the information brief so that the user does not become confused or overwhelmed. It’s recommended that you don’t list more than 3 different options for an interaction.

Craft Meaningful Error Messaging

Error handling is an essential component of designing thoughtful voice interactions. The wide variation in potential responses places much more emphasis on the importance of crafting meaningful error messaging that can steer the conversation with the user back on track if something goes wrong.

Use Visual Feedback

It’s recommended to use some form of visual feedback to let the user know that the system is ready and listening. Amazon’s Echo is a good example of this: on hearing a user say ‘Alexa’, the bluish light swirls around the top rim of the device, signalling that Alexa’s ‘all ears.’

Image credit: thewirecutter

Conclusion

Voice is the next big platform — it represents the new pinnacle of intuitive interfaces that make the use of technology more natural for people. Properly designed voice interfaces lead users to accomplish tasks with as little confusion and barriers as possible. And the good news is that UX designers already possess the skills they need to design effectively for voice.

 

EMPATHY MAPS: THE BUSINESS OF PUTTING USERS FIRST

Working in UX, we take empathy for granted. To us, it may feel like an overused buzzword, but we don’t realize that the majority of the business world hasn’t heard “empathy” within the context of a professional organization before.

While we start the design phase thinking about customer needs and goals, this process hasn’t been mainstreamed to other practices (and if it has, it’s inadvertently). 
 

“Empathy feels overused in UX, but it’s a word that never comes up in other disciplines.”

Attend orientation and training for a job in business development, software engineering, product or project management, or even sales and marketing, and it’s highly unlikely that the word “empathy” will be used at all—it just doesn’t come up.

All is not lost! Empathic thinking has started creeping its way into business concept planning and product strategy with empathy maps.

What is an empathy map?

An empathy map is a tool to get to know the target audience (hint: it isn’t you) in order to align the business strategy and value proposition with the customer’s wants, needs, goals, and feelings.

Simply, empathy maps get stakeholders thinking about the users they want to serve and not about the product they want to build.

The canvas shows all of the user-minded attributes on a canvas like the one below:

Then, through collaboration, sticky notes, and research, questions like these are answered to complete the canvas:

What is the customer thinking and feeling?

• What is the customer concerned about or afraid of?
• Is the customer satisfied? Why or why not?
• What are the customer’s priorities?
• What are the customer’s dreams and aspirations?
• What causes an emotional reaction for the customer?

What is the customer hearing?

• What or who influences the customer?
• Is your customer easy to influence?
• Where does the customer get their information?
• What information channel does your customer use the most?

What is the customer seeing?

• Does your customer spend more time in the public or in private?
• What does your customer’s environment look like?
• How does the customer interact with their environment?

What is the customer saying and doing?

• How does the customer portray themselves in front of others?
• What words does the customer use when talking?
• What information does the customer withhold or leave out when sharing with others?
• What is the gap between what they say and how they act?

What are the customer’s pains?

• What obstacles does the customer need to overcome?
• What frustrations are on the horizon for the customer?
• Why hasn’t the customer been able to reach their goals?

What does the customer gain?

• What methods does the customer use to achieve success?
• How is success measured and what does it look like?
• What are the short and long term goals of the customer?

Think about designing a website (layout, content, and all). You start with researching and learning about what the website visitors’ goals are, why they’re on your site (even why they’re here instead of a different website), what’s important to them, and what thoughts and feelings are running through their minds when on your site.

Why would laying out a business be different?
 

“UX can’t save a business that wasn’t designed with customers in mind.”

No matter how polished and thorough your UX work is, none of it will make a difference if the business wasn’t designed with the customer in mind. If we wait until our work shows up in tasks during the design and build phase of a project to voice the importance of user-centricity, we’re waiting too long.

How do we get the point across early on? By using empathy maps.

Introducing empathy internally

It’s one thing to work with a company starting from scratch to recommend putting users first, but it’s a whole different game to convert existing businesses to have a user-first culture. When working with businesses that don’t have an empathy map or early-stage user research process, it can be an intimidating mountain to climb. But getting stakeholders to buy in to empathy maps is a great steering tool to move that way.

Remember that it’s your job as a UXer to advocate for the user, so even though using customer research in early business decisions may seem out of bounds or like uncharted territory, it’s actually right in line with your job duties.

Image from Inside Design: WeWork.

Still uncertain about what to say? Take a chapter out of your own UX book and communicate the value an empathy map brings—and not just what it is—with these key benefits:

• The business will benefit with a glimpse into product-market fit early on in decision making
• Use insights to create a product roadmap with features that will actually bring value and be used
• Marketing and user acquisition teams already have a headstart on strategy with information on who they’re targeting
• Implementation teams can make empathic products designed for the actual end users
• There’s very little to lose in trying it—the templates to make a canvas already exist, and circulating a completed canvas won’t take weeks of time

What are the risks of not using an empathy map, or not focusing on users first? You can recognize businesses that do this by these traits:

• The business measures impact of a product by how many features are delivered and not how many customers adopt and actually use
• Product backlogs are prioritized based on internal input and not on users’ wants or needs
• Marketing strategies follow traditional practices or must run multiple uniformed experiments to find channels that are most effective
• Implementation teams make design and build decisions based on their personal preferences
• Sales numbers run flat and user adoption rates are low

Okay, so I can’t promise an empathy map will result in an immediate spike in the number of active users or get you from zero to $1 million in sales.

But I have seen enough businesses flail and blindly make strategic decisions when they could be capitalizing on and delivering value to customers.

Being empathic, I can’t help but put an empathy map canvas in front of them—and you—and say, “Here. Let’s fix that.”



Source: https://www.invisionapp.com/blog/empathy-maps-ux/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=55277570&_hsenc=p2ANqtz--8GN3ipM3h0-f0poPODxd4FCmes83p74mjCxigu6oswmwgRlhT27gHv_uX6w5QVlUxalr57_v2MJ4PBhdbvyoRbv1tVg&_hsmi=55277572

 

Float label pattern in UX form design

The very first time an input pattern had a float label pattern was in August 2013. The idea was simple enough — animate placeholder text to show an icon beside the input so the user does not lose context.

The beginning of the floating label idea — Icon beside the input

The idea was tweaked a little with time. Icons did not totally serve the purpose. It was frustrating to not know if something is right or not because there’s no label. That’s when the icon idea was scrapped and the text onlydesign was born. Now the float label came into picture with a slight animation for the text. When someone typed into the input box, the float label would animate upwards and change colour to the active state.

Version 2 : Float label pattern with text (Image credits : Derek Torsani)

Float label came up as a solution that saved space, looked clean and clear, and did not forego usability.

Top aligned labels vs Floating label pattern

1. More elements to scan in top aligned labels

In the top aligned form above, there are only 4 fields. But when you scan the form, it feels like there’s more to fill out. This is because there are 8 distinct elements that users have to scan.

The labels and fields are individual elements separated by whitespace. As a result, users process these elements with 8 separate visual fixations. The extra visual fixations give users more scanning to do, and makes them feel like there’s a lot to fill out.

2. Final checking of inputs before submitting

With top aligned labels, cross checking inputs towards the end isn’t quick to do. Users have to sweep their eyes up and down from label to input to see if they match up. The whitespace row and field border gets in the way of their visual path and slows their flow down.

The other pattern, where the labels disappears after the input field is filled, is also problematic. Disappearing labels force users to use memory to recall what the labels were.

With respect to user’s ease in cross checking the inputs before submitting form

With the third pattern (float label pattern) checking user input is quick and easy. The labels don’t disappear, and there are no visual barriers like on top aligned forms. Instead, one visual fixation per field is all it takes to compare label and input.

The text styling also helps users check their input quicker. By making the input text bold and larger, and the label text smaller, users can distinguish them at a glance.

3. Field focus

Field focus is all the more important for mobile interfaces. That’s because users look at the keypad while typing. Only after they are done typing, they look back to check what they have typed and whether it is in the right position.

Comparison of all three patterns of labels in the input field

Here’s what usually happens with the 3 patterns -

1. In pattern one (top aligned label), the field highlights, but not the text label.
2. In pattern two (label disappears when user types), the field highlights, but the text label can disappear or turn faint.
3. In pattern three (floating labels), the border surrounds the field, label and input highlight altogether.

It’s clear that the third pattern (floating labels) are the strongest — Because, users get a clear view on what field they’re on, and what they’re typing at all times.

4. Error messages while submitting

If the form has been filled out, but there are no labels visible outside the form fields or on the top, then users have to go back to each field to reveal the description in order to fix the error.

[IMP] : Test your form interfaces

Honestly, how much ever we talk about the best practices, fads and trends in the difficult of UX, you can never be sure how your users might respond to an interface. The response might vary based on a lot of parameters — you users’ exposure to UI trends, the kind of apps they use, the age group they belong to and so much more… It’s best to design versions of form and test them with your users to know which works best for your brand.

We use CanvasFlip to check heatmaps and user videos on forms. I believe you would benefit from the same. An A/B testing of the same would be quite helpful in taking any decision.

Test forms before coming to any conclusion.

Conclusion

Users can be quite hesitant to fill out forms, so we as designers should make this process as easy as possible. Minor changes — in the way labels are presented — can significantly increase form usability. Usability testing is simply indispensable in form design. Very often, carrying out just a few tests or simply asking a colleague to go through a prototype of the form can give you a good insights in how usable the form is.


 

YOU WILL NEVER GET UX RIGHT

The inventor of the typewriter, Christopher Latham Sholes, didn’t think the QWERTY keyboard was the most efficient way of typing. Even after the typewriter became a success, he continued to experiment with and patent new arrangements he considered to be better.

Yet, I’m still typing this article on a QWERTY keyboard. If better versions have been developed, why don’t we type on a better UX keyboard?

Here’s the truth: mastering the user experience of any product is impossible.

We could easily agree that nothing is perfect and move on, but that view is only a surface-level understanding of the problem. What’s really going on are 2 competing needs, standardization and innovation, fighting against masterful UX. 

While perfect can’t be done, understanding how these 2 forces take away from the user’s experience can help you improve the effectiveness of your UX strategy.

Standardization slows down (or stops!) innovation

Let’s go back to the keyboard example. You may be wondering why we don’t use better layouts than QWERTY. 

While there’s a bit of speculation regarding why the QWERTY keyboard was arranged the way it is, once it went to production, typists became familiar with the layout and were reluctant to switch. The QWERTY arrangement was the first to hit the market and was later accepted as the official standard, regardless of its level of efficiency.

Despite Sholes’s lifetime of improvements, QWERTY stuck. It didn’t matter that other versions allowed for faster typing―typists were already comfortable on the standardized keyboard.

“Standardization slows innovation.”

Standardizing the keyboard was good for typists who could then work on any typewriter. And it was also good for manufacturing that didn’t have to deviate from model to model.

But standardization also prevented innovators from improving the way we type with new letter arrangements. 

The many attempts to rearrange the letters on the keyboard haven’t been successful. QWERTY works well enough and remains the standard. Standards benefit UX, but they also prevent, or at best slow down, improvements.

So what happens when there are no standards? 

Innovation.

But innovation ruins the ease of standardization

The internet is the Wild West of UX standards. Every website, platform, mobile app, and the like is a new space to reinvent what makes UX good. Not only are the functions different, but the way we achieve similar tasks varies from competitor to competitor.

Consider project management software: Trello and Asana aim to reach the same end, but they’re completely different.

You could argue that the shopping cart is a universal standard around the web, so there’s one. But what about save? The crucial save function can be represented by the floppy disk icon or a check mark, or it could even be omitted because auto-save took its place. 

Image from Inside Design: Trello.

There are a couple of obvious positives that come from this. The competition of having the best UX drives companies to innovate more and create better products. And the user has more options to choose which product gives them their personal best user experience. But the negative aspect of widespread and rapid innovation is that the user has to be the one to adapt when the UX design changes from product to product. It doesn’t matter how well you’ve designed the UX—when your users have to face a learning curve to use the product, it’s not 100%. 

With standardization, you won’t be able to reach any higher. With innovation, users have a higher burden. 

Now what?

Where to balance standardization and innovation

The best we can do is balance how much we adhere to standards with how much we push for innovation.

You, the UX expert, should consider the business perspective of innovation. Where is innovation critical to your business, and where is it not?

“Balance how much you adhere to standards with how much you push for innovation.”

For example, if your business is similar to others (like an email provider), then your competitive edge is the UX. This is the place to innovate since it’s a “make or break” deal. If you don’t innovate there, you don’t have much else to offer. 

On the other hand, if your business is innovative in other ways—new service, new platform, etc.—you want people to easily adapt to it by designing the UX to fit standards your customers are already familiar with. This way, users may be challenged by the new service concept, but not challenged adopting it. 

Your UX will not be perfect, but it can be GREAT

The other area you can find a balance of standardization and innovation is in considering the wider scope of the user’s experience. Customers do not live in brand bubbles. They float between product to product, and they interact with your product in different contexts. 

Using the following 5 GREAT tips, you can take into account a wider scope of the user’s actual UX. 

Give trends time to prove their worth

Trends are temporary. When you jump from trend to trend, you are leaning towards the extreme of innovation without necessarily good justification. 

You can balance this by giving trends time to prove their worth before you implement them in your product. 

Remember fundamental UX principles

Keep it simple, easy to learn, easy to use, intuitive, and consistent. But with this many rules, we are leaning towards standardization. 

There is nothing wrong with keeping these fundamentals. However, truly innovative ideas are sure to push the boundaries. The balance is in retaining fundamentals when possible.

Emphasize onboarding and guidance

Innovative products create a learning curve either from their newness or sophistication (read: complexity). When users approach an innovative product, they will likely face a learning curve to understand it. It’s your job to make sure they have a proper “education.” We call this onboarding. 

Related: 5 key lessons for successful user onboarding

It’s not enough to have a good product—you also need to have good onboarding to have great UX. And once initial onboarding has been completed, continue this effort with onscreen guidance. 

Don’t ignore onboarding.

Apply insights from advanced analytics

Today, analytics can show us every nook and cranny of the user experience. The challenge is to have the right kind of analytics—and then actually make use of it.

There are several levels of analytics available, with some being more helpful than others. You can easily get information about views and clicks, but these stats aren’t as helpful as data that can show you how the user interacted with the standards and innovations of your product. Seek out information on where users hesitate, when they complete a task fast, and other granular details about the user experience.

Test usability with real users

It’s hard to match the value of real user feedback. Usability testing is the best way to get well rounded information on why and how your users interact with your product. Go to your customers or bring them into your office—this in-person feedback is valuable for the nuanced indicators you’ll be able to observe. You’ll also be able to ask follow-up questions. 

When you make decisions regarding your UX, keep in mind our example of the QWERTY keyboard. With each innovative product you design, ask yourself: is this innovation worthy of becoming the standard for generations to come? If not, consider using a more familiar interface.

Before capitalizing on a UX standard, think about whether the feature be improved upon in a way that will be meaningful to your users.

While no UX will ever be perfect, there’s always room to improve. These guidelines should help you find the sweet spot between implementing standards and pushing innovation.

Source: https://www.invisionapp.com/blog/user-experience-innovation/?utm_campaign=Weekly%20Digest&utm_source=hs_email&utm_medium=email&utm_content=55113384&_hsenc=p2ANqtz-_c3DG6VKHdOgu7fjgQSJHUEgeQ-rIWHiIXSE-WoN2xLInMLWFs23qSnUQMrXNe17Zoawh6R8ndq9bg2lG9G4Kg-OLVlw&_hsmi=55124952

Enhance Your Creative Thinking

How to maximize creativity with just 3 daily habits.

The human mind thrives on creativity. When you have a higher opennessto cognitive flexibility and the ability to entertain novel ideas, you have a natural capacity to overcome stress—a symptom of anxiety that if sustained can have consequences on your mental health. In other words, the traits of creativity have the potential to give you a healthier, more fulfilling life.

Without openness, you are more likely to become drained, less inspired, and less motivated.

Creativity isn’t exclusive to people who appear to focus on it for a living—it’s for everyone, because we all participate at varying levels, even if only mentally. The following daily routines are by no means the only means to improve your mental health, but they can certainly cultivate the right conditions to allow your creativity to thrive.

1. Switch off and get into a state of “being”

This may sound like a fruitless or unproductive exercise but it is absolutely essential—not just for your mental health, but in harnessing the best conditions to be creative. Throughout the day, you have to give your mind a break and let your subconscious bear some of the weight.

Switching off doesn’t necessarily mean going to sleep—most of us don’t have the luxury of doing that in the middle of the day. It means being relatively inactive in thought; requiring minimal willpower and concentration. This includes not looking at screens or devices, because checking feeds and notifications require a certain level of thought processing power that can drain your mental batteries pretty quick.

Imagine your brain as an engine that needs to be refueled periodically. You cannot run on fumes indefinitely without consequences—you need to spend some moments in calm and away from the busyness of your thoughts. Taking micro breaks can help you overcome stress and clear your head, but can also manifest stronger creativity levels.

The trick is not to think of micro breaks as wasted time, but as a way to recharge your batteries.

When you’re in a state of “being”, you become more conscious of your surroundings. You’re half-focused on the current experience as appose to letting your inner thoughts dominate fully. You give your subconscious intuition the best conditions to work in because there’s room for it to breathe. Getting into this state is fairly simple and really depends on what works best for you—you might be meditating, listening to music, or participating in leisurely exercise such as walking, jogging or cycling. Essentially, something that provides just enough distraction without overbearing concentration or stimulation.

For me personally, I’ve found that being in the shower, driving, walking, or even praying have been the most effective ways of “being”; there have been so many eureka moments where I’ve let my thoughts partially wander.

‘Creative potentials are usually blocked by the busyness of our minds and our lives. In order for them to emerge, both our lives and our minds have to become relatively empty and quiet.’ — Steve Taylor PhD, Psychology Today

When you’re at work, some experts on productivity believe it’s better to take micro breaks in the morning as appose to the afternoon—in other words, don’t leave the break until you’re tired, because you’re more likely to end up requiring a much longer one to obtain any noticeable benefit. With breaks in the morning, you’re less likely to feel fatigue at the end of the day and you can be more productive as a result.

2. Exercise for 15 minutes

What you might not know about exercise is that while it can obviously improve your physical health, it also has a positive effect on your mental health too—in more ways than one. Studies such as one by BJOSM have demonstrated that exercise can enhance creativity, and that a decent workout can even boost your creativity for up to two hours afterwards.

Similar research was carried out by Stanford University, revealing that simply walking has significant benefits to creative thinking; even sustaining for a little while after the walk. Walking either indoors on a treadmill, or outdoors in the fresh air both appear to produce twice as many creative responses compared to a person sitting down.

The benefits of exercise don’t just stop at boosting creativity. It increases levels of a brain protein known as BDNF, which is reportedly able to enhance cognitive performance; decision-making and learning ability. It can also reduce stress.

Physical activities can help the brain cope better with anxiety—without exercise, your body will struggle to efficiently deal with it.

‘Workout of the body’s communication system may be the true value of exercise; the more sedentary we get, the less efficient our bodies in responding to stress.’ — American Psychological Association

Another side effect of a regular workout is better sleep. As little as 15-20 minutes per day of physical activity can dramatically improve the quality of one’s nighttime sleep—65 percent more in fact. With better rest you’re simply much more productive, and able to focus better during the day.

When combined, exercise and healthy eating also have a positive impact. A diet that is rich in fruits and vegetables with a regular intake of complex carbohydrates, essential fatty acids and antioxidants supposedly encourages higher levels of well-being and creativity.

3. Be curious and pay attention

When you depend on your mind for true creativity and innovation, you cannot be on autopilot and systemize everything, or be too methodical about your daily process and how you find inspiration—your mind becomes accustomed to familiar paths, and this will lead to the same results over and over again. It’s okay to be disciplined, but you also need to be open to breaking away, spontaneity and receptiveness to the world around you—even if it’s outside of your industry or comfort zone.

‘There is no other avenue to cultivating creative work aside from impassioned curiosity.’ — Faisal Hoque, Fast Company

It becomes important then, regardless of the creative medium you work in, for your mind to learn how to be more curious if it isn’t already. Curiosity is the secret sauce to an interesting and creative outcome. It’s probably even more important than some of your passions.

The more regularly you practice curiosity, the stronger and more attuned your creative mind is.

The good news is; curiosity is available to you at all times. It’s accessible from anywhere. Whether that’s through observation, exploration, or asking questions, you need to have a child-like stubbornness to be able to tap into your curiosity every single day.

You have to be vigilant, and you have to be paying attention. You have to be optimistic that you’ll find something interesting or learn something new. You have to be fearless. You have to be persistent in going down new paths. Always take pictures, videos or notes of the things that inspire you. Discover it, record it, and your curious mind will thank you for it.

Final word

Once you accept and acknowledge your commitment to maintaining a healthier creative mind, consistency with these habits can go a long way to keep the momentum going. The benefits you’ll get from switching off, exercising and being curious on a regular basis will have a massive impact on your health, and your career.