UI/UX Design Process

The design process includes a wide range of methodologies to ensure that an end product achieves its core (often business) objectives whilst providing its users with the most efficient and engaging experience possible. Together with user interface design, which is the actual visual design of a website or application, the focus remains on the user's experience and interaction.

Overview

Often, the interface design (UI) is intertwined with the experience design (UX), but they are entirely different. However, I personally see both fields as a whole. User experience is comprised of both functionality and visibility, but when addressing the two as linked fields, it's obvious that one relies on the other.

Goal

The job of an interactive and visual designer is to make users effective, therefore my initial approach is to find out what problems (pain points) exist, and understand how users deal with them currently, and start working on solutions. Empathy is the foundation of the whole design thinking process, and ties directly to the primary principle, wherein you actually conduct research and interact with the people you're trying to help.

The goal is to define the overall information architecture in order to plan the layout and interaction of the interface through a simulation of real use cases. The most important and obvious thing to determine is whether users are able to accomplish their tasks and goals, and to ensure they're able to do so in the best and most efficient way possible.

Documentation

Carefully plan and document requirements for each project or related-task, which will be instrumental for conceptualizing, designing, creating and improving the overall web presentation. In addition, some common documentation such as sketches, wireframes, task-flow diagrams, and design specifications influence intermediate and advanced deliverables such as storyboards, detailed mockups and even rapid prototyping. What's unique about this stage is that for most of the deliverables, the documentation is the design. The design process (phase) will help to turn ideas into an actual quality user experience delivering great concepts.

UX Design Process

UX is best to be thought of as the beginning of the design cycle, it's where your mission is to understand in detail what problem you're trying to solve for your users. First identify the problem, then work on the solution.

UX Research Methods

Using appropriate UX research methods keeps me focused on the end user and enables me to translate the results into user needs and goals. These research methods are a great learning tool that helps point me in the right direction and also helps to support all my design decisions.

  1. Kick-Off Meeting Questionnaire
    • Requirements Gathering
  2. Kickoff Meeting:
    • Review, discuss and complete kickoff meeting questionnaire
    • Value Proposition
      • A statement that helps the team map out and create consensus around the key aspects of product and how it will be used.
    • Product Roadmap
      • Product roadmap is a product's evolution plan with prioritized features. It presents strategic guidance to team members and business partners that provides organizations with a plan to shape, define and achieve their product's vision.
    • Develop the project goals, deliverables and a rough product plan
    • Define key success factors
    • Identify team members and responsibilities
  3. Conduct a task analysis
    • A study of the actions required in order to complete a given task. Task Analysis is helpful when designers and developers try to understand the current system and its information flows. It makes it possible to allocate tasks appropriately within the new system.
  4. Competitive Audit
    • Compare features with websites or products of similar subject matter that provide a better user experience to see how each feature area could be improved. The goal of competitive audit is to discover and analyze what is working for other companies in your industry, so that you can make those strategies work for you in an effort to gain a competitive advantage.
  5. Content Audit
    • A complete listing of every content item on the site that include all pages, as well as all assets (such as downloadable files and videos) tracked in a spreadsheet.
  6. Accessibility Audit
    • A study to measure if the website or product can be used by users with special needs and disabilities.
  7. Stakeholders Interviews
    • Stakeholder Interviews are conversations UX designers conduct with their key stakeholders such as customers, bosses, subordinates or peers that helps prioritise features and define key performance indicators (KPIs).
  8. User Interview
    • A user interview is a technique used typically to get qualitative information from existing users and is especially useful when the target audience is new or unknown for the team.
  9. Buyer Personas
    • Buyer personas are semi-fictional representations of your ideal customer based on real data and some select educated speculation about customer demographics, behavior patterns, motivations and goals. Buyer personas must be based off of actual research, not assumptions. Start by interviewing your current customers and look-out for trends.
  10. Mapping Methods
    • Empathy maps help team members understand the user's mindset, and is a tool used to articulate what we know about a particular type of user. It externalizes user knowledge in order to 1) create a shared understanding, and 2) aid in decision making.
    • Customer journey maps focus on a specific customer's interaction with a product or service.
    • Experience maps generalize the concept of customer-journey maps across user types and products.
    • Service blueprints are counterparts to customer journey maps, focused on the employees.
    • Credit: UX Mapping Methods: A Cheat Sheet | Nielsen Norman Group
  11. Heuristic Evaluation
    • Heuristic Evaluation helps UX designers visualize the current state of the product in terms of usability, accessibility, and effectiveness of the experience. Basically, it is a detailed analysis of a product that highlights good and bad design practices.
  12. Card Sorting
    • Card sorting is a method used to help design or evaluate the information architecture of a product. UX designer asks users to group content and functionalities into specific categories. Basically, a method for finding patterns in how users expect to find and organize content without pre-established groupings.
  13. Brainstorming
    • Brainstorming is a method to generate ideas, solve problems and allows the team to visualize a broad range of design solutions before deciding on the best option.
  14. Focus Groups
    • A focus group is a moderated discussion that typically involves 5 to 10 participants. You bring people to discuss issues and concerns about the features of a user interface.
  15. Usability Testing
    • Usability testing is the observation of users trying to carry out tasks with a product. Testing can be focused on a single process or be much more wide ranging.
  16. Eye Movement Tracking
    • A technology that analyzes the user's eye movements across the interface and provides data about what keeps users interested on the screen and how their reading flow could be optimized by design.
  17. Concept Testing
    • A UX researcher shares an approximation of a product that captures the key essence (the Value Proposition) of a new concept in order to determine if it meets the needs of the target audience.
  18. A/B Testing
    • A/B testing is offering alternative versions of a product to different users and comparing the results in order to find out which one performs better. This is a great technique for optimizing landing pages.
  19. Field Studies
    • Field study is about going out and observing users on their natural setting so that behavior can be measured in the context where a product will actually be used.
  20. Guerrilla Testing
    • Guerrilla testing usually means going into a public place to ask people there about your product or prototype, essentially anywhere where you can find a relevant audience.
  21. More Brainstorming
    • Brainstorming is a method to generate ideas, solve problems and allows the team to visualize a broad range of design solutions before deciding on the best option.

The key is that your documentation should help move the design forward because it's all about making documentation complementary rather than supplementary to the design process. Again, I embrace design thinking to combine the problem-solving roots of design with deep empathy for the user.

Lean UX

Although conducting an effective and thorough analysis upfront is very important, I am personally a proponent of the “Lean UX” methodology with less emphasis on deliverables and greater focus on the actual experience being designed. The goal is to define the core components in the initial concept in an effort to quickly visualize the workflow, and build a prototype to further refine the idea. This means all of your resources should be focused on planning, designing, developing, and delivering a remarkably well-crafted core experience.

Lean Methodology, developed by Eric Ries in 2008, provides us with techniques to test our assumptions against reality at an early stage, when our attachment to them is relatively young and before we have invested time, energy and money into realizing them. Lean is thinking about the best way to spend time and money, not just the quickest, easiest or least expensive way. It's about doing things right, but as quickly as possible given the company’s resources.

UI Design

Visual design engages users through the use of visual cues such as prioritizing tasks on a page through size, color, and the use of whitespace to create focus points, hence drawing the eye to the correct functionality.

Interaction design is only concerned with the specific interactions between a user and a screen including every element that a user might swipe, click, tap, or type. Basically, interaction design focuses on the functionality needed to accomplish a task based on how people behave, and then adapting technology accordingly.

A designer's toolkit includes various disciplines and technologies focusing on user interface design, and the combination of these tools makes user experience design much more efficient for designers and developers.

I use Figma, Sketch, and InVision which are digital design, collaboration, interactive and prototyping tools for all visual interface–based initiatives.

Summary

The great thing about working in the web space is establishing your own well-structured and organized set of processes that fosters communication and a collaborative design culture. To that end, I follow the core principles of UI design that includes clarity, flexibility, familiarity, efficiency, consistency and structure.

The experience makes the website or product, not the features – by marrying business goals with user needs, and working to define an experience that engages your target audience and drives them to action.