The User Journey – How to Design for Ecstasy

Yesterday, I read a post on Derek Sivers’ blog about how drama can be mapped on a two-dimensional charts, and I was inspired to think about the user’s journey through a product in a similar fashion.

One of the most useful design practices to create good landing pages is to visualize each website visit as a journey that leads users to a destination. That destination is not just a goal that the user needs to accomplish, but also an emotional state that the user would like to experience.

It’s important to understand that the journey doesn’t typically start when the user reaches a product’s homepage. It starts earlier, when she identifies a need to have or accomplish something, or when she finds a recommendation from a friend or blogger to try a new product. When she comes to the site, she will have many questions in her head that she wants answered.

There is a wide range of emotions that users experience during a website visit, including: indifference, boredom, confusion, disappointment, curiosity, engagement, and ecstasy.

Let’s look at how a good design can create an ecstatic user experience:

Our journey starts with Danielle doing some search on Google for a solution she needed for her small business. She’s already visited various websites and looked through many alternatives, and she finally clicked that link that’s taking her to your landing page. She reached that page feeling a bit bored, somehow curious, and a bit more skeptical. She took a quick glance at the page, knowing that it usually takes her about 5 seconds to realize whether or not she’s found what she’s been looking for. At first glance, she saw a tag-line that grabs her attention. She read through the story below the tag-line, and she found herself relating to it. The story didn’t talk about the product. Instead, it talked about her! Next to the story, she found a screenshot that showed how the product will help her through her challenges. She became more curious to learn about what the product was offering her, so she started reading further. She liked how the information was presented: No marketing jargon, no mention of “innovative” or “revolutionary”, and no one trying to sell anything to her. It was as if someone had already anticipated the questions she had in mind about the product and answered them directly and simply. She felt as if she was having an engaging conversation with the person who designed that page. And she liked that person, and the conversation she was having with him.

She finds a “Try It Now!” button and clicked it. Based on her experience with previous products, she expected herself to land on a page that compares plan options, or at best, a sign up form that she needed to fill out to try the product for free. She was happily surprised to find herself face to face with the actual product, and with real data that put her immediately in the driver’s seat. She loved how the product had the exact features she needed: No more, and no less. She also discovered that the features she’s been using the most are carefully laid out to be easily reachable and quickly executed. As she tried each feature, she started experiencing fast results that she’d been looking for. At that moment, she realized that the product would save her a lot of time and she was ready to take out her credit card and happily pay for it.

good homepage design.jpg

In contrast, here is what it feels to have a disappointing user experience:

While reading through a product review blog, Mark stumbled upon a product that seemed to offer a solution for a challenge he’s been struggling with. He clicked the link and landed on a page with plenty of text and pretty looking graphics. The page had a bold tag-line, a product pitch, screenshots, video tour, a list of unique selling points, client testimonials, and even quotes from the press. He felt overwhelmed by the amount of information on the page, and confused about what’s in it for him. The page was all about the product, not about him. Among other graphics, a bright “Try It Now” button jumped at him, so he clicked it. To his disappointment, he found himself facing a grid of plans, options and prices. He was surprised that someone expected him to take out his credit card without giving him a good idea about what he would be paying for. He scrolled through the plans and found a tiny link at the bottom of the page that granted him limited free access to the product. He clicked it and realized that he had to fill out a long form to access the product, and he did so patiently. He felt that he already gave this product too much of his time, and received nothing in return. His disappointment turned into frustration as he stared at the message asking him to check his email to activate his account, and his cursor found its way quickly to the x icon on his browser’s tab.

bad homepage design.jpg

Here are some notes about how to design for ecstasy:

  • Understand where your users are coming from, and what they need to know.
  • Design pages that anticipate and answer their question in a simple and direct manner. Avoid marketing jargon.
  • If you’re saying more than one thing, then you’re saying nothing.
  • Give them instant gratification, before you ask them to sign up or pay. Make the “Try It Now” button a “Try It NOW” button.
  • Enable them to experience the product with real data. Don’t give them a blank canvas and let them figure out how to use it.
  • Make it easy for them to accomplish something you already know they need to.
  • Understand that it’s about them, not about you.
  • Don’t give them a product that just enables them to accomplish a task, but also enable them to feel good while doing it.

I highly recommend Keynotopia for designing interface mockups for web and mobile apps

Keynotopia is a user interface design toolkit that enables you to use Apple Keynote or Microsoft PowerPoint to prototype, test and demo your application ideas quickly and cheaply, without doing any design work or writing a single line of code.

It includes thousands of wireframe and high fidelity vector user interface components and royalty free icons for mobile, web and desktop apps, all designed from scratch in Keynote and PowerPoint, and can be edited and customized without needing any design tools.

Keynotopia is used by 40,000 entrepreneurs, designers, and developers in more than 80 countries.

1 Comment

  1. Nice, I like your personas names Danielle and Mark 🙂


Submit a Comment

Your email address will not be published. Required fields are marked *