Spot the differences — UX Terminology Part -1:

Design Thinking — User Experience

Design Thinking

Design thinking is a formal method used to find creative solutions for different problems not necessarily related to design, it can be used for any field.

And also it is a framework that UX designers can use in order to tackle big, complicated or even largely unknown problems in product development. Consider the design thinking process as a framework for people who want to create solutions.

It is more suited to service design scenarios. It is also more about the creative process and validating ideas before they are implemented in the real-world where implementing the wrong product or service can have dire consequences.

Phases:

Empathize: With your users

Define: Your users’ needs, their problem, and your insights

Ideate: By challenging assumptions and creating ideas for innovative solutions

Prototype: To start creating solutions

Test: Solutions

User Experience:

User Experience Design shares a lot in common with Design Thinking.

Eg. understanding the users using research methods, ideation, rapid prototyping, testing with users.

UX often goes further into the details of the design, like human/computer interfaces, graphics design, interactions, and a whole lot more.

A UCD process which assesses the quality of experience a person has when interacting with a specific design or product. It focuses mostly on a specific technology, i.e. people interacting with a particular product and the experience they receive from that interaction rather than any wider human-human or human-service interaction.

*UX Design focuses more on the build of a Product, whereas Design Thinking is more into the strategy and conceptual thinking.

Empathy Map — Persona

Empathy Map

It is the First Step in Design Thinking, As UX professionals, it is our job to advocate on behalf of the user. However, in order to do it, not only must we deeply understand our users, but we must also help our colleagues understand them and prioritize their needs.

An empathy map is a collaborative visualization used to articulate what we know about a particular type of user. It externalizes knowledge about users in order to

1. Create a shared understanding of user needs.
2. Aid in decision making.

Traditional empathy maps are split into 4 quadrants (Says, Thinks, Does, and Feels), with the user or persona in the middle. Empathy maps provide a glance into who a user is as a whole and are not chronological or sequential.

One User vs. Multiple-Users Empathy Maps

One-user (individual) empathy maps are usually based on a user interview or a user’s log from a diary study.

Aggregated empathy maps represent a user segment, rather than one particular user. They are usually created by combining multiple individual empathy maps from users who exhibit similar behaviors and can be grouped into one segment.

The aggregated empathy map synthesizes themes seen throughout that user group and can be a first step in the creation of personas. (However, empathy maps are not a replacement for personas. But they can be one way to visualize what we know about a persona in an organized, empathetic way.)

Persona

After filling out all the areas of the map you get a piece of comprehensive information about the users. It’s worth it to transfer this information to the model of the aforementioned personas. In order to do that, you can use templates or create them on your own.

Personas are fictional characters, which you create based upon your research in order to represent the different user types that might use your service, product, site, or brand in a similar way. Creating personas will help you to understand your users’ needs, experiences, behaviors, and goals.

When you create persona profiles of typical or atypical (extreme) users, it will help you to understand patterns in your research, which synthesizes the types of people you seek to design for. Personas are also known as model characters or composite characters.

Different Perspectives on Personas

Goal-directed Personas

Focusses on, What does my typical user want to do with my product?”. The objective of a goal-directed persona is to examine the process and workflow that your user would prefer to utilize in order to achieve their objectives in interacting with your product or service.

Role-Based Personas

The role-based perspective is also goal-directed and it also focusses on behavior. The personas of the role-based perspectives are massively data-driven and incorporate data from both qualitative and quantitative sources. The role-based perspective focusses on the user’s role in the organization.

Engaging Personas

The engaging perspective is rooted in the ability of stories to produce involvement and insight. Through an understanding of characters and stories, it is possible to create a vivid and realistic description of fictitious people

Fictional Personas

The fictional persona does not emerge from user research (unlike the other personas) but it emerges from the experience of the UX design team. It requires the team to make assumptions based upon past interactions with the user base, and products to deliver a picture of what, perhaps, typical users look like.

User journey Map — User Flow…

User Journey:

It can also be called Customer Journey, it refers to the scenarios in which the user interacts with the product, Its function is mainly to assume and demonstrate the current and possible way in which the user can interact with the product.

It uncovers the key user pain points, different touchpoints, emotions and highs and lows of experiences while users are engaged with products/services and focuses on the user experience design of the entire process.

It’s necessary to consider their status (emotion) apart from this information. We can also say that as it focuses on the whole process, designing different routes is not that important to him.

The activity of mapping user journeys is driven by the following scenarios:

• Current/Existing product
• Improvise a part of your existing product
• Redesigning an existing product
• Build a product from scratch

User Flow:

They are used to communicate the intended flow of a user through a product or a service i.e focuses on the process of using the product and covers the process from when the user begins to use the product to the completion. also needs to consider the information necessary for users to move to the next stage,

This refers to the process in which the user takes advantage of the compound routes of the series of templates designed in a product to accomplish their goal. To communicate sufficient details to the technical and non-technical stakeholders which is a challenging part of experience design.

They focus on a task to be accomplished by the user and eventual alternative paths. They are driven by the following scenarios:

• The users/personas you will be designing your flows for
• Kinds of user and goals to be accomplished
• Entry and Exit points
• Not underlining the technological or even development flow

*Both tools are created after the persona design because of the necessity of finding the objective, the motivation and the pain point of users, in addition, the data and information of the goal that they want to fulfill.

Wire Frame — Mockup — Prototype

Wire Frame:

Wireframe, a low-fidelity way to present a product and equivalent to the skeleton (or) a simple structure of your website/app that can efficiently outline structures and layouts. Your wireframe design doesn’t need to focus too much on minutiae, but must express design ideas and should not miss any important parts. The decisions on what (content/features) and where to put on the website or app are usually made during this stage.

Tool: balsamique

Mockup:

Mockup, a kind of high-fidelity static design diagram, should demonstrate information frames and statically present content and functions. Unlike wireframes, a mockup looks more like a finished product or prototype, but it is not interactive and not clickable. Colors, fonts, text (Lorem ipsum), images, logos and anything else that will shape your wireframe. Your result is a static map of the app or website.

Tool: Sketch, XD, etc

Prototype:

The prototype is already very close to the finished product. Here, processes can be simulated and user interaction can be tested. It’s like a mockup enriched with UX pieces, interactions, animation and anything else you’d like to experience when clicking buttons. A prototype is an excellent tool to obtain user feedback and to test the product. The only thing that missing is functionality. It can give you a feeling of using a real app, but they are only images connected with each other.

Tool: UX Pin, XD, etc

Style guide — MoodBoard — Style tile

Style Guides:

Style guides are typically used to define the visual branding across all of a company’s promotional materials, including the website. By having everything written out in one place they serve as a reference for both the project and future projects and help keep the visuals consistent across different mediums.

Tend to include:

Typographic choices: Typefaces, font stacks, font-sizes, line-heights, etc

Colour schemes: Which colors will be used for backgrounds, text, etc

Grid math: Type of grid system we are using for the website/app.

Mood Boards:

Mood boards are about defining and agreeing on the mood or feel of a design. The goal is to make the client say, “THAT’S how I want my site to feel” and can help set several general directions for the client to choose from.

There’s a no formal structure for what needs to be included in a mood board, but they typically include things like:

• Structural wireframes
• Color schemes
• Textures
• Images for inspiration
• Screenshots of other sites
• Typographic details

You might even create several different mood boards for different potential directions.

Style Tiles:

Style tiles are an idea that was developed in recent times.

“seek to form a common visual language between designer and client and provide a catalyst for discussion.” — Samantha Warren

What makes a style tile unique from other tools is that it is specifically a method for establishing a visual vocabulary between the designer and the client, rather than setting a ‘mood’ or defining elements that will ultimately be included in a full layout.

Building style tiles:

Listen: Ask questions and gather information from the client

Interpret: Collect adjectives from answers above and group into themes

Define a visual language: Match the words and themes above to real styles

Iterate: Shape and refine everything with the client

Thanks for reading… I will be back with 2nd Part soon…