Introductory Course: How To Become a UX/UI Designer or Researcher

Author: Merrill

User experience and user interface (UX/UI) are often used interchangeably. While there are definite distinctions between the disciplines, they tend to work together, with UI choices affecting UX, and with UX research leading to changes in the UI. 

We’ll get into more specifics about this process, as well as precise definitions of both disciplines in the following sections. What we’ll assume until then, however, is that you have some notion of what UX/UI involves. Perhaps you’ve seen opportunities for roles in UX/UI. Perhaps you know that both skill sets can lead to in-demand and lucrative careers. Or perhaps you’ve worked in related fields like user research, product management, web development, or psychology. 

In this guide we’ll step you through some of our favorite resources and provide some foundational definitions and concepts related to UX and UI. Much like related fields in product management and software development, individuals can be self taught in UX/UI disciplines. And hopefully this guide will provide you with your bearings enough to create a portfolio of your own (or to just apply what you’re learning in a current role). 

Topics we’ll cover here include: 

What is UX/UI?

First things first, what exactly are we talking about here? 

UX and UI are two terms that are often used interchangeably, but instead refer to two related disciplines. Namely: 

  • User Experience (UX)
  • And User Interface (UI)

User experience is the science and collection of techniques used to measure and improve upon how a product “feels” to a user. User experience is primarily concerned with qualitative aspects such as what individuals like or dislike about a given product. Though these qualitative aspects bleed into quantitative metrics such as how long users use a product, whether users sign up for a service (or additional services), how much users buy, and how users interact with a product. 

User interface is essentially the design and implementation of the form of a product. Generally speaking, interfaces are what we use to gain information or use a product. User interfaces may be composed of forms, the structure of a site, interactivity or animations, general design choices, imagery, and anything else related to the implementation of how a user actually interacts with a product. 

There’s a popular saying around UI that essentially notes that interfaces are like jokes. If you have to tell someone how they work, then they don’t! A related notion is that the best interfaces are intuitive. Individuals shouldn’t have to spend much time learning how interfaces work, they should simply do what the user would expect them to do. 

UX and UI are implemented in all sorts of product designs, though the largest cluster of opportunity in these fields is primarily related to products that live online (websites, apps, portals, services online, etc.).

The Differences And Overlap Of UX/UI

UX and UI are often implemented by the same teams (or even the same individual). The process of UX work informs UI development, and UI development informs where UX work may start again. 

While there are many processes within UX and UI, a general schema for how UX and UI may relate could be summed up with the following steps (assuming you’re starting a new project): 

  • Content strategy
  • Information architecture
  • Scope of project
  • Initial sitemap
  • Initial user flow diagrams
  • Mood Boards
  • Wireframes
  • Lo-Fidelity Mock Ups
  • Testing 
  • Hi-Fidelity Mock Ups
  • Design Standards Documents

Differences between UX and UI can summed up in the processes and tools these roles use: 

  • User Experience: 
    • Tools: Analytics, Polling Tools, Diagrams, A/B Testing Frameworks, sitemap making tools
    • Processes: Site maps, Wireframes, Analysis of Analytics, Polling
  • User Interface:
    • Tools: photography, imagery, typography, color, mock up and design tools
    • Processes: Graphic design, mock ups, QA testing

Types of UX / UI Specializations

As with many fields, the level to which you may find yourself specializing in UX/UI is often a function of how large your UX/UI team is. In large corporations, UX/UI professionals may find themselves doing one subset of these tasks. On teams where there’s one UX/UI individual, you may find yourself doing all of the below specializations. With this said, if you’re trying to get into UX/UI it’s good to at least have a working knowledge of all of the following focus areas. 

Experience Strategists work on the UX side of the spectrum to try and determine both user and client goals and flesh out requirements and methods for tracking progress towards these goals in products. These individuals are closer to product management roles than project management roles (which may be more closely aligned to UI deliverables). 

User Researchers conduct qualitative and quantitative research on users to provide feedback for product changes. These roles may be more heavily reliant on analytics (quantitative data) or less formal research methods including usability surveys, focus groups, and interviews (qualitative data). User researchers are more heavily involved in the UX than the UI side of the equation, and often work in close contact with product teams. 

Information Architecture Specialists are somewhat like a cross between digital librarians and web designers. These individuals are tasked with ensuring information is laid out in a logical and easy to use manner. While IA specialists likely do less straight up design than interaction designers, they lay the groundwork or initial thought out for interaction (and other) designers to implement UX/UI proposals. 

Interaction Designers investigate and help hone the actual interface that lets users interact with the product. Interaction designers may investigate questions like “what does a user see before content is loaded on a page,” “what precisely happens when a user clicks a button,” “how does a user navigate through a site or app.” Interaction designers help to implement new layouts with an eye on quality UI principles. Depending on the team size they may or may not be the individual who actually implements the new design.

The four above roles are one particular way to break down UX and UI into “the four quadrant model.” There are, however, many other specialty roles within UX and UI. 

Additional specialist roles include: 

UX Writers who are tasked with implementing copy as part of the content that plays a major role in what a user’s experience is. Not all of a users experience is visual (and for some users, none of it is). That’s where UX writers come into play, ensuring quality UX principles are applied through written (or verbal) communication. These roles are especially prominent in products where individuals don’t interact with the product in a visual way. Smart speakers would be an example of this. 

Voice Designers are an even more specialized version of UX writers who apply UX principles to spoken text in auditory interfaces. Speech-to-text technologies are all around us, from portions of app and phone interfaces, to scores of internet-as-a-thing products. These designers help to ensure UX principles are implemented into the design of these types of products. 

UX Developers not only help with defining a UX strategy and research, but in implementing changes in the interface. While many UX/UI professionals have some coding skills, UX developers may find web or app development as a more central component of their job description. 

UX/UI Designers provide another “specialization” that may include any of the skills or specializations listed above. Depending on the size of the employer, individuals within UX or UI roles may be expected to perform design, research, and every stage of the UX/UI process. These individuals may go by UX/UI designers instead of just one specialization within these broader fields. 

 

Tools of the Trade

In recent years, the range of design, prototyping, and user research tools available have exploded. A field that was once dominated by Adobe products (similar to web design) now has many, many options for prototyping, wireframes, hi and lo-fidelity mockups, sitemaps, and user research. 

In this section we’ll look at some of the major categories of tools and point out some crowd favorites within each. 

Many of these tools are actually quite intuitive. But if you want to learn more advanced techniques or functionality, nearly all of the following tool makers have educational portals or learning centers. 

Prototyping and Wireframing Tools

  • Sketch is at the top of the list for many UX/UI teams and individuals. The ability to make prototype-wide changes to symbols, shapes, typography, and colors from one location. Add animations, and quickly switch from artboard to prototype. Available for an annual subscription and only on iOS. 
  • Adobe XD is Adobe’s main foray directly into UX/UI and prototyping. This wireframing and prototyping tool offers integrations with most other Adobe products, making it an easy choice for some designers. Comes with the ability to include animations as well as voice interactions. Available for monthly subscription. 
  • Axure RP offers slightly more wide-ranging functionality than either option listed above. Axure allows for visualizations based on conditional logic, inclusion of animations, dynamic content, and more. This product is available for purchase or via subscription.
  • Invision Studio provides similar features to all of the above prototyping tools, with the addition of a focus on mood boards as well as the ability to gain feedback directly within a prototype. Available as a subscription. 
  • Marvel is perhaps the best choice for interdisciplinary teams. With all of the same wireframing and prototyping features of the out tools in our list, Marvel also generates CSS, XML, and Swift for quick hand offs to design and development teams. Individuals can leave feedback from within prototypes and an app is available for editing or feedback on the go. Available as a subscription. 
  • Figma offers a free entry-level with optional upgrades for multi-member teams. This app allows for easy handling of all routine prototyping and wireframing tasks from within the browser. The ability to see prototypes with simple link sharing and the ability for any team member to leave feedback are two definite plusses of Figma. 

User Research

  • The UX Collective offers a pretty dang comprehensive list of user research tools. Depending on your needs, tools in this collection include surveying, the analysis of user behavior, recruitment of survey members, and more. 
  • User Interviews provides a whole chapter of an ebook about user recruitment, interviewing, and analysis. If you’re already applying some of your UX knowledge at work, many of these tools and services are great for enterprise environments. 

Sitemaps, Content Maps, and Site Diagramming

  • Visual Sitemaps is a great tool for taking an existing web property (particularly one with hundreds or thousands of pages) and generating a beautiful representative sitemap that can be exported. Sitemaps can be exported into Sketch or AI. Subscription-based service.
  • Slickplan is likely the frontrunner among all site organization tools, with suites of tools related to content mapping, site mapping, click path mapping, and diagrams that can help inform you into the wireframing and mock up processes. 

Initial Research

The start of the UX/UI lifecycle typically begins with research on a number of fronts. UX/UI professionals start by taking stock of the current project (if it’s already created in some form). 

Additionally, some investigation into current or future users is sought to inform some set of “user goals” and some investigation into those funding the project for a set of “client goals.” 

User goals and client goals can many times go hand in hand. For example, clients may want higher click through rate to a certain page. Simultaneously, users may want an easier or more clear path to valuable information. These two goals are not mutually exclusive and there’s likely a solution that appeases both parties involved. 

There are times, however, where user and client goals may appear to be in direct contradiction. For example, a client goal may be to reduce ongoing marketing costs for a web property. Meanwhile, a user goal may be to gain access to regularly updated free quality content.

There are a variety of useful exercises and techniques employed by UX/UI designers to discern how they should prioritize competing interests at the start of this project. These steps are important towards the beginning of the project as they can help to inform all future sections and lower project time and cost in the end. 

Below are a few resources on prioritizing features at the start of a UX/UI design process. 

And a few resources on creating user personas to inform choices early in the design process.

Sitemaps and Content/Functional Requirements

As we discussed in previous sections, the continuum of UX to UI roughly follows the trajectory of moving from non-visual and idea-driven to visual and functional. At this point in the design process, the prioritization of user and client priorities is often used to generate general organizational distinctions including sitemaps as well as distinguishing between content and functional needs for the site. 

There’s no one clear-cut way to make a great sitemap. Generally speaking, many designers use some of the same conventions, including squares for pages, diamonds for “choice points,” and lines and arrows to dictate the logical flow of information. But beyond that, sitemaps can incorporate a vast range of information. 

Some sitemaps are descriptive in nature, while others indicate major suggestions for how a site should transform. Some sitemaps take a very high-level view, while others provided somewhat detailed instructions on how a user will progress through pages. 

You may also work out many sitemaps and diagrams throughout the UX lifecycle, gaining specificity until you’ve moved on to a high fidelity mockup of pages. 

In the above video, Pierluigi Giglio walks new UX designers through many of the considerations you may want to make. Additionally, while you can essentially make a sitemap on any software that allows you to design squares and lines, choosing a program with additional sitemap-specific features can greatly enhance what you take from this part of the process. Some sitemapping tools (as are listed in the tools section above) provide the ability to interview users, testing capabilities, and the ability to export to other tools to “prettify” the sitemap as time goes on. 

While sitemaps occur in pretty much every UX process, and can be used to inform the overall structure of a project, there are a variety of common mapping types employed early-on in UX processes. These can include:

  • Empathy Maps
  • User Journeys
  • Experience Maps
  • Content Maps
  • And Service Blueprints

The two maps that likely appear the most are similar to content maps and service blueprints. These could also be phrased as documents that flesh out the content and functional requirements of the project. 

Rolling out content and functional requirements can further help you to prioritize what should be at the center of your site. While content is a central part of UX, functionality requirements are what need to be included for the project to even have a chance at being deemed successful. 

Lo and Hi-Fidelity Mockups

Some of the final stages of a UX/UI site or app build out center around the creation of lo and hi-fidelity mockups. Typically these documents proceed from research and work done in earlier sections of the design process. 

Use of user personas including values and what they’re looking for in the service can first be used to make a mood board. Mood boards don’t comment on the final design or layout, but provide an underlying “feel” or mood for the project. Ideally mood boards should be aligned with both user and client goals and can be a great starting point for the visual design process. 

Once documents like mood boards have been created, you may begin to start thinking about the actual layout of content elements on the screen. This is most commonly done through wireframes. Wireframes don’t make opinionated choices on font size, colors, and so forth, but instead provide a general layout that shows what content will be shown where within a site. 

Wireframes typically include elements including the following:

  • Navigation elements including main, secondary, footer, and sidebars
  • Banner locations and sizes
  • Individual blocks of copy as well as header and meta elements
  • Locations where images would be included
  • General layouts of buttons and call to actions

Just as there are lo and hi-fidelity mockups, so too can you proceed through wireframes in greater and greater detail. The key difference between a lo and hi-fidelity wireframe is that hi-fidelity wireframes tend to include interactivity to some degree and may be placed as a “live” prototype that individuals can click through. Lo-fidelity wireframes may be drawn on paper or software and are almost always static. 

Mockups take the general structure of wireframes and start integrating color, typography, imagery, and — eventually — interactivity. Finalized mockups can vary in specificity from a few “fully” designed dummy pages to a functioning prototype that includes dynamic content and actual baseline functionality. 

Typically speaking, the structure of the more finalized mockups will depend to some extent on the program you use. For UX developers or front end developers working on the UX side of a project, the finalized mockup may be a functionally simple page in HTML, CSS, and JS. Most of the case, however, mockups proceed until they are a semi-finalized design that allows a trial user to click through pages.