Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Pragmatic UX Techniques For Smarter Websites

What is “User Experience Design” exactly? Should you not start it unless you are fully dedicated, or should you embrace it in the process as soon as possible? Are all designers also user experience designers, or is it a separate expertise?

The debate is as old as the discipline itself, and while picking up a bucket of popcorn, sitting back and watching the drama is sometimes fun, let’s try to figure out which user experience techniques are useful for startups, in-house teams, big corporations and anyone who wants to improve their website, product or service.

Further Reading on SmashingMag: Link

Multiple Definitions Of UX Link

User Experience Design is a very broad and vague field, and most commentators say that it’s a superset of all of the other disciplines. Is there one definition to rule them all? In my opinion, no. Do the definitions provided below describe some aspects of your day-to-day activities? Most likely, yes.

Christina Vodtke, author of Information Architecture: Blueprints for the Web, recently tweeted the following5:


Steve Psomas offers “The 5 Competencies of User Experience Design7,” which encompass information architecture, interaction design, usability engineering, visual design and prototype engineering, with a list of activities and artifacts produced by each activity.

In “The State of User Experience8,” Jesse James Garrett, author of The Elements of User Experience, defines experience design thus:

“The design of anything, independent of medium or across media, with human experience as an explicit outcome and human engagement as an explicit goal.”

Peter Merholz, author of Subject to Change, argues that UX is strategy, not design9:

“A UX designer is coordinating, orienting, helping all of the other folks [designers] achieve some common goal, a singular intent… UX designers lead organizations to ensure that great experiences get out into the world.”

Dr. Leslie Jensen-Inman and Jared Spool established the Unicorn Institute10 to identify which skills UX designers need. They’ve found that managers need UX designers to have a holistic skill set, including front-end development, visual design, mobile integration, project management, information architecture, interaction design, copywriting, content strategy and user research. According to this definition, UX design is the Swiss Army knife of Web design.

Become A UX Practitioner Link

If you can remotely recognize yourself in any of the definitions above, then there’s a good chance you are already practicing UX design and that you could become a seasoned UX designer with a little more strategy, a dozen of relevant books (check out the links at the bottom) and 10,000 hours of practice. While that’s a compelling proposition, it obviously takes time.

iPad Wireframe11
Disregarding the fact that it takes time to become a good UX practitioner, firms should still consider adopting UX techniques for their business in the meantime. (Image credit: baldiri12)

Most businesses — especially small companies and startups — can’t afford to hire a dedicated UX designer, but that shouldn’t stop them from adopting some UX techniques. Trust me, it’s much easier than you think.

A Not-At-All-Definitive List Of UX Techniques Link

I like to divide the techniques into two main categories: learning about the website or application, users needs, business goals, the industry and the competition, and generating ideas, solutions and communication artifacts that will help to align the team and shape the product.

Learn Link

  • website analytics
  • cognitive walkthrough
  • heuristic evaluation
  • stakeholder interviews
  • SWOT analysis
  • user interviews
  • usability testing
  • ethnography
  • contextual inquiry
  • card sorting
  • affinity mapping

Generate Link

  • personas
  • brand persona
  • voice and tone
  • microcopy
  • navigation patterns
  • search patterns
  • content strategy
  • customer journey map
  • ideation workshops
  • tasks and use cases
  • workflows
  • page priorities
  • prototypes
  • UI patterns

Everyone wants to see the results immediately. Taking urgency into account, how do you decide which technique to use? There’s no definitive answer, but in my experience, usability testing, interviews, journey mapping and microcopy tables are all very effective for quick and dirty experience improvements.

I’ve chosen these particular four because they don’t require you to create polished artifacts. Use them to improve the user experience, not to create unrealistically perfect candy for your portfolio.

Start With Empathy Link

The most important skill one needs to develop as a user experience designer is empathy. Empathy, however, cannot be practiced behind closed doors. To truly understand users, their challenges, their pain points as well as their dreams and desires, you need to go out and learn about them. Observe them while they live their lives, discover their habits and watch them use your design.

Usability Testing Link

Test every project on every major milestone. For best results, conduct before, during and preflight testing.

Usability testing is essentially watching people using your design.

Before Link

With redesigns, knowing what’s wrong with the old design is helpful. Secondly — and people rarely do this — test the competition. Create an equivalent set of tasks for a competing website or application and test it. Running a usability test on the competition’s product will reveal a lot of opportunities to delight users and seize competitive advantages. Just by avoiding the errors discovered there, you will automatically provide a much better UX.

During Link

Transitional tests are usually done with prototypes. Have a fresh pair of eyes look at your concept and make sure you haven’t overlooked something. Expect this to be not the final confirmation, but rather a prevention of the kind of forehead-slappers that usually slip by if only insiders with domain-specific knowledge are involved. If you have the time and budget, conduct these at each major turn. These are the most important and the least used tests.

Preflight Link

The most commonly requested yet least effective are preflight usability checks. A pre-flight evaluation is effective if the main concept is already tested and proven. Test the design before going live to reveal the last few bugs or typos that might have been overlooked.

If this is the first test on the project, it will probably reveal deeper issues. Much deeper than an easy to fix button miss-alignment or a typo.

We’ve conducted quite a few preflight usability studies and many times we discovered a core problem. On one occasion, the registration steps hadn’t been ordered in a sequence that had been logical to the user. On another, the touch-screen equivalent to drag ‘n’ drop with a mouse was missing.

Fixing a broken experience that’s discovered only a day or two before launch is usually postponed until the next release. Many more times still, there’s no clear roadmap after the project delivery, so the issue is never repaired. The solution? Test your designs early.

Usability Testing13
Usability testing techniques are well explained in Steve Krug’s classic “Rocket Surgery Made Easy14“, the sequel to the legendary “Don’t Make Me Think15“.

Need recording software? Just use Silverback16, which is dead simple to use and quite reliable. TechSmith Morae17 for Windows can be a considerate investment, so if you are on a tight budget, try CamStudio18. But don’t fuss about the software. If you don’t have any, test anyway and write down your observations.

Remote viewers can observe sessions with Google Hangouts19. In such cases, install Mouseposé20 to track mouse clicks and keyboard strokes. For offscreen recording, a set of GoPro21 cameras or a set of smartphones should work. If you opt for smartphones, make sure there’s enough space for an hour-long recording.

Recording and sharing touch interface testing sessions is effortless if you have a laptop with a camera nearby.

An easy way to record sessions on touch devices is with your laptop camera. Turn on the recording software, angle the laptop screen at about 45° and place the device next to the laptop’s trackpad. Another way is to strap a GoPro camera to the user’s chest or forehead, which is especially handy if you need to test in an unusual context.

Interviews Link

By “interviews,” do I mean user interviews? Not exclusively. Apart from interviewing (in plain language) users and customers (the ones who are spending money on us), we should also interview stakeholders, managers and other team members, as well as domain experts.

Discussing your product is pointless, especially by asking “Would you use [our product]’s feature XYZ?”. That’s an interview gone wrong. But let’s forget about you for the moment. Be genuinely interested in the person you are interviewing. Get to know them and understand them.

Unbiased Interviewees Link

When the user doesn’t know what the interview is about, you’ll get the most honest and least biased insights. No matter how disappointed they are in your product or service, the user might sugarcoat their answers if they know the purpose of the interview. The opposite could happen, too! On one occasion, we interviewed a user who was recruited by the very company we were redesigning for. Because he knew who we were, he couldn’t stop complaining about the price and value, so we wasted the interview listening to mere rants.

Even worse, you could end up writing down a lengthy list of feature requests. Back in 2007, I worked on a redesign of Croportal.net22, at the time one of the 10 most visited websites in Croatia. One of the first usability test-interview hybrids we conducted ended with a couple of users recommending a Gmail log-in form right there on the home page. The craziest part was that the product team actually debated whether to do it. It was a nightmare, but we learned our lesson. Inviting users to specify the product is the highway to feature-creep hell. Our responsibility was to uncover users’ problems, habits and motivations and then design the product to match those findings — not to ask users to design it for us.

Milica and Janko Jovanović explain how to translate user needs into product features in “Get Your Hands Dirty3023“.

Focus on facts, not opinion. Pride and resentment are easy to spot and, depending on the situation, can be a pleasure to hear, but behavior patterns are gold. Of course, write down everything, but sport a poker face when users start talking about the bits that you find the most valuable to the project. This doesn’t mean being serious and cold. In fact, be enthusiastic — but equally enthusiastic — about everything interviewees talk about.

How to Start? Link

Prepare more questions than you’ll be able to ask. This way, the conversation won’t end prematurely. We usually split our questions into two major groups: general questions and those that are more specific to the domain.

  1. General questions
    Learn about their daily life, general schedule, tedious and enjoyable errands, habits and patterns. You are looking for potential pain points, so the strokes should be broad. A good way to start an interview is to ask, “What does your typical day look like?” Depending on the context, the questions could be about life in general or just business.
  2. Domain specific
    Start with general questions, and then get more specific when you see there’s room to probe. For instance, ask, “What have you bought on the Internet lately?”… “And before that?”… “And before that?” Then ask for more detail about each experience, such as onboarding, findability and the checkout process. Remember to give every experience the same level of attention. Don’t focus too much on one particular experience; rather, try to identify patterns. With business interviewees, start with, “What was your most recent project?”… “And before that?” Then, unearth the patterns there.

Once you have spoken with users, use that data to create personas, journey maps, workflows and microcopy.

Customer Journey Mapping Link

Customer journey mapping is a collaborative activity to discover pain points and opportunities with a product. It’s conducted as a half-day or full-day workshop, with participants from all over the company. If your startup is small, then gather all of your advisors and mentors. If you are big, then bring in a person or two from customer support, billing, retail, marketing and strategy.

Everyone should participate in the workshop, because it could be the perfect opportunity to synthesize all internal goals, connect different roles and give everyone a sense of ownership of the product, making for a cohesive UX.

A customer journey group exercise. This picture is taken at a public workshop, but you can easily conduct it in-house as well.

Again, depending on the purpose and the goal, the maps may be more or less detailed. Be as objective as possible by gathering enough data about users (via website analytics, pools, surveys and interviews). By the time you become skilled in UX design, you will have used personas extensively in your customer journey mapping.

How do you do it? As an exercise, do it on your own first or with one or two colleagues who won’t roll their eyes the moment you introduce something new to the process. Take a sheet of paper big enough to accommodate a 9 × 6 grid of sticky notes; the paper used on flip charts is a good size. Gather a bunch of sticky notes and a marker or two and you’ll be good to go.

Draw a grid of three columns and six rows. It doesn’t need to be perfect, but if you find drawing straight lines to be challenge, I learned a trick at one of Eva-Lotta Lamm’s sketching workshops: Draw the lines by pulling the marker towards you, instead of from side to side. Label the columns “Before”, “During” and “After,” to represent time. The rows represent different aspects of the journey. Label them, too:

  • Activities
    For example, planning a family trip, asking friends, Googling top destinations, visiting websites, taking the trip, sharing photos, etc.
  • Thoughts
    For example, “Is this the right product for me?”
  • Feelings
    Frustration, delight, anxiety, relief, etc.
  • Touch points
    A friend, an AdWords ad, a TV commercial, the home page, a product page, a 404 page, etc. Be as detailed as needed.
  • Pain points
    Landing on the wrong landing page; not finding shipping details; etc.
  • Opportunities
    For example, populate the form with data that you can assume based on the visitor’s session data, such as location and currency.

Start using the sticky notes with just two simple rules: first, only one idea or comment for each sticky; secondly, stickies are expendable and affordable. Just add anything you can think of, and edit later once you’ve mapped all aspects of the journey.

Tweak this template to suit your needs, but I strongly suggest keeping “Activities,” “Thoughts” and “Feelings” because understanding what happens beyond our reach will lead to a better user experience.

Experience evaluation will reveal opportunities to fix issues as well as to delight users.

Once the experience has been charted, use the pointing system of your choice to evaluate each step of the journey and generate a graph. If you need to present the map within the company, make a poster of it, focusing on storytelling. In this case, your notes and data will just be there for support.

Microcopy Link

How many times have you encountered an error message that basically means that recovery from the error is impossible? These things don’t happen because no one involved gave it a thought. They happen because it was on no one’s to-do list.

Prevent such situations by adding a microcopy table to your project checklist. Microcopy is all of the instructional copy, small print and labels on a website. You want to communicate with the same voice, but adapt the tone to the audience, brand and context.

Workshop attendees learning how to write better content with a microcopy exercise.

Ensure consistent communication — and leave no critical bit behind — by creating a cheat sheet. I like to call such a guide a “microcopy table”. The industry exemplar is MailChimp’s “Voice and Tone24,” created by Kate Kiefer, but yours need not be so sophisticated. Never mind the form at this point; focus on the content.

Create a List of Interactions Link

For starters, open a spreadsheet in Google Docs or on your computer and start entering user tasks, each on its own row. Start with common ones, such as registering, logging in and recovering a password, and then get more specific, such as uploading a photo and updating a status. Lastly, break down basic tasks into smaller bits, such as first name, phone number, VAT number and small print about shipping and handling costs. Where applicable, create two rows for each task, a success row and an error row.

The following columns are typical:

  • Tasks
    For example, logging in.
  • Type of communication
    For example, success or error.
  • User thoughts
    For example, “Why do I need to enter that?”
  • User feelings
    List the emotions that the user has or might have.
  • Communication tips
    What needs to be explained, and in what tone?
  • Draft copy
    For example, “We need this information so that we can suggest products that are relevant to you.”
  • Where does the user go next?
    Or what should they do? If you want them to take an action, include instructions in your confirmation message.

Once you start to think about microcopy, listing all scenarios is a quick and fun way to think about how people will use your interface, to prevent misunderstanding and to delight users by anticipating their reactions. For best results, make it a group exercise!

Don’t worry if you are not good at writing copy. Describe all interactions and hand over the table to someone who is comfortable with it.

Everyone Can Should Do It Link

No, seriously, everyone should. There is something life-changing about listening to how strangers view the world and watching them use the product of your labor. Always be aware of the user’s real needs and you will design great user experiences. At the very least, a different perspective will do you no harm.

If you need more practice or wish to dive deeper, join me at the “Pragmatic UX25” workshop in Berlin this 17 February 2014.

Further Reading and Viewing Link

(al, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35

↑ Back to top Tweet itShare on Facebook

Marko Dugonjić is a designer from Velika Gorica, Croatia. As the user experience director at Creative Nights, he improves customers’ digital experience for local and international clients, speaks at international web design conferences and runs in-house and public UX workshops. He founded Typetester, a popular web typography design tool.

  1. 1

    Thanks, a great read and some really quotable parts in here – I’ve taken to noting some down onto sticky notes to constantly remind me to apply them throughout the usability process that I am soon to undertake on a new product!
    I’m going to have to bookmark and re-read this and keep all of your tips in mind!

  2. 2

    Marko Dugonjić

    January 27, 2014 9:18 am

    Thanks for your kind words!

  3. 3

    Great article. Further validates what I’ve always said: UX designers should follow in the footsteps of Da Vinci:

  4. 4

    I would like to see an example graphic or picture of the Journey Mapping. Great concepts I’d like to put in place where I’m at.

  5. 5

    Thank for the greate article. It’s very useful.

  6. 6

    Nice articles

  7. 7

    Excellent article…… A must read for all UX designers and bookmark it too.

  8. 8

    Great article, thanks for sharing. I am glad that empathy is in here, it’s one of the most important things to me when carrying out the work I do


  9. 9

    Very nice article. I checked out Rosenfeld Media’s books and there are some interesting titles listed for a fair prices. Thanks for sharing.

  10. 10

    Thank you for the useful and insightful article. Definitely saved to my Pocket for re-reading :)

  11. 11

    Thanks so much for including my post here, Marko!

    • 12

      Marko Dugonjić

      January 29, 2014 12:39 am

      You’re welcome :)

      It’s a great article to make us think about where the career can take us. I’ve loved it ever since, but it was actually Janko Jovanović who reminded me of its value and suggested adding it to the list. I’m glad he did.

  12. 13

    Čestitke na prvom(?) Smashing članku.

  13. 14

    Michael Meininger

    January 29, 2014 1:50 pm

    Nice post! It was a great read

  14. 15

    Marko, I like what you wrote about empathy, interviews and testing, but I think it’s a shame you didn’t talk about co-design and participatory design in those contexts. Co-design’s been around for decades, and it’s especially strong for establishing that the stakeholder or client may not be the party for whom the artifacts are designed for.

  15. 16

    Amazing article!!!! I will start using and studying this right now!!! Thank you!!!

  16. 17

    Great article!

    My question is, how can the Journey Mapping methodology be applied to a single piece of software? For example, the exercise you describe is really looking at a macro, company-wide view for the entire UX of a customer’s journey with your company. But let’s say you’re looking to redesign your software platform, how would one apply these concepts on a micro-level, i.e. focusing solely on a customer’s experience within the platform you will be rebuilding?


    • 18

      Marko Dugonjić

      February 5, 2014 12:27 am

      Hi Aaron,

      Nema na čemu! (You are welcome!)

      Journey mapping can be applied to virtually anything.

      Think about the user’s needs and goals in a given context. How they start considering software like yours (as a general category)? Try to find the pain points in their everyday activities and specific workflows as well as in your competitor’s software.

      Find a way to seamlessly blend your technology into their routines, not the other way around. Is your software standing in their way? What happens after they use your software and the task is completed? How often will they use it? Can the software predict future behavior? Will it follow up with reports / tips / alerts after the task is competed? Is there a way to automate things? What are the defaults? Are they simple enough? Will a mainstream user understand them?

      In short: Why is the user launching your software in the morning, what are they doing with it, and what is the outcome for the user. What the user thinks and how they feel before, during and after using the software.

      • 19

        To expand on Marko’s reply, a great way to find the pulse of your users (how they feel and what they think when they interact with your digital product) is through unbiased user testing.

        User testing is more than just click tests, heat maps or surveys. It’s understanding your user’s thought processes, emotional responses, the trustworthiness and comprehension of your product.

        The best way to capture this information on your users, is not just screen capturing, but user capturing. What does that mean? It means recording not only what the user is doing on the site during the test, but its also recording them while they test.

        The result produced, is that of the user’s interactions and their facial and verbal reactions. The best ( and affordable) way to gather this information is with They are making waves in UX testing!

        Check it out before your next project. You can use the site for prototype testing, mobile, web, etc. And at any point in your development phase!

        Hope this helps,

        UX Designer

  17. 21

    Chris Paris-Haines

    February 4, 2014 11:50 pm

    Great article….

    I have bookmarked it for later reading as a lot of useful information here, and this article has lead me to think about my next stage of my development in the field.

  18. 22

    Really useful information.
    Will use it as a guide for future projects.
    Thanks for sharing with us. :)

  19. 23

    Thanks for this read, Marko. I have approached a fork in my career road and am strongly considering trying to morph myself into a self-proclaimed UX Designer. I am trying to find the Mt. Rushmore of UX Design to learn from, and for the time being, you are resting on it, along with Da Vinci and two open spots (probably one to my coworker M.E.). I hope to look back on the reading of this article and recognize it as a major node in my journey forward. If you have any further advice or recommended reading, please do share. Thanks again.

  20. 24

    Excellent article Marko!!! Do you know interesting websites for senior people with nice design that centers in user experience, or sites that offer services, not products, for example goverment sites that you think are good examples?

    The thing is that I work with older pepole (60 years or more) and we want to redesign the web page based on UX principles, so I am looking for information on how to do it and examples of webpages that have the same target.

    I´ll be really greatfull for any help, example or tip you can provide

    Thank you!!!

  21. 25

    Few articles forces you to read throughout and this is one of them. Not just learned new things but at the same time I enjoyed too. You’ve described it in a manner where begineers can also understand easily using the infographics you used. Great stuff Marko.


↑ Back to top