ALL ARTICLES

The History of Technology & Contemporary Art

 

Overview

Looking back over the past century, we see huge strides in technology…and its impact on the art world. Advancements in technology have changed how art is made, conceptualized, viewed, promoted, accessed, studied, experienced, shared, and invented. The process of creating art has seen new opportunities by merging the analog and digital worlds. We’ve put together a list of technology milestones that helped evolve the art we experience today. It’s fascinating to think of the impact that computers, digital cameras, video, and electronics have had over the past 30 years, not to mention what lies ahead.

 

ALL ARTICLES

Stay inspired with 20 creative design quotes

 

Overview

We find timeless inspiration from the minds of creative legends. Valuable lessons learned help inform and educate us as we continue to solve problems for our clients through design. Let’s keep those creative juices flowing! We’ve collected our top 20 quotes about creativity and design from some of the most insightful minds.

“If you do what you always did, you will get what you always got.” – Albert Einstein
“There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.” – Milton Glaser
“Digital design is like painting, except the paint never dries.” – Neville Brody
“To be a good designer, you would need to have deep and far-reaching interests outside of the profession.” – Stefan Sagmeister
“It’s through mistakes that you actually can grow. You have to get bad in order to get good.” – Paula Scher
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine de Saint-Exupéry
“Good design doesn’t date.” – Harry Seidler
“It’s easier to ask for forgiveness than it is to get permission.” – Grace Hopper
“Live in the leading—the spaces in between the rules.” – Stefan Mumaw
“Good design is like a refrigerator – when it works, no one notices, but when it doesn’t, it sure stinks.” – Irene Au
“Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs
“Creativity is nothing but a mind set free.” – Torrie T. Asai
“Think more design less” – Ellen Lupton
“Good design is obvious. Great design is transparent.” – Joe Sparano
“Invention is 10% inspiration and 90% perspiration.” – Thomas Edison
“Design is all about finding solutions within constraints. If there were no constraints, it’s not design — it’s art.” – Matias Duarte
“In order to be irreplaceable, one must always be different.” — Coco Chanel
“Great stories happen to people who can tell them.” — Ira Glass
“The definition of an expert is someone who knows what not to do.” — Charles Willson
“It’s really just a matter of time and resources; if you have those then anything is possible.” — Hironobu Sakaguchi

 

Conclusion

Feeling inspired? Take a look at our case studies to see how we worked with our clients to find creative solutions to drive their business.

ALL ARTICLES

The Anatomy of a High Performing B2B Website

Your website is never going to be perfect.

Sorry. I hate to be the bearer of bad news, but your website is never going to be perfect because there are no perfect websites.

There aren’t even finished websites… They’re ALWAYS a work in progress no matter how many times you tweak the colors or slightly change a design.

Since there is no such thing as perfection or done, we’re not going to be able to show you an exact formula for building a great B2B website.

We can, however, tell what we’ve learned building more than 200 websites over the past 10 years so you can maximize your chances of building a high converting website.

In today’s blog post, let’s take a look at key elements of a high performing B2B website.

Our list will include:

  1. Customer Driven
  2. Contains Social Proof
  3. Visually Appealing
  4. Easy to navigate
  5. Content Ready
  6. SEO Ready
  7. Secure

Let’s get to it!

Customer Driven

Chances are that you don’t know your customer quite as well as you think you know them. Before you install WordPress or write a single line of code for your website, you need to gain a truly deep understanding your customer personas.

By understanding who your customers are and what their pains are, you’ll be able to create websites that speak to the specific pains of your customers.

Check out ChartBoost’s website:

By taking the time to understand their persona’s, ChartBoost was able to build a website that:

  • Has consistent messaging
  • Speaks to a pain that mobile advertisers have
  • Directs users to take a specific action (Sign Up Now)
  • Offers users a relevant content upgrade

Download Your FREE Customer Persona Template

Social Proof

Have you ever signed up for a free trial of a product simply because a known industry expert gave a glowing testimonial?

I know I have.

That’s the power of social proof.

By showing site visitors that industry experts and giant corporations are using your tool, you send an almost subliminal signal to their brain saying “Hey Google is using this… it must be worth a shot!”

What types of social proof can I leverage?

There are a few types of social proof that we’ve found work really well.

 

Testimonials

A tried and true method of providing social proof is customer testimonials.

A simple and relevant testimonial from a known company or expert can speak volumes. Check out a testimonial for ChartBoost.

You may not know exactly who Ville is, but if the CMO of the company that brought me Angry Birds likes the tool, then I’m going to take it seriously.

 

Customer Logo’s

Sometimes referred to as Trust Icons, customer logo’s on your website can be an easy way to let people know about a few of the big brands that you work with.

The persona-driven site that the team at Grappos built show’s the names and logos of some of the biggest companies in wine.

 

Case Studies

A good case study that takes a deep and data-driven dive into how a piece of software or a service helped a customer get results is still one of the best forms of social proof.

B2B companies should leverage their biggest names and success stories to create engaging case studies.

 

Organization Logo’s

Is your company part of the Better Business Bureau? Are you PayPal certified? HubSpot certified? Maybe you were featured in TechCrunch?

You can use “Trust Icons” to help prove the legitimacy of your business

 

Killer Results

If your company has been getting killer results for your customers, you need to show off your stats.

Check out how McDonald’s has been doing this for 50 years

McDonald’s has been telling people for years how many people it has served as social proof.

Buffer does a great job of showing off their user count number similar to McDonald’s and combining it with some great logo’s

Visually appealing

The first thing people notice about a website is the look and feel. Buyers will not feel comfortable engaging with a website that doesn’t look professionally done.

So what makes a great looking website?

Relevant imagery

Images are a powerful element of any website.

They can galvanize your site visitors into following your mission, or they can turn your visitors off and make them bounce off your page in 3 seconds.

So you need to use your images wisely. Stock photography is a great and inexpensive option, but make sure they align with your brand.

Let’s take a look at how Grappos does it.

The imagery immediately gives the impression that Grappos is a high-quality, luxurious brand that happens to sell wine.

Every image transmits a subconscious message to your audience. Sometimes the result is not what’s expected. Achieving the right balance between images and copy on a website has been shown to increase conversions by 29%.

Easy Navigation

An easy to navigate website is paramount to building a high converting website. In fact, more than 75% of site visitors say that ease in finding information is the most important element in website design according to a recent HubSpot study.

There are two types of site users: browsers and seekers. Browsers will “wander” through the site, often working left to right across your top navigation. They are passively consuming information and want to be able to window-shop. Seekers are after one thing and want to get there as fast as possible. Your navigation needs to support both user styles.

Accessibility

It’s 2017.

If your website isn’t mobile optimized then you need to start to optimize your website right now. Over 58% of all browsing time is spent on a mobile phone or tablet in 2017, and your site needs to cater to these users.

Your site needs to be compatible with multiple browsers and devices, or risk losing out to forward-thinking competition.

 

Content Ready

“Content marketing is the only marketing left” – Seth Godin

Successful B2B brands are using content marketing to educate and nurture their prospects through the buyer journey.

Visitors may be coming to your website to check out your features, view use cases, or learn best practices. Engage your site visitors and feed them helpful content in the form of articles, webinars, case studies, and downloadable content upgrades.

Build a great blog design

The goal of your blog is for your visitors to digest your content. So you want to design your blog to make reading as painless as possible.

This means have clear typography with a high contrast between the color of your text and the background color.

Ensure that your responsive design also carries over to your blog. Ideally, your text will automatically resize for visibility and readability, your images will scale, and your reading experience will be smooth.

The team at AutoPilot has this down to a science:

Their mobile optimized blog is readable and easily digestible.

Don’t restrict content to blog pages

If you’re only putting your content on your blog pages then you’re missing out on thousands of opportunities for visitors to view your content.

You can include content on your persona focused solution pages, feature pages, and even your home page.

See how CloudCheckr does it:

 

SEO Ready

If you want to drive thousands of visitors to your website for free consistently, SEO is still the best long-term traffic strategy. Even with offline campaigns, paid acquisition, and social media

campaigns, a huge percentage of your new site traffic should come from organic search.

On-page SEO

This consists of optimizing critical elements of your page for the search terms and phrases you are targeting. The most common elements include headings, sub-headings, body copy, image alt-tags, links, and anchor text. Without these elements, search engines don’t know what to rank your site for, and competitors will consistently beat you to Page 1.

Technical SEO

The unseen parts of your page are some of the most critical for search optimization. Title tags, meta descriptions, mobile optimizations and page speed are site elements that you can’t see but will sink your SEO traffic in a heartbeat. Don’t know what a robots.txt file is? You will when it stops search engines from finding your site, costing you 80% of your traffic.

To ensure that your SEO strategy is sound, make sure that you think about your SEO strategy from the start of your web project.

 

Security

Not focusing on security when building your website can be a critical mistake. We’ve faced all of these attacks, helping our clients fend off issues and maintain continuity. We’ve found that the best approach to security is two-pronged.

Begin Well

To create a good result, begin with the best base. Use the most up-to-date version of WordPress and carefully chose the plugins that you need.

Carefully scrutinize your plugins to ensure you know the security impact and long-term maintainability of each of your plugins.

Secure websites will utilize a professional web hosting service to manage the OS and supporting systems like AWS.

For the best performance and security, we recommend utilizing a Web Application Firewall like CloudFlare or Incapsula in front of your web layer. This will help prevent attacks like a DDOS from ever reaching your infrastructure.

Manage Securely 

Once you get to launch, you’ll need to monitor and patch security and performance at the system and application level to maintain the highest levels of security. This means continuously updating WordPress’ core software and supporting plugins.

 

Remember to always be testing

As we said at the beginning of this post, there are no finished websites.

These best practices are great starting points that you can use to optimize your website, however, always carefully track your conversions and test your ideas. It’s up to you and your marketing team to find the winning combination for your visitors.

Download Your FREE Customer Persona Template

ALL ARTICLES

The 4 Strategies this Series A startup used to grow leads by 54% in 6 months

How do you take a company fresh off a $50M series A that has been growing 25% quarter-over-quarter to the next level?

This is the question that Steve Hall, VP of Marketing at CloudCheckr faced as the company entered 2017.

CloudCheckr, which makes cloud computing easy for companies like NASDAQ, Lockheed Martin, Intel, NASA and hundreds of other enterprises and service providers by simplifying their cloud infrastructure for public users, had experienced enormous growth since its founding in 2011 and earned $50M in funding to accelerate that growth even further.

The company had been using a mix of content marketing, paid acquisition, SEO, and offline marketing to help them grow the number of leads they generated every quarter, but in order to meet the expectations that came with their latest round of funding, they needed more exponential growth.

Today, we’re going to walk you through the 4 tactics that CloudCheckr used to grow leads by 54% in just 6 months.

We’ll cover

  1. Website optimization
  2. Putting content in context
  3. Opening the top of the funnel
  4. Building microsites

Alright, let’s get started!

Strategy #1: Optimize your website for lead generation

Before CloudCheckr did anything else, they took a step back and had an honest internal conversation about their website.

What they found was a functional website that left a lot to be desired.

Navigating the site was difficult, messaging wasn’t always consistent, SEO best practices weren’t always enforced, and worst of all, it was a time-consuming pain for their marketing team to use.

It was time for a redesign.

Fortunately, they approached our team here at HUSL to help them build a persona-driven web experience.

How they did it

Our approach started with taking a deep dive into their customers. So the first thing we did was work together with CloudCheckr to build target personas.

Step 1: Extensive User Research to Define the “Who”

Every great website starts with a deep understanding of your target market so you can understand how to create value for them and provide a high-quality customer experience.

We started by looking at past customers of CloudCheckr to better understand what their behaviors, motivations, and pain points were. From there, we identified who their primary user groups were so we could conduct deeper research to better understand users needs and specific objectives.

Once we determined who the key user groups were, we set off to learn as much about them as possible so we could tailor the website’s UX to these core groups.

We did this through qualitative and quantitative research that included:

  • User Interviews to have deep qualitative discussions to understand what a user’s needs are and what they’re looking for when going to CloudCheckr’s website    
  • Stakeholder interviews with CloudCheckr’s marketing and sales teams to better understand what they are hearing directly from customers when they speak with them.
  • Analytics review of CloudCheckr’s website to understand vital demographic information like age, devices used, location, and common acquisition channels

Once completed, the CloudCheckr team had customer profiles that resembled these:

 

Step 2: Built clear and consistent messaging

After understanding CloudCheckr’s target persona’s, the CloudCheckr team went to work on building the right messaging for the website.

CloudCheckr knew that their home page should clearly state what they could help companies with, what the benefits of CloudCheckr were, and how they have helped other brands.

They created copy that consistently highlighted CloudCheckr’s benefits and showed off its slew of recognizable customers.

The result is a focused web experience:

 

Another beautiful example of a landing page that converts exceptionally well is Unbounce. They ensure every site visitor understand that Unbounce is all about building landing pages that convert quickly.

 

 

In just a glance you can clearly understand that Unbounce is a tool that helps users build landing pages that drive conversions, just like site visitors can easily understand that CloudCheckr is a cloud management tool that helps enterprises and service providers save money, reduce risk, and ensure governance at scale.

CloudCheckr repeated this messaging clarity and consistency throughout the entire website.

Step 3: Drive users to the most wanted action on each page

When building a conversion focused website, you should always keep in mind what action you want site visitors to take on your site.

The goal of CloudCheckr’s marketing website has always been to drive marketing qualified leads through inquiries. These inquiries could be demo, webinar, eBook, whitepaper, or newsletter signups that come from any point on the website.

CloudCheckr’s persona-driven website segmented the tool according to the persona, and each persona had a different buyer journey. So each page had a CTA designed specifically for that persona.

Check out how they structure one of their solution pages:

 

 

Here we see a clear call-to-action that the public sector would find the most appealing. The main CTA points to the AWS Marketplace where users can signup and directly install CloudCheckr for a free trial.

As you scroll down the page, you’ll also see offers for specific whitepapers that are compelling to the public sector.

By building a persona-driven website, CloudCheckr was able to build specific offers for specific users and give them the best experience and content possible.

 

Strategy #2: Put Content in Context

CloudCheckr has always had a robust content strategy that includes weekly blogging, webinars, white papers, and ebooks. Their content strategy proved to be effective, however, site visitors would only see this content if they were on one of CloudCheckr’s blog pages.

Instead of continuing to silo this content, the HUSL team built CloudCheckr’s pages to display the most relevant content.

For example, CloudCheckr’s cost and expense management page displays several articles that speak directly to site visitors that would be interested in expense management.

 

 

This “related resource” section gives site visitors a great opportunity to continue to engage with CloudCheckr even if they aren’t quite ready to engage in a demo.

Additionally, on many of CloudCheckr’s blog posts, they have the opportunity to opt into webinars, events, and eBooks from the blog pages.

 

 

By funneling more users into engaging content, CloudCheckr is giving itself more opportunities increase MQL’s

 

Strategy #3: Open the top of the funnel with SEO

Once CloudCheckr had a robust website that drove visitors to clear CTA’s and engaging content, they knew they could open up the top of their funnel and begin to drive more impressions.

“We traditionally had a very focused top of the funnel,” said Steve Hall, CloudCheckr’s VP of Marketing. “So we knew in order to grow at the pace that we wanted we would have to open things up.”

One of CloudCheckr’s most effective channels was SEO, so they resolved to double down on their on-site SEO techniques and create content that would help them rank for more keywords.

When HUSL rebuilt CloudCheckr’s website, our team focused on helping them improve their current on-page and technical SEO while providing them templates that enforced SEO best practices.

On-Page SEO & Technical

CloudCheck worked to improve both their on-page and technical SEO by optimizing critical elements of their web pages for the search terms and phrases they targeted. The most important elements include headings, sub-headings, body copy, image alt-tags, links, and anchor text.

From a more technical perspective, elements like meta descriptions, mobile optimizations, and page speed also needed to be maximized.

For CloudCheckr, this meant:

  • Wrapping page titles in <h1> tags
  • Wrapping subheadings in <h2> tags
  • Building a fully responsive web experience
  • Optimizing images with SEO friendly file names
  • Ensuring site speed was top notch

 

To ensure these SEO improvements would be utilized on future pages, HUSL built web templates that would make it easy for marketers to enforce SEO best practices.

These SEO improvements along with expanded paid acquisition work resulted in an 81% increase in site impressions in just 6 months.

 

Strategy #4: Build Microsites

The CloudCheckr team attends 50+ trade shows every year that provides a huge opportunity to drive leads.

To take advantage of this opportunity, CloudCheckr creates microsites that help inform visitors and event-goers on the benefits of CloudCheckr and how they relate to the message of the event.

Each event microsite gives site visitors the opportunity to register for the event, book a meeting with the CloudCheckr team, or gather information on how they can see CloudCheckr at the event.

 

 

Benefits of microsites

These microsites have several benefits including:

 

Targeted Campaigns

Deliver highly targeted content to specific audience segments.

Ex. Send a geotargeted audience Facebook ads to your event.

 

Lead Generation

CloudCheckr generates meetings by targeting conference attendees with their landing pages.

 

Virality Potential

A well designed, informative, and easily shareable microsite has the potential to create buzz around a certain event.

 

Are microsites scalable?

One disadvantage of building a microsite is the potential for high costs and long development times if you’re working with your development team. For some teams the prospect of building even just a single webpage for an event is daunting.

Fortunately, companies like CloudCheckr can setup easily shareable and editable templates that anyone of their team members can customize and have live in minutes.

 

ALL ARTICLES

The 3 biggest mistakes B2B startups make with their websites

Building a great website is an iterative process.

It is never done.

So even though we increased on-site conversions for ShipHawk by 84% last year by creating an agile and persona-driven website, we still were still looking to make improvements and boost conversions.

You’re never going to have a 100% perfect website, but you can build a high converting site by avoiding some common mistakes that B2B startups often make. That is why we’ve compiled a list of the top three most common mistakes that B2B startups make with their sites.

Our list includes:

  1. Not building defined buyer personas and building your site around them
  2. Building a website with a complicated backend
  3. Using your product team to build your website

Let’s get to it!

 

Not building for your target persona

At the end of the day, what do you want your B2B website to do?

Get a ton of traffic? Nope

Tell investors about your business? Nope.

Your website needs to do one thing exceptionally well, and that’s convert.

That could mean converting visitors into free trials, demos, content upgrades, interacting with your chat widget (looking at you Drift), or whatever you set as a KPI that leads to marketing qualified leads (MQLs) and sales qualified leads (SQLs).

Conversions only happen when your well-targeted traffic meets a well crafted and relevant offer.

It’s hard to create that offer without a true understanding of your customer.

Why does knowing my target audience matter?

If you know…

  • How your audience speaks, you can use language that they would naturally use and relate to them
  • What their pain points are, you can specifically build content around their pains
  • Why they visit your site, you can build your website so it’s relevant to your most immediate needs
  • Where they hang out, you can reach them with your own content or ads

What do I need to know about my target persona?

Just like your website, building your target persona is never done. You should always be learning more and more about your prospects and customers.

You can start by understanding:

Demographics

  • Gender
  • Age
  • Location
  • Education
  • Industry

Behaviors/Habits

  • Would they consider themselves thought leaders?
  • Are they early adopters?
  • How do they make decisions?

Digital Habits

  • What blogs do they visit?
  • Are they active on social media? Which ones?
  • What type of content do they consume? Short form or long form?
  • Do they use internet research sites?
  • Do they lean on their online social network for buying decisions?

Goals

  • What KPI are they trying to hit?
  • How will their personal success be impacted by business success?
  • What projects are they working on?
  • What deadlines are they trying to meet? What events will they go to?
  • What is the overall business strategy and how will they try and meet them?

Challenges

  • What is taking their focus away from their objective?
  • What don’t they have the time/bandwidth to accomplish
  • What is slowing them down?

Check out the example customer profile that we’ve put together.

 

 

 

You can see that we’ve included detailed demographic and psychographic information along with a quote and picture to ensure that our team is visualizing our target persona.

How do I know all of this!?

If you don’t already have a deep understanding of your customer profile then you’ll need to do some work to better define them.

Customer Surveys

If available, one of the best ways to research your target persona is by surveying your paying customers.

You can easily set up a Google form with demographic, firmographic, and psychographic questions that will help you understand your customer further.

You can also add in questions about their buying experience to immediately receive ideas on how you can improve your site.

Check out the sample survey questions below:

 

Demographics

  1. What’s your title
  2. How large is your company
  3. What industry is your company in?

 

Website

  1. What problem were you trying to solve when you found {{company_name}}
  2. How did you find {{company_name}}
  3. What did you want to do on {{company_website}} when you first visited
  4. Did you complete your objective?
  5. What questions did you have that you could not find answers to?

 

Product/Pain

  1. How were you solving the problem before {{product}}
  2. What made you choose {{product}}
  3. Has {{product}} solved the problem for you?
  4. What can we do better to solve your problems?

Bonus Survey Tips:

Keep it short and sweet

The more questions you have the fewer people are going to complete your survey and once you go beyond 15 questions, your results will decline 5%-10% per additional question.

 

Make it mobile friendly

56% of all traffic will come from mobile devices in 2017 according to SimilarWeb while 54% of email opens happen on mobile devices.

Chances are that when you email your customers a survey, they’re going to open it on a mobile device. So optimize for mobile!

 

Stay away from multiple choice

It’s important that you allow your customers to say everything they would want to say in their own words.

Restricting them to preconfigured questions may lead to a few more responses but less valuable and actionable information.

 

Put a time limit and add an incentive

Only about 25% of people who receive a survey email and click through to fill it out actually complete the survey. Boost that completion rate by adding a cutoff date and an incentive to spur action.

People are much more likely to complete a survey if they will receive an Amazon gift card for doing so and they only have 48hrs.

Facebook Ads

The reason that advertisers are flocking to Facebook (and Google) is they reach billions of people and have a wealth of data that can be deployed for highly targeted marketing campaigns.

Any B2B marketer can build an audience for:

  • High income, married men, in Silicon Valley interested in Simon Sinek, healthcare services, SaaS, and Salesforce

OR

  • Single women in New York City who are interested in Apple, NASDAQ, and The Wall Street Journal

B2B marketers can test multiple audiences and obtain statistically significant results about the interests and demographics of their target market.

Already spending money on Facebook Ads?

If you’re already spending money on Facebook Ads, check out your audience insights to instantly learn a great deal about the users that follow your Page and interact with your content.

You can start by choosing the audience that you want to interact with.


Then dive in and understand demographic and lifestyle information.

 

Ask your sales team

If you want to understand who your prospects and customers are, why not ask the people that talk to them the most?

Sales development teams that are doing outbound outreach can be leveraged to test messaging and learn about your target market in the same way Facebook ads can.

For example, Square leverages their SDR team to understand and test new markets, products, or customer types.

B2B marketers can learn from their SDR teams by asking sales leaders what type of messaging has been resonating and with who.

Check Google Analytics

Much like Facebook insights, Google Analytics can give you detailed information about the users that are visiting your website.

Simply enable demographic and interest data on your Google Analytics account and you can start to build demographics reports like below:

 

 

And interest reports like these:

 

Once you’ve gathered this information you can add it to your ideal customer persona.

Conduct Interviews

If you don’t have many customers that you can leverage for surveys and don’t have the ability to gather ad spend data, then you can focus on qualitative interviews with your prospects.

You should focus on talking to customers from different backgrounds, industries, and buying situations. You’ll likely have multiple ideal customer profiles and you’ll want to make sure you gather information about all of them.

When you are conducting the interview focus on understanding the prospect’s unique pains, attributes, and buying situation. Dig deeper than the surface level and understand what’s really going on.

Use some of the survey questions that we listed above to get started, however, be sure to dive deeper. Here are a few examples of more in-depth questions

  • Tell me how X process works for you.
  • What part of this process takes the most time?
  • Is there any part of this process that costs more money than you’d like?
  • What is the most inefficient part of this process?
  • What tools do you use to help you with this process currently?
  • What part of this process provides you the most value?
  • How happy are you with the current process?
  • If you could improve one thing about this process, what would it be?
  • Do you use X tools to help you with this process? If so, do they do what you need them to do?

Mistake #2: Building a complicated backend

Building a pretty website isn’t difficult.

Anyone can go on Themeforest, find a good looking template, do a few customizations and be off to the races.

Without getting into the security and performance pitfalls that await you, simply getting a website launched is only the first part. Your website is your company’s central information location, and it’s only as valuable as it is consistently updated. What do you do when you need to make changes?

Are your Marketing Team’s needs for updates tied to your engineering team’s schedule? Does your team spend hours clicking around a confusing interface, choosing the same options repeatedly, just trying to get a new content piece online?

If your website is a pain to manage, your high-value marketing employees are going to spend their time hoping they can figure things out. Now your message is hindered by a messy process when your original goal was to have a tool that would help your team be more effective.

How does a complicated website prevent me from reaching my goals?

A complicated website will

  • Be difficult change and update, without needing to spend hours building a deep technical understanding of your website’s architecture
  • Limit your ability, so your marketing team will not be able to easily spin up unique landing pages
  • Force you to enter content repeatedly, after you create a landing page, you have to go create a block on the home page, and another banner
  • Leave you hanging without the tools you need, so you’ll have to go searching for plugins and or revisiting the development process every time a need arises
  • Not be built for SEO from the onset, so you may need to do major SEO overhauls down the road

At HUSL, we build modular websites that easily and simply adjust to your content so all your team has to do is plug in the appropriate content and launch their campaigns.

The team at CloudCheckr recently launched their modular website and are now able to build unique landing pages for every trade show their company attends in a matter of minutes.

Mistake #3: Using your product team to build your website

The mad scientists building your company’s tool are really the rockstars of any startup.

They are the innovators that build the tools that wow your investors and solve your customer’s problems… But they aren’t the best team to build your website for two main reasons.

  1. Their time is extremely valuable ($150k+ a year in the Silicon Valley!) and extremely limited
  2. They just aren’t marketers

Let your product developers do what they do best

Developers tend to build their websites with themselves in mind and not the marketing team that will be working on the site.

This means that they’ll often use code snippets to build the site which makes changing the website difficult, frustrating, and time-consuming process for any non-developer. So when your marketing team needs to make changes to the website they’ll need to ask their development team.

This time-consuming process can be eliminated by letting your development team focus on your product and allowing your marketing team to focus on the website.

 

Wrapping up – Avoid these mistakes

We’ve seen a lot of mistakes over the past 10 years and we’ve learned from them so you don’t have to go through the pain of building a bad website.

Remember to always:

  1. Understand your ideal customer profile so you can speak to them in their language
  2. Build your website so that anyone on your team can easily make changes, add pages, and edit copy
  3. Let your product team focus on your product and your marketing focus on iterating your website

 

ALL ARTICLES

The 9 B2B Website ‘Must Haves’ For Driving Traffic & Leads

You know having a great-looking website is important, but what’s the point of the site if it doesn’t help you win more business? Yep– your website needs to sell. A sharp B2B website not only looks great, but also drives traffic and leads.

Whether you’re building a new site or want to optimize an existing one, there’s much you can do to create a winning site. You need inbound links, on-page SEO, and an emphasis on design that converts.

It isn’t always straightforward. That’s why we’ve put together 9 B2B website ‘must haves’ for driving traffic and leads. When you’re done with this guide, you’ll…

  • Understand the 9 ‘must haves’ for driving traffic & leads
  • Have a sense of what needs to be done to improve your site
  • Know how CTAs impact conversions
  • See how SEO impacts a B2B website
  • And more!

Get Your Guide Here

ALL ARTICLES

6 Web Design Trends We’d Be Stoked to See More of in 2017

As we enter the year 2017, we here at UpTrending are looking forward to embracing some of the latest and most effective trends in web design that are pushing new boundaries in the area of user experience.

While there are a few web design trends we have no problem turning our back on, there are so many more that represent everything that makes us excited to do what we do. The great thing about working in an industry such as this one is that there’s always someone pushing the envelope and something new to look forward to. 2017 is right around the corner and with a new year comes a new motivation to create, an optimism in what’s possible, and an excitement to be a part of it all.

Here are just a few of the emerging trends we are looking forward to seeing more of in the coming year. While they aren’t necessarily new, they are proving to be the future of web design.

Web design trend #1: Long scrolling single page design

Multi-page hierarchical website architecture makes a lot of sense to our organization-obsessed brains. Like an Ikea closet system, everything has its place, and as long as the hierarchy makes logical sense, the pages on sites designed this way are relatively easy to navigate. But this is a website people, not a book or newspaper. Why are we even talking about pages at all? This ain’t print!

The future of sales and persuasion is storytelling. As new platforms and devices emerge, new methods of presenting information emerge and methods like long scrolling single page sites open up new ways of telling visual stories on the web. When you’re presenting information in a sequential format, it is essential that your users make it to the end where the story they’ve been told comes together and they are compelled to act. Clicking from page to page can be tiresome and boring causing many users to drop off before they’ve gotten the full story, but long scrolling provides opportunities to encourage continued engagement with the story through subtle animations Look no further than The Boat for a devastatingly amazing use of single page storytelling, ripe with rich animation that will keep you scrolling just to see what happens next!

SEO nerds can put your hands down, we all recognize the inherent problems that single page design has with search rankings. Shame on you for assuming we haven’t thought of that and come across solutions and workarounds. We are professionals after all!

Some will even decry the user experience of a single-pager based on navigability. Again, puh-leese! Look no further than this beautifully designed page for a prime example of how to do something as simple as anchoring stops along the way to allow users to quickly access information anywhere on the site.

“But wait!” You cry. Remember this post where you denounced scroll jacking? Yes. However, the thoughtful and intentional structure of this site is worth calling out. While scroll jacking can be inherently annoying, this site’s workarounds are impressive. For example, clicking on any of the section titles in the top navigation renders an immediate response. The site also keeps the footer navigation at the bottom of every section, as opposed to just the bottom of the last section.

Granted, the single page approach doesn’t work in every instance but if nothing else, a long scrolling approach to storytelling can be implemented even into multi-page sites with great effect.

Web design trend #2: Animation-rich microinteractions

They say the devil is in the details. This idiom particularly holds true when it comes to user experience. Sure we put a lot of stock on driving that one, or those few, big interactions that lead to conversions, but lately a great deal of emphasis has been placed on microinteractions, the everyday ways that users engage with a site or app.

Web design microinteraction example
Source: www.dribbble.com/leozakour

Actions like saving, syncing, liking, swiping or even just clicking a button qualify as microinteractions and they happen a lot. But let’s not forget that these experiences are taking place within a digital (read non-physical) world and as tactile creatures we require feedback from our environment. Interacting with digital elements without some visual or audible signal that our input has been received can be vexing and many cases, capable of ruining user experience.

Simple yet rich animations can go a long way in providing the necessary feedback that satisfies a user’s need for validation. It can even prevent problems. Think of payment processing situations in eCommerce over a slow or interrupted internet connection. Especially in situations where a monetary transaction is taking place, users want to feel secure that they’ve “done it right.” Clever or cute microinteractions can even delight users when they aren’t expecting it. Why concern yourself with delighting someone over something so trivial? Because it turns an otherwise boring activity into something exciting and perhaps fun, something they might consider doing again. That sounds like a win to us!

Web design trend #3: Card-based design

Web design Pinterest card based design
Source: www.pinterest.com

One of the more exciting trends we are seeing across the web is card-based design or card layouts. Humans have used cards to encapsulate and disseminate information for hundreds of years. From playing cards to business cards to baseball cards, these rectangular objects have appeared in every culture and time period from here to Ming Dynasty China. In short, cards are a recognizable and familiar concept and when it comes to web design, familiar means intuitive, and intuitive makes for a great user experience.

Web design Kenny powers card based design
Source: www.cardboardconnection.com

Cards are incredibly useful for content-heavy sites because they provide neat little containers to hold and display information just as they do a pitcher’s stats on the back of a baseball card. In fact, they actually work much in the same way as baseball cards do. On the front you have a great image with some context like a name or a title, and on the back, a lot of really granular information, statistics, maybe even a story. In this way, the card layout is more than just a neat-looking design element, it represents an entire framework for how digital products can (and should) be structured. In this way, they are ripe for aggregating content from basically anywhere and capable of displaying it in a consistent fashion.

Perhaps one of the most endearing qualities of cards is how well they lend themselves to responsiveness. Pick up your phone. Remind you of anything? Kinda has the same shape a card doesn’t it? Cards stack with ease and can be expanded to reveal more information. That’s the beauty of them! And while we’re on the topic of mobile applications, can we briefly talk about how brilliantly they work with gestures? Since they’re based on physical, real-world objects, they practically beg to be flipped, tapped, and swiped with little to no instruction required.

Web design trend #4: Authentic imagery and illustrations

“Cool stock photo bro!” Said nobody EVER. As concepts mature, so do their users and mature internet users are hip to lazy tactics like using stock photos to fill space. People gravitate towards stock photos because they are easy but since when did taking the easy route result in something extraordinary? The whole idea of a web page is to communicate value and it’s really hard to do that when you are designing around stock photos that don’t really say much of anything or represent your product or brand.

Web design UpTrending custom designs for shiphawk.com
Source: www.shiphawk.com

If you want to stand out, you’ll need to use authentic imagery that speaks to your brand. Granted that does mean adding photography to your budget and good photographers certainly aren’t cheap but why would you spend money on great web design only to fill it with cheesy photos of suits pointing at charts or random college kids laughing about nothing?

When high quality photographs are out of the budget or simply not all that relevant, look to illustrations as an effective tool to get your point across. Even simple illustrations can make a world of difference in communicating more authentically when they are on-brand and part of a larger, unified system of related illustrations.

Web design trend #5: Vibrant colors

Web design Vibrant colors at Mossterstudio.com
Source: www.mossterstudio.com

Color conveys so much more than we probably realize. There’s a whole psychology to it that is endlessly fascinating, all the more so because it works on such a primal, subconscious level. Computer screens are capable of displaying literally millions of different colors and as of late, designers have gotten pretty bold with their choices.

Perhaps as the designs themselves become more minimal, designers look to color palettes for expression. Compare a more recently built website to those from several years ago and observe soft blues and bright whites give way to vibrant, powerful colors that make bold statements. These fierce, impactful colors allow even the most minimal design to scream.

Designers talk a lot about whitespace but that space doesn’t have to actually be white, does it? Brightly colored backgrounds can have the same effect of drawing attention towards important elements like calls to action while also setting a tone or conveying emotion.

Web design Spotify vibrant colors
Source: www.spotify.com

Vibrancy doesn’t have to be loud and abrasive though. In fact, if anything it requires even more restraint and thoughtfulness to really nail it. Spotify’s tendency towards the duotone effect is a prime example of how to use vibrant colors in a subtle and impactful way without being garish or flamboyant.

Web design Pantone color of the year
Source: www.pantone.com

Oh and by the way, Pantone’s 2017 Color of the Year is Greenery which takes its cues from nature. It’s pretty vibrant.

Web design trend #6: Serif typography

Don’t call it a comeback! Despite years of a sans-serif dominated web, those quaint little tails are popping up more and more as some designers blend classic styles into their contemporary designs.

Web design Typography example
source: www.typewolf.com

The earliest typefaces had serifs as they imitated brushstrokes and allowed those carving the characters into stone to neaten up the ends of letterforms. In the early days of print, they proved more readable in body copy having something to do with typesetting but they proved less so with the advent of the computer screen. Low resolution made it difficult to display the tinier details especially as the letters scale down, but as screen definition improves and technology and trend push web design further towards an image and animation-driven medium, serifs make for great contrast in titles and headlines that stand out from body copy. Sans-serif fonts may work great for comprehension but serifs have impact!

If nothing else, serifs speak to a retro aesthetic and a throwback to print. In that way, they certainly stand out as a relic or an artifact from a simpler time, nostalgic and not to be forgotten. Here are some pretty cool ones.

Again, these trends aren’t all new and they aren’t the standard… yet. They all however, represent the evolution of user-focused design to this point in time while being informed by popular trends and the movement towards mobile computing. Choosing one or some combination of these elements certainly won’t guarantee results; that requires strategy. That being said, we hope to see more of this in the coming year but at the end of the day, we’re just happy to make great websites for great clients.

ALL ARTICLES

Rapid Prototyping for Outside the Box Web Design

Prototyping has been used in engineering and industrial design to validate concepts and build better products for decades. Today’s web designers are using prototypes to create better user experiences and it’s pushing the envelope of how we use the internet in exciting new ways.

Whenever we set out to create something, we tend to have a pretty specific idea of what that thing is going to look like, how it’s going to work and how it will be used. If you’re designing a chair for example, you can rely on some basic assumptions as to the general form it should take and how someone is going to sit in it. While this approach works well for established conventions like furniture, it doesn’t always work out as neatly in the digital realm. Intuitive as it may seem, rarely does our own, personal perspective do a very thorough job of considering how others will instinctively interact with such a product.

Anytime you design something for others to use, your decisions along the way are likely based off of certain assumptions you make about how your users will interact with it. These assumptions aren’t bad or wrong but they can be based on limited information and in some cases, personal bias. The natural tendency is to think about how a product will be used based primarily on the way you, yourself would use it. It’s not wrong, it’s just not necessarily right for everyone.

What’s missing here is the user. Who else can better speak to how they will interact than the very one doing the interacting? This idea isn’t new. We as designers have always sought feedback on how to improve and optimize what we create and often go to great lengths to do just that. It’s just that before, we weren’t seeking that feedback until after we’d finished building. Conceive, analyze, design, construct, test, maintain – this was the way things were done for a long, looooooong time.

Anyone can see that this approach is slow, frustrating, and expensive. Valuable time and money are spent in the laborious pursuit of incrementally improving upon completed products that are difficult to evolve. If the key to improving on the conventional wisdom is faster access to feedback, how then can one tap into those powerful insights earlier in the process? The answer is prototyping and it’s changing the way designers and developers alike approach building digital products.

The better way.

Prototyping allows new features and elements to be quickly validated or abandoned by creating simulated versions that can be put in front of users before they are completely developed. This iterative process ultimately shortens the feedback loop, allowing products to evolve faster and be more refined.

Prototyping allows you to test the assumptions you make about your users by putting low fidelity versions of your product in front of those very users to observe their behavior and elicit feedback. The prevailing wisdom is to do so early and often, building prototypes that merely resemble what you ultimately hope to release and discovering how users actually interact with it. What results is a continual loop of design, user testing and refining until something very near perfection is reached.

In rapid prototyping this process is performed quickly with little concern for the level of detail involved. The faster an idea can be tested and either proven or disproven, the faster the ideal version will be revealed. Anything from simple HTML mock-ups to downright prehistoric paper models will suffice as long as it is testable. At UpTrending, we use programs like InVision and UXPin to create fully interactive, high fidelity prototypes that give us early insight into how users are interacting with our sites and apps.

UXPin menu prototyping example
Source: UXPin.com

The bennies.

So why go through all the trouble of creating simulations of a final product only to throw them out at the end of the day? So glad you asked.

1. Prototyping is efficient.

Errors or usability issues can be detected far earlier in the process saving time and money in the long run. Why wait until you’ve finished building something to see if users respond the way you expect them to when you can find out sooner and make adjustments along the way? Rejecting false assumptions and eliminating features that don’t work earlier in the process minimizes waste.

2. Prototyping improves user experience.

When the end product is designed for (and in some ways, by) users with their direct input rather than expecting them to conform to a designer or developer’s idea of how things should work, a more intuitive experience arises organically. Since it focuses primarily on the user, guess what? The user experience is just plain better! You are, after all, building this almost exclusively for them, so why not let them tell you how best to get them to do what you want them to do?

UX illustratration
Source: Shutterstock.com
3. Prototyping is the future.

Rapid prototyping allows designers to take risks they might not otherwise take if doing so means committing time and resources to building something out completely. Because prototypes are merely simulations, their cost is low but the reward can be significant. What results may be quite different from that which you initially sought to create, but it could be all the better for it. By throwing out personal bias and preconception, we can design outside the box to create better digital products that achieve their intended goals.

Yay, prototyping!

Many traditional approaches to web design fail to give due consideration to the most important element in the design process – the end user. But as you can see, there is a better way. Through prototyping, designers are able to glean valuable insights directly from users which they can then use to adapt and evolve products into their most fully realized selves. And through rapid prototyping, we can shed the conventions and traditions that hold us back to discover new and better ways to improve user experience.

ALL ARTICLES

5 Web Design Trends We’d Like to Say Buh-bye to in 2017

Web design trends come and go. Flash, anyone? As technology improves, the web goes ever more mobile and user experience becomes the focus, these trends are evolving a heck of a lot faster these days. While we can all agree that page counters, scrolling marquees and pop-up windows are dead and done, there are quite a few modern web trends that have already outlived their usefulness.

You yourself may very well be attached to a dying trend. But as hard as it is to let them go, it’s time to say buh-bye to the following web design trends as we approach another new year.

Trend #1: Sliders & carousels

There are a host of reasons why auto-forwarding carousels or sliders are a bad, if not downright bloodless, design move, but chief among them within the realm of B2B web design are usability and conversion.

Auto-forwarding sliders are actually perhaps one of the worst elements you could possibly incorporate into a website from a user experience perspective.

Think about it…

If a user isn’t interested in what’s in front of them, they’re going to scroll away, not sit and wait to find out if the next slide is as droll and irrelevant as the first. Or what if they were interested and you just took it away like a playground bully. Did you expect them go look for it again? Why would you want to tease your users like that? Didn’t you put a lot of time and effort into building this site exclusively for them? Why are you being so mean?!

Then of course there’s that whole thing about the purpose of your site in the first place – driving conversions. Unless you’re some giant brand looking to create a unique digital experience to build brand equity, your site’s users are probably not interested in just hanging out and poking around. Chances are they have a problem and they want to solve it as quickly as possible because then they don’t have a problem anymore and can get on with more satisfying things like watching baby goat videos. In B2B, a conversion-focused approach should do very little beyond encouraging the specific action you want the user to take. Anything and everything on your site should be there for the sole purpose of convincing your user to take the action you want them to. Expecting them to voluntarily sit through a parade of marketing materials is just plain presumptuous. Just get to the point!

And if the theory doesn’t do it for you, how about some data? Guess how many people out there actually click on slider images? The answer is 1%. And 84% of that ridiculously small number ever get past the first one. Are you feeling me yet?

Ok, one more. They’re also bad for SEO. Now what?!

So what should you do instead? Well, that depends now doesn’t it? As sick as you no doubt are of hearing that answer, it’s the truth and you know it. There is no other way to determine what the best method of driving conversions on your site is besides testing and iteration.

Again, we could go on and on about how badly carousels need to go (and perhaps we will), but for now we’ll just say…

buy-bye gif
Source: giphy.com

Trend #2: Flat design

Way back when in the early twenty-teens, flat design was welcomed with open arms, invited to sit at the table and given the biggest helping of mashed potatoes. “It’s so simple,” they said. “So beautiful. So… sophisticated!” But is it really?

Embracing the two-dimensional screens we view websites on for what they are, flat design finally stopped trying to imitate the real world the way Apple did with their skeuomorphic bevels and drop shadows. The minimalistic approach allowed us to minimize by stripping things down and focusing on usability rather than attempting to simulate familiar experiences we may be more accustomed to. Not to mention that websites with flat design look cool as hell and boy are they fast! However, cool as it may be, flat design isn’t without its own usability problems. Remember the Windows 8 Metro UI? Waaaaaaay too flat! It ignored the signals and context we need to interact intuitively with the web.

Then Google came along and figured out a way to put the third dimension and a little motion back onto the screen with Material Design, a framework complete with tools and guidelines that essentially requires its practitioners to drink the Google-Aid. An impressive albeit very Google-looking way of doing things, Material Design is certainly effective and naturally intuitive, but it’s also rigid and restrictive to silly little things like creativity and expression that we designers kind of pride ourselves in.

So what’s next? Well for now, hybridization seems to make sense as a natural starting point. There were things that worked in material design and flat design has certainly proven its effectiveness, so why not go with the best of both worlds? Flat Design 2.0 is here and it combines the user-friendly, mobile-centric, layered approach of Material Design with Flat Design’s super-speedy page load speeds and modern aesthetics. You can see it demonstrated beautifully in this seasonally appropriate example from none other than Google herself. It’s gorgeous and flat but layered and complex at the same time. What more could you ask for?

Trend #3: Complicated or distracting animations

Animation is hot right now and for good reason. It can be a powerful tool that reinforces design concepts and enhances the usability of a website in a number of significant and appropriate ways. If we’re calling this thoughtful and purposeful use of motion “functional animation,” it’s antithesis can only be referred to as dysfunctional animation and ohhhhhh, how it sucks.

New trends are abused, it happens. We were all kids once (some of us still are) and we’re all guilty of falling for the shiniest new toys. We may have grown up, but we’re still susceptible to losing our minds over the latest innovation and allowing our enthusiasm to take over until what once had potential loses all purpose. Animation has purpose though. Unfortunately we forget that sometimes, possibly because the word itself conjures images of our favorite childhood cartoons or the medium’s potential to be limitlessly expressive. But when we do forget this, it just gets in the way and instead of reinforcing design concepts, it distracts, it confuses, and it frustrates. And the last thing we want to do is frustrate our users. Right?

In the future, let’s all agree to validate any and all motion on our sites. You should be able to defend the function of every animation for its purpose in providing context or encouraging action. If you can’t, get rid of it. If you disagree, maybe you should be working for Pixar?

Trend #4: Scroll jacking

Remember the last time you found yourself in a situation you couldn’t control and thought to yourself, “Gee, this is great! I love the restrictive way I’m being forced to experience this!” Having some trouble? I thought so. That’s because you are a human being with free will and a brain capable of making inferences and decisions on your own, not a host on Westworld doomed to repeat the same behavioral loops over and over again. You don’t need anyone to tell you how to use something that should be intuitive in the first place.

Westworld gif
Source: giphy.com

Scroll jacking is like an overbearing mother or a micromanaging supervisor always over your shoulder. It’s annoying and honestly a little bit patronizing. You’ve probably been a victim of scroll jacking if you’ve ever done any research on a new Apple product and been forced to suffer through slide of explanation on why you need their latest device, OS or app. If you’re like me, you’ve at least experience that “Get me out of here!” moment of helplessness and frustration, but beyond the simple annoyance of it all, there are gigantic accessibility and usability issues that only prevent users from interacting with your site.

Websites and digital products should be intuitive. They should not require the guiding hand of “the Builder,” but rather be open to exploration by the user, capable of being experienced in the most appropriate way for that individual or persona. The most important information should be accessible but not force-fed. Visitors should have the freedom of choice to explore that which is relevant to them in the most logical way. Do the tiniest amount of user testing and you’ll find that different personas are likely to interact with the same product in completely different ways. Sometimes people need to be left alone to learn and discover things on their own in order to make a confident and informed decision. Scroll jacking flies in the face of this concept and is just plain arrogant in its assumption that there is a one-size-fits-all best way to experience a site.

Trend #5: Sidebars

This entry may be better suited for a similarly themed post with 2014 in the title. Enough already! It’s time to put purposeless sidebars to pasture.

This is the age of minimalism whether you like it or not. And not just in web design. Flat, Material, Flat 2.0… these are the design trends moving forward and they work because they’ve stripped out unnecessary and gratuitous conventions like the sidebar. You see them all the time on News sites which makes absolutely zero sense because their objective should be to get you to focus on the content, not bouncing from story to story like a caffeine-addled spider monkey. While it’s safe to say these sites likely have ulterior motives for emphasizing page views over time on page or driving a specific action, that should not be what informs the page design of a B2B site with a clear conversion strategy.

Let me ask you something. What do you need a sidebar for? Navigation? What’s wrong with your primary navigation? Well, fix it, don’t just make it redundant. Redundant or irrelevant sidebar content does nothing but distract attention from whatever it is you are supposed to be communicating to the user on that particular page.

When conversions are the name of the game, you should be taking every possible step to maximize them through testing different CTAs and their placement on the page. Convinced that the sidebar is the most appropriate place for that button or form? Doubt it. This company removed their cluttered sidebar, moved their CTAs in line with the content itself and saw a 71% increase in conversions. Remember, it’s all about experience. If a blog post is written with the intent of compelling a user to act, it makes for a far more natural experience after all when the CTA is presented at the exact point at which the user is compelled.

Sidebars are almost always nothing more than a distraction and in this age of minimalism, distractions should be the first things to go!

Bring on 2017

You may very well notice some of these conventions on what are otherwise highly effective sites. In fact, we may have used some of them in our own work in the past. But the past is exactly where we intend to leave these and other tired conventions, replacing them with innovative new experiences that are backed by experimentation and testing. So don’t think of this as the Burn Book from Mean Girls so much as lighthearted constructive criticism intended to make your website better and the internet in general a tidier, less annoying place.

Suffice it to say that we are looking forward to a new year and the web design trends that follow, but no matter how shiny and hyped they may be, we’ll always rely on that which is backed by data and results. Check back soon to see what new web design trends we hope to see take the spotlight in 2017!

ALL ARTICLES

How to Infuse UX with Delightful Microinteractions

When designers think about user experience, we often think of the end product. We ask ourselves: What is a customer’s overall experience with our platforms, websites, and mobile apps? How seamless are their interactions? The best UX happens when the big picture view and the little details work together. Little details should be considered with every single project. It matters where the user clicks. It matters what happens when they do.

So, how can you ensure you’re taking care of all the details? Many designers are zoning in on microinteractions, the small moments that happen inside and around the overall experience.

Today, we’re going to unpack the concept of microinteractions and talk about how UX can be improved by using them.

Microinteractions, UX’s new frontier

We’re constantly interacting with technology. But what defines our experience? How do we get feedback from the platforms and apps that we spend our time with?

The concept of microinteractions was introduced in Microinteractions, a book by Dan Saffer. Saffer believes it’s the little things that turn a good digital product into a great one, and that microinteractions can help revolutionize a product and a brand.

Here’s how Saffer defines microinteractions:

“Microinteractions are contained product moments that revolve around a single use case—they have one main task. Every time you change a setting, sync your data or devices, set an alarm, pick a password, log in, set a status message, or favorite or “like” something, you are engaging with a microinteraction.”

These microinteractions have a purpose– to provide an update on the status of an action. They’re a tiny bit of communication to let the user know that their action had a result.

For example, if you like a photo on Instagram by tapping twice, a large heart will appear in the center of the photo, and the heart underneath the photo will turn red.

Here are a few other examples of microinteractions:

  • Showpad – When users click the “Filter by Industry” button, it  reverses the direction of the arrow to show the action being taken.
Nov-16-2016 14-18-06
Source: www.showpad.com/case-studies/

 

  • Chartboost – When clicking  on the “Get Started” CTA in the hero area, an animated spinning gear is displayed while the form loads.
Nov-16-2016 14-23-42
Source: www.chartboost.com

 

How to use microinteractions

You probably use a lot of microinteractions already, but are they delighting your audience? The best microinteractions provide a feeling of satisfaction, and make people feel connected.

Here’s how to improve overall UX with microinteractions:

Catalog each and every touch-point

Whether you’re designing a mobile app, website, or software platform, you can start assessing your microinteractions by cataloging each and every touch-point.  What are the actions a user can perform, and what feedback do they get when they perform these actions?

Microinteractions are used when:

  • Things are turned on and off
  • Comments are made
  • Making changes
  • Viewing messages
  • Receiving notifications
  • Liking, sharing, or posting on social media
  • Connecting to other platforms and devices (for example, software integrations and Bluetooth)
  • Sharing progress along the way

By understanding where are the touch-points are, you can figure out where microinteractions fit in. Are you already using them? Are they accomplishing your goals? How can they be improved?

Both quantitative and qualitative metrics should be considered, so be sure to understand how success will be measured. While fun microinteractions are important, they should be also well-thought out and integrated with the overall strategy to accomplish certain goals.

Decide on a brand voice + tone

Most UX designers use microinteractions to provide user feedback. However, the best experiences come when the microinteractions are designed deliberately to delight, fitting into a greater branded voice and tone.

For example: MyFitnessPal’s brand mission is to be as helpful as possible when someone is trying to track what they’re eating. To be as encouraging as possible (and to make sure they’re not annoying), MyFitnessPal automatically turns off notifications if a user doesn’t respond, and provides updates along the way.

Blog 2

Design to delight

Microinteractions are magical when they delight the user, and many companies are finding ways to upgrade their feedback loops. For example, what happens when a user has to wait while your app has to connect to a server?

Rather than letting the user get bored while they wait, provide them with an update. Uber does this by showing you where your car is located while you wait for it to arrive. Many others do this simply by adding an animated progress update.

Source: Chris Plosaj
Source: Chris Plosaj

Wrapping up

When we start a new UX project, we consider both the big picture and the micro details. After all, what happens once someone starts interacting with our designs? They need feedback to know their actions have an effect, and that feedback should delight them.

If you want to make your audience feel good about the overall experience, you should devote attention to microinteractions. These microinteractions can redefine the user experience and take it from good to great.