6-1: Careers in UX Design

You are not your user, the user is not broken.

User experience (UX) design User Experience Design evolved into a multidisciplinary design branch that involves multiple technical aspects from motion graphics design and animation to programming.

UI/Visual Design

Visual design, also commonly known as graphic design, user interface (UI) design, communication design, and visual communication, represents the aesthetics or look-and-feel of the front end of any user interface. Graphic treatment of interface elements is often perceived as the visual design. The purpose of visual design is to use visual elements like colors, images, and symbols to convey a message to its audience. Fundamentals of Gestalt psychology and visual perception give a cognitive perspective on how to create effective visual communication.

Information Architecture

Information architecture (IA) is the art and science of structuring and organizing the information in products and services to support usability and findability.

  • Structuring is reducing information to its basic building units and then relating them to each other.
  • Organization involves grouping these units in a distinctive and meaningful manner.
  • Labeling means using appropriate wording to support easy navigation and findability.
  • Findability – If users are not able to find required information without browsing, searching or asking, then the find-ability of the information architecture fails. Navigation needs to be clearly conveyed to ease finding of the contents.

Interaction Design

There are many key factors to understanding interaction design and how it can enable a pleasurable end user experience. Building great user experience requires interaction design to play a pivotal role in helping define what works best for the users.

High demand for improved user experiences and strong focus on the end-users have made interaction designers critical in conceptualizing design that matches user expectations and standards of the latest UI patterns and components. While working, interaction designers take several things in consideration. A few of them are:

  • Defining interaction patterns best suited in the context
  • Incorporating user needs collected during user research into the designs
  • Features and information that are important to the user
  • Interface behavior like drag-drop, selections, and mouse-over actions
  • Effectively communicating strengths of the system
  • Making the interface intuitive by building affordances
  • Maintaining consistency throughout the system.

In the last few years, the role of interaction designer has shifted from being just focused on specifying UI components and communicating them to the engineers to a situation now where designers have more freedom to design contextual interfaces which are based on helping meet the user needs.

You are not your user, the user is not broken.Usability / Inclusive Design / WCAG

  • Usability is the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. Good usability is essential to a positive user experience but does not alone guarantee it.
  • Inclusive design keeps the diversity and uniqueness of each individual user in mind, recognizes the importance of self-determination and self-knowledge, and that design or configuration choices belong to the user. Most people aren’t “average” in their real-world contexts, lifestyles, aspirations, genders, and past experiences. Even assuming a theoretical average, the needs of individuals who are not “normal” increase the more non-normal they are. Separate, specialized solutions are not sustainable economically or technically.
  • Web Content Accessibility Guidelines (WCAG) (currently v. 2.1) cover a wide range of recommendations for making Web content more accessible.

UX Researcher

UX Researchers conduct both qualitative and quantitative methods. The chosen research method depends on the type of site to be developed, the timeline and budget constraints, and the usage environment. UX research applies scientific research principles to solve design problems and to deliver findings back to other departments to help them design better products for their users.

Differences Between QUAL and QUANT

Qualitative and quantitative data need slightly different study setups and very different analysis methods. They are rarely collected at the same time — hence the distinction between qualitative and quantitative user studies. Both qualitative and quantitative testing are essential in the iterative design cycle. Although qual studies are more common in our industry, quant studies are the only ones that allow us to put a number on a redesign and clearly say how much our new version improved over the old one —  they are the essential instrument in calculating return on investment.

The table below summarizes the differences between the two types of research.

Qualitative Research Quantitative Research
Questions answered Why? How many and how much?
Goals Both formative and summative:

  • inform design decisions
  • identify usability issues and find solutions for them
Mostly summative:

  • evaluate the usability of an existing site
  • track usability over time
  • compare site with competitors
  • compute ROI
When it is used Anytime: during redesign, or when you have a final working product When you have a working product (either at the beginning or end of a design cycle)
Outcome Findings based on the researcher’s impressions, interpretations, and prior knowledge Statistically meaningful results that are likely to be replicated in a different study
  • Few participants
  • Flexible study conditions that can be adjusted according to the team’s needs
  • Think-aloud protocol
  • Many participants
  • Well-defined, strictly controlled study conditions
  • Usually no think-aloud

Submit for credit: Which field best sums up something you might be interested in, and why?

6-2: Personas 101

AstroFox planting a flag on the moon. Flag says: "Users first!"User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions. UI brings together concepts from interaction design, visual design, and information architecture.

Choosing Interface Elements

Users have become familiar with interface elements acting in a certain way, so be consistent and predictable in your choices and their layout. Doing so will help with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

  • Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date field
  • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion

There are times when multiple elements might be appropriate for displaying content. When this happens, it’s important to consider the trade-offs. For example, sometimes elements that can help save you space put more of a burden on the user mentally by forcing them to guess what is within the dropdown or what the element might be.

Best Practices for Designing an Interface

Everything stems from knowing your users, including understanding their goals, skills, preferences, and tendencies. Once you know about your user, make sure to consider the following when designing your interface:

  • Keep the interface simple and task-oriented. The best interfaces are almost invisible to the user. They avoid unnecessary elements and are clear in the language they use on labels and in messaging.
  • Create consistency and use standard/common UI elements. By using common elements in your UI, users feel more comfortable and are able to get things done more quickly. It is also important to create patterns in language, layout and design throughout the site to help facilitate efficiency. Once a user learns how to do something, they should be able to transfer that skill to other parts of the site.
  • Be purposeful in page layout. Consider the spatial relationships between items on the page and structure the page based on importance. Careful placement of items can help draw attention to the most important pieces of information and can aid scanning and readability.
  • Strategically use color and texture. You can direct attention toward or redirect attention away from items using color, light, contrast, and texture to your advantage. Use typography to create hierarchy and clarity. Carefully consider how you use typeface. Different sizes, fonts, and arrangement of the text to help increase scanability, legibility and readability.
  • Make sure that the system communicates what’s happening. Always inform your users of location, actions, changes in state, or errors. The use of various UI elements to communicate status and, if necessary, next steps can reduce frustration for your user.
  • Think about the defaults. By carefully thinking about and anticipating the tasks and goals people bring to your site, you can create defaults that reduce the burden on the user. This becomes particularly important when it comes to form design where you might have an opportunity to have some fields pre-chosen or filled out.

Including The User

When designing a website, it’s easy to assume that everybody is like you. However, this leads to a strong bias and often ends in an inefficient design.

You evidently know a lot about your services and your website; your users, on the other hand, are likely to not care that much. They have different attitudes and goals, and just want to get things done on your website.
To avoid this bias, you need to learn about your users, involve them in the design process, and interact with them.


The purpose of personas is to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics. Remember, your personas are only as good as the research behind them.

Effective personas:

  • Represent a major user group for your website
  • Express and focus on the major needs and expectations of the most important user groups
  • Give a clear picture of the user’s expectations and how they’re likely to use the site
  • Aid in uncovering universal features and functionality
  • Describe real people with backgrounds, goals, and values

Benefits of Personas

Personas help to focus decisions surrounding site components by adding a layer of real-world consideration to the conversation. They also offer a quick and inexpensive way to test and prioritize those features throughout the development process. In addition they can help:

  • Stakeholders and leaders evaluate new site feature ideas
  • Information architects develop informed wireframes, interface behaviors, and labeling
  • Designers create the overall look and feel of the website
  • System engineers/developers decide which approaches to take based on user behaviors
  • Copy writers ensure site content is written to the appropriate audiences

Best Practices for Developing Personas

Personas development belongs at the beginning of the project, as personas can inform site functionality, help uncover gaps, or highlight new opportunities.

You may develop one or more personas for a project but limit yourself to the main audiences for the site. For any given project, creating only three or four personas is best. Remember that it is better to paint with a broad brush and meet the needs of the larger populations than try to meet the needs of everyone. The goal of personas is not represent all audiences or address all needs of the website but instead to focus on the major needs of the most important user groups.

Objective Questions
Define the Purpose/
Vision for the Site
  • What is the purpose of the site?
  • What are the goals of the site?
Describe the User
  • What is the age bracket of your person?
  • Why will they come to the site? (User needs, interests, and goals)
  • Where (or from whom) else is their person getting information about your issue or similar programs or services?
  • When and where and how will users access the site? (User environment and context)
  • What technological devices does your person use on a regular basis?
  • What software and/or applications does your person use on a regular basis?
  • Through what technological device does your user primarily access the web for information?
  • How much time does your person spend browsing the web every day?
User Motivation
  • What is your person motivated by?
  • What are they looking for?
  • What is your person looking to do?
  • What are their needs?

Ex, the attached PDF is an example of 1 below:

  1. Price-conscious parent with an emergency
  2. Comparison-shopper who may soon be in need
  3. House-flipper who is constantly looking for deals

Submit for credit: List three possible “types of people” who you would create personas for. 

6-3: Creating Your Personas

Submit for Credit: Create 3 personas for users of your website. Answer the following questions thoroughly about each of the personas.

Make them different enough to be three distinct people when someone imagines them.

  1. Primary Motivation: What does this person want most from your site?
  2. Quote: What would this person say about the content on your site?
  3. Who is This? Define the basic customer profile (previous ex: Modern American parent, 2+ kids, tons of laundry. Family-oriented, always wants to provide them the best, but at the best possible price.).
  4. Motivations: What is the supreme motivator? What are (latent) needs and desires?
  5. Behaviors:
  • Decisions made on facts or emotion?
  • Fast or slow decision maker?
  • What does this customer do? Tell stories about their behavior while using a service, product or site. Include channel usage for various needs (internet, in-person, visiting comparable sites, mobile, social media).
  • What works well for them, and what are the frustrations?
  • What would stop them from using/choosing your site?

6-4: Site Mapping


A sitemap is a list of pages that are contained in a website that is accessible to website crawlers or users. Sitemaps display the relationship between various pages and content of a website, demonstrating the way that the website is organized, how it can be navigated, and how it is labeled.

Sitemaps are mostly a planning tool that helps organize and sort the content that will be included on the website, and helps to eliminate any pages that may be unnecessary. It is a great planning tool that comes in hand for every step of the way in building a website.

Based on your interviews and card-sort, create a site map for your website, including pages and subpages.

6-5: Build Your Site’s Shell

Using your sitemap, build the “shell” of your site.

  1. Include a page for each page indicated in your sitemap.
  2. If you are organizing your content via posts, set up primary tags and categories, and create shell posts for the items in your site map (previous assignment).
  3. Create primary and secondary navigation through menus.
  4. Learn how to select and install a good theme (there’s more to them than just looks!).
  5. Install/confirm you have the following plugins (<– this link will show you how):
    1. a Contact Form
    2. Search Engine Optimization (SEO)
    3. Caching
    4. Backup
    5. Social Media
    6. Analytics
    7. Security
  6.  Write draft content for the shell pages, including AT LEAST
    1. a page title
    2. a sentence describing to yourself what content will be there
    3. draft SEO keywords (in the body of the page so I can see them)
    4. a contact form
    5. SUBMIT FOR CREDIT: A link to your website with this content present & visible. This assignment is worth 300 points.