Monthly Archives: April 2017

How to Design the Involvement of Newsletter Layouts

Newsletters still offer the best way to reach your audience directly and increase sales. But if you’ve never managed an email list before this can be an intimidating process.

Once you have a list you’ll need to send out emails that connect with subscribers and offer real value. This means great content and great design all wrapped up in a pretty bow.

Let’s dig into the UX side of email design to consider what makes an email engaging. This goes far beyond a great headline and once you know how to design emails you’ll see incredible results with your open rates.

Single-Column Layouts

Emails need to be designed smaller because email readers like Outlook have more restrictions than web browsers. This means your average newsletter is rarely larger than 600px wide, so it’s best to use a 1-column layout or at most a 2-column layout.

When you plan your content it’s good to organize this into a single column format. Think about how you can organize your writing so it flows down the page and offers an easy reading experience.

Take for example the WistiaFest 2017 newsletter design. Each section of the design spans the entire width of the newsletter so content streams down straight in a clear linear fashion.

Slanted angles and custom graphics help loosen up the stiffness, but ultimately it’s still just a one column layout.

You’ll want to be conscious of how your content is organized and how readers will consume this content.

If you use alternating patterns with a 2-col design you can split your layout into two columns as well. Take for example this design from The Short List.

Each photo alternates in a grid structure alongside content and a CTA.

You can follow this same two-column strategy if your newsletter has enough content to match. Just make sure you leave plenty of room to read the information and to hopefully make your email responsive as well.

Include A Strong CTA

If you’re looking to increase engagement then you need a call to action.

This is a button or link that encourages the user to click and do something. This could get people to continue shopping on your store, or to read through your latest blog post, or to download your new ebook.

Regardless of what you send in your email it’s always good to include a CTA. And even if you’ve never designed a CTA before you can learn a lot by studying other examples.

Here’s a design by Postmades with a share $100 message across the whole email. The entire purpose of this email is to have people send a $100 free delivery credit to any one of their friends using a special code.

The CTA reads “Send $100” which is pretty clear.

When writing the button copy always stay focused and be quick. Emails are like a sign in a shop window; skimmed quickly and meant to lure people inside.

Another cool example is this design from American Airlines. The CTA “check in now” is pretty direct and there’s no confusion about the purpose of this email.

You can also try running two CTAs next to each other if you have a larger audience.

This works if you have a more general goal in mind with a large subscriber base. For example Adidas has two bright yellow CTAs in their email: men’s and women’s sneakers.

The goal is to get people onto the website and you’ll want to send them to a place where they might actually buy.

All of these ideas are just examples so use your own best judgement and see what type of CTA works best for your newsletter.

Images Above The Fold

Since emails are so basic you can’t really do a lot with CSS3. They also don’t have a navigation since you just want to get visitors right onto your website.

Images are great for immediately grabbing attention and selling an idea. That’s why I always recommend adding a highly-engaging image right above the fold near in the header of your newsletter.

This image could be a stock photo or a illustration/logo for your company’s brand. It could also be a product photo like this one from the iPhone 7 red launch.

Following in Apple’s traditional minimalist style it makes sense that their photo is very basic.

However this is all you need to grab attention if your product is interesting enough. The goal is to have just enough visual information to get people curious and to click your CTA.

This slightly different example from Of a Kind pushes specific products with real sales photos.

Great photography can always pre-sell whatever you want visitors engaging with. Sometimes that is literally selling something, but other times you’ll want to sell a blog post or maybe your social media profiles.

Use photos as engagement tools to grab attention and share information visually along with text.

Box & Grid Lists

If you get a lot of newsletters then you probably recognize the box/grid layout design.

It’s very common with emails because they have a few distinct traits:

  • Narrow page designs
  • Short copy
  • Meant to be consumed quickly

Subscribers typically open your newsletter with only a few minutes(or seconds) to spare. Organizing the content into a nice grid is the best way to showcase everything you’re promoting.

This holiday newsletter by Google is a fantastic example of the grid system promoting their products.

You’ll find a clean product image floating to the right along with a small headline and a CTA link on the left. Once the reader recognizes this pattern they’ll have an easier time skimming the document.

When you design with boxes you’re trying to grab attention and clarify the purpose of your newsletter. High contrast colors have the same effect so they’re perfect if you can design such a layout.

Notice how the Bose newsletter also adds incredible photography into each box.

Combine all the techniques from this post into your design to further increase engagement.

You don’t have to look at these trends as separate items. They’re individual pieces that ultimately make up a great newsletter design.

If you’ve never created a newsletter before then these tips will prove more than valuable in the design process.

As long as you focus on simplicity and place the user experience first you’ll create a very engaging newsletter.

Best Practices Creating UX Website Design

User experience is an integral part of any website design and there is no doubt about that. However if there’s a single industry where user experience matters more than anything else is, of course, hospitality.

Hospitality is all about meeting and exceeding guest expectations and providing stellar guest experience from the very first touch point till the last.

And in the digital era that we live in, hotel website is quite often where the guest experience with a hotel starts. At least that’s what every hotel brand strives for: direct bookings. So as a hotel owner you want to make sure the user experience of your website is as good as the guest experience in the hotel itself.

To do so you need to understand why travelers visit your website in the first place. What are the main traveler intentions? Once you know the answer to this question, you will be able to meet traveler expectations with a matching, user-friendly website.

Understanding Traveler User Behavior

As a designer you will need a little bit more insights into hospitality industry and traveler behavior analysis to come up with a well-thought user experience flow that actually converts.

According to a study conducted by Google, on average 60% of travelers are turning to search engines first vs. hotel website for online trip planning.

This means that when users visit your hotel website they most probably have already done some sort of research and want to;

  1. Compare prices on your website versus online travel agencies, like Booking.com and Expedia.com.
  2. Get more information about the hotel, like extra services, more photos, videos.
  3. Check to see if there are any special deals or package offers for selected dates.
  4. Contact the hotel directly to arrange for custom requests or direct bookings.

Generally, these are the main guest intentions when visiting a hotel website.

Now let’s see how exactly we can design the user experience to cater to those needs.

1. Optimize Booking Flow for Conversions

This should be your mantra. Nothing else matters, not your aesthetics or taste, not even user’s taste. You might think this is not how user experience should work, but as long as the website converts well, you are doing the right thing. And that said there is no success formula for a hotel website.

However, there are some best practices you should consider.

FIrstly, the booking window should always be in a visible spot and be clear with less design and more usability.

Secondly, users need to be able to compare room types, rate types easily to make decisions quickly. We need to help them decide by clearly articulating rate differences and providing a good amount of visuals for room types.

Last but not least, ask as little information as possible upon check out. Make sure to provide a clear summary of the booking and optimize the checkout form according to numerous research and best practices.

2. Think Mobile First

There is no need to explain the importance of having a mobile ready website. But we should stress the benefits of thinking mobile first, which means designing for mobile screens first and then taking it all the way to the biggest screens possible.

This is especially important for travel industry where users make purchase/booking decisions on the go and there is a sense of urgency, which means you need to design for maximum usability rather than maximum functionality. Although it is best to provide the same functionality to mobile users as to the web users, but if you can’t, you might want to provide a link to view the full website.

3. Visual is Key

When it comes to hotel bookings, users crave high quality photos of every single corner of your hotel, including hotel grounds, indoor, exterior, all of the facilities and especially room photos. One of the reasons users check multiple websites before booking is to find the most accurate information about the hotel, better quality photos, videos to make a more informed decision.

As a part of flawless hotel user experience, it is important to create a visually compelling website. Keep in mind though that visually heavy website tend to load slowly which is a huge issue for mobile users.  According to Kissmetrics, “40% of people will abandon a site if it takes longer than three seconds to load.”

So be sure to implement all of the techniques for faster loading.

4. Provide better Customer Experience

User experience and customer experience in a traditional sense are closely related and can’t exist without one another. Your website UX can thus make or break your hotel’s overall guest experience. So it’s best to start providing exceptional level of customer service from the very first touchpoint which is quite often your website. This is one of the biggest advantages of a hotel brand website as opposed to aggregators like Booking.com, Expedia, etc. These online travel agencies can never provide the personalized guest service on their website the way a hotel can.

First, make sure there are multiple ways to get in touch with your hotel on your website; landline phone number, skype, contact form for reservation related inquires and special requests, as well as a live chat.

Secondly, offer special add-on services, which are not available on any other sales channel. It can be as simple as a welcome drink, but you can also go all the way and offer all your paid services to be booked online, perhaps with a small discount.

These will make the user feel the difference when booking with a hotel directly.

5. Top It With Credibility and Social Proof

One of the most important factors affecting customer buying decisions is social proof, which comes in so many different forms: testimonials, reviews, video blogs, social following, etc. Hotel guests are no exception. In fact, according to Tripadvisor, “77% of travelers always reference reviews before booking travel accommodation”. But the tricky part here is the source of the reviews.

If you want to enhance your website’s credibility and provide social proof for your guests, you need to showcase reviews from a trusted and well-known source, which is undoubtedly – Tripadvisor.

While this might not be the most aesthetically pleasing addition to your website design, but adding a tripadvisor reviews widget to your homepage or designated landing page is much more convincing than your own website reviews.

Final Thoughts

Building a strong hotel website is a challenge both in terms of marketing and in terms of UX design. It usually takes more than one iteration to end up with a functional, conversion-optimized and user-friendly website, so make sure to make data-backed decisions and always test with real users.

How to Install Consistency in Your Web Design

There’s tremendous value in consistency of digital interfaces. People browsing the web encounter dozens of websites that all have different styles, yet most feature very similar page elements.

Most designers don’t even think about these features. Page headers, navigation menus, body copy, CTA buttons, the list seems endless.

By designing with consistency you’ll learn how to create interfaces that encourage typical user behaviors. Your layouts will build trust and teach users repeatable patterns that help them work through your site much quicker.

Design For User Expectations

Most users expect websites to work a certain way. It should scroll vertically, links should be clickable, and the navigation should be visible right from the first page load.

How you design these expectations is completely up to you. But when you’re designing for consistency you want to keep a clear uniform design across the entire layout.

For visual consistency on the web I think BodyBuilding.com is a pristine example.

This site has many portals linking to their forums, their eCommerce shop, and their online help guides. All of these pages have the same design and the same navigation to keep them consistent with the entire site.

Users don’t want to think. They just want to act and get results. Consistent design helps this happen.

Do the thinking for your user to understand what they need. How would you design a blog page to encourage reading? What about an ecommerce shop to encourage checkouts?

Think about these questions yourself and apply them to your web projects. Which elements should be consistent on every page? This line of thinking always leads to solutions.

The homepage of Sketch is very consistent with certain user behaviors and expectations. The page has two CTAs: one for downloading a demo and one for buying the program.

But not everyone who visits the site wants either of those options. The top nav becomes the obvious next step.

Someone new to the site might care about features or how Sketch works. But an existing user might want to look into extensions or get support.

Add consistent elements with clear in goals. If you know what users expect to do on your site then you can design for those expectations.

One more point to consider is with redesigning a layout. The popular social news site Reddit has been online for well over 10 years. Over that time they have made a few changes, but generally the site looks very similar today as it did back in 2005.

If you’re making minor changes to improve performance and optimize the user experience that’s always welcome. But drastic abrupt changes to a design usually throw people off.

Consistency goes beyond keeping pages similar and usable. It can also mean staying consistent with redesigns if your site already works well.

Intuitive Navigation

Users should understand a lot about your site just from the header. This area should explain what the site does and what it’s about, not to mention the top navigation links.

A well-designed navigation isn’t enough. You’ll also want great copy to sell the pages and let visitors know exactly what’s on your site.

Nav text can be restyled in my ways including font size, writing style, and interface elements like hamburger menus for responsive navigations. The key is to stay consistent and keep these links easy to use.

The nav links on P’unk Avenue are quite unique and rather detailed. But they work well for this site because they help explain what’s on each page.

Their nav links feature descriptions on larger screens, but rely on the hamburger sliding menu with simple links for smaller screens. An excellent design style for anyone creating custom layouts with detailed aesthetics.

For larger nav menus you might have to add sub-menus or links in a larger list. The Guardian has a fine example of this on their website.

When you browse through any of the top categories you’ll get a sub-menu directly underneath. This can work like a breadcrumbs bar or sub-categories based on the primary link.

The consistent style and multi-link menus are great for big sites and blogs. As users get familiar with those links they’ll have an easier time browsing through content.

Repeat Layout Styles

This technique breeds consistency and it can work on multi-page sites or singular landing pages.

The goal is to re-use similar elements all throughout the page, but with different content & graphics.

By repeating certain styles you’re creating a theme on the site and building comfort with users. Consistency breeds familiarity and this is what you should be going for.

Notice the repeated patterns on the Webflow homepage that alternate between colors and different design styles.

Each section features a screenshot of the app listed alongside main site content. This style is beautiful and it’s one of the cleaner ways to craft a consistent design.

Note this style is predominantly found on the Webflow homepage but it could be repeated elsewhere. That’s why consistent elements are easier to use across the whole site.

But aside from page elements you can also repeat styles in your design. Take a look at Algolia for one example.

This site uses heavy diagonal lines between page sections along with darker background colors. Headers all have a small underline and the text all follows a similar size & thickness.

If you dig deeper into the site you’ll notice the box shadow effect is replicated throughout. This is a small touch but it’s one of the easiest ways to build visual consistency.

Try not to get too lost in repetitive page elements.

Instead think about how you can make the interface easier to use and what that might entail. Most of the time you clone what you’ve already done and keep using those patterns.

Keep Branding Consistent

Web branding is a deep topic and it’s more than a simple identity.

You also need to consider page colors, textures, typefaces, padding, and icons/elements related to the brand. There are no right or wrong ways to brand, just some ways that work better for some websites.

MailChimp does this by repeating their branded monkey friend everywhere. The site has a fixed top navigation which includes this logo on every page.

But you’ll also notice similar typeface designs and colors with similar text styles. This may seem like an obvious thing to do, but some designers underestimate how much this can impact branding.

An even better example is the Docker homepage with their cargo whale logo.

Docker

This creature finds its way into almost every part of the site. The header, the footer, and most content pages also feature illustrations of our Docker ocean friend.

You don’t need to create a mascot just to build consistency. It’s merely one more tool you have in your arsenal for digital branding.

If you study some of your favorite sites you may recognize subtleties you never noticed before. This is the best way to get ideas for creating consistent branding in your own projects.

Wrapping Up

As you browse the web you’ll notice consistency across nearly every site. But since each project is different you need to think about the user’s needs before designing anything.

The one thing you can guarantee is that every single user wants a consistent experience. And I hope these tips can get you thinking more about consistency in your everyday web design work.

Differences in User Design and Experience

The design world is abuzz with the rise of online magazines. But the vast majority of these sites run on blogging platforms like WordPress, and they operate almost exactly like traditional weblogs.

So where does someone draw the line between a traditional blog and an online magazine? And if you’re thinking of launching a new blog/magazine how do you differentiate yourself?

Let’s delve into this subject from a designer’s perspective. The growth of online magazines means that more publications are going digital with plenty of opportunity for newcomers to get into the action.

Modern Online Publishing

Digital publications have such a wide audience that it almost makes more sense to go digital over print. Most people have digital e-readers and in this past year mobile use surpassed desktop for the first time ever.

But what makes an online publication seem more “authoritative” like a magazine? What differentiates between general blogs and online magazines like Time, Inc, and Forbes?

It seems like many factors are involved but this concept of “authority” is definitely a big one, both in design and content.

For example the TechCrunch wiki entry doesn’t describe the site as a blog at all. Yet if you go back far enough you’ll see it was called a blog when it first started.

The same can be said for Mashable which is now a huge online media publisher.

So what differentiates online publishing from “blogging”? The act of writing content and publishing online is widely considered blogging, but a “blog” carries the connotation of being:

  • Generally personal in nature(maybe 1 writer)
  • Small in audience and not much traffic
  • Not made specifically to earn money

I consider these ideas to be generally true, yet all 3 of these rules can be broken.

A blog could certainly hire writers, and blogs can have massive audiences and make good money. The creator of the Modest Man blog grew his audience and advertising base to reach $10k/mo and it still feels like a blog.

Not to mention Pinch of Yum calls itself a food blog, yet based on their income reports the blog is really a fulltime business.

This proves there shouldn’t be an inherent negative connotation with blogging. Online magazines just have larger publishing schedules and generally run more authoritative brands

This is the real crux of the discussion. I’d argue the real difference is in branding, style, and presentation. This can all be explained better using examples so let’s take a look at this blog/magazine divide to see where the line is.

Magazine-Style Theming

If you want to be considered an online magazine then you’ll want a magazine theme.

This is a crucial aspect of running a site because looks do matter. Visitors judge your website in the blink of an eye, usually between 2-4 seconds. Your design should immediately let visitors know that you’re an authority on whatever subject you cover.

If you already have some authority then you can get by with simple designs like Craigslist.

But with millions of blogs already online you’re competing against an army of sites, many using very poor designs. If yours blends into the crowd then you stand no chance of ever breaking outside the label of a “generic blog”.

Take a look at Fast Company’s homepage and look at the diverse content styles. Many different thumbnails, headers, and column structures all work together creating a unique magazine look.

Following this pattern on your homepage is a good first step to appear more like a magazine. Even if you only update once or twice a month it’s better to look authoritative right away.

If you’re looking for examples to whet your inspiration these posts should get you started:

  • 5 of the Best Designed Magazine Websites
  • 20+ Outstanding Magazine Style Website Designs
  • 30 Modern Magazine Style Web Designs

Authoritative Branding

To move beyond a simple blog you need to offer more than what most blogs offer. You need to create a brand around your website and publish more than just articles.

Look at the incredible rise of Smashing Magazine. Many would still call them “just a blog”.

But if you dig deeper you’ll notice it’s really a massive media company. They publish their own books and host their own conference.

Smashing Magazine isn’t just a digital blog anymore. It’s a complete authoritative brand in the web design/dev space.

You certainly don’t need to push your blog this hard by launching a conference every year under your brand. There are much smaller projects you can tackle to build your site’s credibility.

These are 4 easy ones that seem to work well:

  • Offer print/digital magazine subscriptions
  • Start a dope podcast
  • Create a related newsletter(or a few!)
  • Setup your own ecommerce/dropshipping shop

The first point on that list may seem crazy. But it actually works well for the site Texas Monthly.

Notice that site is basically a blog, yet it gives the impression of being a newspaper/magazine.

They have an entire magazine archive where you can browse and subscribe to all their issues. This is one strategy that requires a lot of effort, but it also incentivizes readers to sign up to your site and ideally pay for the value.

This lets you create a true magazine presence while also monetizing your content. The toughest part is actually getting people to subscribe. But that’s just part of online publishing!

If you want to push beyond blogging try to find ways to expand outside your writing.

Content & Authorship

There’s usually a clear divide between the content you find on a blog and what you find on magazine sites.

Think about the type of content you’re publishing. Is it all personal opinions, quick posts, random thoughts or colloquial reviews? That’s usually the type of content you find on a blog. And that’s totally fine!

For example Malan Darras runs a personal blog covering his work in marketing, music, and just general life. It’s an awesome blog and it never needs to be anything more than that.

Understand your content goals and clarify these early on. A large magazine-style content site is not for everyone. It usually requires some level of journalistic integrity and a clear goal with content.

Magazines lean towards journalistic content because this is where they originally come from. Industry news in trade magazines, op-ed pieces, interviews, how-tos and a mix of related content all come together to form an entertaining magazine.

But remember that longform content isn’t always the right goal either. Sometimes you just need to follow whatever you want to publish, even if it seems ridiculous.

Few people look to BuzzFeed for authoritative news but the site still earns well and it uses virality to its advantage.

One other point to mention is authorship. Since blogs are typically a solo effort you won’t always find multiple authors or custom author bios. However magazines typically hire writers or bring on guest writers, so adding bios to your posts can give this impression.

An author bio doesn’t guarantee much authority. But it definitely helps!

If you can appear to be a larger site to most visitors then you’ll leave a lasting impression that goes beyond simple blogging.

Run It Like A Business

Tons of people launch blogs just for fun and maybe a little extra cash on the side.

But nobody launches a magazine for fun. Publishing is a business, and if you plan to launch one you have to treat it as such.

This isn’t something the user will see on your homepage directly. It’s subtle.

It’s the way you brand your site, your content guidelines, your newsletter layouts.

Online magazines operate like for-profit businesses with KPIs and clear goals. If you can run your blog like a business then it might scale large enough to actually become one.

Let The Labels Go

Remember that the goal of both blogs & magazines is to publish great content and share it with the world. The labels “blog” and “magazine” are still new to websites, and online magazines were basically non existent 10 years ago.

But there is most certainly a difference between blogs & online magazines. The line just isn’t very clear and it’s something we’ll discover more as time goes on.

I do hope this article clarifies some key points that can help anyone turn a blog from a simple WordPress site into an authoritative and trustworthy magazine brand. And if you have any other ideas or suggestions drop a line in the comments area below.