why-the-best-design-is-sometimes-invisible

Look in the dictionary and as a noun, the word ‘design’ is defined as either “a pattern used to decorate something” or “a drawing or set of drawings showing how a building or product is to be made and how it will work and look.”

But when we think about design, we often assume it is something that will enhance a product by making it stand out – like a pattern – somehow conferring an extra level of beauty on top of its function.

We’re here to listen and guide you

Get a personalised report for your creative project, with expert recommendations to make you successful.

Get free advice →

And yet good design – nay great design – when it is defined as the way in which something looks and works (i.e. a user interface) can itself be invisible.

Sounds like a contradiction?

Think about a design you love…

Stop for a minute and think about a design that you love. Something that brings a warm glow to your heart as you use it.

You might immediately think of an iPhone – especially if you’re one of Apple’s millions of fans, loyal to the brand and its constantly adapting ability to make complex functionality intuitively easy to use. 

You might prefer something like the Alessi ‘Anna G.’ corkscrew. A winning combination of beautiful design (those clever arms!) and simple functionality that allows you to effortlessly open a bottle of wine.

Or perhaps your new love is a carbon road bike with Shimano Dura-Ace Di2 electronic gearing, a revolutionary way to change gear faster and with more accuracy.

Whatever it is that you love, the chances are that you love the way in which that product works (smoothly, quickly, effortlessly, efficiently etc.) rather than how it has been designed (with complex coding, detailed algorithms or cutting edge electronic engineering).

Which is a good example of how great design, or a great user interface, when done well, can be much less visible to the user, compared with the pleasure that using the product itself brings. 

Design has to work to be effective 

Chocolate teapot. Chocolate fire guard. Chocolate kettle. 

There’s a reason these phrases are terms of abuse. They’re useless. And not fit for purpose. Sure, you could make a chocolate teapot look incredible. But at the end of the day, it will never hold hot water long enough to be accurately described as a teapot.

And so it is with the best design. Because whenever you think of a product that brings you joy as you use it, there is little doubt that if it didn’t function for the purpose for which is was designed, then you would more than likely throw it away.

A ship can be as luxurious as you like, but it has to function first and foremost as a ship. As the passengers of the Titantic tragically learned to their cost. 

And so a Facebook app must allow you to post your picture. A transactional website must allow you to make a purchase. Or you will go elsewhere. 

Great design is evolutionary 

Effective design often follows a predictable lifecycle. A new product arrives on the market, with ground-breaking functionality. It is then quickly copied and the race begins to differentiate the offering, usually by adding even more features, at the expense of the user experience. 

Are you thinking of making something?

Get a personalised report for your creative project, with expert recommendations to make you successful.

Get expert advice →

The winners of this race are then those brands that design a product that incorporates all the features but in a seemingly effortless user interface. Think of how, for example, the Apple IPod – a deliberately late entrant to the market – came to dominate the MP3 market.

Take another example, the evolution of the mobile phone. The first phones were barely mobile. They resembled a brick, with a huge aerial. But they did the job: they allowed you to make phone calls without having to be hooked up to a landline.

After that, mobile phones evolved to become smaller and smaller – until they became almost unusable. Couple that with the ever increasing technology being added to them and something strange began to happen. Mobile phones started to grow in size as they focused less on making calls and more on becoming hand held computers, with huge processing power, that we now take for granted.

As consumers, we are no longer happy to play Snake on the tube home. We want full connectivity wherever we go, with the ability to send emails, take high res photos, surf the net – and make calls 24/7. And it’s great design that allows that to happen without you noticing. 

But make no mistake. That design is incredibly well thought out. 

When keypads with actual buttons (which took up a lot of space – remember those Blackberrys?) were replaced with on-screen virtual keypads that appear and disappear as you need them, that was a huge step forward for design and the overall user experience. 

As consumers, we didn’t care how it was done – just that it worked more effectively and intuitively than ever before.

The best design is constantly changing 

Not only is the best design often invisible, it is constantly evolving. 

Take, for example, online banking. 30 years ago, every interaction you had with your finances had to be done in store. Joining long queues to speak to a teller behind toughed glass, as you revealed your business to everyone else standing there listening! 

Now there’s very little you can’t do on your mobile app. Not only managing your existing accounts but also opening new ones, negotiating better terms, transferring money etc. 

And that’s against a backdrop of banks having to constantly update their security to protect against fraud. 

And yet the user interface keeps getting simpler and easier to use, despite these challenges. Fingerprint recognition to sign in. Automated phone verification to confirm a big transaction. The user interface is ever changing but the end result is that it continues to delight. 

How to create great design that your users will love

Irrespective of whether you are building a brand new website or wanting to launch a mobile app, the importance of well thought out design matters. 

UX Planet, on what makes great design, says “Designing the User Experience is more important than the look of your app. Even for a developer a good UX should be your primary goal of your app. Otherwise less people will use your app and therefore your innovation.”

How you create great design depends on your offering. But the steps to putting your user interface in the backseat remain broadly the same: 

  1. look for pain points you can fix behind the scenes
  2. look for opportunities to automate 
  3. make use of the advances in machine learning and recommendation engines to be more intelligent about what you put in front of users

And remember, user experience (UX) lies at the heart of the very best designs

Looking to create great design? 

If you would like to work with a design driven digital team that understands the importance of a well thought out user interface, then please get in touch with Creative.onl.

We are a small and friendly team with a huge wealth of expertise in: 

  • App development
  • Web development 
  • UX design
  • Digital strategy
  • Responsive web design
  • Graphic design
  • Video animation 
  • Content
  • Marketing support 

And we would love to help you with the design and build of your next product. 

Whatever your requirements, we would be more than happy to talk you through the creative processes of any of our services and products.    

passwords-are-a-design-problem
Illustration of a Password Entry Field

Like a lot of urgent advice, this terrific article about best practices in creating strong passwords, written by Jon Xavier of Fleetsmith, feels both necessary and tragic. Necessary because, as the article says, there is “so much outdated, misleading, and just plain wrong information” about how to create and maintain passwords out there. And tragic because this most basic of security measures, which few of us have ever really mastered, seems likely to continue to challenge most users of digital products for the foreseeable future. It’s well worth reading the article in full, but a quick rundown of its main takeaways is also worthwhile:

  • Passwords should be a minimum of ten characters long, and ideally as long as possible
  • Neither special characters nor numbers are necessary in order to make passwords stronger
  • Cleverly swapping numbers for letters in your passwords is completely ineffective
  • A password should only be changed when there’s reason to believe it’s been compromised
  • The same password should never be used on multiple sites
  • Two-factor authorization should always be turned on if it’s available
  • Never give honest answers to password security questions, e.g., What’s your mother’s maiden name?

Xavier goes deep into the myths driving password implementations and usage today, but one thing he doesn’t touch on is how poor is the user experience of passwords across platforms and products. Create six different accounts at six different web sites and you’ll very likely encounter six different approaches to encouraging and enforcing password strength and security, some egregiously lax and others excessively restrictive.

That inconsistency alone undermines much of the vigilance that otherwise responsible users might bring to password creation. If you’re presented with a new set of rules to comply with each time you undertake the same essentially diversionary task (no one sets up a password as an end in itself; they only do so as a means towards achieving some other goal), your devotion to security will inevitably be worn down to a lowest common denominator approach.

Perhaps the most important advice that Xavier offers is:

The most important factor in password safety is how they’re stored.

If you’ve used password managers like 1Password, my personal favorite, you’ll likely nod your head in agreement here. Not only do password managers markedly improve password safety, but they also ameliorate the experience of using them to begin with. Once you’re up and running with 1Password or similar apps, your online activity feels inherently more secure.

Still, huge gaps remain. For example, when generating a new password, these utilities can only guess at the security requirements of a given site or app. So if the constraint mandated by the site is, say, twelve characters including at least one number, and the password manager happens to be set to generate strings of random words that are thirty-two characters or longer, it’s up to the user to mediate the disparity.

It’s also difficult for a password manager to understand when a password is applicable to more than one site or app. Once a password is created, it’s often matched exclusively to the domain of that site. So if your login is also valid on a closely related site, as is the case with many sites from large companies, the password manager won’t automatically recognize the relationship and present the relevant login.

What’s more, grasping the added complexity of a third-party piece of software can be a challenge to many new users. To use one of these utilities effectively, you have to adopt it as a habit, which can take time. That can result in an intermediary phase where some passwords are stored in the manager and others are stored elsewhere using other means, confusing novice users even more.

Of course you could use the password utilities now built into many operating systems or browsers, which lately have been improved significantly. But if you go this route then you’re sort of stuck there, because accessing those passwords across the wide chasm between products or platforms is high friction at best.

On the desktop, while it’s easy enough to generate and access passwords in a browser, doing the same for native apps, much less the operating system’s own password prompts, is less straightforward. Manual copy and pasting is often the only way to bridge that divide. And this is especially true on iOS and iPadOS. While password access has improved greatly over the years on mobile, the landscape is still pretty unpredictable. Generate a new password in one app, and you may or may not be able to access it easily on the corresponding web site.

And none of this takes into account the excessive frequency with which all kinds of products and platforms prompt users to type their passwords, often without making it completely evident why password entry might be necessary at a given moment.

Compare the experience of passwords with the experience of, say, accessing your email, using a web browser, or performing any kind of search. Regardless of your host or client or even platform, these conform to more or less the same patterns of experience. That’s because like passwords, they’re decentralized pieces of technological infrastructure, but unlike passwords they’ve benefitted from an accretion of best practices that over time have have evolved into more or less universal standards. By contrast passwords still seem immature, developmentally arrested by efficacy myths, and suffering from continual UX neglect. Passwords are clearly a user experience problem starving for design attention.

hot-email-design-trends-to-consider-for-2020

Hot Email Design Trends to Consider for 2020

Email marketing is one of the most effective forms of web promotion, and definitely the most cost-effective form of digital marketing, with measurable and high ROI.

The reason behind this is the fact that a well-crafted email can pretty much convince a person to do anything, with less effort than the rest of the marketing channels, and it can be used for any product, brand or service. This is why there are plenty of email marketing and marketing automation platforms, like Moosend, that offer marketing automation for agencies, SaaS platforms, high-end brands, retailers, real estate, any type of product or service one could ever imagine.

By sending an email, you’re essentially knocking on someone’s door and asking them to hear you out. It can capture customers’ attention like nothing else, but only if your email is well-crafted and on top of current design trends. So, let’s go see what those are going to be for 2020.

email design trendsIllustration by Justas Galaburda

Hyper-Personalization

It may seem unrelated at first, but hyper-personalization (not simple personalization like we’re used to) has to do with everything email, and that includes email design.

email design tips and trendsSource

You see, we’re not talking about email segmentation like we know it at this point. Instead, we’re talking about emails that will appeal to each and every person in your audience and will serve a purpose that will be tailor-made and will feel personal. Hyper-personalization is achievable through the use of machine learning and AI technology that will be able to train itself by running through your data and detecting the patterns that are evident in that data.

After that, the machine… Learns. By implementing the patterns, it can distinguish in the data. By learning, the machine enables itself to predict and suggest accordingly, making hyper-personalization possible. So, if responsive design is what got you the most email opens for 2019, or if a specific user is used to not clicking through an email whose dominant color is a pastel one, you’ll be able to recreate it. This will help you deliver results that will get clicked and will appeal to your audience with one-on-one content. And this will, ultimately, help you reach your KPIs in the end.

Interactivity

Interactivity is one of the finest ways to draw attention and the more attention your email gets, the more fruitful your efforts at CRO. Your email will need to be something that gets you noticed, that helps the user engage with your brand, and that encourages them to go ahead and click around.

email designSource

You can use plenty of interactive elements, and there’s bound to be one that’s best for your niche and the reason why you’re sending your email campaign.

For example, sliders will work best for those times when you want to display more than three products, whereas the scratch effect and flip cards will boost engagement when you want to go through with something like recommendations of similar products or discount codes and offers.

There are a whole lot of other options as well, but the point is that interactive emails help engagement rates and “discovering” the content is way more fun than reading about it in the main body of an email.

Just don’t overdo it, as it could get confusing and distracting in the end. You’ll see what I mean below.

Thinking Small

You don’t need too much content. Just the right amount can make the user be convinced and happy with what they’ve found and what they’re willing to do with your product or service. You need small pieces of content that will be memorable, like a punchline, something shareable.

Ultimately, you need something your prospect will remember and that they won’t forget to interact with. Small videos, tidbits of information, bite-sized infographics, anything that will be compact enough, small enough, and also memorable enough is what you need.

Why do you think flip cards are one of the interactive features mentioned above? They’re ideal for breaking content in two, making it appear smaller and helping out with making it memorable.

Social Media Shares and Feedback

In terms of engagement again, social media platforms are what can help you win this game. But not without leveraging email marketing.

You see, you can have the best Twitter header or the most wonderful idea that will help you reach out to social media influencers, and it still won’t matter that much if your email marketing game is not strong. Easily digestible pieces of content can be used to your absolute advantage.

Include a button that will encourage social sharing. It can either be for one small little quotes I mentioned before or a large one like the ones we’ve come to know and love:

email design trends examples

You can create unique buttons to share content, purchases, and so on and so forth. Just make sure to make your button discreet enough for your users not to feel intimidated by it, and you’re good.

And since email marketing is way more than simply promotions and payment receipts, you can design a beautiful email campaign that will have customer feedback as to its main goal.

Feedback is a win-win for both your brand and the customers. On the one hand, you’ll know better than any AI platform can show what your prospects and customers need; on the other hand, you’ll create the type of brand that actually cares. For example, in this email, I’ve got the option of tracking and using the hashtag, and the customer service email is right there for me in case I need it.

email design examples

However, there’s a fancier way to ask for feedback, and it will rule email design for (at least) 2020. Think about incorporating interactive elements here as well, like check-boxes or quizzes. Whether it has to do with your Net Promoter Score or general feedback of what your users would like to see on your platform, interactive quizzes are a great way to craft a memorable email with ease.

Bold Fonts, Emoji-ed Subject Lines and Muted Colors

This has been going around in 2019, but we will see a great rise in those three elements in 2020. Let’s begin with the emojis in email subject lines:

emoji email design

This image is from my personal inbox, and I dare say it made me click. Emojis are what carry the “feeling” of a message, and it is the equivalent of the use of colors in the main body of an email since it helps convey the tone. Not to mention that messages with an emoji in their subject line are what increases open rates by 56%, according to a report by Experian.

But let’s move on to the fonts. Minimal is making a comeback, and the fonts are expected to be bold, simple and no-fuss, allowing the message to shine through without it being too much:

email design trends

Netflix used this very well, as well as the GIF trend and the small, digestible bits of information. You can see that the font is bold, it’s not too much, and the message is clear: Series premiere is on September 12th, go check the trailer.

This is all the information one may need when it comes to a series anyway, and Netflix didn’t bother with odd details like a summary. That’s all included in the trailer anyway.

And as far as the colors are concerned. There will be a rise in the use of muted colors. Intense colors are now a thing of the past, and the softer, darker colors that are easier on the eyes will see an increase in use.

Two Trends That Are Here To Stay

Of course, I’m talking about User Generated Content (UGC) and video email marketing. Those two trends are guaranteed to stay beyond 2020.

Let’s begin with video email marketing. Here’s an example:

email design

We’re talking about a Halloween makeup tutorial I received in my inbox about a couple of weeks ago. Clicking on this got me to a dedicated page that showed me the tutorial and the products used. And this gave the brand a better chance at conversion:

email design statsSource

I saw the products in action, and this was all that I needed in order to be convinced to buy something off an email.

And as far as UGC is concerned, this is a very underrated (so far) but highly effective technique that can drive more engagement.

After all, who doesn’t want to be a marketer, and who doesn’t want to see their content featured in a newsletter? Especially now, with the rapid rise of social media platforms that are centered around UGC, like Instagram or VSCO.

UGC practically leverages the good old word-of-mouth marketing that all consumers trust to this day-hence the rise of influencers-and can work as referral marketing does. Users create content for a brand. The brand trusts users enough to share it without damaging its own image. The users become ambassadors, engage with the brand, and convince their friends to buy as well, and the prospects turn into customers easily, seamlessly, and, most importantly, at a low cost. In fact, 92% of buyers trust in recommendations from people they know.

By incorporating that fact into the design of an email, you’re shooting for maximum engagement, conversions, and shares-who would miss out on a chance to show that their content was actually taken in by their favorite brand?

Takeaway

All in all, email design will appear to be simpler and no-fuss in 2020, but with a lot more complex, interactive elements that will aim for engagement.

This means that we’ll see a huge rise in personalization that will take over email design as well.

Author: the guest post by Téa, a content writer working for email marketing software company Moosend and an obsessive writer in general. 

You might also like the review of hot UI design trends, tips on choosing color scheme for user interface and effective design for CTA elements

building-a-design-culture-and-celebrating-ux-wins-at-thomson-reuters

Senior Director of User Experience Karla Ortloff heads up global UX for legal professionals at Thomson Reuters. In July 2019, 30 members of her Minneapolis-based team participated in an in-house Facilitating Design Thinking course led by Cooper Professional Education. For our Client Spotlight series, the director shares strategies that have proven effective in fostering collaboration, incentivizing growth, and driving the design culture within a 90-person team at Thomson Reuters.

(Editor’s note: this interview has been edited and condensed for clarity.)


What brought you to Thomson Reuters?

I’ve been in the industry for over 24 years and have worked at many different companies as a consultant and employee. Before I came to Thomson Reuters 11 years ago, I spent a significant portion of my career at Best Buy, so I had online retail in my blood. However, this was a great opportunity to be a part of a global organization that hadn’t yet built up a robust UX function.

It was quite a change going from building retail sites to building web-based applications for legal professionals. I’ve loved every minute of it, mostly because I just love solving problems. It’s a complex market with unique problems, so we’re always pushing our UX skills. It’s super challenging.

Can you describe the makeup of your team?

My team is responsible for designing cloud-based applications for the global legal professional market. When I took over, we were fewer than a dozen people. We’ve had a lot of highs, lows, and growing pains along the way, but now we’re 90-plus people and I’m projecting more growth in the future. Our multidisciplinary team includes user experience designers, user interface designers, accessibility specialists, front-end developers, user research, and project management. The majority of our team is based out of Minneapolis, but we also have remote workers across the U.S., UK, Brazil, and Belarus.

Could you share some of your strategies for incentivizing growth and encouraging collaboration?
  • In order for us to improve our team’s perceived value and influence and improve collaboration with our stakeholders, we turned our research skills inward to find out what our internal stakeholders think about working with us. We interviewed our product managers and asked them questions like “What do you like about working on with us? Where have we been beneficial? What is your impression of us? Where can we improve?” One of the findings we found surprising is that we sometimes come across as being “above” them. I think in our eagerness to prove value and get a seat at the table we’re perceived as having an ego instead of having confidence. That was something we made a conscious effort to improve.
  • I can’t emphasize enough how important it is to celebrate every small or big UX win. We have something called #UXWins, where we share even little wins people have had.
  • Every week we have “thanks a latte,” where people can nominate each other for doing something effective or helpful, and they get a coffee card. A culture of affirmation and appreciation is really important.
  • A lot of the things on our “UX Bingo” card reflect the culture we have in our organization. It’s not only dealing with professional development, it’s creating a culture of appreciation, a collaborative culture. One of them was simply “have coffee with a coworker.”
  • For “UX Coffee,” each month team members are randomly set up with another team member for a coffee date, either remote or in person, just to get to know each other. You can connect with quite a few people each year on your team by doing that.
In what ways has
your UX team matured over the years?

When we started out, we were a small team working on one product. That work contributed to the most successful product launch in our company’s history. I saw a huge opportunity to build on our win as a way to expand our learnings and best practices into other products across our organization.

In order for us to improve our team’s perceived value and influence and improve collaboration with our stakeholders, we turned our research skills inward.

By 2013 we were expanding our portfolio by taking on tactical and maintenance work, and each year we’ve been progressing our maturity. By 2016, team members were asking, “Why aren’t we doing strategy?” However, to be truly successful the team needed to be ready to do it, and the organization needed to trust us to do it. Finding that moment where the two intersect was critical and took extreme patience. Today, 30% of our project portfolio is strategic or discovery initiatives, and we’re struggling to keep up with the demand.

Our focus now is on maturing our UX operations. For years were striving to be in that strategic area of maturity where the designer is an integral part of influencing and making decisions on the product, and we’re there (mostly). I’ve now added a fourth level to our maturity model called “Goodwill” — where we’re identifying, initiating, and owning projects that solve problems beyond our traditional project portfolio. Someone needs to do it, and we’ve got the skills. It’s a great place for a UX team to be.

Where does
professional development fit in to elevating your team in that maturity model?

Professional development is critical as an organization grows and matures. We’ve had to develop our own career pathing. The traditional models in place assumed people were going to be here for decades, and we needed to provide jumps every couple of years, rewarding people for sticking around, because it’s a competitive market.

Cooper Professional Education Facilitating Design Thinking training for Thompson Reuters

We do a lot of internal team skill-sharing sessions and recently created training “ambassadors.” We also attend conferences and bring in professional training like Cooper Professional Education.

Professional development is critical as an organization grows and matures.

Since we’re growing, we need to get team members onboarded faster. We have a robust online resource and an orientation training site to get people up to speed on the training, team culture, projects, product portfolios, and our customer segments and personas. Our orientation includes one-on-one meetings with leaders across the team to talk about their areas of responsibility, current projects, pain points, customer needs, and sharing stories of their personal and professional life. It’s important to set the tone from day one that we have to have empathy for our customers. We also practice having empathy for each other.

Where do you see your team making the biggest strides; what’s working well?

We’re looking for ways to solve customer problems faster. Recently, the company brought in the function of Agility Coaches to accelerate the development process. We’ve been doing a form of Agile for over a decade, but over time best practices fade away and pockets of teams start to form their own version of Agile. Now we’re going back to basics to focus on the best of Agile, Lean, Dev Ops, Google Sprints, etc. We’re getting everyone — Development, Product Management, and UX — back in a room for a fixed amount of time. The best idea wins no matter who’s there. This is where we impress and build trust in ways that quick standups and design reviews can’t necessarily accomplish. We have the tools, skills and experience to take the lead, facilitate design thinking conversations, and provide quick concepts and ideas that can gather customer feedback in a very short amount of time.

What are your
goals moving forward in building a design culture?

When we’re building products, we say a product is never “done,” and the same holds true for building a design culture. I’ve been working on some of the external blockers in the company that have impeded our maturity. It doesn’t matter how great your team culture is if other parts of your organization aren’t as mature. My goal is to solve the problems that prevent us from solving problems.

Cooper Professional Education Facilitating Design Thinking training for Thompson Reuters UX Team for Legal Professionals

The first initiative was to introduce our Product Managers to new ways of thinking about their roles and responsibilities and find a consistent way of working across our global organization. This isn’t something a UX team would normally take on, but it was an obvious blocker preventing our team from having more ownership over our work and making it difficult to establish best practices. I proved Product Management teams had the same concerns and frustrations, which resulted in getting executive buy-in to fund training across the organization. So far, we’ve sent more than 150 Product Managers through the certification training, and their feedback has been overwhelmingly positive. They get career development training, and my team wins when we’re in meetings and Product Managers make comments like, “Oh normally I would worry about the design, but I’ve been told we’re not supposed to be focused on that.” Win-win!

When we’re building products, we say a product is never “done,” and the same holds true for building a design culture.

Another initiative was to find a way to make our team more efficient so we’re spending less time documenting and debating with stakeholders and more time focusing on the bigger-picture customer problems. A design system is one of those things every company on the maturity journey needs to address, so we’ve invested a lot of time and energy into creating a robust, accessible design system.

Finally, we’ve been improving accessibility and changing people’s minds about what it means to build an “accessible” product. We needed to address the misconception that it’s expensive and an innovation killer and prove that it’s a product differentiator as well as the right thing to do. We’ve initiated and created corporate-wide training for groups including Product Managers, Developers, Content Creators, Marketing, and more. Within the UX team, Accessibility Ambassadors champion training and make sure we’re designing accessible solutions. They also track the quality of the work as it makes its way through the development cycle.

We’ve been partnering with groups across the company, including Diversity and Inclusion and Corporate Legal Counsel, to establish standards and policies. It’s been a grassroots effort that has seen huge benefits and adoption in a short amount of time. It’s all about looking for non-traditional UX partners that may have an interest in what you are doing and can help you drive change.


Interested in bringing Cooper Professional Education coaches in-house like Thomson Reuters did? Read about corporate training here, and reach out to learn more!

Find out how Cooper Professional Education can help your organization become more creative, human-centered, and impactful on our corporate training page.

the-design-director-of-hillary-for-america-has-some-advice

November 2016 was a time of reckoning for many, but it was especially so for Jennifer Kinon. In fact, she called the result of the U.S. presidential election that month “the biggest emotional reckoning of my life,” while speaking with co-founder of the Center for American Politics and Design, Susan Merriam, at the Fast Company Innovation Festival last week.

The founding partner of The Original Champions of Design had dedicated the previous year and a half of her life as the design director of Hillary for America, and when the 536 days it took to build that brand came to an end and the election results came in, it seemed her team hadn’t done enough. Or that it hadn’t made the difference.

There’s a simple truth that Kinon came to abide by after the success of Barack Obama’s landmark brand identity in 2008: “Design wins presidential campaigns.” According to Kinon, the Obama campaign was the first to invest in design, and bridged the corporate and political design spaces. “He was ahead of his time by bringing a metaphor”—the “O” with fields of grain within it—”into the core visualization of the identity,” said Kinon. The visual language, borrowed from corporate branding, gave the less experienced candidate a more official look. The risk paid off. For Kinon, Obama’s win—and the campaign’s design—was a boon to the design industry. It showed that design mattered.

But in Kinon’s own experience eight years later, the equation didn’t work out. Design plus politics equaled a loss. She was left thinking either, “One, my design was bad; or two, design is not as powerful as I believe it is.” But with her steadfast belief in the power of design, she couldn’t allow for the second option. That left her with the “responsibility of number one.” And in evaluating everything that went wrong and right (Ida Woldemichael’s “I’m with Her” slogan; Mina Markham’s UI library, “Pantsuit“; and more)—Kinon came away with two key learnings that she imparted onstage for 2020 primary presidential candidate brands.

A conference room in Hillary for America’s Brooklyn headquarters in 2016. [Photo: Celine Grouard for Fast Company]

Differentiate (read: Don’t use Gotham)

One particular design innovation coming into focus in this cycle’s Democratic presidential primary: brand differentiation.

While Kinon said that politics has never been on design’s cutting-edge, campaigns are being more intentional in their visual look and are taking risks to stand out from a crowded field. They’re “trying to be authentic to who they are and differentiate, rather than pile on and use Gotham,” said Kinon, referring to the Hoefler & Co. typeface, first developed in 2000, that became ubiquitous after its use in the 2008 Obama campaign, and since then has “trickled down” across politics and branding at large.

But it seems the campaigns of 2020 have recognized its ubiquity, and this cycle, says Kinon, “each candidate is using different threads of design to show who they are.” She cited Pete Buttigieg as one example: with an identity system that looks like it could be letterpressed in its entirety, and reminiscent of American pastimes like baseball, it just reads Midwest. And differentiating yourself as a brand—establishing who you are—is important when you’re dealing with direct competitors in the double digits.

“Authenticity” isn’t under-design

There was a lot of conversation about authenticity in 2016—who has it, who doesn’t, and how each candidate conveyed it. Did the Trump campaign’s design aesthetic (or lack thereof) convey authenticity better than Clinton’s sleek, corporate brand?

[Image: Hillary for America]

For Kinon, those conversations were based on a false premise. Candidates this cycle should learn that authenticity doesn’t equate to under-designed identities or even poorly designed ones. Authenticity is about true identity and morality. When working in the political design space, you’re not creating a brand around a consumer product. You’re building a brand around a person that many won’t interact with personally. So as a designer, you have to “to get those little bits of personality through design—those one-on-one experiences—and that’s what makes it authentic.” Conveying the true nature of your candidate through your brand is authenticity.

The design algebra was easy and understandable in 2008; not so in 2016. Kinon said the Trump campaign followed a model in which its design was largely driven by the vendors that make T-shirts, hats, etc., and that was more cause and reaction than prescription. Whether or not the Trump brand was authentic, Kinon believes the cycle to be an anomaly. And if elements of the Trump brand identity were effective, they would not be something Kinon would design, calling the message conveyed by the red MAGA hat an implicit hatred and the brand itself racist.

“What was beautiful about the Obama campaign is that it operated on hope,” said Kinon. “What’s terrible about the Trump campaign is that it operated on hate.” For Kinon, we are all living with the consequences.

“What’s the question we want to ask to get meaningful information out there?” said Kinon when talking about the role of design criticism. “We’re not artists. We’re communicators. The more people I can get information to, the better.” Designers’ endeavor should be not to fall prey to reductive conversations around whether a brand identity is good or bad, but to ask, is the design effective? Will it make the difference?

better-design-with-deep-thinking

About The Author

Eric is the founder of UI UX Training where he leads workshops focused on UX research, design facilitation, and UX copywriting. He has spent the past 18 years …
More about
Eric

Task switching is a design killer. Find out why switching and interruptions are even more serious than you think and how biology makes it difficult to resist the temptation to just check your email every few minutes. Learn how to slay the distraction dragon with five practical tips for increasing focus as you tackle challenging design problems.

Interruptions, administrative tasks, and too many meetings are among the common complaints voiced by today’s professionals. When was the last time someone complained about a canceled meeting? In other words, everyone understands what hinders productivity, right?

Not so fast, says computer scientist Cal Newport. While we all realize that interruptions and fragmented time are troublesome, we fail to recognize:

  • The frequency of interruptions: We convince ourselves that we are focusing on one task at a time, such as a complex interaction design problem. Yet, every ten minutes or so, we check email or answer a text. Yes, we’re performing one task at a time, but the duration of that task is brief.
  • The cost of these interruptions: As Newport explains on a recent episode of Hidden Brain: “Even those very brief checks that switch your context even briefly can have this massive negative impact on your cognitive performance. It’s the switch itself that hurts, not how long you actually switch.” (Emphasis mine)

This task switching was the focus of a study by business professor Sophie Leroy. She gave participants a cognitively demanding activity, such as solving a puzzle, and then briefly interrupted them before they completed it. When they returned to the original task, their performance dropped. As Leroy explains, these “results indicate it is difficult for people to transition their attention away from an unfinished task and their subsequent task performance suffers.”

Leroy calls this carryover from one activity to another “attention residue,” meaning that people are still thinking about the previous task even as they turn to the new one.

The most effective way to avoid attention residue is to structure your work in a way that reduces interruptions. Such structure requires understanding the difference between deep and shallow work.

Deep Work, Shallow Work, And Why They Matter

“Deep work is the ability to focus without distraction on a cognitively demanding task,” writes Newport in his book Deep Work. This work allows us to absorb, understand, and act on complicated information. Examples including coding, complex project plans, user research, and sophisticated design work.

Shallow work refers to tasks that do not require extensive thought and focus such as filling out expense reports and answering emails, texts, and Slack messages.

Shallow tasks are necessary. The question is how much time to devote to shallow and deep work and how to structure work in a way that facilitates reflection and concentration.

Left image: Design is deep work. Right image: Filling out a checklist is shallow work.
Left: Design is deep work. Right: Filling out a checklist is shallow work. (Image credits: FirmBee | raw pixel) (Large preview)

The Solution: Five Practical Tips For Pursuing Deep Work

Tip 1: Jump Into Design Work

Avoid the temptation to text or check email first thing. Put your phone on do not disturb. Get out your sketch pad or open your design tool and challenge yourself to solve one gnarly design problem by 10:00 am.

While this tip sounds like common sense, it’s not quite so straightforward because we are conditioned to respond to signals around us: “External triggers are cues from our environment that tell us what to do next. These are the dings and pings that prompt us to check our email, answer a text, or look at a news alert,” explains habit expert Nir Eyal in a post about distraction.

Eyal continues: “Competition for our attention can come from a person as well, such as an interruption from a coworker when we are in the middle of doing focused work.”

Computer scientist Cal Newport expands on this point by explaining the biology behind the itch to respond. When we don’t reply promptly to a text or email, we feel like we are ignoring someone from our tribe. Emotionally, it’s the modern-day equivalent of ignoring someone who is tapping on our shoulder as we sit around the fire. In short, it’s difficult to ignore messages and requests from co-workers.

Difficult but not impossible. Extend jumping into design work by blocking out untouchable time on your calendar. What about emergencies? “The short answer is that there really never are any,” writes podcaster and New York Times bestselling author, Neil Pasricha in Why You Need an Untouchable Day Every Week. These untouchable days involve deep, creative work.

While most professionals cannot set aside an entire day each week, they can mark two-hour blocks on their calendar a few times each week. Colleagues simply see “busy” when viewing your calendar. While not foolproof, this quiet signal shows that you know how to manage your time in order to engage in the deep work that your job requires.

Tip 2: Kickstart Your Brain With Useful Questions

By definition, deep work takes time and considerable brain resources. Sometimes we need a cognitive boost before tackling the problem head-on. When this is the case, ease into deep work by composing a list of questions to stimulate reflection. For example:

  • What is the organization trying to accomplish?
  • How does this site, product, or app align with that goal?
  • If revising an existing design: What would I do differently if I could recreate the design from scratch?
  • What would I do now if there were no legacy system constraints?

Note that these questions involve design but also encourage reflection beyond the immediate design challenge. The latter is important because the longer you work on a product or project, the easier it is to develop design blinders.

Kickstart your brain (Image credit: geralt) (Large preview)

Easing into deep work or jumping in with both feet are often useful as long as it’s possible to avoid those nettlesome distractions. Even so, everyone gets stuck and needs time to regroup and let the mind wander.

Tip 3: Schedule Unstructured Thinking Time

Just as designers and other professionals need time to think through complex problems, they also need time to let the mind wander. The reason is the science behind “shower moments,” when ideas seem to arrive out of the blue.

In fact, the brain needs time for incubation, the psychological term for the unconscious recombination of thought processes after they are stimulated by conscious mental effort such as working on a specific design problem. In other words, when you set aside a strenuous mental task and do something less demanding, the brain is able to process and organize your thoughts to form new ideas.

Effective leaders value unstructured thinking time as outlined in How to Regain the Art of Lost Reflection. Jeff Weiner, CEO at LinkedIn, blocks at least 90 minutes for reflection and describes these buffers as “the single most important productivity tool” he uses. Susan Hakkarainen, Chairman and co-CEO of Lutron Electronics, uses 40-minute walks to reflect explaining that “Thinking is the one thing you can’t outsource as a leader. Holding this time sacred in my schedule despite the deluge of calls, meetings, and emails is essential.”

In short, designers should take their cues from these business leaders. Give your brain a break.

Tip 4: Vote It Off The Island

This tip comes from the Harvard Business Review article Stop Doing Low-Value Work by Priscilla Claman. She cites the example of a controller who was producing monthly reports that nobody read. He sent a list to his colleagues asking them to identify the three or four most important reports. He simply stopped writing the reports that no one was reading.

Another approach is to request permission to not do something such as asking customers if they really want their receipts. The point, writes Claman, is to stop doing something that is not important but to ask first to avoid getting in trouble. It’s vital that we stop ourselves from doing unimportant work.

Designers can identify possibly unimportant work by asking if:

  • Every wireframe must include detailed annotations;
  • Every design deliverable must include a detailed design document;
  • It’s really necessary to produce many variations of a design when studies about choice and decision making show that too many options make it harder to reach a decision.

No one wants to feel as if their work is sitting on a virtual shelf. By asking clients and stakeholders what matters to them, you’ll cater to their needs and save time by discarding unnecessary tasks.

The next step is to assess the remaining important work to determine how much time you can, and should, devote to deep thinking.

Tip 5: Distinguish Deep And Shallow Work

Follow the steps below to make this assessment concrete, something you can point to and share with your boss.

  1. Identify the activities that you consider deep work such as planning a usability test, drawing wireframes, or mocking up a prototype.
  2. Identify shallow work activities like answering emails, attending administrative meetings or meetings tangentially related to your core responsibilities.
  3. Estimate the amount of time you spend on deep and shallow work each week.
  4. Meet with your boss for thirty minutes and ask her what she thinks the ratio of deep to shallow work should be. Ask for a specific number. If you disagree, politely ask if you may experiment with a different ratio for one month.
  5. Then, stick to the agreed-upon number for one month. Document any changes to your productivity, anything that contributes to a better product or service. After one month, report these findings to your boss.

This approach offers two advantages:

  • It’s usually wise to solicit the boss’s support.
  • A single proposal about deep work will not change an entire organization. Involving management, however, can serve as a catalyst for broader change just as the Google Ventures Design Sprint influenced the design process at Google and beyond.

Why Deep Work Makes Everything Better

Deep work allows designers and developers to thrive by leveraging their skills to solve complex problems and create better products and designs. Better products are likely to boost the bottom line while thriving and highly satisfied employees are more likely to stay (reducing turnover) and put their best selves forward.

Perhaps the best news for employers is that deep work does not require adding staff. The solution, explains computer scientist Cal Newport, is to re-configure work and communication. In other words, it’s not more people; it’s the same people managing work differently.

For example, agencies often answer to clients and need to be available at a moment’s notice. Rather than require every employee to be tethered to a phone or laptop, Newport suggests assigning a different employee each day to a dedicated email or a special “bat phone.” This shows the client their importance to the agency while also allowing designers to concentrate on designing, building, and solving problems.

Conclusion

Deep work is the ability to focus on challenging tasks like design and coding. Frequent interruptions make deep work nearly impossible and impose a high financial cost. In this piece, we’ve described five tips for maximizing the time you devote to deep work.

  1. Jump into design work.

    Draw fresh wireframes or work on a new design problem before checking emails and Slack messages. Block two-hour chunks on your calendar to allow time for deep thinking.
  2. Kickstart your brain with useful questions.

    Take a few minutes to ask what you are trying to accomplish and how it aligns with the company’s keep performance indicators (KPIs). Alignment with KPIs is especially important for user experience designers who are frequently asked to justify their budget
  3. Schedule unstructured thinking time.

    Take a walk, stare out the window, or whatever allows your mind to wander. This “downtime” allows the brain to form new connections.
  4. Vote it off the island.

    Are you writing reports that no one reads? Are you scheduling meetings that your co-workers find less than useful? Ask your colleagues if it’s okay to stop. They might respond with a gleeful “yes!”
  5. Distinguish deep and shallow work.

    Then, meet with your boss to arrive at the right balance between these two types of work.

Further Reading on SmashingMag:

Smashing Editorial(ah, il)

duet-design-system

Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva digital products and experiences.

Get Started

Follow these practical guides to get started designing and developing experiences for LocalTapiola and Turva.

Read the latest updates from Duet’s core team. Here we’ll highlight every month new features and progress from Duet.

a-touch-of-neon-in-web-design:-using-color-to-draw-a-user?s-attention

Color is one of the most powerful tools in website design, especially when it comes to manipulating reading flow. As a rule, the standard reading path starts from the top left corner, with the exception of some Asian and Arab cultures. People move their eyes from left to right and gradually go down. This principle works everywhere. However, it does not mean that you cannot make some exceptions.

For instance, you can set a tagline to a big font size, and it will instantly catch an eye. Another proven way to force people to change their normal behavior is to use color that stands in sharp contrast to other units of the design. One time-proven option to do the job, regardless of the environment and neighborhood, is neon color.

Neon colors always command attention. It is in their nature. What’s more, since this year saw numerous millennial-targeted website designs filled with gradients and juvenile details, it has become quite popular. It perfectly blends into the vibrant infantile realm – emerging into a tiny trend. Let us consider some representative examples.

The Complete Toolbox for Web Designers

Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!

Greenleaf Logistics

The homepage of Greenleaf Logistics is spiced up with several modern solutions that instantly catch an eye. For example, all the images are presented as morphing blobs. In such a bizarre environment, the neon coloring nicely fits into the general aesthetic.

The logotype, call-to-action, and “go up” button are set in an almost screaming green. They are unobtrusive focal points that force readers to follow the path established by the team.

Example of Greenleaf LogisticsFlowhub

Much like the previous example, here neon effects are used on almost the same range of UI elements. Yet with some tiny differences.

For example, the team behind Greenleaf Logistics has highlighted only one word in the headline, whereas Flowhub has stressed out the entire tagline. They have used it like a shadow that changes its angle depending on the mouse position. In addition, neon green accentuates not only the words in the content, but also important details of the accompanying illustrations, images and icons.

Example of FlowhubHerba Mojo

Neon green is quite a universal tone that plays nicely with both light and dark themes. Consider Herba Mojo for showing it in practice.

Here, the luminescent green is used for various details: logotype, language switches, slider controls, CTA, and even product imagery. However, it does not feel overpowering. The deal is that the dark environment saves the day by striking an excellent balance between these two.

Example of Herba MojoDanilo Demarco

All of the previously mentioned projects feature quite a limited amount of fluorescent color. It is mostly scattered throughout the entire page, looking like bright splashes. But what if you want to use it as a big, bold spot? No problem. Consider the personal portfolio of Danilo Demarco.

Here, kryptonite green occupies the lion’s share of the homepage. However, surprisingly, it does not overwhelm visitors nor scare them away. It just works. It can be seen in every corner of UI. It enriches big and small headlines, hover states, the mouse cursor, content sections, block reveal effects, etc. It rules the roost here, and no one will complain about that.

Example of Danilo DemarcoDesignGapp

DesignGapp goes for a gorgeous pink that instantly reveals its beauty, placed against the bluish gradient-style background. It skillfully highlights the CTAs, playing nicely with the vibrant theme that runs through the entire website.

Example of DesignGappKostumn 1

Hot fuchsia and a fashion-related website are just destined to be together. It gives the design a sense of luxury and sophistication with ease. Even when used in tandem with a large font size, it does not ruin the overall harmony and looks pretty organic. It enriches titles in the slider and hover states of product names.

Example of Kostumn 1Critical Techworks

Critical Techworks employs one of the most iconic neon tones: rich turquoise. It looks outstanding inside a dark techno environment. All the details of the UI that are enriched with its charisma draw the attention from the outset.

CTAs, text, headlines, elements of images and parts of the vehicle benefit from it. What’s more, there is an additional dark blue fluorescent tone. It nicely accompanies the turquoise, giving an extra edge to design.

Example of Critical TechworksActive Theory

Active Theory adopts the same solution as the previous example. The website also has a powerful techno vibe that oozes sophistication. Here, neon blue collaborates with line-style typography. Together these two make a sweet couple.

That’s not all. There are some other fluorescent tones. They perfectly complete the theme, making the website feel one of a kind.

Example of Active TheoryIntelligent Artifacts

The homepage of Intelligent Artifacts gets the most out of a pair of neon colors: turquoise and purple. Again, they are used against an almost black canvas that reveals their refined, dark nature.

They almost glow and shine, instantly striking an eye. As befits, they are used to bring extra attention to essential details of the website such as call-to-action buttons, logotype, navigation, and even images.

Example of Intelligent ArtifactsWhoamama Design

The team behind Whoamama Design has built their entire aesthetic around neon coloring. They are everywhere. The website feels electric, bizarre, and fancy. It is like a blast from the disco past.

Some may consider it too much, while others may find all those eccentricities quite amusing. All in all, this unique oddness and singularity make the UI stand out from the crowd and bring attention towards the content.

What else do you need in the harsh reality of fierce web competition? Sometimes you need to be a freak to get yourself heard.

Example of Whoamama Designplayful and whimsical. When used with a black canvas and somber tones, they open their sophisticated and intricate nature.

They also perfectly fit different types of websites. Whether it is a serious company that develops products based on AI or a community platform that seeks like-minded users, the neon color will find its place under the sun and makes its contribution to the user experience.

how-our-global-design-team-switched-from-sketch-to-figma

It’s increasingly clear that the tools we use shape the work we do in all sorts of ways, so picking the right tool for your task is absolutely critical. And even more so when you’re trying to pick a tool to be used by a diverse team spread around the world.

Our product design team consists of 19 designers who work across our offices in Dublin, London, and San Francisco. All designers are embedded in product teams, which means they have specific needs regarding communication and collaboration. Multiple time zones add to this complexity.

“As time passed and the company grew, our ecosystem of tools became prohibitively messy and limiting”

Our distributed setup caused us to make highly opinionated choices about our tools: various file storages and repositories, prototyping instruments, tools for collaboration and engineering handover. As time passed and the company grew, this ecosystem of tools became prohibitively messy and limiting. Every local team optimized for their immediate needs and didn’t support collaboration between teams and offices. The company had to pay for redundant software. Even onboarding new people to all that complexity was a pain. Something had to change.

After examining our situation and considering a few alternatives, we’ve found a solution to our problems in Figma. Here’s the story of why and how we moved to that tool.

Start with why

We were always curious about Figma as it developed a vocal, growing user base of designers, and yet slightly skeptical too. On the one hand, it was a modern, rapidly evolving tool with features that seemed to suit the needs of our design org. On the other hand, it looked immature, and its web-based nature struck us as a potential drawback for the work we do.

Because of that skepticism, we started by deeply evaluating the value it could bring to us. Some benefits were clear early on, while others became evident only after the switch.

The absence of files

Things can get really messy in a traditional file system. You need to be perfectly aligned within a team on where and how things should be stored. Otherwise, you would never find anything. In my previous company, we even had to create and maintain a formalized system for our working directory. It certainly doesn’t sound like the way we should be working in 2019.

Figma, on the other hand, gives you a transparent and almost flat document system. You can easily browse all the projects and sort them by the time of the last edit. No more “final-final-ver.99…” files, hidden inside 20 folders; no more questions about the ownership. That provides really good visibility into the team activities. And in my role as member of the design systems team, which means I need a much broader context and oversight of a greater variety of work than the rest of the design team, it was invaluable.

Collaboration

When Figma initially marketed themselves as the first collaborative design tool, I asked myself: “Why would I need that? Why would I want some manager to poke around my designs? Why would I need to work on a file simultaneously with another designer?”

It was only after the switch that I came to understand the value.

At Intercom, we do regular design critique sessions where designers get feedback on their work. The fact that multiple designers can jump into and inspect one file at the same time in Figma turned out to be a dramatic improvement for these sessions.

But it is when you start looping in engineers that the collaborative aspect of Figma truly shines. The very fact that the entire handover now happens with a single click on the “Share” button is amazing, a considerable improvement on the previous process.

Another benefit lies in how its commenting feature works – conducting design reviews and gathering feedback, looping in managers and content designers, even asking for support, Figma brought together all these various types of communication inside the tool, and it goes even further now with plugins. This opened a whole new world of possibilities.

Document organization

Figma’s collaborative nature also changed the way we lay out and organize our files.

Using Sketch, you probably didn’t care that much about the way you laid out your file. Unless it’s your team’s master document, it will hardly ever be opened by someone else. But Figma documents are specifically built to be shared, which demands more careful organization.

We actively use Figma documents in our decision-making process. For many of us, they began to look more like little presentations rather than pure designs.

Cost-effectiveness

As we visualized the tool ecosystem we’d built around Sketch, we could see that many tools could simply be replaced by Figma – there was no longer any need for a dedicated file storage system and design handover tool.

Design ecosystem for Sketch

Figma also becomes a default space for commenting on work in progress designs and doing some lightweight prototyping. All together, this saved our company money and became a strong argument for switching from Sketch to Figma.

Why not?

What turned out to be Figma’s biggest benefit was also the reason why I’d hesitated to switch before: the web-based nature of the tool. Years of using Photoshop and even Sketch taught us to be very careful about file storage. The risk of an unstable internet connection added to that phobia. Your software of choice has to be reliable.

As a stress test for Figma, I decided to work remotely for a day, using only a mobile phone hotspot. And by remote, I don’t mean from the comfort of my living room or a cafe – I decided to really stress-test Figma by working on the beach. I loaded up all of my necessary files just before leaving home. I didn’t expect to have a good experience working from a beach – I thought the tool would be slow and laggy.

It turned out to be an absolutely seamless experience! Even using a hotspot to download updates was enough for work. That convinced me almost immediately. The model of “Google Docs for design” started to make sense.

How we approached the project

After the first stress test, I and fellow Intercom designer Davey Heuser, who had initiated the project, decided to work in isolation using Figma on a few existing projects to uncover issues that may block us from switching.

In that case, all went smoothly, and we didn’t encounter any significant issues beyond the expected friction that comes from using a new tool.

The next step was to trial Figma among our entire product design team. Our request to designers was to use the tool on at least one test project. This would give us insight into how Figma might suit our team and give everyone a chance to share their feedback.

We set a hard deadline for our test, deciding that if Figma met our needs after a month, we’d adopt it as a team. I started porting our design system to Figma in advance to ensure people would have all the necessary assets ready to go.

Again, this trial was successful. Designers were able to successfully work in the new tool, without being blocked or dramatically slowed down. The impact of Figma was even greater than we expected. PMs and engineers loved it. Of course, there were also some complaints around the unavoidable pain of switching tools and inevitable moments of frustration as we adapted to new workflows. Even so, we didn’t see any strong signs that we shouldn’t make this change.

After flipping the switch, we officially discontinued the support of our Sketch library and communicated that, from now on, designers were expected to create new work only in Figma. The group behind the project organized a class to teach the basics of the tool to everyone and provided support during the first months after the switch.

What didn’t go well

Changing your primary work tool will cause pain no matter how much better the new tool is. It’s simply a matter of habit and muscular memory. The first month or two is going to be a bit frustrating as you get used to it.

In our case, beyond these expected downsides, we’ve struggled with some Figma-specific issues.

Imperfect UI

Figma smartly decided not to reinvent the wheel, so their UI is broadly comparable to other design tools. More importantly, Figma’s UI is similar to their primary rival – you won’t be completely lost coming from Sketch.

However, similar doesn’t mean the two are equally as good. A year ago, when we made the switch, Figma’s UI was noticeably unpolished. After a subsequent redesign, that UI became even worse in some respects, such as low contrast and blind controls.

Feature shortfall with Sketch

The inability to find common functions, e.g. search in layers, provoked a degree of rejection among our peers. Later on, Figma filled in some of the gaps, but there’s still no parity with Sketch. To illustrate, Figma is missing (or intentionally descoping) some generic functionality like “search in layers,” causing predictable frustration.

Absence of plugins

Sketch has a modern, mature plugin ecosystem. While Figma is rapidly catching up, they didn’t have any plugins at all when we switched last year. It was a huge bummer to lose all the nice features and automation we had from plugins in Sketch.

Compared to all the problems mentioned above, plugins were not an insurmountable problem, but their absence added a bit more friction to the process of adoption.

What we’ve learned

After switching the primary work tool for the relatively small but highly distributed design team, we’ve learned a few lessons.

Start with why

It’s really important before kicking off any work to deeply ask yourself: why do you feel the need for this change? Is it just curiosity and excitement or there is a clear push/pull in your design org for a new tool?

Consider it as a project

Depending on the size of your design team, you may not be able to flip a switch and head over to new software immediately. The more complex your org is, the more important it is to pick the right approach. We tackled the problem in the same way as any other work project, which helped to ensure everything is thought through well. Besides that, it’s important to find allies in the organization who will share your ideas and help to influence stakeholders.

Test it yourself

This sounds obvious, but nevertheless: no matter how exciting the new tool may seem in theory, you’ll never know if it’s the right fit for your org until you try it for real. Port some assets in and carry out your next project from start to finish.

“You won’t be as proficient in the new tool from the beginning as you were in your previous one, but you’ll see whether the pain is too high”

Stretch it hard and see where it breaks. You won’t be as proficient in the new tool from the beginning as you were in your previous one, but you’ll see whether the pain is too high.

Run a trial

Switching your primary work tool is not for the faint-hearted, so don’t flip the switch right away – allow for a transition period. Use that time to collect candid feedback and stay objective.

Support your team

As designers start to rely on the new tool completely, it becomes more crucial than ever before to have consideration and empathy for your teammates. Make sure your peers know where to address their questions and provide them with all necessary support and education.

Check the community

There are going to be situations when you don’t have an answer. Don’t struggle! Like many tools, Figma has a wonderful community of users where the majority of answers can be found. They also have a responsive support team, which can help to clarify the unknowns.

The tools we use shape our work

It’s important to recognize that the tools used by one team may not suit the jobs done by another team. And just like any tool, Figma may or may not be the right fit for your team.

It’s a truism that the tools you use will shape the work you do – often in unpredictable ways and with unforeseen consequences. No matter the nature of the work, it’s vital to be thoughtful and careful when planning to switch your primary work tool, and strive to consider ways in which your output might be affected. For us, the benefit of a truly collaborative tool, helping to harmonize the work of designers spread across the globe, was absolutely worth the inevitable headaches caused by embracing change.


Intercom careers

inside-the-design-of-microsoft’s-hololens-2

By Mark Wilson10 minute Read

Carl Ledbetter simply can’t help himself. The cheery director of design at Microsoft, who leads the design of the company’s Xbox game consoles and Hololens mixed reality headsets, is in a particularly good mood today. With a belly full of pumpkin pancakes on a crisp fall day and a grande Starbucks at the ready, he’s sharing, for the first time, how the company built its newest product: the Hololens 2.

He’s also sharing, at last, that it’s actually shipping. Announced in early 2019, nearly a year ago, the first Hololens 2 orders will be delivered today for $3,500.

He’s not supposed to be telling me everything, not yet. I still have four more interviews set up with members of the Hololens team, and big companies like Microsoft carefully plan these narratives for members of the media such as myself, sharing a drip of details that culminates to a grand reveal.

[Photo: Microsoft]

Ledbetter, I suspect, is meant to show me some early prototypes, plant some themes in my brain, tease the difficulty of the design process, and then let the rest of the team deliver the M. Night Shyamalan twists and turns in product development. But Ledbetter is acting like someone who is so excited about the movie he just watched that he can’t help but give away all the spoilers.

[Photo: Microsoft]

In a rapid-fire conversation, we start talking about, well, everything. Did I notice the empty cylinders on the visor? Those are little chimneys for heat dissipation. How about that nondescript rubbery material on the back? A difficult-to-source textured polymer that won’t yank your hair when you remove the device. How about the fit system, which is just a little knob I turn on the back of the headset? It required the engineering team to cut a circle out of a circuit board! Nobody does that! What about that padding around your eyes? See how perfect the diamond-patterned thatching lines up? Check out any speaker at a high-end audio store and see if they can do the same! Did I know the visor was actually carbon fiber—no, no, of course it doesn’t feel like carbon fiber, because it’s coated with a polymer to make it nicer to touch—but it has to be carbon fiber because carbon fiber doesn’t warp or weaken under heat, which could otherwise throw the headset’s laser and mirror optic system just a picometer out of alignment and make you puke into a hologram. (A picometer is a trillionth of a meter, a measurement at a scale several orders of magnitude smaller than a virus.) And the plastic case that wraps around and protects the laser lenses? That’s called the boat! The boat!

[Photo: Microsoft]

I’m captivated, because I don’t know that I’ve ever seen such a seamless combination of hard and soft parts in a piece of electronic hardware, let alone the dozen different materials I can quickly make out with my eye.

None of these individual details matter on their own, of course. It’s the experience that they all add up to. The Hololens 2 weighs just 13 grams, or about half an ounce, lighter than the Hololens 1. But it’s measurably three times more comfortable to wear.

How? That’s the twist.

Building “instinctual interaction”

The first Hololens launched in 2016. For Microsoft, it was a top secret project that, somehow, actually stayed secret until launch. The device was Microsoft’s take on augmented reality, floating holograms in the real world. It was, on one hand, amazing. No one had ever shipped such a device before. On the other, it was awkward in just about every other way.

The UI was confusing. You couldn’t grab or poke the holograms as you’d expect. Instead, you had to awkwardly hold a finger vertically and air tap, a gesture I might best describe as something you’d do playing with a child, using your index finger to speak as King Friday. The field of view was constantly disappointing. Holograms were consistently cropped in your view, destroying the illusion. Hololens 2 addresses these shortcomings with twice the viewable area and better onboard AI, which allows you to grab corners of a hologram to stretch it out—or just snatch the whole thing with your hand.

[Photo: Microsoft]

Another highlight of the new model? Some truly ingenious on-boarding UX. When I first put on the device, hold out my hand, feeling, obviously, a bit silly reaching for air. And that’s when a fluttering hummingbird streaks into the scene. It darts around before landing on me. The hummingbird is the first thing Hololens 2 users will experience when putting on the headset out of the box, and one of those magical moments you hear about in mixed reality. But while I’m giggling at the bird, the system is silently calibrating to recognize my hands.

Microsoft dubs this approach “instinctual interaction” or “instinctual design,” and it wants to build it into every part of the Hololens experience. The idea is to make learning the UX feel natural, rather than instructive, right down to how you put on the new headset (it’s now like donning a baseball cap, thanks to a painstakingly iterated industrial design).

Truthfully, the hardware itself is still the biggest single barrier to the mass realization of mixed reality. The first Hololens was a self-contained headset computer! Amazing! But, wear it for long, and you realized it was front-loaded. It would begin to tip down onto your nose, forcing you to readjust or look through it like a pair of ill-fitting reading glasses.

Microsoft heard all this feedback from its early adopters, and acknowledged that in addition to housing more sensors, more computational power, more battery, and a bigger display, the Hololens 2 design also had to be more comfortable.

“I was like, let me make sure I got this right,” recalls Ledbetter with a laugh. “A lot more stuff, on your head.”

[Photo: Microsoft]

“Technology should not be fashion”

Ledbetter, along with Microsoft technical fellow Alex Kipman, the mastermind behind Microsoft Kinect who you could also call the father of Hololens, both agree that the ultimate incarnation of Hololens would be a pair of glasses that was so thin and light it would be indistinguishable from what you’d buy at LensCrafters. “But the reality is, the technology just isn’t there yet,” says Ledbetter.

Kipman doesn’t want to pretend it is, either. That’s why Hololens 2 doesn’t solve the problem of weight by making you wear a little computer on your belt, like the competing Magic Leap. And it doesn’t give up on the promise of holograms with a smaller, less immersive device, like Google Glass did. The inventor takes a philosophical approach to the headset, arguing that you have to embrace what it is as a tool, not what it could be as an accessory.

“[Hololens is] not made to be fashionable,” Kipman says. “Technology should not be fashion. Fashion is ephemeral and expires. Hardware should be timeless . . . if aliens come to Earth thousands of years from now, do archeology, and find these devices, they should understand . . . that it’s something meaningful.”

So for Hololens 2, Microsoft began its ergonomic research anew. It 3D-scanned 600 individual heads of people with varying age, gender, and race, in an attempt to come up with the thresholds of inions (the protrusions on the back of your head) and foreheads, both of which can vary wildly by person. All of this work informed prototypes for new fit systems, because Hololens couldn’t feasibly be custom-made for different sized heads, like shoes are for feet.

I look at some of those prototypes, sitting on the table in front of me, with Ledbetter. They are lovingly hacked-together devices, with exposed skeletons and foam. They’re so raw that they’re unintentionally stylish. One model has springs, and a complicated ratchet adjustment on its temples to tighten down. Another has webbing with big holes and coral foam—I point out that it looks like a Hololens by Yeezy.

[Photo: Microsoft]

A computer shaped by anatomy

Since the headset was being designed before the actual Hololens 2 laser display was finished, Ledbetter’s team had to be creative in testing the project with low-fi proofs. They would 3D-print long tubes and attach them to the head rigs, to simulate having a tiny window lined up perfectly in your eye. In another approach, the lenses were mocked up in acrylic. Wearing these headsets myself, they pinch at my hair and slice into my skin. But in terms of simulating the optics of the real device, they work as intended.

One other major design issue these prototypes were constructed to test was weight. What the team had realized all too well was that the Hololens 1 was front heavy. But by studying cultures around the world, known for carrying heavy loads in baskets upon their heads, they realized that fixing Hololens might not require cutting weight. What if they just balanced it better?

In an extensive prototyping process, they weighed down these various Hololens contraptions with dumb, dead mass, just to understand what the comfort gains and losses would be with varying designs. Human factors specialists on the team ran electrodes to the back of testers’ necks to test how their bodies responded. What they found was that if Hololens was balanced about 50/50 to the front and back of the head, they could reduce the activation of supportive neck muscles by three.

But from an industrial design perspective, doing that was easier said than done. It required splitting the headset’s single computer vision system into two sections, one in the front, one in the back. To connect them, wiring had to be run through the headband of the device—a span of just a few inches—as opposed to soldering all of the components onto a single circuit board, like you would when designing a phone. Any extra wiring was a serious UX concern, because, as Kipman puts it, in mixed reality, where a device is reading and responding to the movement of your eyes, head, and body at the same time, “the speed of light is too slow.”

[Photo: Microsoft]

And then there were the final concerns: How do you get the Hololens on? How do you take it off? What the team handed on was a design that, after being adjusted one time, could be taken on and off just like a baseball cap—possible through a combination of ergonomics, forgivingly stretchable materials, pivoting components, and that aforementioned back adjustment tool. And as for the laser lenses themselves, those can moved aside, too.

Ledbetter looks at me eagerly as I wear the device.

“Just tilt up the front,” he urges me, miming the motion of sliding sunglasses up on my head above my eyes. So I tentatively push the glasses up. They seem like solid plastic. It seems like I’m about to break a priceless preproduction laser display. And yet, the lenses flip right up like a welding cap, leaving the rest of the Hololens 2 firmly anchored to my head.

“Oh. I don’t know,” I say, suddenly feeling even more self-conscious. “I’m not sure about this one.”

“I know,” says Ledbetter.

“I look cool? Is that what you’re saying?” I offer sarcastically.

[Photo: Microsoft]

“No, not at all! This was the debate!” he laughs back. “Someone mocked up this thing, and as designers we’re like, no, no, that’s really geeky and kind of dumb. But what we found is, this is functionality. Function first, practically first. And what we found out is that flip-up feature, as funny as initially it seems, becomes ingrained in behavior.”

Perhaps it does. Though to my surprise, I personally don’t mind talking to people while they or I am wearing the device. I believe that’s because the best usability decision Ledbetter’s team made was to shave off some of the extra plastic that would have blocked your peripheral view. This creates an opening and naturalism to conversation otherwise lost behind bulkier headsets.

In any case, I’ve only worn the Hololens 2 for about 20 minutes during our chat. Unlike the first model, it’s comfortable enough that you really can forget you’re wearing it. Or at the very least, it’s not always distracting you with its weight and fit.

No, I don’t look cool wearing the Hololens 2, but to be fair, Drake wouldn’t look cool wearing the Hololens 2, either. And he’s really not supposed to.