Tag Archives: website

Unleashing The Full Potential Of Symbols In Sketch



No matter whether you are designing a whole design system or just a couple of screens, symbols in Sketch will help you keep your file organized and will save you a lot of time in the long run.

Unleashing The Full Potential Of Symbols In Sketch

In this article, I’ll share with you a few best practices and tricks to help you unleash symbols’ full potential.

The post Unleashing The Full Potential Of Symbols In Sketch appeared first on Smashing Magazine.

Source: Smashing Magazine

How to Work With MVPs (Minimum Viable Products)

Let’s talk about MVPs (Minimum Viable Products) and how you, as a Product manager or User Experience professional, can work with tight deadlines and budgets whilst still delivering a great product.

What is an MVP?

You’ve probably come across the acronym MVP before–almost certainly if you work in the tech industry–and despite being a controversial three-letter word, an MVP is probably one of the most important steps on your way to building a great product. The main goal of shipping a Minimum Viable Product should always be “putting it in front of customers to start validating your assumptions”.

As a team, you need to gather your strengths and focus on creating a shared understanding of the business vision and goals. You need to identify the problem you’re trying to solve and work out how you’ll organize to, as quickly as possible, start learning about what customers really want and how they’ll help you drive those goals.

The Doughnut Analogy

When I began talking about MVPs in classes, I would use the analogy of a simple plain doughnut (that would be my MVP) and a doughnut full of chocolate, sprinkles and all the goodness possible (a later iteration of the product). 

mvp doughnuts
MVP and later iteration? Doughnut icons from Diana Toma

Nowadays, the more I work with teams and the concept of MVP, especially now that I have a Product role, I find myself questioning this analogy. Building MVPs to validate assumptions may in fact mean that you were wrong to start with, and the next iteration isn’t even a doughnut; perhaps it’s a plain waffle?! Granted, it would still be plain, and you’d again need to go through the process of validating it, but it would no longer be a doughnut.

So…What Isn’t an MVP?

For this I’m going to borrow an illustration from Henrik Kniberg, explaining what an MVP shouldn’t be.

mvp by Henrik Kniberg
by Henrik Kniberg

Henrik describes two different approaches that share the same vision: a car. Now if the problem you’re trying to solve is transportation, would you, as a customer, go anywhere with a tire? Definitely not with a tire, but certainly with a skateboard.

Henrik defends the agile, incremental way of delivering products but states that every iteration should be a usable/testable product. Obviously, a skateboard is far from being a car, but at least you have your customers trying your product much earlier in the process and feeding back so you can start learning and thinking about the next iteration.

You shouldn’t be spending a lot of time looking at design or making it technically great – you don’t want to make it perfect to begin with, but instead you should build just enough to validate your business hypotheses. 

To Sum up, an MVP Isn’t..

  • A product that can’t be used and tested by customers or early adopters from day one.
  • A product that doesn’t allow you and your team to learn and validate assumptions.
  • A product that isn’t solving (or trying to solve) customer problems.

In This Article

In this article, we’ll cover the following topics–they’ll give you some tools to start thinking about what your MVP should be:

  • Focusing on solving customer problems
  • Strategizing on building an MVP to start with
  • The importance of tagging
  • Learning with data and insights
  • Iterating

Focusing on Problem Solving

Ultimately, when building products, your main goal should always be solving customers’ problems. If you’re not solving their problems, and you’re not bringing something new that fits in with their daily routine, they most likely won’t be using your product. With the surge of design techniques, UX teams are gaining tools to get to know customers and get to the bottom of what they want earlier in the process.

There are a number of techniques you and your team can use to get to know your customers, and understand how you can solve problems:

  • Focus groups. If you’re building a new product, invite a group of people that are using your competitors’ products and ask them about pain points, plus things that they really like, and try to get a good understanding of what they’d change and why. If you’re improving an existing product or adding a new feature, why not invite your own customers and ask them the same questions? Focus groups are a great start for developing a good understanding of what your customers may want from your product, but bear in mind focus groups can be a bit biased; there’s always someone with really strong opinions that may influence others, so you should try to read in between the lines.

  • Ideation workshop. Gather your team (stakeholders included) and expose some of the pain points found. You should also try and print as much as you’ve learnt so far about the defined vision and business goals and pin these up on the walls so everyone can clearly see them. In these sessions, ask everyone to sketch as many solutions as they can think of for the problems you’re trying to solve. You’re looking for quantity, not quality.

  • Prototyping and user testing. Ideally, you should be prototyping at least once a week. Nowadays, UX teams are more agile and UX designers tend to spend more time sketching and user testing paper prototypes or low fidelity wireframes than spending longer periods of time behind a computer making decisions on their own. Get your UX team to use prototypes as early as possible in the process to get some juicy feedback from users. Guerrilla testing is a great and effective way of testing early designs and it takes almost no effort.

Strategizing on Building an MVP to Start With

So, you did a lot of testing while trying to design the best solution. You ran weekly guerrilla sessions, you took your designs to the lab and you’re confident you’re on the right track.

Still, even if you’ve only tested with users of your product, they’re a small percentage of your audience and they were subject to a testing environment (hardly neutral). Testing with customers earlier in the process is invaluable, but you’ll want to get your product out there for a bigger audience to test.

Strategizing on building and launching a Minimum Viable Product is the next best thing to validate your assumptions and continue building up on what you’ve learned so far.

A good way to start thinking about your MVP, is to look at the roadmap you’ve built in previous sessions and focus on things that solve customer problems.

Once you’ve done this, ask the question: what can I build with the minimum effort that helps me validate this product?

This is where I still struggle; my UX heart (body and soul) always tells me to try and get as much out as possible, I want to build a seamless experience from day one, for every user.

As a product owner, with a tight deadline and a budget on my hands, I want to build just enough to make sure we are building the right thing, and I truly believe this is a good product call.

The Importance of Tagging

Nothing. Can go out. Without tagging. 

Well we’ve said it before, right? The goal of building an MVP is to learn and iterate. There’s no way to learn (I mean to really learn) with your customers unless you have a system in place that allows you to track what customers are doing with your product. You need that precious data to make informed decisions. You can do qualitative research and ask your customers how they feel about your product, but we know this may not be enough.

You’ll need to make sure you build tags into your MVP that will help you understand how your product is performing against your KPIs (Key Performance Indicators) and measure your assumptions.

Analytical (or tracking) tags are often supplied by third party providers such as Google Analytics to help us integrate our product (website, mobile app) with their tracking tools. Tracking tags are no more than a piece of code that you’ll have to embed in your product’s source code to send whatever customer actions you want to track and make it easier for you to visualize data.

Let’s say you want to track the number of times a certain button is clicked; the provider will ask you to add an event tag to the button’s source code to make sure a tag is fired to their tool every time a customer clicks that button. Their tool will then register this action along with other actions you define to give you a detailed view of what customers are doing with your product.

There is a range of tools you can use to track your customers online. Start by choosing the right one for you and your business needs, and liaise with their customer service team to get some help building tags into your product:

Learning With Data and Insights

Once tracking is in place and your MVP is out, you can start looking at what your customers are doing with your product.

If you’re new to analytics, there are a few things you can do to get your head around data and what you should be looking at. Google has a few introductory videos to get you started, and you can also read the book Lean Analytics. These will help you understand actionable metrics and what to do with the data you’re getting.

If by any chance you’re lucky enough to have a team dedicated to insights in your company, they’ll be able to help understand the data or even better! They’ll most likely be able to build reports with the key metrics you want to follow to make your life easier.

Whatever the means are for getting this data to you, the whole team should have access to it. You should all be discussing the outcomes and what’s next for your product. How’s customer satisfaction? Is it driving the goals you’ve set?

If the answer is yes, then great news! Your previous assumptions were right and you did a great job. If on the other hand your MVP isn’t driving the metrics you expected, understand why and agree on what you should be doing next (also, say grace that you decided to launch an MVP before allocating tons of resources and money to a product that wouldn’t have been as successful as you initially thought it would).

Multivariant Testing

If your customer base is good enough, you should encourage A/B or Multivariant testing. This will allow you to, throughout the life cycle of your product, to test different variations and make sure you keep driving those metrics.

You can make changes to your interface and see what works best for your customers – try small changes like changing the copy on a title, or a button color, and have two versions of your product running side by side to analyse results. You could also completely change an interface; Optimizely is just one example of a tool that can help you run these experiments. Set the parameters you want to test and the percentage of customers you want to show the new version of your page or product, and track results.

Go Forth and Iterate!

It’s time you started iterating and building on top of what you already have. Ideally, your roadmap is prioritized by now and in a way that you can continuously release product increments. Now is the right time to start mobilizing your team to think about the next drop.

Remember, each iteration of your product should be usable (the “viable” in MVP). It should seek to validate or challenge your assumptions, and in a way which gives you measurable data. Good luck using MVPs in your product development workflow!

Source: Webdesign Tuts+

Bookmark.com Utilizes AI to Create Beautiful, Responsive Websites

Growing up, we learn that each of us is unique. We all have different talents and specialties to share with the world. Most business owners, for example, are quite adept and passionate in their chosen field. But, while every business (and owner) is indeed different, there is one thing that they all need: a great website.

While most owners know their own business like the back of their hand, the process of creating a business website isn’t always so clear. This is where Bookmark’s AI website builder comes in and revolutionizes the whole thing..

AIDA (Artificial Intelligence Design Assistant) may sound like some futuristic product, but it’s already here and it is awesome.

Bookmark.com AIDA

What is AIDA?

Aida creates the first version of your website in under two minutes by making selections from millions of combinations specific to each user’s website needs.It then takes this knowledge and creates a one-of-a-kind website – just for you. In short, AIDA utilizes your own business expertise to create the perfect website.

The process is incredibly simple. In fact, Bookmark.com estimates that AIDA eliminates 90% of the pain points usually associated with website creation and design. Here’s how it works:

1. Create your free account at Bookmark and, in your profile, create a new website.
Create a new website with a click.

2. Choose to build your site using Bookmark.com’s A.I. Design Assistant.
Choose the A.I. Design Assistant

3. Answer a few questions about your business.
Tell AIDA about your business.

4. Let AIDA generate your awesome, fully-editable website.
Bookmark.com's AIDA generates your new website.

Seriously, that’s all it takes!

Make it Your Own

Customizing your new website is as easy as clicking and editing, dragging and dropping. And what makes Bookmark.com stand out (besides the whole Artificial-Intelligence-Designed-My-Website thing) is that you can easily add real functionality wherever you want.

There are a plethora of features you can add, including:

  • Responsive Web Design
  • Contact Forms
  • Video Backgrounds
  • Web Animation
  • E-Commerce (Yes, you can sell things and take payments!)
  • Event Registration
  • Facebook Comment Integration
  • File Downloads
  • Multimedia (Audio, Video, Galleries and Slideshows)
  • Maps
  • Social Media Sharing
  • Subscription Forms
  • And many more powerful design features

You also have access to powerful design features. Change colors, fonts and menus with just a couple of clicks. Add, remove or manage pages with drag-and-drop ease. Want to change something on a page? You’ll be able to quickly edit it, remove it or just drag it to a new spot. Essentials like SEO and password-protection are also right at your fingertips.

Use Bookmark.com AIDA to create your business website

Put AIDA to Work for You

Any of us who grew up watching Sci-Fi can relate to the pure potential AI has for changing the world. Using Bookmark.com’s AIDA is proof that the technology is real and quite helpful. It’s almost like seeing a little bit of the future, right here in the present.

Try the free Bookmark website builder and give AIDA a try for yourself. You might just be amazed at what it can do.

The post Bookmark.com Utilizes AI to Create Beautiful, Responsive Websites appeared first on Speckyboy Design Magazine.

Source: Speckyboy

My Journey Of Learning Programming Through Flatiron School #20

My name is Mason Ellwood, and I’m currently working on Flatiron School’s Online Full Stack Web Development Program. Each week, I’ll be writing about my experience, what I’m learning, and tips on learning to code.

Within this post, I will cover something that I tend to dread. Backtracking. For me while learning, especially with code, there is always a small portion that does not quite make sense…. And with this, moving forward, the lessons build upon those concepts and the more and more you move forward, the more the material does not quite stick.

Usually, when this happens, I move forward anyways, full well knowing that what I just read does not quite make sense. But in my head, I’m assuming that the next lesson will clarify the previous. I then continue this cycle of confusion until is it too late. But like always, I move forward. This is the predicament that I am in right now. I am so far along in the lessons that I’m not sure how to proceed on a lot of the lessons, without reviewing someone else’s code. I am unsure where I took a hard left turn, but I did…

Moving backward and reestablishing by base knowledge, where my knowledge base cracked, is something I do not like doing. But I know the importance of this.

In school, especially in a subject that I was not too fond of, I would twiddle my thumbs and figured I would study like hell for the test. Which sadly works incredibly well. It probably should not but it does.

When learning a trade skill, like programming it is important to absorb all the material. When something does not make sense take a step back and establish yourself before you move forward. It is easy to not want to do this because it feels like progress is not being made. But what I found out is that, if you do not do this, when you know full well it is needed, you will have to backtrack even further than you thought you had to.

This is the position that I am in right now with The Flatiron Schools….

Somewhere along the way, I missed a core concept. Something did not stick, and I can’t quite pinpoint where exactly that was, but it happened. I am now working through ORM and Active Record, and any OO Ruby they ask me to write is fought with a lot of confusion and pain.

Working through the material that I have previously completed has been greatly beneficial to myself and Ruby is becoming more second nature.

Work slowly, and absorb. Learning is not a race and should not be treated as a race. When something doesn’t make sense ask questions and understand what exactly that is that does not make sense. I keep thinking to myself. Someone at the end of all this training is going to pay me to write code for a career. If I don’t know to do something, that is too bad… because that’s your job. 

I have learned to take my time, understand and absorb, then practice application to meet the knowledge goals I have set for myself.

Read More at My Journey Of Learning Programming Through Flatiron School #20

Source: Web Design Ledger

How Your Work Environment Influences Your Design Work

Sometimes, as web and digital designers, we can get trapped in our little world of computers and software, attempting to work out the solution to our clients’ design problems, but failing to make any real breakthroughs.

If you often find yourself stuck in a rut of technology, sometimes the best solution is just to get up from your desk and go experience the world outside. But what should a designer pay attention to specifically that will help get them past creative block?

Today, we’ll explore some options and discuss possible solutions.

Co-Opting The Outside World

Product and environmental designers often preach that designers need to use the world around them to create their own design solutions to problems. But what about web designers, or brand managers, or creative directors?

I think the same principle still applies no matter what kind of design you do. Design, in general, is about going beneath the surface of a problem to find out the best approach. Even if it’s on a computer screen, the user experience of a design is highly customizable and subjective.

Giving The Design To The People

As much as we designers might wish otherwise, we have no control over how people choose to interact with our work. But even though that’s true, sometimes the most interesting and innovative public phenomena can come from it.

Sweater bombing, street art, geocaching – all of these are unorthodox uses of things in the world that nonetheless provide a completely new and compelling experience.

Design Leaders And Setting Precedents

People make their own ‘tools’ and solutions based on what’s around them. When you’re walking in the park and you see a tree that someone has used as a resting place for their bike, that’s design in action. Some brilliant ‘designer’ has decided that this tree is the perfect size and shape for a bike rest, and it’s very likely that other cyclists will see that and think ‘hmm, that’s a great idea – I think I’ll park my bike on a tree as well.’

Think about how you can use this same concept in your own design. Is there another ‘use’ for your design that a user might see but you don’t?

Using Others As Peripheral Vision

The opportunities for improving your designs all around you. If you’re too close to your own work (and who isn’t from time to time?) ask a friend or even a stranger to give you a quick evaluation.

Observe how they interact with your design. If they point out something that you missed – say, a more efficient way to contact other users, or a better use for some feature you’ve been working on – don’t take those observations lightly. This is design fitting itself within real people’s lives, and you’d be ill-advised to ignore it.

Tiny Changes

Sometimes, even the smallest adjustments to a design can make the hugest difference in how easy and enjoyable it is for people to use. Putting a call to action button at the top of the screen rather than in the sidebar. Making the navigation icons a contrasting color so they will ‘pop’ more. Increasing the font size just a bit more than what you think most people can see (this is a big one for me).

Tiny, seemingly insignificant changes like these can take your design from ignored to overwhelmingly popular in a flash.

Human Influence

Many times, people don’t even realize that they’ve created a design solution with their simple, everyday actions. If people are using your business card to write notes on the back, or to scribble down a relevant email address or extra phone number, this is gold you can mine for your next redesign.

How are people reacting to the things you design? Feedback is immensely helpful here. Once your design goes live, it is part of the world, and people will use it however they see fit to get the most efficient result.

The post How Your Work Environment Influences Your Design Work appeared first on Speckyboy Design Magazine.

Source: Speckyboy

It’s Time To Start Using CSS Custom Properties



Today, CSS preprocessors are a standard for web development. One of the main advantages of preprocessors is that they enable you to use variables. This helps you to avoid copying and pasting code, and it simplifies development and refactoring.

It's Time To Start Using CSS Custom Properties

We use preprocessors to store colors, font preferences, layout details — mostly everything we use in CSS. But preprocessor variables have some limitations.

The post It’s Time To Start Using CSS Custom Properties appeared first on Smashing Magazine.

Source: Smashing Magazine

A Brief Overview On Responsive Navigation Patterns



To say that responsive web design has changed our industry would be an understatement at best. We used to ask our clients which resolutions and devices they wanted us to support, but we now know the answer is “as many as possible.” To answer a challenge like this and to handle our increasingly complex world, our industry has exploded with new thinking, patterns and approaches.

A Brief Overview On Responsive Navigation Patterns

In this article, I want to look specifically at the issue of responsive navigation. We will first talk about information architecture, then the purpose of navigation, and finally we will look at three responsive navigation patterns that have served well over time.

The post A Brief Overview On Responsive Navigation Patterns appeared first on Smashing Magazine.

Source: Smashing Magazine

The Ethics of UI Design: Avoiding Dark Patterns

Most modern website designers strive to deliver an honest user experience. Some, however, will do anything to boost conversion rates – even going as far as to trick users into taking certain actions.

All digital interactions come with a level of risk from cyber criminals, but some unethical web design practices cross the line into criminality. Learning what “dark patterns” are and how to avoid them can help your brand steer clear of this extremely harmful mistake.

A Fine Line between Influencing User Behavior and Tricking People

We’ve all experienced it – clickbait that sends us to sketchy landing pages, false pop-up advertisements telling us to click here to prevent computer viruses, emails that use spammy lingo to grab attention.

The World Wide Web has been around for 25 years, and cyber scam artists just as long. Savvy web users know how to identify most scams and avoid them. Unfortunately, unethical web design practices are blurring the lines between true and false, and making it more difficult to spot tricks.

When users browse the internet, they do so with some degree of caution. Most people have developed a healthy wariness, triggered by things like poorly designed websites and annoying pop-up advertisements.

Users have fallen prey to cyber criminals that steal sensitive information or dump viruses onto their devices too often to blindly trust web content. Yet some website designers have found a way to avoid user suspicion and trick them into falling into their traps – using dark patterns in UI development.

What are Dark Patterns?

UI is the heart of website design and functionality. Dark patterns in UI are the tricks websites and apps use to trap users into signing up for or buying something accidentally. The purpose of dark patterns in UI design is to hide the real intentions of the website and/or company from the user until it’s too late.

Companies use dark patterns by taking advantage of the dual readership path – the fact that many readers skim web content.


An unethical company might make certain phrases bold or in a large font, and make the truth of what they’re saying more difficult to find (i.e. in fine print along the very bottom of the page). That way, someone skimming the site would believe the company is saying one thing, when really it’s saying another. Dark patterns are dangerous because they can trick people into taking actions they otherwise wouldn’t have, such as buying a product or subscription.

Some sites may not be aware that the sales tactics they’re using qualify as dark patterns. For example, pushy sales advertisements and ads users have to minimize before accessing the webpage’s content are common tactics many sites use. These dark patterns are becoming less and less acceptable, however.

Google has begun to penalize websites with “intrusive interstitials” – pop-up ads or email capture lightboxes. That’s because users have gotten fed up with these questionable practices, and search engines are taking note.

Learn a few common examples of dark patterns to avoid losing favor with users and falling in the rankings.

Confirm Shaming

One of the most prominent dark patterns found on today’s sites is known as “confirm shaming.” This is when a site generates an email capture lightbox (a window asking for an email address before you can go to the site) with a sentence that serves to make people who opt out feel ashamed.

For example, a visit to Elle.com will result in a lightbox advertisement, “Get flawless skin.” To make the box go away, you either have to enter your email address or click, “No thanks, I’m not interested in flawless skin.” This passive-aggressive opt-out phrase is an example of confirm shaming. Confirm shaming make users feel inherently bad about themselves for failing to enter their email addresses and go along with the company’s marketing tactic.

Via confirmshaming.tumblr.com

Some websites use phrases such as, “No thanks, I’d rather pay full price,” to make users feel like chumps for not signing up to receive emailed discounts. Confirm shaming may seem like a relatively harmless way to get a message across, but in reality it makes users feel annoyed, inadequate, and resentful toward the company. These lightboxes have become red flags for site visitors, and can even be enough to result in a lost sale.

Roach Motels

Roach motels are another pervasive dark pattern tactic on the web. Named for the cockroach baits that lure critters in just to trap them there, roach motels are web design tricks that encourage users to sign up or subscribe – only to find it extremely difficult to unsubscribe. Roach motels make it very easy and enticing to enroll, but almost impossible to remove a user’s name from the list when they realize the deal is undesirable.

Web designers often implement roach motel tactics via “trick questions,” or the process where a user has to deliberately untick boxes to opt out of receiving marketing material.


Marketers purposely make these boxes inconsistent to confuse users and increase the odds of a person accidentally agreeing to receive emails or marketing materials in the future. Once the user discovers what they did, the unsubscribe button may be difficult to find – or the company may force the user to call customer service to resolve the issue. Roach motels are just another UI trick designed to deceive unwitting users.

Clickbait and Sensational Content

Clickbait is one of the oldest tricks in the book – yet users are still falling into the trap. Clickbait is one of the worst trends in web design, but it is still pervasive. Clickbait refers to internet content (often links) with the main purpose of grabbing attention and encouraging users to click – only to show a web page with much less dramatic or even completely irrelevant material.

Via GitHub

Clickbait lures readers in like bait on a fishing line, using sensational content and buzzwords to capture attention. When the reader takes the bait, the company hooks and reels them in, often trapping users with pop-up ads and email address lightboxes as they do so. Clickbait articles don’t deliver on their promises. They are, in a sense, false advertising. They use hyperbole to intrigue a user enough to make him or her want to click.

For example, a clickbait article may have the headline, “We Surveyed 100 Walmart Employees: What We Found Was Shocking.” The wording makes people curious as to what was so shocking, making them click on the link. After reading the entire article, the reader is sorely disappointed to find that there was nothing shocking at all – only news that isn’t news at all, such as workers unhappy with their wages or encountering rude customers. This is clickbait.

Deceptive Content

Many have become experts in deceptive content writing. Deceptive content serves to trick, fool, or confuse users into taking certain actions. The most common place we see deceptive content is during the unsubscribe process for newsletters and marketing materials. Many websites bring users to an unsubscribe page only to confuse them with a multi-step process and/or buttons with misleading titles.

A great example is the UI for unsubscribing from Daily Yahoo. Yahoo! states the message, “Are you sure you want to unsubscribe from Daily Yahoo?” with a large, bright blue button directly underneath that says, “No, cancel.” The average user would skim the content above or not read it at all, and simply press the blue button. This is a dark pattern that tricks the user into choosing “No, I don’t want to unsubscribe – cancel my request,” when they think they’re requesting to cancel the subscription.

In this case, a user has to be savvy enough to read the small, plain print below that states, “Yes, unsubscribe from all marketing messages.” Yahoo! takes dark patterns a step further, however, with a similar message right above that states, “Yes, unsubscribe from this newsletter.” If a user gets past the large blue button, they will likely select the first thing that says unsubscribe. In this case, the user would not be unsubscribing from all marketing materials – just the newsletter. Deceptive content like this is common when users try to opt out of subscriptions.

Avoid Dark Patterns at All Costs

Dark patterns work to fool people, making it difficult to escape or avoid being caught to begin with. Dark patterns take users down dangerous paths, often leaving them feeling confused, betrayed, and mad at themselves for falling for the trick. As a consumer or a web designer, it’s best to stay away from dark patterns entirely.

If you believe a marketing tactic is at all ethically questionable, take a different route. Consumers, search engines, and major social media platforms are wiseing up to dark patterns in UI and beginning to penalize sites for dubious practices. Don’t fall prey to the allure of using dark patterns – recognize and stay away from these common tricks to keep your brand’s reputation intact.

The post The Ethics of UI Design: Avoiding Dark Patterns appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Optimize Your Email Marketing Campaigns with the Right UX Design

Whether in the physical or digital world, an emotional and/or intellectual reaction is aroused in the consumer based on how it looks, feels, and works, and will dictate if they have a positive or negative experience, with expected effects on your sales. For online business a positive UX has increased their sales by more than 35%, which is quite fantastic.

It is important to note that UX does not just refer to web or mobile app design. It refers to all your digital collaterals, not the least of which are the emails you send out to your subscribers.

A majority of all marketers (89%) consider email the most effective tool for generating leads, so you can imagine why you should give your email marketing campaigns due attention.

Here is how to optimize them with the right UX design.

The Email-UX Connection

UX expert Jakob Nielsen states that the average user spends just 51 seconds on a marketing email, most (81%) simply scanning it instead of reading it through. This is because most users are inundated with so much information that they have to skim through most of what they receive and only give time for content they find truly interesting or important.

If your email is text-heavy, hard to scan, requires a download, and/or loads slowly, then the UX leaves much to be desired. If you want subscribers to read it, you have to pay particular attention to some key UX issues. Let this UX guide show you those issues.

Send Only Relevant Content

You may not immediately connect content with UX, but user experience refers to the whole of it, and that includes how much satisfaction you get from opening and reading the message. No one likes to waste their time on an email that doesn’t have any relevance or value to them, so you have to make sure your email content has both for your recipients.

Highlight Your Call to Action

The main purpose of your email is to get your readers to do a desired action, such as clicking on a link or button. Make sure your call to action jumps out at the reader as soon as the email is opened. Readers are more likely to read a bit more of the text so that they can decide whether to answer the call to action or not.

typography newsletter design

Focus on Typography

Because marketing emails tend to be mostly text (or text-graphics) you have to pay special attention to your typography. You have to make sure the text is easy to read and the background is not too busy or distracting.

Visual content is always a winner, but you have to make sure it will not slow the loading time too much, or your hard work may face deletion.

typography newsletter design

Test the Links

You may feel that double-checking that the primary link in your newsletter actually works borders on OCD, but it is a necessary part of your UX. In fact it should be part of the SOP for email marketing campaigns. Links in your email are not going to generate leads if they don’t work and will also give the recipient a poor opinion of your company.

typography newsletter design

Link to a Relevant Landing Page

Sure, you can send your email recipient to your homepage. However, unless you actually have something there that your readers will want to see, you are forcing them to search for the relevant page in your website in connection with your email.

Instead of the homepage, link your newsletter to a landing page directly connected to your email message, and make sure you give more information than is available in the email and with the appropriate call to action.

Check for Typos

Another seemingly obvious practice which is often overlooked is proofreading and editing your work to check for grammatical, spelling, or typing errors in your copy. Misspelled or sloppy content elicits a negative impression on your readers, and emails with these gaffes will be (mostly) confined to the trash.

Design for Mobile

Did you know that more than half (54%) of all email is read on mobile? If you have ever tried reading anything on a smartphone, you know how frustrating it can be when not all of the content fits into the screen, so you have to move sideways to see everything.

Do you think most people would bother to read an entire email message, let alone click on the link in that situation? Would you? Follow these tips for mobile-friendly emails and you will improve your click-through rates immensely.

typography newsletter design

Keep Your Design Consistent

What is sauce for the goose is sauce for the gander. While this typically refers to gender equality, the same idea can be applied to email marketing. Make sure the look and tone of the email message is consistent with the branding on your site so that it is instantly recognizable. Use logos, colors, fonts, and visual content that reflects your brand.

Make it Accessible

When designing your newsletter, you should think about accessibility. Some of your readers may have poor eyesight, so you want to make sure the text has good contrast with a good amount of white space, and the fonts are readable. You should also make sure your call to action buttons or links are nice and big, so it is easy to find and click even on a mobile device.

Test it for UX

Perhaps the best way to make sure you have a good email-UX connection to make the most of your email marketing campaign is to send test messages. Check if your newsletter works well on various devices and clients, if it loads quickly (within 3-5 seconds), and test the links to make sure they work.

Get feedback from test recipients by asking them directly, or checking the open and click-through rates. The proof of the pudding is in the eating, after all! You can also use a tool like Litmus to check if your email is compatible across different email platforms and browsers as well as devices before sending it out.


Email marketing is a simple and effective tool in your repertoire of marketing tactics. A positive UX can increase its effectiveness immeasurably. Follow these simple and straightforward optimization tips for the easiest tweaks ever!

Do you know of any other way UX can optimize your email marketing campaigns? Give us a head’s up in the comments below.

The post Optimize Your Email Marketing Campaigns with the Right UX Design appeared first on Speckyboy Design Magazine.

Source: Speckyboy

Check Out 9 Unique Be Pre-Built Websites and Their New Installer

Be’s New Pre-Built Installer

The old Be pre-installer had a lot going for it. For one thing, you could install a pre-built website with a single click, and immediately begin editing. That’s still the case of course. Up to that point, however, the installer has some shortcomings. Selecting and previewing pre-built websites was not an efficient process, nor were you given any indication whether you had the right plugins in place to get the performance you expected.

                                    The old installer’s UX left something to be desired.

To find a pre-built website that would work for you, required scrolling through a large (and every increasing) selection of themes. If what you found wasn’t exactly the right choice, you had to repeat the process. You also had to guess whether you had the right plugins at the time of installment.

Fixes were made to create an intuitive, more pleasant to work with, UX.

  • Fix #1No more scrolling. Thumbnails of all 250+ pre-built websites can be viewed in the admin area. To get a live preview of a theme, simply click on its thumbnail. It’s no longer necessary to switch to and fro between Be’s presentation page and the admin area.

                          The new Be pre-built website installer. Scrolling issue solved.

  • Fix #2. A live search and filter option makes selecting a pre-built website even faster and easier. You’ll come to appreciate this feature even more as the number of pre-built websites continues to grow at a clip of several per month. The filter option lets you check out several potential candidates, and select the best fit without having to repeat the process several times.
  • Fix #3. This one can save you some time and trouble. When you’ve selected a pre-built website, and are ready to preview and install it, the new installer will show you which plugins are needed for it to perform just as in the preview. It will also show which of the necessary plugins are already installed, and give you the option to install missing ones.

                        See the plugins each pre-built website needs for it to work properly.

  • Fix #4. You no longer have to import the entire pre-built website. This new feature enables you to import the page options, the content, or both, and you can select only those pages you need.

                         You install what you need, and only what you need, from a pre-built website.

This video shows how the new installer operates:


A Review of the 9 Latest Pre-Built Websites

Be Sports Club

Health and fitness centers, sports centers, and gyms like to advertise themselves as being current in terms of facilities and training services. This modern Be Sports Club design, with its cool special effects, provides a sound basis for a website that will serve this purpose.

Be Productions

It’s dark background and smooth parallax scroll effect makes this pre-built website suitable for many purposes. It will serve nicely as a foundation on which to build an advertising agency’s or motion graphics studio’s website. Note how the page’s colors and message stand out against the dark background.

Be Diet

To be effective, a food-related website should feature large, high-quality images that are almost good enough to eat. The Muffin Builder designers went to considerable lengths to make that happen in the case of Be Diet. The images are backed up by a cool selection of special effects.

Be Boutique

If you’re not sure how to make a background video work effectively in your website designs, let Be Boutique show you the way. This pre-built website is also a great starting point to build an engaging, but not overly showy, portfolio.

Be Stone

The Be Stone pre-built website conveys a special message. There’s no reason to have to put up with a company website that is dull, uninteresting, or downright awful looking. Give Be Stone a try the next time you’re commissioned to build a modern, slick looking website for a business.

Be Guest House

Real estate agents go to great lengths to make their properties as fabulous looking as possible. The same is true for individuals who have a guest house or cabin to rent. Be Guest House provides a great starting point for building a website for either customer type.

Be Wildlife

Although Be Wildlife may be destined for a wildlife photographer’s website, it can be put to good use for any professional photographer or photographic studio. This pre-built website makes great use of fixed layouts, in combination with a clever slider and parallax effects.

Be Restaurant

This is a good example of a website that will make visitors want to reach for the phone to make a reservation. As is the case with Be Wildlife, Be Restaurant puts slider effects to very good use. Including people in the hero image is also a good approach.

Be Furniture

Images play a key role in every one of this selection of latest pre-built websites. Be Furniture is no different, and the concept it presents can make it easier for you to build a website any furniture store client will love.


An Overview of Be Theme’s Features

  • For starters – Over 250 Pre-Built Websites You’ll seldom have any difficulty in finding a pre-built website that matches what you envision; plus, you can build virtually any website from almost any theme you select.
  • Muffin Builder – Working in conjunction with the options panel, this page builder makes customizing a theme and editing a page, easy – without any need for coding.
  • Layout Configuration – Building a website page when starting with a blank canvas has never been easier; no more need for cookie cutter-looking websites with this feature at your fingertips.
  • 200+ Shortcodes – Add cool features and functionality to your web pages, without having to write a line a code.
  • Advanced Typography – Use Google fonts, or upload your own special fonts; Use any style, weight, or size you want.
  • Parallax Effect/ Video Background – These are just two of the many special effects that come with the Be Theme package.
  • Lifetime Updates – With your Be license, you can look forward to receiving the latest pre-built website releases each month.

And More:

Be’s customer support is first class in every respect, plus you’ll have video tutorials and other useful information to help you along the way. You’ll also be joining 62,000+ satisfied Be users when you purchase a license to use this Themeforest best seller.

Click here to discover even more about Be Theme.

Read More at Check Out 9 Unique Be Pre-Built Websites and Their New Installer

Source: Web Design Ledger