Over a million developers have joined DZone.

Getting Started With User Experience Design

User experience is vital in today's crowded marketplace. Learn how to get started.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

The better it is, the less people notice it.

That’s the paradox of user experience design. If you make a website or app with a good user experience (UX) design, the results aren’t typically seen with design awards, but rather through happy users, more customers, and increased revenues.

As a result, UX design is a growing part of web and app design. If your business aims to generate more sales, leads, or subscribers, a strong UX is a powerful lever to accomplish those goals.UX Design: Usability

What is User Experience Design?

UX design is a process by which you enhance a visitor’s satisfaction, through usability and accessibility improvements to the interaction between the visitor and the website or product.

While UX is not limited to the web or apps, the principles behind it are essential for design in our wired era. We now interact with the web and apps on a daily basis. If you are able to ensure users are successful on your e-commerce store, lead-generating website, or on your app, you will ensure more sales, more leads, and more overall activity.

On the other hand, disregarding user experience can create added friction with your visitors, and can drive them away.

Getting Started With User Experience Design

The best way to get started with UX design is to understand that it is a holistic process that takes not only practical skills, but the right thinking habits and strategies.

Today, I’m going to start with the stages of a UX process, in order to lay a solid foundation. From there, I’ll give you an overview of some tactics UX designers use to carry out this process. Finally, I’ll provide you with a list of great websites, resources, and tools to take your UX design to the next level.

The Process and Stages of User Experience

There are five key pieces to a holistic UX process: strategy, research, analysis, design, and production. Let’s go into a little more detail about each one, and explain what each is and why it’s important.

  1. Strategy – This is the vision or goals of a UX project; the foundation. It’s essential to define where you want to get to and why before you decide how to get there. In this stage, you will work to define what you’re hoping to achieve with your website or app. You will identify and involve key stakeholders during this stage, and will also work to define how you will measure success.
  2. Research – The research stage is your intelligence gathering stage. The better research you do, the better you can align UX with your goals. In addition, the more complex your goals and strategy, the more time and energy you will want to dedicate to the research stage. As Einstein popularly said, “If I had an hour to solve a problem, I'd spend 55 minutes thinking about the problem and five minutes thinking about solutions.” Don’t try and skip this step. It’s essential.  
  3. Analysis – This stage in the process is where the problem solving begins to takes place. The goal of this phase is to draw conclusions from the research phase, and to discover the “why” behind the what, and to validate it. Here you can identify areas of weakness and potential areas for improvement.
  4. Design – The design stage builds on the previous stages, and is where the prototyping begins. In UX, design is not done in a vacuum. It is an iterative process involving multiple people and regular feedback. The design work is usually done in the form of rough interactive or static wireframes that help build a skeleton for your website or app. These are not polished detailed versions. At this stage, you are fleshing out the major components, not finer content or branding details.
  5. Production – The final phase—production—begins once you have gone through the iterative design process, and defined your skeleton. At this stage, the finer details are included and completed, and a more polished draft can be presented to client and/or visitors for user testing and iteration.

One thing that is important to note here is that these stages are part of a repeating process, a habit, and are not a one-time thing. These are the pieces of your UX optimizing machine. User experience design is about learning how to learn.

User experience design is about learning how to learn.

Top Techniques

In addition to building these habits, there are a number of practical skills and techniques that are great to learn as you become a UX designer. These are the top techniques used during the strategy, research, analysis, design, and production stages.This list should form the foundation of tactics you will use, but do not let this list limit you. Discover more tactics and build on them.

  1. Competitor analysis. This is an assessment of your competition that is typically completed during the strategy and research phase. This will help you understand not only the competition, but also highlight areas of strength and weakness for both you and your competition.
  2. Analytics review. A thorough analytics review is helpful during the research and analysis stages. Identifying the key areas of data that you need and what that data is telling you, will help produce a more informed user experience. This means identifying traffic and browsing habits, top content pages, exit pages, and so on.
  3. Heuristic review. Evaluating a website or app according to its alignment with recognized usability principles, a heuristic review essentially ensures your site or app aligns with best practices. You can use beginners or experts to do the review. The goal is to discover and highlight where your current usability roadblocks exist, by asking your evaluators to complete a series of activities.  
  4. Content audit. A content audit is a detailed inventory of all content. This allows you to get a high-level view of all content on your site, which can help solve strategic site map issues, or even detect gaps or duplications in content. While it can be time consuming, it can act as a helpful reference throughout all stages of the UX process.
  5. Stakeholder interviews. Stakeholder interviews are a key way to identify goal misalignment, key usability problems, and more, between different parties that are involved in the leadership of the website or app. Conducting a stakeholder interview should take place in an early stage to help create clarity around goals.
  6. User testing. As the name suggests, user testing is watching users navigate your website or app while you ask them to complete tasks and verbalize their thoughts as they perform them. Asking the right questions, though, can be the tough part.
  7. User interviews and surveys. User interviews and surveys are tactics intended to get feedback directly from your current or potential users. These can be helpful for understanding specific pain points or user needs.
  8. A/B testing. An A/B test (sometimes called a split-test) is where you compare two different versions of a page, and see which performs better. The winning version is then pushed live to all users. This is a key way to iterate and test usability theories with real users.
  9. Closed beta. A closed beta version of your website or app allows you to get real users to interact with it, and provide feedback before it is made public. Often this is part of a lean methodology to building a new product or app.
  10. Workflow diagram. A workflow diagram (or activity diagram) is a graphical representation of activities and actions conducted by visitors. In the same way a content audit can give you a high-level view of your content, the workflow diagram can give you a high-level strategic perspective on the flow of your users, and help you highlight any problem areas.
  11. Wireframes. A wireframe, sometimes called a mockup, is a skeleton version of a website or app that presents a rough overview of the layout and elements, in order to show what direction the project is going. They can be very helpful in getting stakeholder feedback at the strategic level, before trying to build out more detailed designs. User testing can often be done on these wireframes, as well. For example, you can see how the wireframe below highlights the major components of the home page and the content that would live in each area.
  12. Mood board. A mood board is a collection of visuals used to share a visual style or flavor. It is often used by stakeholders to provide designers with visual cues for design. It can highlight typographical preferences, image styles, color directions, logo inspiration, and more. You can see below what an example of what a mood board might look like.
  13. User personas. A user persona (different from a marketing persona) is a profile that represents a typical visitor’s goals, pain points, and behavior. It acts as the voice of the user throughout testing, and can help you ensure you’re optimizing for the right audience. It is important to get internal stakeholder alignment on these.

Context Is Everything

So far, we’ve outlined a holistic and repeatable process, and a number of tactics. Now, it’s time to connect the two with an example.

Let’s say you’ve been charged with overhauling your company’s e-commerce website. It’s been three years since the last overhaul—it looks a little dated and does a poor job of bringing in new sales. Let’s run through what this process would look like in action.

Define Your Strategy

In the first stage, we’re considering the strategy. What are the company goals? Are we trying to get the brand name out there? Sell more of our retail products? Get a better return on investment for our advertising dollars?

This is the stage where we would do a competitor analysis, involve the key stakeholders, develop user personas, and perhaps develop a mood board.

Ask yourself:

  • Who is your target market and who are your competitors?
  • Who has the most insight into our company's direction and needs?
  • Who is vital to include this early in the process?
  • What are the pain points, goals, and behaviors of our typical user persona?
  • What stylistic and branding elements are essential to this project?

In this stage, we’re learning as much as we can about the scope of the project. A typical who, what, where, and why.

Do Your Research

Next, we would move on to research. At this stage, we want to get as much intelligence on where things currently are at, where the problem areas are, and so on.

Great tactics to use here are the analytics review, heuristic review, the content audit, and user interviews and surveys. Your goal in all of this, is to see where you are succeeding at your strategies and goals, and where you have room for improvement. You might be succeeding at doing the wrong things, and failing at doing the right ones. This part of the process will make those details clear.

Analyze Your Research

Now the fun part begins. The analysis phase is where we go from insight to action. Up until now, we’ve learned about our goals, our users, and have a solid grasp of our problem areas. Now, we can begin problem-solving, developing theories about why something has been ineffective, and discuss how to fix it.

Did you have high cart abandonment? Was it because of shipping costs? Why didn’t you allow guest checkout? Was it something else? At this stage, you can begin to plan some tests and experiments to take you into the next stage. You won’t actually deploy any tests at this stage, but you are defining how you would design an experiment that will give you the answers you need.

Design Your Solutions

Once you’ve done your analysis, then you can begin the creative work with the design stage. At this point, you might design wireframes for a new layout.

You can also assemble a workflow diagram to map out the exact pathway that a user would take, and discover any roadblocks or problems while you’re still working with rough designs.

Move Into Production

Finally, once you’ve solved any preliminary problems with your early design process, you can move into production. During this stage, you might introduce a limited audience to a closed beta of your new site, in order to get real user feedback before publishing it widely.

You can use A/B testing to experiment with alternative layouts for your home page or product pages, and you can use user testing, user interviews, and surveys to get additional feedback from real users.

If you did your homework during your strategy and research stages, and your designs reflect that research, your user feedback should show alignment with your strategy and goals.

There you have it. You’ve moved through one entire round of the process, from strategies to tactics. But remember, this is an iterative process, an optimization process. You can begin again and cycle through this for additional improvements, over time.

Remember, this is an ongoing iterative process. You’re learning how to learn from your visitor’s desires, goals, and actions.

A Powerful Way to Impact Your Bottom Line

User experience design is an often overlooked but incredibly powerful way to impact the bottom line of your client’s business. Aligning your design with your business and customer goals will result in better engagement and more conversions.

As I’ve shown, it’s not a silver bullet process but rather something that takes time, some hustle, and regular study. But it can  ultimately produce great results.

Originally posted on the Shopify Partner Blog

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

user experience,design

Published at DZone with permission of David Hoos, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}