It’s not “just” Design!

After going through many articles(which I have linked as the stages come through, do go through them!) and some videos about the design process and UX processes, here I’m summarizing all my understoodand gained knowledge and how I would conduct these stages. To begin with, the designing should not be the first stage of any UX process. We start with the design thinking process which include 5 stages, starting from empathize, define, ideate, prototype(design) and test. All of these stages are interdependent and are not strictly linear in nature.

Source: carrerfoundary

Empathize

This stage deals with empathizing with the users as well as the stakeholders to gain knowledge about the goals of the product or feature we are going to design.

The major portion of this stage is a user research and gathering data to analyse it further, also to do away from our own biases regarding the service or the product. It is also useful to validate our assumptions or hypothesis.

Methods for this stage…

There are two kinds of user research, Qualitative (why or how to fix a problem) vs. Quantitative (how many and how much). We select the appropriate methods according to our needs and the nature of the service itself.

The most commonly used activities in this stage are user and stakeholder interviews (qualitative) which are one on one interviews with the participants held either in person or remotely, this provides a very rich data of user behaviour and their daily task flows. The recommended set of users are 5, through which 85% of the data is gathered. Also, secondary/desk research where the already existing data over the internet is gathered. The other method is a survey, which can be also be used as a screener for the interviews. This technique will result in a broader perspective of the user regarding the product.

For getting a more long term data, dairy study can also be used. In this case, the user is provided with a dairy to fill when they use the product for a long period of time regularly, they need to be prompted time-to-time to fill it. This generates very rich data about our user and their interactions with the product.to know about the similar or same services too helps a lot in knowing the user’s demand from the market and also helps in design phase which is achieved by comparative analysis.

For an existing product many other steps can be included like accounting the search log inquiry(will give insights for designing more intuitive interface), solving the FAQ’s, reviewing the analytics generated.

This is how I will conduct this stage…

Example for desk research

• First I would start with desk research, going through all the existing data available on the net and preparing the summary of it.
• Then I will move towards the user interviews, for which I will have to know my target user and create a screener to shortlist them, which will also serve as a survey through a Google form. The survey will mostly have closed ended questions, questions are which are answered with yes/no.

Knowing the target user

• After shortlisting the users for the interview, I will prepare a question list for the interview process. These will have more open-ended questions like, rather than asking “do you save money?” I would ask, “How do you approach saving money?”
• After the interview(using online platforms/in person) is done, I will take the notes of this event is completed. Also, the results of the survey are generated.

Making notes of the user interviews

• Moving forward, the comparative analysis taking in consideration similar or same features/products will be gathered and noted down in the form of the matrix to keep it most legible.

Source: smashingmagazine

• Now to analyse the data gathered from the research and make it more understandable empathy map(using Figma template) and user person(using Figma templates) will be made. For which I will first group the users.

Example of grouping user on the basis of research

Example of empathy map

Example of user persona

Define

This stage guarantees that you have a clear understanding of your design project’s purpose. It aids in the expression of your design problem and provides a clear goal to work toward. A clear, actionable problem description will point you in the right direction and help you get your creative juices flowing. Without a well-defined problem statement, it’s hard to know what you’re aiming for. Your work will lack focus, and the final design will suffer.

Here we will indulge in some brainstorming like activities to construct a problem statement which will act as a northern star to guide us throughout the design process. The user problem can also be thought of as an unfulfilled need of a user.

There are three ways of constructing a problem statement, From the user’s perspective, From a user research perspective, based on the four Ws — who, what, where, and why.

There are certain Problem statement guidelines

1. Focus on the user(concentrating on the user’s perspective)
2. Keep it broad(avoid any references to specific solutions or technical requirements)
3. Make it manageable(don’t try to address too many user needs in one problem statement; prioritize and frame your problem accordingly)

Methods for this stage and how I would conduct it…

Space saturation and group: You’ll literally “saturate” a wall or whiteboard with Post-It notes and photographs, creating a collage of user research artefacts. This method should be used by everybody who participated in the design project’s empathy stage and should take little more than 20–30 minutes. This can be conducted using Figma.

Asking the right questions to pinpoint the questions to get a clear idea about the issues to be addressed, we use the four Ws in which we address the following questions.

• Who are we solving the problem for?
• What is the ultimate goal / impact?
• Where do we need to focus most?
• When is the problem occurring?
• Why is it important to solve the problem?

Example of four Ws

Ideation

Create a collection of “how might we” questions relevant to your problem statement in advance of ideation. The “how might we” process breaks down your problem statement into manageable chunks, framing it as an opportunity rather than a roadblock.

Example of “how might we” statements

Method for this stage and how would I conduct it…

A user journey map is a visual representation of the steps that a person takes to achieve a goal. It’s usually depicted as a series of actions that a person takes when interacting with a product. It can become complex or be simple steps, depending on the nature of the task. Make sure to add notes at every step. This can be created using Figma fig jam.

A storyboard is a visual representation of the user’s tale, comparable to a film or comic. It can assist product designers in comprehending how people interact with a product in the real world, providing designers with a clear understanding of what users value most.

Example of a simple story board

Brainstorming and Bodystorming are also methods can be used to spark ideas for the problem statement. In brainstorming, ideas will be discussed verbally with a group or individually. It can also be timed as in set a timer and jot down all the ideas that comes to mind. Bodystorming on the other hand would be to physically get into the user's position and experience their issues and task flow. To document the ideas generated here Figma can be used.

After you have collected many ideas now you can prioritize them according to the research you had conducted and start building solution for it.

Prototype

A prototype is a working representation of an idea that will be tested before the final solution is built.

But before diving straight into the tools or even designing the interface, we need to know the flow of our interface and exactly what information needs to be displayed at each stage.

Methods for this stage and how I would conduct it…

A user flow is a series of steps a user takes to achieve a meaningful goal. A User Flow usually includes a name, steps, users, and a description of what happens at each step. User flows can be a combination of these 3:

• Task flows: write down the steps step by step chronologically which they will go through from finding the feature(placement of the feature) to achieving their goal.(competitive research will help here to see how others do it)
• Wire flow: sketch out a rough wireframe for the task flow and add any missing steps.
• Screen flow: using tools like Figma, create the high fidelity version of the wire flows with annotations.

There are 3 fundamentals to the user flow creation:

• User flows show their purpose: name your user flow to show its purpose(the goal they are going to achieve). Also annotate the steps individually.
• User Flows go in one direction: The user flows can only proceed in one direction; they can split, but only to demonstrate diversity, not to take a new step entirely. If there is a necessity, it is preferable to segregate and create different user flows.
• User flows represent a complete task: User flows should be the unmistakable model of your app or website design among all the objects produced in your digital project. If your user flow is merely a fragment, it loses its ability to communicate your users’ journey. They lose their meaning if they drag on for too long.

Example of a user flow

Now that we have a user flow, we need to assign the content to each of the step/screen, which will be done using information architecture (IA). To start at IA, we first will draw out our sitemap to help us create a better IA by helping to arrange comparable content together and to determine the categories of information on a website.

Example of sitemap

Some key points which form the base of IA, to keep in mind while building it;

• Gestalt principles: Gestalt Principles are human perception fundamentals that describe how we group related elements, discern patterns, and simplify complicated images whenever we see an item, and can be used to design layouts and element placement.
• Mental models: Mental models are preconceived notions that people hold before interacting with a product. Users expect to discover information in areas where they expect to find it.
• Cognitive load: The quantity of information a user can process at any given time is referred to as cognitive load. When a system delivers too much information or too many alternatives at once, it’s common for consumers to become overwhelmed. The number of options or choices should never exceed seven as a general rule.

After taking in consideration all the elements of building an IA, the site map can be modified with specific information to create our IA.

Example of IA (Source)

This is further developed into wireframes, which are low fidelity prototypes. For starting, we can sketch out rough interfaces on pen and paper and start iterating on it according to feedback for team and user needs. We can also make a testable paper prototype to begin early usability testing.

At this stage we can conduct A/B testing which is a method of comparing different versions of a webpage to find which is the most effective. It’s a crucial tool for boosting conversions on the site.

The rough sketches then can be developed into mid-fidelity wireframes using Figma as the tool and also high fidelity prototype or interface design.

Example of stages of wire framing to interface design

While designing for the final UI of the product UX laws should be kept in mind which make the experience very smooth and intuitive for the users.

1. Fitts’s Law(the target(button) should be big and close enough)
2. Hick’s Law(fewer options, less confusion and faster goal completion)
3. Jakob’s Law(It means that users spend most of their time on other websites. Do not make users think!)
4. Law of Prägnanz(users perceive complex forms in the simplest way because it is the interpretation that requires less mental effort.)
5. Law of Proximity(Objects that are close tend to join, hey are understood as members of the same group.)
6. Miller’s Law(Having more than 7 elements generates confusion and loss of focus of the user)
7. Parkinson’s Law(the more time you give for completion of the task, the more it will be prolonged)
8. Serial Position Effect(users will always remember better the first one and the last one.)
9. Tesler’s Law(for any system there is a certain complexity that can not be reduced to the maximum)
10. Von Restorff Effect(different things attract us and are striking to us. We want to draw attention on something different, in form and colors.)
11. Zeigarnik Effect(the tendency to remember unfinished or interrupted tasks more easily than those that have been completed)

We can also include heuristics while designing the interface to have a good usability and prevent usablilty issues before the testing stage itself.

Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the “heuristics”).

10 Usability Heuristics for User Interface Design(source)

Test

Usability testing entails watching users interact with a product. It will assist in determining where users struggle and what they enjoy. This will be used to validate our design process and the interface design. To create betteruser centred products we must start with the tesing stage as soon as possible even if the best of the user interface is not ready, we can use rough prototypes too.

Methods for this stage…

The three overall usability testing types include:

• Moderated(under a supervision) vs. unmoderated(not under any direction)
• Remote(can get you large data from different location) vs. in person(gives more nuanced information about the user)
• Explorative(users are asked to express their emotions, opinions and impressions about the problem in its early stages) vs. comparative(users are asked to use the feature developed and compare it to some existing similar services and give their preference)

List of possible ways of usability testing

How I would conduct it…

• The very first preparation for the testing in person through an online platform is to prepare a list of tasks for users to perform for the test.
• Also creating questions for all the tasks for the users to get feedback through them while they go through using the product.
• During the call/session, we will take small notes and then make an overall feedback of the user and write it down accordingly.

Example of the user testing overview

• We then return to our design and make changes and iterate on those changes according to the business and user needs and go back to testing it.
• The process of testing does not end when the product is launched, but rather an ongoing process for as long the product is alive to the user.
• We can also use online services for testing, which can give use quicker results and broader results for the product, and it’s design.

5-second test: Participants are given five seconds to view a design, after which they answer some simple questions. Before the test starts participants are given a primer on the format and reminded to pay close attention. Depending on the goal of the test, they may also be given some context for what to look out for.

First click: Create highlights to analyse click clusters in depth, including time-to-click. Filter to a cluster to analyse follow-up questions and find out why users were drawn to that area.

Some useful tips to consider while conducting usability testing;

• Test As Early As Possible(You can test design mock-ups and low-fidelity prototypes. You’ll need to set the context for the test and explain to test participants what’s required of them.)
• Outline Your Objectives(Think of the reason you want to test the product, identify exactly which features and areas you want feedback on.)
• Carefully Prepare Questions And Tasks(the objective is not to test the functionality itself but to test the experience with that functionality.)
• Actionable Tasks(These could be specific parts of the product or prototype that you want users to test)
• Prioritize Tasks(list the important tasks in your product, and order them by priority.)
• Clearly Describe Tasks(Users tend to become discouraged when tasks are unclear.)
• Have a Goal For Each Task(As a moderator, you should be very clear about the goal of a task, However, you don’t need to share that goal with participants.)
• Limit The Number Of Tasks(assigning only five tasks per participant)