5-ways-content-can-improve-your-websites?-accessibility-?-and-overall-ux

But the reality is that there are tons of relatively simple things you can do to make your websites more accessible. And they’ll not only make your websites more accessible to the disabled, but also significantly improve your user experiences for everyone.

But first, let’s be clear about our terms:

What’s accessibility?

Here’s accessibility expert Jennison Asuncion’s definition of accessibility:

Accessibility refers to designing and developing user interfaces that everyone, including people with disabilities, can independently consume and interact with.

Note that the stress here doesn’t fall specifically on “people with disabilities,” but everyone. That makes accessibility a natural concern for all of us involved in user experience design, regardless of discipline.

Now, on to the tips!

1. Use unique, meaningful button and link names

A page from Google's Nexus site—the link copy reads

Pretty easy to tell where that link will take me.

I can’t tell you many times I’ve had a mockup or prototype hit my inbox (or Slack) with 16 “learn more,” “read this,” or “see more” links scattered across it — and groaned.

Why? Because it’s horrible for users of screen readers, which typically allow people to skip from link to link on a page, ignoring the content in-between. It’s a highly efficient mode of navigation that helps screen-reader users quickly get where they want to go.

But how easy do you think it is for a blind or low-vision user to figure out which of those “learn more” links leads to the “more” they want to learn about?

And it’s actually not that different for sighted users. Think of all the times you’ve fired up a website knowing exactly what you’re looking for, but not quite sure where to find it. Do you read through all the content? Or do you simply hunt around for the right link?

You might scan through the headings and subheads first — after all, they’re bold and eye-catching — but you still have to live with the cognitive load of connecting those headings to the links below. But links tend to be pretty visually loud too, so wouldn’t it be even easier if every link told you exactly where it would take you without demanding I read all the other copy?

Writing accessible links and button copy

Do

  • Embed links in clear, specific language that tells people where the link will take them and why they might want to go there
  • Indicate if a link will open high-bandwidth media like a PDF or video within the linked text

Don’t

  • Use generic link or button text like “learn more,” “read this,” or “see more”
  • Embed links in even more generic terms like “this,” “this page,” or “here”
  • Link to “naked” URLs (i.e., www.thewebahead.net) unless there’s context that clarifies why that link is there

For more, check out the WebAIM article on links.

2. Add clear, useful alt tags to images

Alt tags also play a key role for screen-reader users on the web. Without these invisible bits of copy, there’s literally no way for low-vision and blind users to understand the content of images, data visualizations, and infographics. With alt tags, we can ensure that no one has to miss the information conveyed in our pie charts, hero photos, and infographics.

Back in the bad old days of black-hat SEO madness, alt tags were abused as just another method of stuffing a page with keywords. Which was horrible for users of screen readers. Just imagine reading through a blog article and hearing:

“CSS layouts let us CSS HTML tables table-based layouts tables web web design code markup floats inline inline-block block W3C web consortium…”

All in a screen reader’s eerily robotic tones.

Because of that abuse, search engines quickly moved to punish such “keyword-stuffers,” freeing alt tags up to do what they were always intended to do: provide useful information.

As with links, the key here is to make your alt tags clear, descriptive, and natural-sounding.

Closeup of blueberries

Simple enough to alt tag appropriately.

With many photos, this is a simple matter of succinctly describing the content of the image: “Closeup of blueberries.”

If your image contains text — and seriously, don’t do that — include the text verbatim in the alt tag.

Let yourself be stupid. Ignore everybody. Trust your gut. Be a jack of all trades. Stay busy.

For this image, your alt tag should include the text verbatim. (Which I created after seeing Tobias Van Schneider’s talk, “Side Projects Are Stupid.”)

If your image contains useful data, such as a bar graph illustrating mobile usage patterns, make sure the alt tag contains the same data: “95% percent of smartphone users view the same website on multiple devices.”

And I can’t pass up this opportunity to briefly rail against infographics: these massive images full of copy are horrible for accessibility, not to mention SEO.

Making graphical content accessible

Do

  1. Write image alt tags that succinctly describe the content of the image
  2. Use keywords/keyphrases that are relevant to your content, but only if they’re actually helpful in describing the image, and stick to one keyword/phrase
  3. Include the key insight of any data visualizations (such as bar graphs, pie charts, etc.)
  4. Build infographics with real HTML text, or a text-based alternate (i.e., a long-form post explaining the data)

Don’t

  1. Keyword-stuff your alt tags
  2. Publish infographics without a text-based alternate

3. Write clear and actionable error messages

A Google Docs error message, which reads:

What are these “megapixels” you speak of!?

There’s a lot to keep in mind when you’re building accessible forms. (As you’ll see in this article on building accessible forms.) But a key element for any content strategist—and your users—is error messaging.

As WebAIM notes, error messages:

Should clearly describe the errors that are present and, optimally, include cues or instructions for resolving them. For example, ‘Course number is not formatted correctly’ is not as helpful as ‘Course number must be a 3 digit number’.

When writing error messages, don’t just describe the problem, but focus on how to fix it. In most cases, you don’t even need to belabor the point that there was an error: just focus on the fix, and do it clearly and succinctly.

All your users, sighted and otherwise, will appreciate the clear guidance on what to do next.

Writing accessible error messages

Do

  1. Indicate that there was a problem (implicitly or explicitly, though implicitly is generally more efficient—see below for more on that)
  2. Explain how to fix it

Don’t

  1. State that there was an error without explaining how to fix it
  2. Refer to an entry as “valid” or “invalid” — this may seem perfectly acceptable in the abstract, since you’re simply stating that an entry doesn’t fit the requirements you’ve defined for a field. But in the concrete, you’re calling someone’s name or gender invalid. And that’s just … well, do I have to explain?

Error message for a last name field that reads

‍However you write error messages, for the love of humanity, don’t do it this way.

Implicit vs. explicit error messaging

As I mentioned above, all error messages should do two things:

  1. State that there was an error
  2. Explain how to fix it

But you can easily achieve both goals in one message by implying that there was an error. For example, we could state an error message in the following ways:

  1. Explicitly, without direction: Course number formatting is incorrect.
  2. Explicitly, with direction:Course number formatting is incorrect. Please enter a 3-digit number.
  3. Implicitly: Please enter a 3-digit course number.

Option 1 explicitly states that there’s an error, but doesn’t make clear how to fix it. Option 2 is also explicit, but adds a way to fix the problem, so it’s an improvement. Best of all is 3, which implies that there was a problem by explaining how to fix it.

4. Write clear, descriptive headings

Just as a screen reader allows people to skip from link to link, they can also skip between headings, ignoring the copy between.

Now, imagine that experience with the majority of websites out there. Do you think you could clearly infer the topic of every section of a given web page without referencing the body copy or links?

The Square website, with body copy removed.

Square’s homepage, stripped down to headlines.

Personally, my answer’s “sometimes?” To quickly run through the Square page above:

  • “Start selling today” — super clear. I get that this is where I’d get started if I wanted to.
  • “Start, run, and grow with Square” — clear … ish. Clarifying the object — your business — would’ve helped a lot here. Without context, it’s not obvious what you’re starting, running, or growing.
  • “Accept every way your customers want to pay” — Clear … at least until I get to “Stand.” What the hell’s that?

Write clearer headlines and subheadings

As an exercise, I’d suggest turning off all your non-headline copy layers (if you’re using a desktop app like Sketch or Photoshop) or briefly turn your

tags to your page background color (if you’re using Webflow).

Now read through all your H tags, asking yourself with each: am I being clear enough with this headline alone?

If your answer’s no, it might be time for a rewrite.

Sometimes, you have to embrace length

Note that aiming for clarity in headlines often means using more words. I realize that might run counter to your impulse to create “clean” websites, but it’s worth asking yourself:

Is it more important that this site look clean, or that it give people all the info they need?

5. Optimize your form content

Two form designs, one with labels above the fields, the other with labels within the fields

From Andrew Coyle’s excellent article, “Design Better Forms.”

Forms may not be sexy, but they are the heart of product design, and the right content can make them vastly more usable — and accessible — for everyone. Here’s a few ways to do that:

Do

  • Indicate which fields are optional in the form label (so screen readers will transmit that information in-line). I know we’re more used to marking required fields, but you should really only be using required fields, so there will typically be fewer optional fields to mark, and hence less clutter.
  • Make button copy specific to the action taken (don’t use “submit” — unless that’s actually what a person is doing, which is often the case with literary magazines and blogs that take external contributions).
  • Display basic helpful content. E.g., if a password has to be 9 characters long, use an uppercase letter, and a special character, tell people that! And don’t hide it in a tooltip.
  • Group related information. You’ve seen the standards: email and password, physical address, credit card info, etc. If it all comes together to form a greater concept, group it.

Don’t

  • Use in-field / placeholder labels, unless they translate into a persistent label on click (rather than disappearing), a common technique on Google sites.

A more accessible web is a better web for all

Making your website more accessible to the disabled has a fringe benefit: It can actually improve everyone’s experience of your websites.

After all, a screen reader skipping from heading to heading, or link to link, behaves a lot like we all do the on the web: not consuming everything, but scanning for the specific info we need.

If you’d like to learn more about accessibility, look for an accessibility meetup group in your area, check out The Accessibility Project, and follow Jennison on Twitter.

improve-your-css-with-these-5-principles


twitter logo
github logo
・5 min read

Writing CSS is really simple and straightforward, so why is there a need for principles and best-practices while writing CSS?

As the project scope increases and as the number of people working on the project increases, the problems become more and more apparent and can cause serious issues down the line. Fixing issues may become harder, duplicated code, complex override chains and use of !important, leftover / unused code (removed elements or features), code that is hard to read, etc.

Writing CSS at a professional level will make the CSS code more maintainable, extensible, understandable and cleaner. We’re going to look at the five simple and very effective principles that will take your CSS to the next level.



Naming principle

“There are only two hard things in Computer Science: cache invalidation and naming things.” — Phil Karlton

Properly naming and structuring your CSS selectors is the first step to making your CSS more readable, structured and cleaner. Establishing rules and constraints in your naming convention makes your code standardized, robust and easier to understand.

This is why concepts like BEM (Block-Element-Modifier), SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object Oriented CSS) are popular among many frontend developers.



Low specificity principle

Overriding CSS properties is very useful, but things can go out of hand pretty quickly on more complex projects. Overriding chains can get really long and complex, you might be forced to use !important to solve the specificity issue and you could get really easily lost when debugging or adding new features.

/* Low-specificity selector */
.card {}

/* High-specificity selectors */
.card .title {}

.blog-list .card img {}

.blog-list .card.featured .title {}

#js-blog-list .blog-list .card img {}



Browser and specificity

One of the benefits of following the low specificity principle is performance. Browsers parse the CSS from right to left.

Let’s take a look at the following example:

Browsers parse the selector like this:

  1. Find all img elements on the page
  2. Keep selected elements that are the descendants of .card class
  3. Keep selected elements that are the descendant of .blog-list class

You can see how high-specificity selectors impact performance, especially when we need to globally select generic elements like div, img, li, etc.



Using the same level of specificity

By using low specificity CSS class selectors in combination with BEM or one of the other naming principles mentioned in the previous section, we can create a performant, flexible and understandable code.

Why use CSS classes? We want to keep the same level of specificity, stay flexible and be able to target multiple elements. Element selectors and id selectors do not offer the flexibility that we need.

Let’s rewrite our previous example using BEM and keeping specificity low.

/* Low-specificity selector */
.card {}

/* Fixed high-specificity selectors */
.card__title {}

.blogList__image {}

.blogList__title--featured {}

.blogList__img--special {}

You can see how these selectors are simple, understandable and can be easily overridden and extended if needed. And by keeping them low-level (a single class), we are guaranteed optimal performance and flexibility.



DRY Principle

DRY (Don’t repeat yourself) principle can be also applied to CSS. Duplicated code in CSS can cause code bloat, unnecessary overrides, reduce maintainability, etc. This issue can be fixed by structuring the code appropriately and having high-quality documentation.

Storybook is a great free tool that enables you to create an overview of available frontend components and write high-quality documentation.

/* Without DRY Princple */
.warningStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eba834;
}

.errorStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eb3d34;
}

.form-errorStatus {
  padding: 0.5rem 0 0 0;
  font-weight: bold;
  color: #eb3d34;
}

Let’s refactor the code so it follows the DRY principle.

/* With DRY Principle */
.status {
  padding: 0.5rem;
  font-weight: bold;
}

.status--warning {
  color: #eba834;
}

.status--error {
  color: #eb3d34;
}

.form__status {
  padding: 0.5rem 0 0 0;
}



Single responsibility principle

By using the single responsibility principle in our CSS, we can ensure that our CSS classes are easily extended and overriden. Let’s take a look at the following example.

.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

We can see that if we want to extend .button class with .button--secondary, we are doing lots of overrides to achieve what we need, when we only want to apply a different background color and keep the default styles.

The problem is that our .button class is having several roles:

  • Sets layout (padding)
  • Sets typography (font-size,font-weight)
  • Sets presentation (color,background-color, border-radius)

this makes our CSS classes very hard to extend and combine with other CSS classes. By keeping this in mind, let’s use BEM and OOCSS to improve our CSS.

/* Shared styles */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Style extensions */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}

We have broken down our button styles into several classes that can be used to extend the base button class. We can optionally apply the modifiers and add new ones as the design changes or new elements are being added.



Open/Close principle

software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.

We’ve already used the open/close principle in the previous examples. All new features and options need to be added by extension. Let’s take a look at this example.


.card {
  padding: 1rem;
}

.blog-list .card {
  padding: 0.5em 1rem;
}

The .blog-list .card selector has few potential issues:

  • Some styles can be applied only if the .card element is a child of .blog-list element.
  • Styles are forcibly applied to the .card element if placed inside the .blog-list element, which can produce unexpected results and unecessary overrides.

Let’s rewrite the previous example:

.card {
  padding: 1rem;
}

.blogList__card {
  padding: 0.5em 1rem;
}

We’ve fixed the issue by having a single class selector. With this selector, we can avoid unexpected effects and there are no conditional nested styles.



Conclusion

We’ve seen how by applying these few simple principles we have significantly improved the way we write CSS:

  • Standardized naming and structure, and improved readability by using BEM, OCSS, etc.
  • Improved performance and structure by using low-specificity selectors.
  • Reduced code bloat and improved code quality with DRY principle
  • Flexibility and maintainability by using open/close principle
  • etc.

Thank you for taking the time to read this post. If you’ve found this useful, please give it a ❤️ or 🦄, share and comment.

One last thing:

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It’s free, open source, devoted to the open web, and will never have popups or a pay wall.

Get Started Now


adrianbdesigns profile

Adrian Bece

React, Frontend, Magento 2 certified developer. Magento PWA Studio contributor. Rock and metal music fan. Reads Dune, sci-fi novels and Calvin & Hobbes. Creates amazing interfaces @ prototyp.digital

Classic DEV Post from Dec 12 ’18

improve-remote-collaboration:-5-techniques-for-ux-designers

Our friends at Miro — a visual collaboration platform — are experts when it comes to managing distributed teams. Today the Miro team shares five high-impact processes to improve collaboration and communication when it comes to distributed or remote UX designers.

Leading tech companies are the first to test out innovative methods of work, so it’s no surprise that they’re also beginning to be more distributed. This approach allows them to attract the best talent worldwide while reducing costs.

However, being distributed can create new challenges, especially for UX design and research teams who often rely on rituals and methods that are hard to replicate online — i.e. customer journey mapping and clustering research findings on a whiteboard to syncing with product and development teams.

To help UX designers overcome communication barriers that arise from working within a distributed team, we’re digging deep into how other leading tech companies are solving these problems and making it work.

1. Empathize with your teammates to build trust

A big part of achieving alignment on a remote team is thinking about how different cultures work, and encouraging teammates to ask questions and be proactive communicators. Supporting your team and understanding their communication style will help keep everyone on the same page.

A good way to find out what works best for each individual is to ask the team to create personal manifestos. Each person outlines their preferred communication tools, ways to give and receive feedback, and even pet peeves. This simple exercise can encourage everyone to be more open and vulnerable, and gives teammates some context for understanding each other.

Erin Casali, Design Principal at Automattic:

“Certain country cultures create different expectations, and certain languages, when translated to English, might subtly change the tone. In some cultures, discussions tend to be very dry and factual; short sentences, sharp language, no acknowledgment of context beyond the specific answer. For someone who comes from a different culture, this can be read as very distant, detached, even rude or impolite; but it’s just a cultural difference.”

2. Create rituals & establish a source of truth

Distributed teams don’t have the opportunity to share quick updates by a watercooler or during lunch. And if they work in different timezones, it’s generally harder to sync and react quickly if there are any blockers. Distributed teams are more prone to working in silos and struggling with miscommunication because some real-life conversations can naturally happen in different hubs. However, it’s hard to communicate the outcomes of these conversations to people in different locations. Establish regular rituals for the whole team to share updates, insights, and concerns and document anything that happens at the meeting or even outside of it when it affects the whole team.

Prianka Rayamajhi, Lead Product Designer at Pinterest:

“We have our regular rituals like grooming sessions and retros. Also, having a source of truth or a living history of its accomplishments is vital for a team. Having some sort of outline of your team’s process is really going to give your team purpose. I think it’s important to start mapping out those sorts of processes.”

3. Protect your time from empty, actionless meetings

It’s okay to leave a meeting if you don’t know why you’re there within the first five minutes. Another best practice is agreeing that all the meeting hosts must have an agenda when they are sending invites — that way, everyone has a chance to prepare for the meeting and spend time efficiently. Some meetings are hard or impossible to eliminate, so another good tactic is to block time on your calendar for focused work — alone or together with your team.

Ben Holland-Arlen, Senior UX Designer at BOLD:

“I’m sure many people have this calendar problem where their life is in 30-minute chunks all day long, with a 30-minute lunch. If me and my team are all working on the same problem, wherever we are – we’ll turn on the camera, have a quick discussion for 20-30 minutes, then keep the camera on for a few hours while we’re working. It’s been amazing because it feels a lot more like when you’re working side by side. It’s so powerful and so simple.”

4. Mimic the in-person collaborative experience

A lot of people working within distributed teams experience a fear of missing out. They wish they had a mentor or a friendly chat with a teammate who is remote or located in another hub. It’s harder for distributed teams to bond, cheer each other on, or learn from each other, so setting some time for mentorship calls, ‘Friday wins’ meetings, our even virtual happy hours can be a good idea.

Summer Kim, Head of Research at WhatsApp:

“It is important to have local leadership for your team in the remote office. And also encourage and help people to find great mentors (it could be more than one or two) in the local office as well as the headquarters. I’ve had many mentors, coaches, and advisors throughout my career, and I think it is particularly important for those who are working from remote offices.”

Exchanging tools, techniques, and insights is critical for improving any team’s productivity, but it’s especially important to be proactive about it in distributed teams. In general, it’s hard for information to travel across several hubs and timezones.

When you’re having one of your team rituals, make sure key insights are recorded in a central hub that every team member can refer to synchronously or asynchronously. Encourage comments and questions. Capturing the conversations that happen in remote meetings is key to keeping everyone aligned and moving forward as one team.

Jessica Drizin, Senior UX Researcher at Upwork:

“A lot of our job is empowering the design and product teams to conduct their research. We started implementing a weekly research review, which is open to researchers and non-researchers, so designers and product managers that want to take more ownership of their research can join in. We listen to what problems they’re working on, any methodology that they propose, and we offer advice around the best methodology, or even if research is warranted at that stage.”

Conclusion

At the end of the day, you can’t avoid the challenges that arise from working within a distributed team. However, you can lean on the tactics that other successful companies use regularly to make collaboration work effectively for them. Of course, don’t shy away from tweaking these processes as needed, and make an effort to customize them so they work for your specific team. Good luck and happy collaborating!

Ready to level up your remote collaboration and better connect your product teams? Join us and the fine folks from Slack, Atlassian, LinkedIn, Dribbble, and more at Distributed 2019, a free virtual summit for product teams, hosted by Miro.


Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

Learning about type doesn’t need to be daunting.

Dave Smyth

Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice-looking fonts and hoping for the best.

Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.

Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?

There’s no quick fix, but here are 20 top resources for web typography today.

The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.

Practical Typograph

A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.

The Elements of Typographic Style Applied to the Web

A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.

Typewolf

One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.

Rafal Tomal

Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.

Better Web Type

A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.

OpenType Features in CSS

OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.

These tools can help you decide and improve on typographical choices.

Modular Scale

If you want your font sizes to feel coherent, rather than random, a scale can help.

Tanaguru Contrast Finder

To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.

Font Playground

This tool lets you experiment with variable fonts and their different feature sets.

Font Style Matcher

If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.

There’s more to life than Adobe Fonts, Google Fonts and Monotype.

Use & Modify

A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.

Open Foundry

This is another collection of high-quality open-source fonts.

Font Stand

I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.

Typewolf

I know, this was mentioned above…but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration — a fantastic resource.

Typespiration

Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.

Font Combinations Library

A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.

FontPair

Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif serif, sans-serif serif, etc).

Typ.io

What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.

Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.

These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.

Axis Praxis

Variable Fonts


There are lots of resources to get you started here, wherever you are on your typographical journey. Type on the web has many nuances and CSS developments mean there are always new things to learn.

If there are other resources you’ve found to be particularly useful, I’d love to hear about them in the responses.

improve-customer-experience-with-scenario-analysis

Imagine this situation. Your company has asked you to investigate and recommend a new marketing technology. For the sake of conversation, let’s say a podcast hosting platform that will integrate with your website. You complete some initial research, talk with some colleagues, reach out to your LinkedIn network and identify a list of potential providers and some basic cost information. You make your recommendations and your leadership team gives you the green light to complete the due diligence and make a final recommendation. 

After the initial review, you narrow the list down to a select group you want to learn more about. You go to each provider’s website but there’s no real way to interact with your shortlist of providers. You send a few email messages to general mailboxes but the response is slow or not at all. There are no phone numbers on the sites or any chat options for the providers on your short list. Eventually, after more searching, you finally find some phone numbers. You call up the providers, but you cannot reach a person. In one case, there is voicemail and you leave a message. In the other, the message tells you the representative is away and will not be responding to voice mail for at least a week. You call back and are informed there’s no one else to talk with. 

In the age of the customer and the engagement economy, successful companies are customer-centric and proactive in how they address the customer experience. Today customer experience is a competitive differentiator for every company. A Gartner Customer Experience (CX) study declares: “Customer experience is the new marketing battlefront. More than two-thirds of marketers responding in the study indicated that their companies compete mostly on the basis of CX. And in two years’ time, 81% say they expect to be competing mostly or completely on the basis of CX.”  A study by VisionCritical claims that by 2020, the customer experience will overtake price and product quality as the key brand differentiator. 

Think about the above situation: The prospective buyer is frustrated. The prospective provider has potentially lost a long-term customer. Most people once they select a platform and complete the integration are unlikely to switch. As a potential provider, had you employed scenario analysis you might have been able to anticipate these types of experiences and put processes in place to avoid them. 

Are you ready for customer experience to be your differentiator? If so, then one valuable step is to tap the power of scenario analysis. 

Scenarios describe a set of possible events. They are powerful tools for understanding potential business situations, such as customer experience, and then developing appropriate strategies for each of them. The value of scenario creation is that it allows you to consider a range of possible outcomes and drivers of change. This is extremely helpful for improving customer experience. If you can anticipate a potential customer experience problem, you can modify your business process before the problem occurs and costs you a customer.

Scenario analysis focuses on analyzing possible future events. The use of scenarios by companies is not new. Companies have been employing the concept of scenario analysis since the 1970s, and it is an essential capability for any company invested in and aspiring to achieve agility. 

The fundamental ingredient for scenario analysis – whether to anticipate, plan and improve customer experience or some other aspect of the organization – is developing the scenarios. Creating scenarios is both art and science. The science side of the process requires data and timing information. Scenarios to support real-time marketing and customer experience can be created based on the answers to the following types of questions. 

  • What data can change regarding customers, the market, and the competition? By how much?
  • What data are predictive of a key prospect or customer behavior?
  • What data are essential for effectively engaging with customers and prospects?
  • What data are required to support a consistent cross-channel customer experience?

Imagination is all you really need to use scenario analysis. The goal is to create as many different combinations of potential events as you can conceive. Then, by analyzing each potential scenario, you can assess its likeliness to occur and decide what, if any, proactive action is necessary. Join my upcoming session at MarTech East in Boston to learn more about the principles of and process for creating and analyzing your scenarios, with a focus on using this approach to make the customer experience one of your competitive differentiators. 

More about the MarTech Conference


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

VisionEdge Marketing, founded in 1999, and is recognized as one of the pioneers and authorities in the Marketing Performance Management (MPM) discipline. The company specializes in helping companies apply data, metrics and proven best-in-class practices to accelerate growth, create customer value and improve performance.
Laura and VisionEdge Marketing are all about making marketing an engine of growth for organizations. Martechexec selected Laura as one of the top 50 women in marketing technology. Laura is honored to be among the Top 20 Women in Business according to the Sales Lead Management Association. Engagio identified Laura among the top marketing operations leaders to know. Laura has served on the University of Texas McCombs School of Business Masters of Marketing Science Advisory Board.




want-to-improve-your-marketing-operations?-make-everyone-on-the-team-a-coach

Marketing operations are the driving force behind a company’s marketing technology implementations and processes. Successfully managing complex marketing operations efforts takes a capable, agile and tech-savvy team, which is difficult to build and maintain in today’s constantly evolving martech space.

“There are so many different systems and processes happening concurrently that it’s easy for critical things to go undone or breaks in the systems to go unnoticed,” said Kimi Corrigan, head of marketing operations for Duo Security at Cisco, “There is no room for ambiguity around responsibilities or communications in this function.”

Corrigan said she wants her team to always feel ownership over their work while, at the same time, knowing they have her full-support when needed. To keep her marketing ops team operating at full tilt, Corrigan centers her management style on coaching versus managing.

Next month, Corrigan will do a deep dive into how she leads Duo’s marketing ops team during her “How to Organize and Coach Outstanding Marketing Operations Teams” talk at our MarTech Conference in Boston. In advance of her session, Corrigan offered insights into her managing style, how she onboards new employees and why radical candor is a must.

Make everyone a coach

“Marketing operations teams are tasked with a unique and vast set of responsibilities. People on my team have such a wide range of skills that they need to apply in many different ways,” said Corrigan, “Continually coaching alongside of them as they navigate this wide breadth of projects and interactions tends to yield great results rather than just managing in a traditional sense.”

Corrigan makes sure everyone on her team shares coaching responsibilities.

“I work to coach each person on my team as it relates to their responsibilities and skill-set, and encourage each of them to own coaching those on our team whenever they have an opportunity.”

In addition to coaching other members of the marketing ops team, her staff is also encouraged to coach others they may be working with on cross-functional projects.

“The more we all learn, the more we all win. When this coaching mindset is known to be in practice, these interactions don’t come off as telling others what to do, but as let me help you, and also, please help me.”

Comprehensive onboarding for new employees

As part of her coaching methodology, everyone on Corrigan’s team is involved with the onboarding process for new employees.

“Our team uses a 12-week onboarding process with specific systems, tasks and goals laid out week-to-week. When we have a new team member, we clone our onboarding template and spend time customizing it based on the specific role and experience.”

New staff members are introduced to different systems and meet with cross-functional teams and are also required to take initiative and schedule time with employees — both within marketing ops and external teams.

“From the beginning, I believe it’s important for those new to the team to take ownership of their day-to-day and contributions to the organization,” said Corrigan.

Leading with radical candor

For Corrigan, a key to successfully managing a team is being able to give and receive honest feedback.

“Radical candor can be hard to deliver sometimes, but the more you practice it, the safer it becomes,” said Corrigan, “The first few times you share this feedback, you may see fear or defensiveness. But once you coach them through why they are getting the feedback — what you and their teammates are going to do to help them work through it, and what the expectations are — you will see them begin to welcome open and honest conversations in both directions.”

She said she practices this code of honesty with her team and encourages them to practice it as well — both with her and other staff.

“Set the expectation that their team and work is a safe place to try, fail, succeed, try again, share and celebrate.”

More about the MarTech Conference



About The Author

17-tips-to-improve-your-design-skills

As a designer you have to constantly work on your design skills. This is the only way to stay relevant. Improving your design skills will also help you attract new clients, or employers, and create new work opportunities. These 5 tips will help you with it. Learn them, use them, improve your design skills and become a better designer.

17 Tips to Improve Your Design Skills and Become a Better Designer Part 1.

Learn about something different

There are two general ways to improve your design skills. One is by getting better at what you already know. You are already quite good in design. Now, getting better doesn’t require that much effort and time as you had to put in in the beginning. Thanks to this, this way is the easier, safer and more comfortable option to improve your design skills.

Unfortunately, there is always some ceiling, or limit, to how much you can get. Sooner or later, you will hit this ceiling. When this happens, any progress you can make by improving what you know will be very small. At worst, paradoxically, you will not make any progress at all. Your design skills will be so polished addition training will have no effect.

Cross the borders of your expertise

Fortunately, there is a way to overcome this plateau. The solution is by trying something different. You have to start experimenting with areas where you are not that good, or where you have no experience at all. Whatever your area of expertise is, take that risk and try something where you are a beginner.

For example, if you are very good at web design, start learning about print design. Or, take a look at user experience design. Another, more distant, option can be game design. These experiments may seem like a waste of your time. Yet, in the majority of cases, they really work.

When you step into different, less or more distant, area not only will you learn new knowledge. You will also be able to look at what you know from different perspective, from different angle. Thanks to this, you will be able to come up with more, and more innovative, ideas.

Another reason this works is that, at least in design, there are universal principles you can apply across different fields. This is why experimenting in related areas of your expertise is not a waste of time. Principles you learn in one area you can transfer into another.

What’s optional here is necessary there

For example, let’s say you give it a shot and start learning about print design, aside to web design being your main trade. Print design has a lot in common with web design. You have to learn about, and understand, the theory of grid, layouts, composition, colors, typography, etc.

The thing is that there are some nuances you will learn in print design and not in web design, or you will not focus on them as much as you would otherwise. There are many web designers who know only a little about typography. Leading, kerning, x-height, cap and similar terms say nothing to them. In web deign, this is not a big problem.

In print, understanding all these terms is not optional. It is a necessity. If you don’t know these terms, you are screwed. The same applies to graphic design. Anyone can call himself, and work as, web designer just because he knows how to create decent layout with Bootstrap.

In graphic design, you need to really understand the theory of grid, layout and composition. What may be optional in web design is often necessary in graphic design, or print. Now you know why many web designers have a hard time getting started in other design disciplines. They skipped the, back then, optional stuff.

Crossing the borders of your expertise is not a waste of time. Nor is it detrimental to your design skills, rather the opposite. These experiments are just another way to gain new knowledge you can apply in the area of your expertise later. It doesn’t matter if it is graphic, print, web or game design.

All these, and other areas, are still parts of the same discipline, design. This means that what you learn in one of these areas you can often apply in other areas as well. What’s more, these learning experiments can actually help you become a better designer. They will help you see things from different perspectives and angles.

You will be able to consider elements others would not even think about. You will also be able to step in others’ shoes more easily. This is also why it is beneficial for designers to take at least few lessons in programming, and the other way around. It helps to see the same thing from different angles, as a designer and as a programmer.

So, don’t restrict yourself only to your main area of expertise. Experiment, learn about other areas and let it shape the way you think and design. The best places to start with are already mentioned print, graphic, user experience, game and web design. Another great sources of knowledge are psychology and sociology.

After that? If you nailed all these areas? Whatever you want. Be it cooking, music composition, history, economy, mathematics, biology, programming. There is something useful you can learn in every area. Forget any prejudices, keep your mind open and be like a sponge.

Experiment

Stepping outside the area of your expertise may still seem to be too risky. What if you want to improve your design skills, but you want to play it safe and stick to what you know? Or, at least minimize the risk? Well, there are two important things you have to understand. First, design is about taking risks.

Design is about creating ideas and shaping things in your own way. Design is about solving problems in a way that is specific to you. If you don’t like this idea, get used to it. The sooner the better. The second thing is that you can develop you own style only through, often relentless, experimentation and willingness to be different.

Think about all great designers, artists, etc. you know, or find some “top X” list. All these people developed their own style. This is why, when you see one of their works, you can recognize the author. The only way to achieve this is through experimentation. You have to be willing to play with different ideas to see what you like and what you don’t like.

So, open Sketch, Photoshop, Illustrator, VS Code, Sublime Text or grab a pen and paper. Use whatever tool you like to use to design. Next, experiment. Go crazy. Shadows, flat design, brutalism … Take different concepts and mix them. Or, take one concept and subtract something, or add something new. Forget any restrictions and boundaries.

Forget perfection, for now

When you experiment, don’t put too much pressure on yourself. Don’t try to make everything look and feel perfect. Remember that everything you create is only for you. No one else has to see any of it, unless you want it. This is a safe space. A place where you can unleash your creativity and playfulness.

Also, don’t feel bad or unproductive. Remember that all these experiments have a clear goal. You are not doing it just to “kill time”. You do this to improve your design skills. Remember that trying new things and relying on your knowledge of design allows you to develop with your own unique style.

This, in turn, will help you set yourself apart. Also, it will help you discover novel and innovative solutions to known problems. You can use these solutions in your work. This will help you deliver more value to your clients, employer and teammates. This can help you establish yourself as the “go-to” person for innovative designs.

Fail fast, fail often

There’s a saying, in the world of web startups: “Fail fast, fail often”. In other words, it is only by trying out a lot of experiments you can find out works best. The same applies to design. You have to constantly try new and different ideas and test in practice in order to find those that work and those that don’t.

Unfortunately, this approach is not as widespread among designers as it is on the startup scene. When something becomes trend, 99% of designers immediately start filling their portfolios with designs built on that trend. Only few will look beyond the trend, mix it, skew it, or change it in some way. The majority plays it safe.

What you should do instead, not only to improve your design skills, but also to improve your visibility and uniqueness, is going the other direction. When new trend enters the scene, don’t just follow. Instead, experiment with it. Add, subtract, reduce, skew, mix, transform, mock. Take that trend, unleash your creativity, and take it further.

Try different media, techniques and styles

Aside to experimenting with trends, there is another great, and relatively safe, way to improve your design skills. Experiment with different media, techniques and styles. If you always use the same typefaces try different. The same applies to colors, styles and layouts. Stop doing it the old. Mix things up and try something new.

Since this is your personal laboratory, don’t be afraid to break some conventions, or all of them. Remember, this is about experimenting, it is about trying and seeing what works. So, feel free to break rules and see what happens. Try a crazy new typeface. Play with 3D. Use illustration instead photography. Use twice as much of whitespace.

Throw all conventions, guidelines and rules out the window

Take all conventions, guidelines and rules and throw them out the window and see what happens. Most of the time, your experiment will probably fail. That is okay. There is no such a thing as a complete failure. Everything is learning opportunity. When experiment fails, you know what doesn’t work. Otherwise, you know what works. In both cases, you gain.

When you think about it, you can’t really loose. If experiment fails, you learn. If experiment succeeds, you learn. You are always winner. What’s more, the very process of experimenting will help you free up your mind. It will make it easier for you to see which parts of your design skills need improving, and why.

Lastly, experimenting is good not just for improving your design skills. It can also help you become more independent. It will help you learn how to take risk, take initiative and act on your own. You will no longer be afraid of taking on challenging project. You will know that you can handle them. You will know that can find a solution through trial and error.

If you are looking for some way to boost your confidence, this might be it. The best part? It is not the “fake it til you make it” type of confidence. This is based on your previous, rock-solid, experience. So, give it a try. And, remember, there is no such a thing as complete failure. Whether experiment fails or succeeds, you learn, you win.

Work on side projects

Whether you work for someone, as a freelancer or you have design agency you are probably doing the same thing over and over again. This is also why your design skills will soon stop improving. By now, you know the value of learning something new and experimenting. The question is, how can you make this easier?

The answer is simple. Set aside some time and start working on side projects. You can just decide to experiment and tinker or try to learn something else. Another, easier, way to approach this is by setting a specific goal for yourself. Or, create a specific project for yourself that will serve as a sandbox for your experiments.

You want to experiment with typefaces or grid layouts? Great. Create some web design side projects. Or, you can build some app or design a magazine cover. Whatever it is, the important thing is that it will help you explore the areas you want to experiment with. The best is if it is something personal to you, a passion project.

Why is this approach better? When you experiment with, or learn about, a single idea it can seem boring and repetitive. Think about the majority of things you have to learn about as school. Did you really enjoy any of them? Probably not. Don’t make the same mistake your teachers did. Don’t turn the work you love into a thing you hate.

Instead, use side project to make it a game. Gamify your learning process, literally. Decide what you want to learn, practice or experiment with. For example, learning about user experience design. Then, set a clear goal for yourself. For example, design an app that will feel intuitive, user-friendly and simply lovable.

However, don’t think about it is a fun. Instead, think about it as a real project for a real client. You can even create a brief to make it more realistic. Who knows, you may one day actually get a chance to work on such a project. Then, you will think back to that side project you once did for yourself and you will thank yourself for it.

One more thing, give yourself a deadline. It is easy to start something and work on it forever. Don’t follow this path. Instead, give yourself a serious deadline. In the end, every real project has a deadline. So, apply the same logic to your side projects. Every you start must have a clear deadline. Otherwise, don’t start it.

This will not only help you improve your design skills, by learning new things. It will also help you learn the other side of your design job, being punctual. By the way, did you know that Unsplash and Slack started as side projects? Who knows, maybe one of your side projects will also get traction and become something bigger. So, give it a try.

Master your tools

Tools of the trade are one of the last things you should focus on when you want to improve your design skills. Why? Tools themselves will never make you a better designer. You will not take your design skills to the next level just because you start using Photoshop, Sketch, Figma, etc. Although, something like this would be really good.

There are two main things that determine the quality of your work. The first one is your design skills. The second is how well you know the tool you work with. This is why premature focus on tools is a waste of time. If your design skills are not honed enough, no tool will help you create great designs.

That being said, design skills are useless if you need half an hour just to setup your editor. This is also why many designers can make any progress. They are constantly chasing that new shiny tool, instead of sticking to one and mastering it. There is nothing wrong with trying different tools to find the one you will like working with.

However, that doesn’t mean you change you tools as often as you change your socks, or even more often. Doing so may help you with FOMO, but that’s about all it will do for you. So, stop chasing every shiny tool that comes around. Instead, find one (or two) that fits your needs and stick to it. Then, take the time and master it.

Learn all its shortcuts and how to use it effectively. The time you spent on learning is time you save during the work. Remember, the quality of your work is primarily determined by the level of your design skills. However, the level at how well you know your tools determines how fast can you work.

You can be the best designer in the World, but if you work with tool you don’t know it will limit you. It will probably not make your designs worse. However, it will slow you down, significantly. This might be just as bad as producing bad work. Don’t allow this. Find the tool that suits your needs, stick to it and master it.

Practice daily

You can get better only in things you do often, preferably every day. So, if you really want to improve your design skills, you should work on them every day. This may seem like a big investment in terms of both, time and effort. However, the dividends you will get in the future are definitely worth it.

What’s more, the more of your time and effort you invest the higher the dividends will be. So, set aside at least a little bit of time every day to work on your design skills. Before you do that, two things. First, work only on things you don’t know well or at all. Don’t waste your time on things you’ve already mastered.

Second, make it a deliberate practice. Don’t multitask. Don’t half-ass your practice. Turn off all notifications, close and remove everything you don’t need for your practice session. Focus solely on the task at hand and ignore everything else. Remember, practice doesn’t make perfect. Only perfect practice makes perfect.

Use Pomodoro technique

One easy way to start with this is by using Pomodoro technique. First, choose a subject you want to improve or learn. Second, get a timer and set it to 25 minutes. Third, start. Work on that subject, and your design skills, until the timer rings. No distractions or multitasking. Focus solely on your practice.

When the timer rings, stop your work and take a break, usually about five minutes long. During this break don’t immediately jump on social media or immerse yourself in an ocean of distractions, or other things. Just give your brain a moment to rest and replenish energy. When the break is over, you can either get back to practice or do something else.

If you decide to get back to practice, follow the same steps, i.e. 25 minutes of work followed by five minutes of rest. When you repeat these steps four times, or do four pomodoros, take a longer break before you start another, fifth, session. This break is usually around 15-30 minutes.

You can repeat this process as long as you want or as long as you can fully focus on your practice. Remember, it is only deliberate perfect practice what counts. If you can no longer fully focus, stop. Don’t waste your time and don’t burn yourself out. Call it a day and try it again tomorrow.

Epilogue: How to improve your design skills

This is it for today. Now it is time for you turn. Take what you’ve learned today and apply it. That is the only way you can start improving your design skills. Reading about, and learning, tips is the beginning. You also have to take the next step and apply what you’ve learned so far. Otherwise, you will never make any progress.

The question is, what will you start with? Will you cross the borders of your expertise and learn about something, more or less, different? Maye you want to take a little bit safer road and start experimenting with ideas, techniques and styles. Or, you can gamify it and start working on some side project.

Maybe your design skills are quite good and you need to learn more about the tool(s) you are using at work. Whatever it is, promise to yourself that you will dedicate at least a few minutes every day to focused and deliberate practice. In the end, you get better only at what you do often.

If you liked this article, then please consider subscribing.

can-we-improve-products-by-making-them-less-efficient?-(i-think-so!)

I can’t even remember when I last visited an art exhibition, so I was wondering if I can still enjoy abstract paintings and sculptures. It’s easy to see abstract art as its material presence (usually cheap materials) when you can’t assign meaning to it. So I went to an art museum today: the Hamburger Bahnhof.

It’s here in Berlin, a big former railway station from where the trains to Hamburg used to depart. It has a monumental entrance. And there’s a lot of abstract art on display.

Hamburger Bahnhof around 1850. Today there’s a huge departure hall behind the main building, now used for exhibitions

I’d been looking forward to the visit after having to postpone going there a few times. It was a hot day today, which made the trip on the S-Bahn feel long, so I treated myself with a cold drink at a cafe on the way there. I liked being a tourist in my hometown.

When I entered the first exhibition room, one of many big spaces, this triptych caught my attention:

Three blinds covering three windows

So yeah, for a second, I thought the blinds were part of the exhibition of wall-mounted sculptures. I created some more readymades:

A steel cube frame in the corner of a room
Soll Lewitt—OPEN CUBE/CORNER PIECE, 1965. Sorry Soll, I’m an idiot.

Confusion aside, I found the work at the museum amazing. Especially Jack Whitten’s work took me to another world. It made me appreciate abstract art in a whole new way. It would take a whole post to explain that part and this post is (going to be) about design.

The incident above made me realize that I’m
not aware of the beauty of my environment and that my activities preceding the visit and the context of the exhibition put me in a different state of mind:

  • Waiting in line for a ticket
  • Choosing one of the ticket options. They’re not very expensive, but not cheap either, making me wonder how much of the price goes to the costs of building maintenance and staff.
  • Hoping Apple pay will work (it did)
  • Showing the ticket to the grumpy doorkeeper (who asked my question whether I should go left or right first with ‘no’)
  • Walking through the big halls
  • Seeing other visitors (serious people watching the art in silence)
  • Reading information about the exhibition

I believe all those things preceding the visit opened my mind to art, because I’d been anticipating seeing something special. I believe that if I’d been on a waiting list for the one of the exhibitions, it would even have been

What that means for design

When designing a digital product to replace an offline experience, a common approach is:

  1. Analyze current user journey
  2. Redesign the user journey by getting rid of the existing issues
  3. Design the user interface based on that new user journey

In step 2 we usually remove all inefficiencies. Usually those cost time and money and often they’re frustrating. Removing them makes the product more competitive. Also, we usually maximize the amount of information captured while reducing the amount of information presented to the user to bare necessities.

In that approach there’s the risk that key parts of the experience get lost in the process. And although I’m yet to find an online art viewing experience that comes even near visiting an exhibition, the problem is not limited to that.

I believe all important organized events have essential inefficiencies:

  • Vacation; inefficient relaxation exercise
  • Wedding; inefficient marital status update
  • Funeral; you get the point

Social interactions aren’t just an exchange of explicit information. Bonding between people is key for our wellbeing. We need to build rapport for that. For millennia, that meant things like mirroring tiny body movements within a fraction of a second, breathing at the same rate and doing things like hugging. So a video call
hanging out with friends. Text messaging may not be a good substitute for visiting a therapist either. Sending an email is not always the best way to announce something.

In many online services, removing people from the their offline equivalent is a huge cost reduction. But at what costs to the user experience?

Sometimes just waiting for a thing makes it more exciting. I remember people talking about what the joy of anticipation after bringing film rolls to the photo shop and waiting for the prints to come back. You probably know someone who likes to listen to vinyl records. I’m sure it’s the time you need to physical pick a record and put it on the player that makes listening to vinyl more of an event than doing a quick Spotify search.

Next time I can make choices in where to optimize software performance, I’ll keep that in mind. In some cases, it may not be a problem when something takes a couple of seconds. If it’s important, users may actually appreciate some time to mentally process what happened.

Adding inefficiency to a design

So, not all important events in a digital experience have to be efficient. Of course I’m not saying you should keep your complicated signup flow like it is because signups are important to your organization. In fact, inefficiency doesn’t have to cost users time.

Even if you can’t get a priest to show up and do a ceremony for all situations, sometimes it can be beneficial to add some inefficiency to a UI. Illustrations and decoration can signal something out of the ordinary. For you minimalists: splurging on whitespace is a classic approach to emphasize an element of the design. You’ll find it easy to come up with more of those.

Do you know Freeletics? It’s an app with videos of bodyweight exercises. They organize those into training sets and I paid € 50 per year to do things like pushups and crunches. Very inefficient from my point of view as a user. Very effective too: it’s by far the most expensive app I have, so the icon on my home screen reminds me never to skip a session. A good deal for Freeletics too, as I’ve extended my subscription twice already.

Extensively customizable user interfaces are a often a form of inefficiency that give a products more meaning to users without functional benefit. Oh, the time I spent on organizing my music libraries, code editors and operating systems! That never weighed up to the time I saved making things easy to find and control. But it made me feel in control and caring for my things, enjoying my music more, making it more fun to use my computer.

What other examples do you know of inefficiencies that make digital products better?

5-ways-to-improve-the-ux-on-your-crypto-startup-today

Building a product is hard enough. You hire a team, design mockups, get funding, build an MVP, get more funding and then, finally, you release it to the world. And then what happens? Nobody uses it. Urgh. You’ve got a blockchain UX problem. You’re not alone. 

In blockchain, this problem is further compounded. On the one hand, you have to work with blockchain tech—which almost everyone finds confusing. On the other hand, your users are having to grapple with new ideas, like private keys, block explorers and dapp browsers just to do seemingly simple tasks. But struggle no more.

We spoke to industry experts and dapp developers who overcame these technical challenges to make some of the industry’s most respected dapps. So get ready to find out how to take your app, dapp, or crypto exchange to the next level.

Blockchain UX rule 1: Get rid of “blockchain”

When you send a WhatsApp message, do you know the tech stack that allows that magic to happen? No. It’s the same with blockchain. Unless you’re building a coding app for developers, keep schtum on what’s going on under the hood.

The Santander OnePay FX app does this really well. If you check out its website, notice there’s not a single mention of blockchain, cryptocurrency or even the rather dry distributed ledger technology. In fact, it simply offers a low-cost way to send money internationally. Sure, it is cheaper because it uses blockchain—but users don’t have to know this. So, make sure you get rid of the messy terminology and promote the product purely based on its advantages. If you don’t believe us, take a look at what happened to this project

Amy Ngai, design lead at Dapper Labs (creators of CryptoKitties) has one key tip: you must assume your users are less knowledgeable than you think. She told Decrypt, “We had assumed many of our players knew a lot about crypto and blockchain. In reality, the knowledge of our users was super fragmented. Some knew a lot about speculation and trading but very little about blockchain.”

But it isn’t always that easy to hide the “B” word.

Blockchain UX rule 2: Learn when to show features and when to hide them 

Blockchains are messy things to integrate. They contain a lot of data but it isn’t always easy to present information to users without throwing them in the deep end. Block explorers are a particular pain point. For example, MetaMask—a Google Chrome extension Ethereum wallet—used to send users to a block explorer if they wanted to check the status of their transaction. Understandably, many users got lost and had no idea what they were looking for. 

The solution, says Christian Jeria, product design lead at MetaMask was to bring that information in-house and make it public friendly. Jeria says they made the decision to start displaying more of the transaction information within the wallet itself to make it easier for users to see what was going on. Use MetaMask today, and all the transaction activity log lives inside a simple interface, displayed below.

Another bugbear in Ethereum-based dapps is gas fees. This was one of the most common gripes the team at MetaMask heard back from users. Every time you wanted to make a transaction on Ethereum, you had to pay gas fees. While showing gas fees is important to give the user a complete understanding of cost–and to show how slow or long a transaction would take–the way it was presented was too confusing for the average user.

MetaMask managed to solve this issue by providing three simple options (as you can see below). Now, the user has to decide whether they want their transaction to be slow, average or fast, with price estimates on the side. Now, while this isn’t ideal as it still requires extra work on behalf of the user—it is a happy medium between ease of use and providing a more tailor-made service.

Blockchain UX rule 3: Give visual feedback

A blank screen is the quickest way to lose a user. A case in point: While Decrypt was recently reviewing the Bitcoin Lightning Wallet on Android, there was an hour-long wait during set-up. Yet there was no clear way of knowing if anything was going on. All the app had was an “opening” message, but nothing to suggest how long it would take or what was happening under the hood. This was something the team at Meridio discovered. 

“We found that the specifics of everything that is happening on-chain is not necessarily relevant to the users, but the ability to see feedback that the transaction is working and track its progress was,” Blythe Meyer, product designer at Meridio—a platform for fractional ownership of real estate—told Decrypt.

We had assumed many of our players knew a lot about crypto and blockchain. In reality, the knowledge of our users was super fragmented. Some knew a lot about speculation and trading but very little about blockchain.

Amy Ngai, design lead at Dapper Labs

Meridio solved this problem by introducing an animated spinner, indicating that something was in progress. The team took inspiration from apps like Google Drive which use similar indicators. Meyer said, “It’s always important to give users action-oriented feedback, for example, when Google tells you your email has been sent after you click send. With crypto technologies that use smart contracts to complete more complex actions on a user’s behalf, feedback goes from important, to crucial.”

Zach Kalman, product manager at Rimble, which builds dapp tools, added there are many complications when it comes to providing the status of transactions in real time. Kalman told Decrypt, “Providing meaningful, timely feedback to transaction status has been the most common UX challenge we have heard in our research.” For example, when some transactions are being made, it might be fine for the user to continue using the app but other types of transactions might need the user to wait until its finished before they can move on to the next step. Being able to differentiate between the two is important.

Blockchain UX rule 4: Go and ask the last person you’d think would use your app  

As a product manager or the CEO, you will know so much more about your product than anybody else. But while you find your product easy to use—it might seem like an impenetrable mess to everyone else. So, the trick here is to get out of your office and find people who have never heard of the product—let alone blockchain technology–to see what they think.

“Five minutes of fresh perspective will open your eyes to something that you never thought would be a point of confusion,” Francisco Inchauste, senior product designer at Meridio, told Decrypt.

Getting user feedback has always been a mainstay in mainstream product launches. But often, a lot of these products involve things that already relate to people—like a new video game or a social media platform. When it comes to decentralized applications, there are so many more pitfalls to fall into. By speaking to everyday people you will avoid them and make a much more appealing product.

Blockchain UX rule 5: Learn to speak your user’s language

Blockchain is a new language for just about everyone, so sometimes it’s better to rely on language users already understand, rather than trying to force them to learn the litany of terms and phrases that exist in crypto. Take apps like the original Coinbase wallet.  Instead of putting a user’s bitcoin balance in crypto terms (e.g. 0.01 BTC), it writes the balance in their native fiat currency. Rather than “cryptocurrencies,” it simply calls them “assets.” These little changes are crucial to your product’s success.

“When most people think of design, they think nice visuals. But design is more about communication, so consider the language that you use in your interface,” says Inchauste, adding, “We have found by adjusting labels and content in the interface it helps users to understand the product.”

And in certain cases, this will be necessary. There are some sticky blockchain issues that have to be made clear. For example, Coinbase wallet tells users not to send Bitcoin Cash to a Bitcoin address—a big problem as it would mean their money is lost. Also, many wallets involve setting users up with private keys that the user must keep safe. Corwin Harrell, senior product designer at Bounties Network—a platform for freelancers—told Decrypt it is “immensely important” for such platforms to provide appropriate context around unfamiliar terms and interactions. If customers lose their money in an app, they won’t be using it again.

Providing meaningful, timely feedback to transaction status has been the most common UX challenge we have heard in our research.

Blythe Meyer, product designer at Meridio

From experience at CryptoKitties, Ngai said that sometimes people will just click something because there’s a big button in the middle of the screen and not read the warning signs—even if the content is about keeping their money safe. Her advice is to, “Ensure that your users are doing the right thing even if they decide to not read the copy.” This means forcing people to check whether they have really written down their mnemonic phrase.

Blockchain is both a blessing and a curse. On the one hand, it enables powerful new applications to be built. On the other, it can create challenging obstacles for you to make things easy for your users. But if you want to become the next Apple—or the next Coinbase—then you need to make a product that your grandparents would be able to master.