How UX agency follows UX design process? Know the real UX groundwork

Reading Time: 12 minutes

User Experience is both creative and strategic. The UX design process is the core foundation of an excellent user experience.

But as modern products grow more complex and user expectations keep changing, the challenge lies in solving the problems but in an enjoyable manner. This is particularly achieved with a UX design process.

This article will shed light on how we solve design problems at Octet Design Studio by following the most appropriate and realistic UX design process and creating a delightful & memorable user experience.

But let’s first see what user experience design means and what goals do designers/product managers achieve with it.

Meaning of user experience

As per Don Norman, “User experience” encompasses all aspects of the end-users interaction with the company, its services, and its products.

User experience is central to business and the brand, and it is at the cornerstone of all activities that enable customer satisfaction and retention.

Goals of user experience design

To align the product with business goals

User Experience design focuses on how the product can achieve the desired business goals in the most effective manner. To accomplish this, the product needs to have the following characteristics:

• Usefulness: You need to solve a user’s need; a problem that users actually have.
• Usability: The product needs to be clear so that users can understand and use it in an intended manner.
• Delightfulness: A product needs to be enjoyable. If a user cannot enjoy using the product, then it will certainly not bring in sales.

When all these three characteristics intersect, it gives rise to a highly successful and lovable product that meets users’ needs and business goals simultaneously.

To develop a functional & aesthetic product within constraints of business and technology

Another key goal of UX design is to have a good looking but functional product. A beautiful product is perceived as trustworthy and reduce distractions. At the same time, a functional product is important for usability and user engagement.

UX design bridges the gap between aesthetics and functionality.

Now that you are familiar with the meaning of UX and what it intends to achieve, we shall reveal our UX design process that you can adopt too.

Our 6 step approach to UX design process

The UX design process revolves around finding what the product is about, the ways in which users use a particular product, and hidden emotions behind using the product.

To initiate the work on UX design, we first hold a kick-off meeting with the client. Here we try to understand the existing product or the basis of developing a new product along with all the additional information that supports it.

During the kick-off, we get to know about the client’s company, its processes, and roles and gather all information we can about the project. Once the kick-off meeting is completed, we proceed ahead with the UX design process.

We follow a 6 step method, in your case, the number of steps may vary depending upon the project requirements and industry differences, but the end goal/s remain the same for everyone.

We start the process by conducting research.

1. Research: Not google based, but user based

Many designers or design agencies start the research in the UX design process by Googling. They search for some inspiration, competitor’s product, or any other products with the same functions.

But let us warn you that it is not the ideal way. It leads to the formation of conclusions at a very early stage and may take the design process in the wrong direction.

Also, most of the newbies mistake user research with understanding the user. It isn’t completely true. Research in UX design is meant to understand the problem and pain points of the users. To achieve this, researchers try to gain insights into the user’s life and behaviour.

To do research in its truest sense, you must consider using the following research methods:

i) User Interviews
ii) Field Surveys
iii) Card Sorting
iv) A/B Testing
v) Tree Testing
vi) Diary Studies
vii) 5 Second Tests
viii) Usability Testing

Research is not just limited to understanding the user’s problem. It is also about exploring the client’s product, company, industry, and competitors.

At Octet Design Studio, we first fully understand the client’s product and business first, which gives us a fair idea about who their target audience is. We also analyze the data provided by the client during any of the previous studies, which provides us scientific ground to base our hypothesis.

After that, we create user personas and empathy maps.

User personas

A user persona is a fictional representation of your ideal user. Whether you’re developing a smartphone app or a mobile-responsive website, it’s very important to understand who will be using the product.
While creating the user personas, we ensure to have the following things:

• Persona Name
• Photo
• Demographics (gender, age, location, marital status, family)
• Goals and Needs
• Pain Points
• Behaviours
• Personality Traits

Empathy maps

An empathy map is a simple, easy-to-digest diagram with 4 quadrants (SAYS, THINKS, DOES, and FEELS) that captures knowledge about a user’s behaviours and attitudes. It is a useful tool to help teams better understand their users.

One important thing you should keep in mind is that empathy maps are not an alternative to user journey maps. It is just a pictorial representation of a mindset of an ideal target user. 

Empathy maps have proven highly useful to us in the initial phase of the UX design process and they enable us to work further in the right direction. To know how you should plan UX research that yields accurate results, read our prolific article on planning effective UX research.

2. Ideate: Think & solve

Once we have empathized and fully understood the users’ needs and problems, we start to think about possible solutions.

In our ideation process, all the members of the design team come up with different ideas on a particular topic without judging or criticizing anyone’s idea. Our goal here is to come up with as many ideas as possible.

We try to uncover and explore new angles and avenues—to think outside the box. To get our creative juices flowing, we begin with brainstorming sessions.

Brainstorming

It is an effective way of generating a large number of ideas very quickly. In brainstorming, we verbally exchange ideas with other team members, which has a snowball effect and probability of discovering a blended solution.

Once we have all the possible ideas, we shortlist the most appropriate solution and then start to weave user stories and journey maps to have an overview of the user’s process of using the product.

User stories & journey maps

User stories are short, simple descriptions of a feature told from the perspective of the person who desires the new capability, usually a user or customer of the product. It basically captures the essence of a user using the product in a fictional scenario.

A user journey map is a visual representation of a customer’s relationships with a product/brand over time and across different channels. We create user journeys to make our user flows much easier, as we have a bird’s eye view of the process.

User flows

User flows are a more advanced form of user journeys, which describes the outcome of each and every action that the user will perform. The role of user flows in the UX design process cannot be overlooked as it helps us to understand the user journey thoroughly and not miss out on any of the features in the final product.

We then hold one-to-one sessions with clients to finalize the user flows, as it needs to adapt to the functionalities of the expected product. Once the client confirms the user flows, we begin to create information architecture and wireframes.

Information architecture

Information architecture is the creation of a structure for a website, application, or other projects, that allows us to understand where we are as users, and where the information we want is in relation to our position. It results in the creation of site maps, hierarchies, categorizations, navigation, and metadata.

We create information architecture by taking the user’s input through the card sorting technique. This helps to remove any bias and create a structure that is more ideal and acceptable to the target users.

Once information architecture is ready, we obtain approval from the client to proceed to create the wireframes.

Wireframes

A wireframe is a two-dimensional outline highlighting the structure of the web page, anticipated user flow and behaviour, the interface, and the functionality of the overall product.

Simply put, it is a blueprint of the entire product and keeps everyone in the design team on the same page. It can be broadly categorized into low-fidelity and high-fidelity wireframes.

To know more about why you should consider wireframing and types of wireframes in detail, read our article – A complete beginner’s guide on wireframing in UX design.

There are several wireframing tools available, which will help you create wireframes very easily and in a collaborative manner.

At Octet Design Studio, we create wireframes in Adobe XD, which enables us to get feedback from the client promptly and multiple users can work together on the same project.

During all of the above-mentioned activities, we take an inclusive approach to make the product more accessible to all types of users.

3. Visual design: Look & feel

Up until now, we gathered all the information on users’ needs and have thought about the possible solutions. With all the pieces of information in place, we start to build the design.

Our designing phase of the UX design process involves deciding on the design language, specifications, design systems and other graphic elements. Parallel to that, we also design the content; i.e. write headlines and microcopies and ensure that the design is responsive.

Design language

Design language contains a series of visual and conceptual standards. This includes a collection of UI components and patterns, Style guides, and documentation of semantics. 

These three core elements define the use of colours, typography, iconography, interactions, animations, folder systems, naming conventions and product’s grid system.

We prefer to define the design language first because it gives us a frame of reference for all other items that follow.

Design systems

Design Systems consists of UI components and a clearly defined visual style, released as both code implementations and design artefacts.

It allows for sharing of assets, fonts, etc. across multiple designers and creates an organized, central repository for common usage throughout your team.

We create separate design systems for every project as it enables us to save much time and facilitate fast and frictionless development.

Interface design (UI design)

UI design is about the design of visual interface elements such as typography, colours, iconography, images & videos, custom illustrations, animations, padding and margins, menus, navigation bars, and more. It gives a more polished and vibrant look to the seemingly dull grayscale wireframes. 

We strictly create the UI design in line with the brand guidelines of the product. This way, clients can capitalize on their branding and the product helps them achieve their business goals.

Along with UI design, we also work on content design, which includes the creation of micro-copies and UX writing.

UX writing is a method of writing content that is for user interfaces to lead and communicate to users of a digital product. It’s about giving voice to your interface, mainly to assist the users. The goal of UX writing is to design and establish a conversation between users and a digital product.

Last but not the least, designers need to keep the design responsive to ensure usability and SEO. Needless to say, responsive design is now not a trend, but a necessity to boost user engagement.

Design specifications

At the end of the visual design process, we create design specifications that enable developers to track measurements precisely and maintain the flow of the product.

By following this, we save our designers’ time by reducing the tedious step of marking up the designs and tons of conflicts that ensue during the development.

4. Prototyping: Simulate product behaviour

A prototype is a simulation or sample version of a final product. This helps UX designers to test the functionality of the product before the actual launch.

The goal of a prototype is to test and validate ideas before sharing them with stakeholders and eventually passing the final designs to engineering teams for development.

To keep the prototypes relevant and as actual as possible, we ensure that our prototypes must have these four main qualities:

Representation — The prototype itself, i.e., paper and mobile, or HTML and desktop.

Precision — The fidelity of the prototype, meaning its level of detail—low-fidelity (wireframe based) or high-fidelity (mockup based).

Interactivity — The functionality open to the user, e.g., fully functional, partially functional, or view-only.

Evolution — The lifecycle of the prototype. Some are built quickly, tested, thrown away, and then replaced with an improved version (known as “rapid prototyping”). Others may be created and improved upon, ultimately evolving into the final product.

Based on the tools used to create them, prototypes are classified into two types: Paper and Digital.

Paper prototypes are basically sketches of the product, which works well in the early stages of the design process. This helps designers save time and opens up avenues to simplify the design.

Digital prototypes are created with the help of software, which is much more detailed, highlighting even the tiniest of things such as micro-interactions.

Both have their advantages and disadvantages, but we prefer to create digital prototypes as it enables us to replicate the actual digital product and conduct usability testing easily.

All modern design software such as Sketch, Adobe XD, Figma, etc. have in-built functionality of creating digital prototypes, but our tool of choice is XD.

5. Test: Learn & solve

Once the prototype is ready, we proceed to test the product before handing it over to the development team. We perform these 4 tests in order to ensure that the product is fully functional as intended:

Usability testing

Usability testing refers to evaluating a product or service by testing it with representative users. We recruit a sample of users and invite them to participate in the test.

This lets our design and development teams identify problems before they implement the code. We strive to identify maximum issues as early as possible to save on time, money and impact on launch schedule.

Accessibility testing

Accessibility testing is the practice of making web and mobile apps usable to as many people as possible. 

We conduct accessibility testing to ensure that the product is accessible to those with disabilities, such as vision impairment, hearing disabilities, and other physical or cognitive conditions.

A/B testing

A/B testing, or split testing, is a method used by UX designers and marketers to compare two versions of something. The goal is to determine which one of the two versions is more successful, according to our business, product, and user needs.

Our design team carries out A/B testing on specific elements/pages that are strategically important to the growth of a business. These mainly are the hero section of the home page, text, colour and placement of call to action buttons and inclusion/exclusion of videos/images.

Acceptance testing

User Acceptance Testing is a testing methodology that involves clients/end-users to validate the business workflow from start to end. Clients/end users verify the product against their requirements and problems.

Our UAT process comprises extensive planning and analysis to calculate expected risks and make an informed decision. For us, quality is not an accident, it’s the outcome of thorough testing.

6. Measure: Compare & iterate

Our UX decisions are based on research including metrics, user interviews, feedback, and heuristic analysis.

In order to align business goals with UX design, we first begin by setting the right metrics to track design performance. At Octet Design Studio, we measure the most important KPIs, which are listed below:

Core UX KPIs

1. Average time on task

It determines the time taken by a user to complete a specific task. The less the time, the better the UX.

2. Task completion rate

Also known as “task success rate,” this metric reveals what percentage of users complete each step in a user flow. It allows us to know exactly where the users are facing problems and provides avenues to dig deeper into it.

3. Error occurrence rate

The human error occurrence rate tracks how often users make a mistake during a specific task. Measuring error rates can help you understand where users are struggling with your product, which can be used to help guide future product updates and design decisions.

4. Adoption rate

It refers to the number of new users gained over a specified time period. Along with that, we track the users who adopt the new features rolled over time.

5. Retention rate

It enables us to identify the users who have been using the product for a long time. Retention rates help to identify which features to prioritize and clarify the best next steps on your product road map.

Along with the core KPIs, we obtain and measure user feedback. To achieve this we use the following metrics:

User feedback KPIs

1. Net promoter score

Net promoter score (NPS) seeks to quantify UX with one basic question: “How likely are you to recommend this product to someone else?” The responses are received on a scale of 1 to 10, 1 being least likely and 10 being most likely.

If the users are more likely to recommend the product to someone else, higher the chances are that they will continue using it.

2. Customer satisfaction

Pretty much similar to NPS, customer satisfaction (CSAT) is about asking the users: “How much are you satisfied with the product?” and having to select anyone from the five options ranging from very unsatisfied to very satisfied. 

We then assigned their replies a value out of 100 and calculate the CSAT score in terms of percentage.

Design iterations

UX design isn’t a linear process; it’s an iterative process. Once the product is launched,  our UX design team is receptive to the feedback received from the users and try to fix any issues, bugs reported.

We have witnessed that some users also give valuable suggestions, which have helped us to make both – the user experience and the product better.

Conclusion

To summarize, the UX design process is an iterative human-centred design approach that combines research, strategy, design, prototyping, testing, and refinement to solve problems.

It is important for the successful implementation of the design. That’s why UX design follows a specific approach with a certain step-by-step procedure. The UX process can help you make a better connection with your users.

At Octet Design Studio, we follow a systematic approach to UX design that helps us to simplify even the most complex and challenging enterprise applications.