User experience design fundamentals

UX design process doesn’t just give users an intuitive and pleasurable experience — it poses an opportunity for designers to iterate and improve their designs.

“UX”, or “user experience”, is how a user feels when they use a specific product or service. It encompasses a variety of feelings including emotion, senses, and physical interaction.

SER RESEARCH

o User research focuses on understanding user behaviors, wants, needs, and motivations through observation, task analysis, and other feedback methodologies. The types of user research you can or should perform will depend on the type of site, system or app you are developing. Other considerations are your timeline, and your environment.

o The most common mistake made without this step is assuming that we are the user or customer. Or even worse, letting the client assume they are their user or customer.

o Techniques that we like to use are:

o Interviews

o Surveys and Questionnaires

o Card Sorts

o Usability Tests

o A/B Testing

COMPETITIVE ANALYSIS

o For any project, looking at what industry leaders are doing is a great way to understand what is working and what is not for a specific vertical. Finding the competition can often times come directly from the client and business stakeholders. Often times, we dig further to find more competition within their industry and even some outside of their industry. Indirect competition may have some similar aspects that could be applied to the given project.

o Communicate with the client about what you find. Explain why the approach of another company is working and what some things are that could potentially be used as inspiration for their project. Explain what isn’t working on their current site and why your newly found solutions will improve usability and conversion rates.

“User Experience Design (UXD or UED) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product.” — Wikipedia

PERSONAS

o A persona is a representation of a user, typically based off user research and incorporating user goals, needs, and interests. Use a simple list of questions to dial in on your client’s ideal user. Even if clients want to target a general or broad audience, describing and naming ideal site visitors completely focuses the entire design process on appealing to that user. If your ideal user is a 48-year-old lawyer named Bill, you’ll want to have that in mind before you design a site that markets to 23-year-old yoga teacher named Anajna. Of course, communicating with your client as you create the user personas allows the designer and the client to be on the same page about who the design should speak to before designs even start.

SITEMAP

o Sitemaps are a hierarchical diagram showing the structure of a website or application. We use them to group similar and related content and define the architecture of the site. They are an important step of the user centered process as they ensure content is in places users would expect to find it.

o We start by using a card sort process. We look at 3–5 direct and indirect competitors as well as the client’s current site. We use sticky notes and add the name of each top level category across all sites, using different colors for each site. The goal is to look at what each business has designated as a top level item, what they have named it, and look at the patterns or trends across the competition.

o In the end, you will easily be able to see what top level items are being focused on and have a good idea of how to structure your clients categories and name them in the best way to speak to their user.

USER FLOWS

o A user flow is the path a user follows through your website interface to complete a task or call-to-action (make a reservation, purchase a product, subscribe to something). In this process, you look at the sitemap you have created and draw out the ideal or “perfect” path that the user should follow. You also draw out potential secondary paths and consider what happens when the user gets distracted off the “perfect” path. Always directing and providing an easy way for the user to get back on the “perfect” path is the sure way to success.

WIREFRAMES & PROTOTYPES

o Lastly in the process we begin the visual designs. Starting with wireframes, we use simple shapes to communicate images, text, and call-to-actions. The purpose is to communicate with the client each page structure and how the funnel drills into the end goal of the user. The wireframes also show where text content is needed and gives the client and content strategist good idea of how much text is needed and what to communicate.

o After wireframes have been completed, we take the structure from those and move into the fully fleshed out design concepts. We use in Vision to link pages together and allow the client to navigate through the prototype, getting a good idea of how the site will function.