Tag Archives: model

Thumbnail

More Than Pixels: Selling Design Discovery




More Than Pixels: Selling Design Discovery

Kyle Cassidy



As designers, we know that research should play a pivotal role in any design process. Sadly, however, there are still a lot of organizations that do not see the value of research and would rather jump straight into the visual design stage of the design process.

The excuses given here tend to be:

“We already know what our customers want.”

“We don’t have the time/budget/people.”

“We’ll figure out the flaws in BETA.”

As designers, it is important that we are equipped to be able to have conversations with senior stakeholders to be able to sell and justify the importance of the so-called “Design Discovery” within the design process.

In this article, I’ll demystify what is meant by the term “Design Discovery” to help you better establish the importance of research within the creative process. I’ll also be giving advice on how to handle common pushbacks, along with providing various hints and tips on how to select the best research methods when undertaking user research.

My hope is that by reading this article, you will become comfortable with being able to sell “Design Discovery” as part of the creative process. You will know how to build a “Discovery Plan” of activities that answers all the questions you and your client need to initiate the design process with a clear purpose and direction.

Design With A Purpose

Digital design is not just about opening up Photoshop or Sketch and adding colors, shapes, textures, and animation to make a beautiful looking website or app.

As designers, before putting any pixels on canvas, we should have a solid understanding of:

  1. Who are the users we are designing for?
  2. What are the key tasks those users want to accomplish?

Ask yourself, is the purpose of what you are producing? Is it to help users:

  • Conduct research,
  • Find information,
  • Save time,
  • Track fitness,
  • Maintain a healthy lifestyle,
  • Feel safe,
  • Organize schedules,
  • Source goods,
  • Purchase products,
  • Gather ideas,
  • Manage finances,
  • Communicate,
  • Or something entirely different?

Understanding the answers to these questions should inform your design decisions. But before we design, we need to do some research.

Discovery Phase

Any design process worth its salt should start with a period of research, which (in agency terms) is often referred to as a “Discovery Phase”. The time and budget designers can allocate to a Discovery phase is determined by many factors such as the amount of the client’s existing project research and documentation as well as the client’s budget. Not to mention your own personal context, which we will come to later.

Business And User Goals

In a Discovery phase, we should ensure adequate time is dedicated to exploring both business and user goals.

Yes, we design experiences for users, but ultimately we produce our designs for clients (be that internal or external), too. Clients are the gatekeepers to what we design. They have the ultimate say over the project and they are the ones that hold the purse strings. Clients will have their own goals they want to achieve from a project and these do not always align with the users’ goals.

In order to ensure what we design throughout our design process hits the sweet spot, we need to make sure that we are spending time exploring both the business and user goals for the project (in the Research/Discovery phase).


business and user goals


Your Discovery phase should explore both user and business goals. (Large preview)

Uncovering Business Goals

Typically, the quickest way to establish the business goals for a project is to host a stakeholder workshop with key project stakeholders. Your aim should be to get as many representatives from across different business functions as possible into one room to discuss the vision for the project (Marketing, Finance, Digital, Customer Services, and Sales).

Tip: Large organizations often tend to operate in organizational silos. This allows teams to focus on their core function such as marketing, customer care, etc. It allows staff to be effective without being distracted by activities where they have no knowledge and little or no skills. However, it often becomes a problem when the teams don’t have a singular vision/mission from leadership, and they begin to see their area as the driving force behind the company’s success. Often in these situations, cross-departmental communication can be poor to non-existent. By bringing different members from across the organization together in one room, you get to the source of the truth quicker and can link together internal business processes and ways of working.

The core purpose of the stakeholder workshop should be:

  1. To uncover the Current State (explore what exists today in terms of people, processes, systems, and tools);
  2. To define the Desired Future State (understand where the client wants to get to, i.e. their understandig of what the ideal state should look like);
  3. To align all stakeholders on the Vision for the project.

project vision


Use workshops to align stakeholders around the vision and define the Desired Future State. (Large preview)

There are a series of activities that you can employ within your stakeholder workshop. I tend to typically build a full workshop day (7-8 hours) around 4-5 activities allowing 45mins uptil 1 hour for lunch and two 15-min coffee breaks between exercises. Any more that than, and I find energy levels start to dwindle.

I will vary the workshop activities I do around the nature of the project. However, each workshop I lead tends to include the following three core activities:

Activity Purpose
Business Model Canvas To explore the organizations business model and discuss where this project fits this model.
Measurement Plan Define what are the most important business metrics the business wants to be able to measure and report on.
Proto Personas and User Stories Explore who the business feels their users are and what are the key user stories we need to deliver against.

Tip: If you’re new to delivering client workshops, I’ve added a list of recommended reading to the references section at the bottom of this article which will give you useful ideas on workshop activities, materials, and group sizes.

Following the workshop, you’ll need to produce a write up of what happened in the workshop itself. It also helps to take lots of photos on the workshop day. The purpose of the write-up should be to not only explain the purpose of the day and key findings, but also recommendations of next steps. Write-ups can be especially helpful for internal communication within the organization and bringing non-attendees up to speed with what happened on the day as well as agreeing on the next steps for the project.

Uncovering User Goals

Of course, Discovery is not just about understanding what the organization wants. We need to validate what users actually want and need.

With the business goals defined, you can then move on to explore the user goals through conducting some user research. There are many different user research methods you can employ throughout the Discovery process from Customer Interviews and Heuristic Evaluations to Usability Tests and Competitor Reviews, and more.

Having a clear idea of the questions you are looking to answer and available budget is the key to helping select the right research methods. It is, for this reason, important that you have a good idea of what these are before you get to this point.

Before you start to select which are the best user research methods to employ, step back and ask yourself the following question:

“What are the questions I/we as a design team need answers to?”

For example, do you want to understand:

  • How many users are interacting with the current product?
  • How do users think your product compares to a competitor product?
  • What are the most common friction points within the current product?
  • How is the current product’s performance measured?
  • Do users struggle to find certain key pieces of information?

Grab a pen and write down what you want to achieve from your research in a list.

Tip: If you know you are going to be working on a fixed/tight budget, it is important to get confirmation on what that budget may look like at this point since this will have some bearing on the research methods you choose.

Another tip: User research does not have to happen after organizational research. I always find it helps to do some exploratory research prior to running stakeholder workshops. This ensures you go into the room with a baseline understanding of the organization its users and some common pain points. Some customers may not know what users do on their websites/apps nowadays; I like to go in prepared with some research to hand whether that be User Testing, Analytics Review or Tree Testing outputs.

Selecting Research Methods

The map below from the Nielsen Norman Group (NNG) shows an overview of 20 popular user research methods plotted on a 3-dimensional framework. It can provide a useful guide for helping you narrow down on a set of research methods to use.


top 20 research methods


A map of the top 20 research methods from NNG. (Large preview)

The diagram may look complicated, but let us break down some key terms.

Along the x-axis, research methods are separated by the types of data they produce.

  • Quantitative data involves numbers and figures. It is great for answering questions such as:

    • How much?
    • How many?
    • How long?
    • Impact tracking?
    • Benchmarking?
  • Qualitative data involves quote, observations, photos, videos, and notes.

    • What do users think?
    • How do users feel?
    • Why do users behave in a certain way?
    • What are users like?
    • What frustrates users?

Along the y-axis, research methods are separated by the user inputs.

  • Behavioral Data
    This data is based on what users do (outcomes).
  • Attitudinal Data
    This data is based on attitudes and opinions.

Finally, research methods are also classified by their context. Context explains the nature of the research, some research methods such as interviews require no product at all. Meanwhile, usability tests require users to complete scripted tasks and tell us how they think and feel.

Using the Model

Using your question list, firstly identify whether you are looking to understand users opinions (what people say) or actions (what people do) and secondly whether you are looking to understand why they behave in a certain way (why and how to fix) or how many of them are behaving in a certain way (how many and how much).

Now look at this simplified version of the matrix, and you should be able to work out which user research methods to focus in on.


selecting research methods


Think about what questions you’re trying to answer when selecting research methods. (Large preview)

Model Examples

Example 1

If you’re looking to understand users’ attitudes and beliefs and you don’t have a working product then ‘Focus Groups’ or ‘Interviews’ would be suitable user research methods.


top 20 research methods


Large preview

Example 2

If you want to understand how many users are interacting with the current website or app then an ‘Analytics Review’ would be the right research method to adopt. Meanwhile, if you want to test how many people will be impacted by a change, A/B testing would be a suitable method.


top 20 research methods


Large preview

No Silver Bullet

By now you should realize there is no shortcut to the research process; not one single UX research method will provide all the answers you need for a project.

Analytics reviews, for example, are a great low-cost way to explore behavioral, quantitative data about how users interact with an existing website or application.

However, this data falls short of telling you:

  • Why users visited the site/app in the first place (motivation);
  • What tasks they were looking to accomplish (intent);
  • If users were successful in completing their tasks (task completion);
  • How users found their overall experience (satisfaction).

These types of questions are best answered by other research methods such as ‘Customer Feedback’ surveys (also known as ‘Intercept Surveys’) which are available from tools such as Hotjar, Usabilla, and Qualaroo.


Usabilla


Usabilla’s quick feedback button allows users to provide instant feedback on their experience. (Large preview)

Costing Research/Discovery

In order to build a holistic view of the user experience, the Research/Discovery process should typically last around 3 to 4 weeks and combine a combination of the different research methods.

Use your list of questions and the NNG matrix to help you decide on the most suitable research methods for your project. Wherever possible, try to use complimentary research methods to build a bigger picture of users motivations, drivers, and behaviors.


four research methods


Your Design Discovery process should combine different types of data. (Large preview)

Tip: The UX Recipe tool is a great website for helping you pull together the different research methods you feel you need for a project and to calculate the cost of doing so.

Which brings me on to my next point.

Contexts And Budgets

The time and budget which you can allocate to Discovery will vary greatly depending on your role. Are you working in-house, freelance, or in an agency? Some typical scenarios are as follows:

  • Agency
    Clients employ agencies to build projects that generate the right results. To get the right results, you firstly need to ensure you understand both the business’ needs and the needs of the users as these are almost always not the same. Agencies almost always start with a detailed Discovery phase often led by the UX Design team. Budgets are generally included in the cost of the total project, as such ample time is available for research.
  • In-House: Large Company
    When working in a large company, you are likely to already have a suite of tools along with a program of activity you’re using to measure the customer experience. Secondly, you are likely to be working alongside colleagues with specialist skills such as Data Analysts, Market Researchers, and even a Content Team. Do not be afraid to say hello to these people and see if they will be willing to help you conduct some research. Customer service teams are also worth befriending. Customer service teams are the front line of a business where customer problems are aired for all to see. They can be a goldmine of useful information. Go spend some time with the team, listen to customer service calls, and review call/chat logs.
  • In-House: Smaller Company
    When working as part of an in-house team in a smaller company, you are likely to be working on a tight budget and are spread across a lot of activities. Nevertheless, with some creative thinking, you can still undertake some low-cost research tasks such as Site Intercept surveys, Analytics reviews, and Guerilla testing, or simply review applied research.
  • Freelance
    When working freelance, your client often seeks you out with a very fixed budget, timeline and set of deliverables in mind, i.e. “We need a new Logo” or “We need a landing page design.” Selling Discovery as part of the process can often be a challenge freelancers typically undertake since they mostly end up using their own time and even working overtime. But it doesn’t have to be like this. Clients can be willing to spend their time in the Discovery pre-project phase. However, you need to be confident to be able to sell yourself and defend your process. This video has some excellent tips on how to sell Discovery to clients as a freelancer.

Selling Design Discovery

As you can see from the above, selling Design Discovery can be a challenge depending on your context. It’s much harder to sell Design Discovery when working as a freelancer than it is working within an agency.

Some of the most commons excuses organizations put forward for discounting the research process are:

“We don’t have the budget.”

“We’ll find it out in BETA.”

“We don’t have time.”

“We already know what users want.”

When selling Design Discovery and combating these points of view, remember these key things:

It doesn’t have to be expensive.

Research does not have to be costly especially with all of the tools and resources we have available today. You can conduct a Guerilla User Testing session for the price of a basic coffee. Furthermore, you can often source willing participants from website intercepts, forums or social media groups who are more than willing to help.

It’s much harder to fix later.

The findings that come as an output from research can be invaluable. It is much more cost and time effective to spend some of the project budgets up front to ensure there are no assumptions and blind spots than it is to course correct later on if the project has shifted off tangent. Uncovering blockers or significant pain points later into the project can be a huge drain on time as well as monetary resources.

Organizational views can often be biased.

Within large organizations especially, a view of ‘what users want’ is often shaped by senior managers’ thoughts and opinions rather than any applied user research. These viewpoints then cascade down to more junior members of the team who start to adopt the same viewpoints. Validating these opinions are actually correct viewpoints is essential.

There are other cross-company benefits.

Furthermore, a Discovery process also brings with it internal benefits. By bringing members from other business functions together and setting a clear direction for the project, you should win advocates for the project across many business functions. Everyone should leave the room with a clear understanding of what the project is, its vision, and the problems you are trying to fix. This helps to alleviate an enormous amount of uncertainty within the organization.

I like to best explain the purpose of the discovery phase by using my adaptation of the Design Squiggle by Damien Newman:

See how the Discovery phase allows us time to tackle the most uncertainty?


Design Squiggle by Damien Newman


An adaptation of the Design Squiggle by Damien Newman showing how uncertainty is reduced in projects over time. (Large preview)

Waterfall And Agile

A Discovery phase can be integrated into both Waterfall and Agile project management methodologies.

In Waterfall projects, the Discovery phase happens at the very start of the project and can typically run for 4 to 12 weeks depending on the size of the project, the number of interdependent systems, and the areas which need to be explored.

In Agile projects, you may run a Discovery phase upfront to outline the purpose for the project and interconnect systems along with mini 1 to 2-week discovery process at the start of each sprint to gather the information you need to build out a feature.


waterfall and agile discovery


Discovery process can be easily incorporated into both waterfall and agile projects. (Large preview)

Final Thoughts

The next time you start on any digital project:

  • Make sure you allow time for a Discovery phase at the start of your project to define both business and user goals, and to set a clear vision that sets a clear purpose and direction for the project to all stakeholders.

  • Be sure to run a Stakeholder workshop with representatives from a variety of different business functions across the business (Marketing, Finance, Digital, Customer Services, Sales).

  • Before selecting which user research methods to use on your project, write down a list of questions you wish to understand and get a budget defined. From there, you can use the NNG matrix to help you understand what the best tool to use is.

Further Reading

If you found this article interesting, here is some recommended further reading:

Workshop Books

If you are interested in running Stakeholder workshops, I’d highly recommend reading the following books. Not only will they give you useful hints and tips on how to run workshops, they’re packed full of different workshop exercises to help you get answers to specific questions.

Smashing Editorial
(cc, ra, yk, il)


Link:  

More Than Pixels: Selling Design Discovery

Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive




Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive

Anselm Hannemann



These days, it is one of the biggest challenges to think long-term. In a world where we live with devices that last only a few months or a few years maybe, where we buy stuff to throw it away only days or weeks later, the term effort gains a new meaning.

Recently, I was reading an essay on ‘Yatnah’, ‘Effort’. I spent a lot of time outside in nature in the past weeks and created a small acre to grow some vegetables. I also attended a workshop to learn the craft of grafting fruit trees. When you cut a tree, you realize that our fast-living, short-term lifestyle is very different from how nature works. I grafted a tree that is supposed to grow for decades now, and if you cut a tree that has been there for forty years, it’ll take another forty to grow one that will be similarly tall.

I’d love that we all try to create more long-lasting work, software that works in a decade, and in order to do so, put effort into learning how we can make that happen. So long, I’ll leave you with this quote and a bunch of interesting articles.

“In our modern world it can be tempting to throw effort away and replace it with a few phrases of positive thinking. But there is just no substitute for practice”. — Kino Macgregor

News

  • The Safari Technology Preview 52 removes support for all NPAPI plug-ins other than Adobe Flash and adds support for preconnect link headers.
  • Chrome 66 Beta brings the CSS Typed Object Model, Async Clipboard API, AudioWorklets, and support to use calc(), min(), and max() in Media Queries. Additionally, select and textarea fields now support the autocomplete attribute, and the catch clause of a try statement can be used without a parameter from now on.
  • iOS 11.3 is available to the public now, and, as already announced, the release brings support for Progressive Web Apps to iOS. Maximiliano Firtman shares what this means, what works and what doesn’t work (yet).
  • Safari 11.1 is now available for everyone. Here is a summary of all the new WebKit features it includes.
Progressive Web App on iOS
Progressive Web Apps for iOS are here. Full screen, offline capable, and even visible in the iPad’s dock. (Image credit)

General

  • Anil Dash reflects on what the web was intended to be and how today’s web differs from this: “At a time when millions are losing trust in the web’s biggest sites, it’s worth revisiting the idea that the web was supposed to be made out of countless little sites. Here’s a look at the neglected technologies that were supposed to make it possible.”
  • Morten Rand-Hendriksen wrote about using ethics in web design and what questions we should ask ourselves when suggesting a solution, creating a design, or a new feature. Especially when we think we’re making something ‘smart’, it’s important to put the question whether it actually helps people first.
  • A lot of protest and discussion came along with the Facebook / Cambridge Analytica affair, most of them pointing out the technological problems with Facebook’s permission model. But the crux lies in how Facebook designed their company and which ethical baseline they set. If we don’t want something like this to happen again, it’s upon us to design the service we want.
  • Brendan Dawes shares why he thinks URLs are a masterpiece and a user experience by themselves.
  • Charlie Owen’s talk transcription of “Dear Developer, The Web Isn’t About You” is a good summary of why we as developers need to think beyond what’s good for us and consider what serves the users and how we can achieve that instead.

UI/UX

  • B. Kaan Kavuştuk shares his thoughts about why we won’t be able to build a perfect design or codebase on the first try, no matter how much experience we have. Instead, it’s the constant small improvements that pave the way to perfection.
  • Trine Falbe introduces us to Ethical Design with a practical getting-started guide. It shows alternatives and things to think about when building a business or product. It doesn’t matter much if you’re the owner, a developer, a designer or a sales person, this is about serving users and setting the ground for real and sustainable trust.
  • Josh Lovejoy shares his learnings from working on inclusive tech solutions and why it takes more than good intention to create fair, inclusive technology. This article goes into depth of why human judgment is very difficult and often based on bias, and why it isn’t easy to design and develop algorithms that treat different people equally because of this.
  • The HSB (Hue, Saturation, Brightness) color system isn’t especially new, but a lot of people still don’t understand its advantages. Erik D. Kennedy explains its principles and advantages step-by-step.
  • While there’s more discussion about inclusive design these days, it’s often seen under the accessibility hat or as technical decisions. Robert del Prado now shares how important inclusive design thinking is and why it’s much more about the generic user than some specific people with specific disabilities. Inclusive design brings people together, regardless of who they are, where they live, and what they can afford. And isn’t it the goal of every product to be successful by acquiring as many people as possible? Maybe we need to discuss this with marketing people as well.
  • Anton Lovchikov shares ways to improve optical adjustments in components. It’s an interesting study on how very small changes can make quite a difference.
Fair Is Not The Default
Afraid or angry? Which emotion we think the baby is showing depends on whether we think it’s a girl or a boy. Josh Lovejoy explains how personal bias and judgments like this one lead to unfair products. (Image credit)

Tooling

  • Brian Schrader found an unknown feature in Git which is very helpful to test ideas quickly: Git Notes lets us add, remove, or read notes attached to objects, without touching the objects themselves and without needing to commit the current state.
  • For many projects, I prefer to use npm scripts over calling gulp or direct webpack tasks. Michael Kühnel shares some useful tricks for npm scripts, including how to allow CLI option parameters or how to watch tasks and alert notices on error.
  • Anton Sten explains why new tools don’t always equal productivity. We all love new design tools, and new ones such as Sketch, Figma, Xd, or Invision Studio keep popping up. But despite these tools solving a lot of common problems and making some things easier, productivity is mostly about what works for your problem and not what is newest. If you need to create a static mockup and Photoshop is what you know best, why not use it?
  • There’s a new, fast DNS service available by Cloudflare. Finally, a better alternative to the much used Google DNS servers, it is available under 1.1.1.1. The new DNS is the fastest, and probably one of the most secure ones, too, out there. Cloudflare put a lot of effort into encrypting the service and partnering up with Mozilla to make DNS over HTTPS work to close a big privacy gap that until now leaked all your browsing data to the DNS provider.
  • I heard a lot about iOS machine learning already, but despite the interesting fact that they’re able to do this on the device without sending everything to a cloud, I haven’t found out how to make use of this for apps, yet. Luckily, Manu Rink put together a nice guide in which she explains machine learning in iOS for beginners.
  • There’s great news for the Git GUI fans: Tower now offers a new beta version that includes pull request support, interactive rebase workflows, quick actions, reflog, and search. An amazing update that makes working with the software much faster than before, and even for me as a command line lover it’s a nice option.
Machine Learning In iOS For The Noob
Manu Rink shows how machine learning in iOS works by building an offline handwritten text recognition. (Image credit)

Security

Web Performance

Accessibility

CSS

  • Amber Wilson shares some insights into what it feels like to be thrown into a complex project in order to do the styling there. She rightly says that “nobody said CSS is easy” and expresses how important it is that we as developers face inconvenient situations in order to grow our knowledge.
  • Ana Tudor is known for her special CSS skills. Now she explores and describes how we can achieve scooped corners in CSS with some clever tricks.
Scooped Corners
Scooped corners? Ana Tudor shows how to do it. (Image credit)

JavaScript

  • WebKit got an upgrade for the Clipboard API, and the team gives some very interesting insights into how it works and how Safari will handle some of the common challenges with clipboard data (e.g. images).
  • If you work with key value stores that live only in the frontend, IDB-Keyval is a great lightweight library that simplifies working with IndexedDB and localStorage.
  • Ever wanted to create graphics from your data with a hand-drawn, sketchy look on a website? Rough.js lets you do just that. It’s usually Canvas-based (for better performance and less data) but can also draw SVG paths.
  • If you need a drag-and-drop reorder module, there’s a smooth and accessible solution available now: dragon-drop.
  • For many years, we could only get CSS values in their computed value and even that wasn’t flexible or nice to work with. But now CSS has a proper object-based API for working with values in JavaScript: the CSS Typed Object Model. It’s only available in the upcoming Chrome 66 yet but definitely a promising feature I’d love to use in my code soon.
  • The React.js documentation now has an extra section that explains how to easily and programmatically manage focus states to ensure your UI is accessible.
  • James Milner shares how we can use abortable fetch to cancel requests.
  • There are a few articles about Web Push Notifications out there already, but Oleksii Rudenko’s getting-started guide is a great primer that explains the principles very well.
  • In the past years, we got a lot of new features on the JavaScript platform. And since it’s hard to remember all the new stuff, Raja Rao DV summed up “Everything new in ECMAScript 2016, 2017, and 2018”.

Work & Life

  • To raise awareness for how common such situations are for all of us, James Bennett shares an embarrassing situation where he made a simple mistake that took him a long time to find out. It’s not just me making mistakes, it’s not just you, and not just James — all of us make mistakes, and as embarrassing as they seem to be in that particular situation, there’s nothing to feel bad about.
  • Adam Blanchard says “People are machines. We need maintenance, too.” and creates a comparison for engineers to understand why we need to take care of ourselves and also why we need people who take care of us. This is an insight into what People Engineers do, and why it’s so important for companies to hire such people to ensure a team is healthy.
  • If there’s one thing we don’t talk much about in the web industry, it’s retirement. Jan Chipchase now wrote a lot of interesting thoughts all about retirement.
  • Rebecca Downes shares some insights into her PhD on remote teams, revealing under which circumstances remote teams are great and under which they’re not.
What would people engineers do
People need maintenance, too. That’s where the People Engineer comes in. (Image credit)

Going Beyond…

We hope you enjoyed this Web Development Update. The next one is scheduled for Friday, May 18th. Stay tuned.

Smashing Editorial
(cm)


See more here:  

Monthly Web Development Update 4/2018: On Effort, Bias, And Being Productive

4 Ways to Use Advanced Triggers & Targeting to Craft Delightful Popups

I’ve already talked at length about how to design more delightful popups by using The Delight Equation, and today I want to extend that concept by discussing the triggers and advanced targeting you can use to make popup experiences even better.

I think we’d all agree that showing a popup to your visitors on every visit is a bad idea. We can also agree that generic offers and untargeted messaging is a big turnoff.

That’s where triggers and targeting can make a big difference to the user experience.

Advanced Trigger and Targeting Matrix

Below, I’ve sketched out an interaction matrix leveraging the triggering and targeting features that Unbounce Popups & Sticky Bars can use. I’ve filled in a few ideas, and in the rest of today’s Product Awareness Month post I’ll explain how four of these concepts work, including some live demos because it’s really easy and fun to do with Unbounce.

Fair warning. Some of these ideas are a little “out there”. However, I find that being a little ridiculous helps unlock your creativity. And we all need a little more creativity in our marketing.

Use Case #1: Choose Your Own Adventure (CYOA)

Trigger: Entrance, Timed, or Scroll Up
Targeting: URL

This is a great way to learn about the intentions of your visitors.

We’ve been running experiments on our “What is a Landing Page?” page to figure out what people want to do when they arrive. interesting. On that page, I asked the question “What are your landing page needs?” providing three options (each with their own next step CTA):

I’ll be sharing complete results from this experiment at the end of the month.

CYOA Demos

Pro Tip: You can attach a parameter to a URL (?ttdemo1 for instance) which lets you use URL targeting to only show the popup in that instance. Because I want to keep you on this page, I’m just going to provide three links that reload this page, but with individual URL parameters.

  1. Entrance trigger demo
    with URL parameter targeting ?ttdemo1
  2. Scroll Up trigger demo
    with URL parameter targeting ?ttdemo2
  3. Time Delay trigger demo
    with URL parameter targeting ?ttdemo3

To set this up, I simply duplicated the first popup twice, and set the URL targeting and trigger options appropriately.

What’s even cooler is that because I used the URL targeting for any Unbounce.com URL that contains ?ttdemo1, the experience can be shown to anyone, via any link, just by appending the URL parameter. Like this link to our homepage. #mindblownmuch?

Scroll Up and Time Delay are good triggers to use to capture the attention of people who may not have found what they’re looking for. Like U2. Scroll Up is great for mobile as it’s a little bit like an exit signal on desktop.

Make sure you track these pathways in Google Analytics and stick a heat map on the page (I use Hotjar) so you can get a simple visual of where people are clicking. This is one of the original click maps for “What is a Landing Page?”.

Once you’ve learned something about your visitors’ needs you can start making changes to the page to reflect that. I’ll be digging into a concept I’m calling “No-Touch CRO” next week, which has more examples of how you can use Popups and Sticky Bars to learn about your visitors without having to change your site.

Use Case #2: You Didn’t See My Most Valuable Page (MVP)

Trigger: Exit
Targeting: Cookie

Every website has pages that we consider critical to the conversion experience. For you, it might be the features page, the pricing page, or the homepage. It could even be a blog post that’s particularly good at convincing people to sign up.

How dare someone come to your site without visiting your favorite pages! Let’s be realistic though, not everyone has the time, inclination, motivation, or easily identifiable path to get to where you want them to go.

I’m calling this use case “You didn’t see my MVP!” – as it’s designed to at least make sure they’re given an opportunity to see your magic content.

This is how it works:

  1. Drop a cookie on your most valueable page (MVP).
  2. Set up a Popup or Sticky Bar to fire on exit when the MVP cookie is NOT present.

Pretty simple right?

MVP Demo **Desktop Only**

Follow these instructions to see a demo. It’s desktop only because you can trigger an exit popup on a phone.

  1. Click here
    To reload this page adding a URL parameter ?ttdemomvp.
  2. Trigger the exit popup
    Move your mouse out of the browser as if you are going to close it.
  3. Click the button on the popup to visit the MVP page
    The cookie will be set on that page.
  4. Click the back button to return to this page
  5. Refresh this page and try to trigger the exit popup
    Now that the cookie has been set the popup won’t fire, as we’ve already seen your high-converting content.

Use Case #3: Maybe Later

Trigger: Entrance + Click
Targeting: URL + Cookie

“Maybe Later” is one of my favorite concepts to come out of this month’s exploration. You can read the full post about it here, and I’ll provide the elevator pitch below.

“Maybe Later” is a Solution to Increase Engagement and Reduce Frustration

As you can see in the sketch above, instead of the now classic YES/NO popup “Maybe Later” includes a third option called, you guessed it, “Maybe Later”.

It’s more than just a third button, here’s how it works:

  1. The popup appears when you enter the site. You can choose “No” to get rid of it, “Yes” to take advantage of it, or “Maybe Later” to register your interest but get it out of your way.
  2. When you click “Maybe Later” a cookie is set to log your interest.
  3. Now while you are browsing the rest of the site, a Sticky Bar – targeted at the cookie that was set – appears at the bottom (or top) of the page, with a more subtle reminder of the offer, so that you know it there and ready if you decide to take advantage of it.
  4. If you decide against the offer, you can click “No thanks” on the Sticky Bar, the cookie is deleted, and the offer is hidden for good.

The core purpose of this idea is to put the control back with the shopper while creating an effective method for the retailer to engage with you, with your permission.

“Maybe Later” Demo

Follow these instructions and you’ll see “Maybe Later” in action:

Please note: the demo is desktop only right now.

  1. Visit this page (opens in new window).
  2. Click the “Maybe Later” button and the popup will close.
  3. Refresh that page and you’ll see a Sticky Bar with the same offer appear at the bottom.
  4. Come back to this page.
  5. Refresh this page and you’ll see the Sticky Bar here too.
  6. Click “No thanks” to get rid of it when you’ve had enough :D

Use Case #4: Location Redirect

Trigger: Entrance
Targeting: URL + Location

It’s common for e-commerce businesses to have localized websites like amazon.com/amazon.ca/amazon.co.uk etc. But sometimes you need to redirect people to the correct country because the link they clicked is coming from an affiliate (or other) that’s only pointing to the US domain.

The simplest way to handle this scenario is to create a popup that combines an entrance trigger with URL and Geo Location targeting.

You can then target a “We have a Canadian Store, Eh! Wanna go there instead?” message on the U.S. site to visitors who’s location is in Canada.

I created two popups. One to be shown to Canadians, and one to the rest of the world using the location targeting settings.

Click here to see the popup. If you’re in Canada you’ll see a redirect popup, and if you’re anywhere else you’ll see a “Continue to the U.S. store” popup.

And here’s a video of me VPN’ing to New York to show how the popup changes.

There are so many ways you can combine triggers, targeting, and frequency to create popup experiences that treat your visitors with relevance and respect. If you have any cool combos that you’re using, please chuck ’em into the comments so we can discuss how they work.

Cheers
Oli

p.s. Don’t forget to give the 30-day trial of Unbounce a go. You get landing pages, popups, and sticky bars all included in your plan.

Read this article – 

4 Ways to Use Advanced Triggers & Targeting to Craft Delightful Popups

Thumbnail

[Mobile] How to Turn Your Blog Posts Into a Mobile App Experience – Using Sticky Bars

With so much of your traffic coming from people’s phones, it’s essential that we start to craft exceptional mobile experiences. This means going beyond simple responsive design if you’re going to create a superior mobile UX (user experience) that stands out from your competition.

IMPORTANT: Use your phone to read this post – it’s designed as a mobile experience.

***Click here to show a mobile nav bar***. The concept here is to use a nav bar with icons, to turn this blog post into an app-like mobile user experience. Click the nav buttons to move up and down the blog post on your phone and you’ll get a sense of how the experience has changed from a regular blog post reading experience.

You can use this technique with landing pages, blog posts, or anywhere you want to create a mobile app experience.

For those reading on desktop, this is what you’ll see at the bottom of your mobile browser.


Why Do Landing Pages (and Your Blog) Need Good Mobile UX?

When a landing page or blog post is long, there will most likely be a small percentage of visitors who will actually read the whole thing. You can increase engagement, and make a better experience if you guide people to the most important chapters or segments of the content.

***Click here to show the mobile nav bar***.

To achieve this you can use a navigation bar with clearly labeled sections that are not only helpful but and also feels like you’re inside an app native to your phone.


Turning Your Landing Page into an App-Like Mobile Experience with Unbounce Sticky Bars – in 4 Simple Steps

I’ve set it up so there are 4 main sections in the blog post that you can navigate to using the sticky app nav. So go ahead and click the nav icons to jump to each of the four steps you can follow to add this experience to your own landing pages and blog posts.


Step #1 – Create a Sticky Bar With Retina-Grade Icons

I created a sticky bar with four icons. To make them retina I made them with a width of 160px and a height of 130px, and shrank them to 80×65 in the Unbounce builder. To do this, I added 4 boxes and set the background style to be “Image” and “Background to fit container”. Then I added a fully transparent button above each of the images (because boxes don’t have a link action) to link to each of the 4 page sections.


Step #2 – Add Anchor Links and Sections

You can do this by setting the link action of the icons to point to a page element ID. For instance, the horizontal rule (line) that appears above step #2, has an ID of “section2”. In Unbounce this looks like the settings below. Note that the target of the link is set to “Parent Frame” as the Sticky Bar is set in an iframe above the page.


Step #3 – Hide the Close Button with CSS

As with many hacks that I’ve come up with for Product Awareness Month, this one requires that we hide the “Close” button that is part of the Sticky Bar functionality. When your Sticky Bar is used for promotional purposes it’s important that people can close it. But when you’re creating a navigational experience, the bar becomes part of the interface, and we need it to be always present.

To do this, you need to add a line of CSS to the landing page or blog that you want it to appear on. Note: this is not an official Unbounce feature, so your best bet for geeking out with functionality will be in the Unbounce community.

.ub-emb-iframe-wrapper .ub-emb-close visibility: hidden;

Step #4 – Look at Your Phone and Say Hells Yeah!

I can’t state enough how much I think this is a better mobile experience, so please give it a try and join the conversation in the comments (or ping me on Twitter).

Cheers
Oli

Taken from – 

[Mobile] How to Turn Your Blog Posts Into a Mobile App Experience – Using Sticky Bars

7 UX Mistakes Every Designer Unknowingly Commits (And How To Fix Them)

The door outside my office reads: PUSH. Guess what? That’s the handiwork of our HR team. (Thanks, HR team.) The special signage has come to my rescue and to the rescue of office mates so many times. Otherwise, by now we would’ve ripped apart the carpet below, through our mindless pulling and pushing. Initially, I used to blame myself for being so stupid and clumsy for pulling and pushing the door in all the wrong directions, almost always. But then, when I stumbled upon the book Design of Everyday Things by Don Norman I realized how wrong I was. I…

The post 7 UX Mistakes Every Designer Unknowingly Commits (And How To Fix Them) appeared first on The Daily Egg.

Continue at source:  

7 UX Mistakes Every Designer Unknowingly Commits (And How To Fix Them)

Doing the Two-Step: Opt-In Forms That Is [A Psychology Principle With Conversion Data]

I’ve no idea how to actually do the two-step. Apparently it looks a little something like this:

It’s way too complex for me. Fortunately, when it comes to marketing, the two-step opt-in form is much simpler.

What is a Two-Step Opt-In Form?

Well for starters it’s a two-time hyphenated term that’s really annoying to type. Functionally though, instead of including a form on your landing page, blog, or website, you use a link, button, or graphic to launch a popup that contains your form.

Why are Two-Step Opt-In Forms Good For Conversion?

There are two reasons why this approach is good for conversion rates, both of which have an element of behavioural psychology.

  • Foot in the Door (FITD): The FITD technique is an example of compliance psychology. By design, it’s good because the form is launched after a user-driven request. They clicked the link to subscribe with the intent to do exactly that, subscribe (or whatever the form’s conversion goal is). The click demonstrates the reaction to a modest request, creating a level of commitment that makes the visitor more likely to complete the form (the larger request) when it’s presented.
  • Perceived friction: Because there is no visible form, the idea of filling out a form is not really top of mind. This reduces the amount of effort required in your visitor’s mind.

What Does a Two-Step Opt-In Form Look Like?

They look a little like this aetful sketch I did last night.

Let’s try a demo. You can subscribe to follow along with Product Awareness Month here.
Clicking that link uses the two-step concept to launch a popup containing the subscribe form.

Pretty simple, right?

You could also click on any of the images below to do the same thing.

I configured all of these with Unbounce Popups by targeting this blog post URL and using the “On Click” trigger option set to function when an element with the ID #pam-two-step-v1 is clicked.

This trigger option is awesome because you can apply it to any element on your pages. And as you’ve just seen, you can have as many different popups as you like, all attached to different page elements.


You Can Also Use a Sticky Bar for a Two-Step Opt-In Form

The functionality is exactly the same if you want to use a Sticky Bar. Click the image below to show a Sticky Bar with a form, at the top of the page.


How Do Two-Step Opt-In Forms Perform?

Great question! I’m glad you asked.

Throughout Product Awareness Month I’ve sprinkled a few two-step opt-in popup links like this one: Subscribe Now. I’m also using the exact same popup using the exit trigger, so visitors see it when they are leaving the page.

To compare the data, the exit popup obviously gets seen a lot more as it triggers once for everyone. Conversely, the “On Click” popup gets fewer views because it’s a subtle CTA that only appears in a few places.

You can see some initial conversion rates below from the Unbounce dashboard.

Not huge sample sizes just yet (I’ll report on this again at the end of the month), but the difference is staggering.

The “On Click” triggered popup conversion rate is 1169% better than the exit popup.


Convinced yet? I hope so. Now I’d like to challenge you to try your own experiments with popup triggers and the awesome two-step opt-in form.

Sign up for a 30-day trial and build some Popups today. You also get the Sticky Bar and Landing Page products included in your account.

Cheers
Oli

p.s. Come back tomorrow to see a video interview I did with the awesome Head of Marketing at Shopify Plus, Hana Abaza.

More here – 

Doing the Two-Step: Opt-In Forms That Is [A Psychology Principle With Conversion Data]

How a Two-Step Opt-In Compares to an Exit Popup [A Psychology Principle & Conversion Data]

I’ve no idea how to actually do the two-step. Apparently it looks a little something like this:

It’s way too complex for me. Fortunately, when it comes to marketing, the two-step opt-in form is much simpler.

What is a Two-Step Opt-In Form?

Well for starters it’s a two-time hyphenated term that’s really annoying to type. Functionally though, instead of including a form on your landing page, blog, or website, you use a link, button, or graphic to launch a popup that contains your form.

Why are Two-Step Opt-In Forms Good For Conversion?

There are two reasons why this approach is good for conversion rates, both of which have an element of behavioural psychology.

  • Foot in the Door (FITD): The FITD technique is an example of compliance psychology. By design, it’s good because the form is launched after a user-driven request. They clicked the link to subscribe with the intent to do exactly that, subscribe (or whatever the form’s conversion goal is). The click demonstrates the reaction to a modest request, creating a level of commitment that makes the visitor more likely to complete the form (the larger request) when it’s presented.
  • Perceived friction: Because there is no visible form, the idea of filling out a form is not really top of mind. This reduces the amount of effort required in your visitor’s mind.

What Does a Two-Step Opt-In Form Look Like?

They look a little like this artful sketch I did last night.

Let’s try a demo. You can subscribe to follow along with Product Awareness Month by clicking the banner.

Clicking that banner uses the two-step concept to launch a popup containing the subscribe form.

Pretty simple, right?

You could also click on any of the images below to do the same thing.

I configured all of these with Unbounce Popups by targeting this blog post URL and using the “On Click” trigger option set to function when an element with the ID #pam-two-step-v1 is clicked.

This trigger option is awesome because you can apply it to any element on your pages. And as you’ve just seen, you can have as many different popups as you like, all attached to different page elements.


You Can Also Use a Sticky Bar for a Two-Step Opt-In Form

The functionality is exactly the same if you want to use a Sticky Bar. Click the image below to show a Sticky Bar with a form, at the top of the page.


How Do Two-Step Opt-In Forms Perform?

Great question! I’m glad you asked.

Throughout Product Awareness Month I’ve sprinkled a few two-step opt-in popup opportunities like this one:

I’m also using the exact same popup using the exit trigger, so visitors see it when they are leaving the page (to compare performance). 100% of visitors will get the exit popup (once only), and the on-click triggered links are also available to all (just less likely to be seen).

To compare the data, the exit popup obviously gets seen a lot more as it triggers once for everyone. Conversely, the “On Click” popup gets fewer views because it’s a subtle CTA that only appears in a few places.

You can see some initial conversion rates below from the Unbounce dashboard.

I know, I know, not big sample sizes just yet (I’ll report on this again at the end of the month), but the difference is looking impressive.

The “On Click” triggered popup conversion rate is 1,169% better than the exit popup.

There is the argument around conversions is more important than conversion rate, but that doesn’t take into account any negative perception from the exit popup (thousands of people seeing it and not converting) vs. no negative perception from the on click version.


Convinced yet? I hope so. Now I’d like to challenge you to try your own experiments with popup triggers and the awesome two-step opt-in form.

Sign up for a 30-day trial and build some Popups today. You also get the Sticky Bar and Landing Page products included in your account.

Cheers
Oli

p.s. Come back tomorrow to see a video interview I did with the awesome Head of Marketing at Shopify Plus, Hana Abaza.

See the original article here: 

How a Two-Step Opt-In Compares to an Exit Popup [A Psychology Principle & Conversion Data]

Learning Elm From A Drum Sequencer (Part 1)

If you’re a front-end developer following the evolution of single page applications (SPA), it’s likely you’ve heard of Elm, the functional language that inspired Redux. If you haven’t, it’s a compile-to-JavaScript language comparable with SPA projects like React, Angular, and Vue.
Like those, it manages state changes through its virtual dom aiming to make the code more maintainable and performant. It focuses on developer happiness, high-quality tooling, and simple, repeatable patterns.

See the article here: 

Learning Elm From A Drum Sequencer (Part 1)

Our top 7 blog posts of 2017

Build the most effective personalization strategy: A 4-step roadmap Along with “artificial intelligence”, “personalization” has been a hot topic among…Read blog postabout:Our top 7 blog posts of 2017

The post Our top 7 blog posts of 2017 appeared first on WiderFunnel Conversion Optimization.

Continued here – 

Our top 7 blog posts of 2017

How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays

Black Friday, Cyber Monday, holiday sales, and post-Christmas blow-outs: We’re in the middle of the biggest buying season of the…Read blog postabout:How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays

The post How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays appeared first on WiderFunnel Conversion Optimization.

Source: 

How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays