Goal: Review the product to learn more about business goals, user needs, and technical limitations.

A rule of thumb of UX design is getting to know your client. Who are they? What do they do? Where are they going? How are they connecting with users? So it’s no surprise that we like to kick things off with a UX audit.

But what is a UX audit?

One definition of a UX audit is that it is a method used to pinpoint the less-than-perfect areas of a digital product, revealing which parts of a site or app are red flags.

During a UX audit, we use a range of methods, tools, and metrics to identify areas where a product is drifting away from pre-established standards or goals.

Typically, a UX audit includes activities like usability testing, desk research, user interviews, etc.

Before we start analyzing any digital product, we first need to find out more about your business goals and brand vision.
To do this, we gather and document information via desk research or stakeholder interviews. These activities result in team alignment on things vital to the product’s success.

Some example questions from our stakeholder interviews:

– What are your short and long-term business goals?

– Who are your users?

– What are some of your company values?

– What are some of your product concerns?

– Who are some of your major competitors?

– What are your primary sales channels?

– What is your definition of product success?

One of our preferred ways to collect requirements and understand your goals is conducting a discovery workshop. This way, we’ll be able to rephrase problems into opportunities, select a focus area, generate ideas, and possible solutions.

Once we have a clear idea of what your business objectives are, we want to see how they are holding up in reality. At this stage, we want to delve into data to find out exactly where your product is on the progress meter.

Specifically, I want conclusive answers to questions like:

What are your users searching for? Where are they coming from? At what point in the sales funnel are they jumping ship?

I use a variety of UX analytic tools, such as Google Analytics, Hotjar, Kissmetrics, and Omniture, to turn data into valuable insights about:

– User demographics

– Conversion metrics

– Sales data

– Traffic flow and engagement

– Customer care data

– Heatmaps

– Scroll maps

– Form analytics

– Poll/form results

– User testing results

All of this data is taken and used to create personas and user journeys which will help us and stakeholders better engage with and target users.

The last step of the audit phase is to conduct a heuristic evaluation. Heuristic evaluation is a method used to identify any usability issues with the design interface. In simple terms, it tests how user-friendly the user interface is.

Unlike user-testing where users test the product, in a heuristic evaluation, the product is evaluated by usability experts. Though there are plenty of criteria by which a digital product can be evaluated, the majority of heuristic evaluations utilize Jacob Nielsen’s 10 Usability Heuristics for User Interface Design or a variation of these heuristics adapted to the project, platform or interface:

– Visibility of system status.

– Match between system and the real world.

– User control and freedom.

– Consistency and standards.

– Error prevention.

– Recognition rather than recall.

– Flexibility and efficiency of use.

– Aesthetic and minimalist design.

– Help users recognize, diagnose, and recover from errors.

– Help and documentation.

All issues that are uncovered during the audit phase are documented. We compile and synthesize findings for our clients, sort the list by impact and severity, and make suggestions that will result in the best ROI based on client budget and timeline.

Goal: Dive deep into the market and most importantly – the mind of our users to eliminate uncertainty and guesswork.

With the business objectives in mind, the next step of our design process is to conduct research. As you’re well aware, research is an integral part of any design undertaking. In fact, the research phase is the heart and soul of a project.

By implementing various UX research methods, like competitive analysis, user research, contextual inquiry, we are able to gain valuable insights into users’ needs, behavior, and motivations.

It’s important to note that the information revealed during this stage will determine the entire flow of a project. It’s kind of like setting the foundations to a building. This is why we take extra care to ensure our research methodologies run smoothly so that your building stays standing.

Let’s look at all the stages covered in the research phase:

– Competitive Analysis

– User Research

– UX/UI Research

The saying goes, “Keep your friends close and your enemies closer”. As far as digital products are concerned, this pretty much hits the nail on the head.

In order for a product to succeed, it’s essential that we keep tabs on competitors. This means monitoring what your competitors are doing and how successful they are in doing it.

And it’s our job to help you analyze your competitors and their products or services.

There are two key principles of a successful competitive analysis:

1. Knowing what information to look for.

2. Synthesizing that information into actionable insight.

It’s our aim to adhere to these principles so that you have full access to the benefits of competitive analysis:

– Identify ways to solve usability problems.

– Understand where your product stands in the market.

– Recognize market gaps that can be utilized.

– Acknowledge competitors’ weaknesses and strengths.

– Validate your design decisions.

At this point of our UX design process, we want to connect with users to understand their decision-making process. What drives them to continue using your product – or stop using it? What do they consider a deal breaker when interacting with your product – or a similar one for that matter? Is there a pattern in user behavior that is worth looking into?

This is what we set out to find out and communicate our findings to you. User research lets us learn more about your users and their behavior. To carry out user research we employ diverse user research techniques. Here you find two examples: surveys and personas.

Surveys are user research tools used to collect a large set of data about your users. Though they are mainly used to accumulate quantitative data, surveys can also be used to validate qualitative findings.

What we find great about surveys is that they can generate a lot of feedback quickly and efficiently. The secret to creating a successful survey, however, is knowing what questions to ask, how to formulate them, and who to ask them to.

In our experience, the most effective surveys are short, topic-specific, and have a combination of closed and open-ended questions. For this reason, we make sure we utilize both closed and open-ended questions so that we are able to gather enough context, while keeping participants interested.

User personas are fictional characters that are created using research material and represent the different types of users that interact with your product, service, or brand. Generally, the persona is presented as a 1-2 page description of an archetypal user.

User personas typically contain the following bits of information:

– Demographics

– Background.

– Needs.

– Goals.

– Frustrations.

– Motivation.

The purpose of user personas is to relay how users experience the same environment differently. Additionally, they’re a vital tool to the UX design process and provide a deeper understanding of the target audience and guide the ideation process.

We utilize personas as an effective user research tool to help pinpoint which groups of users you should target and how to approach these user types.

A user story is a brief – yet specific – scenario stating what the user wants to accomplish by using the product. It describes the most basic goal of a user, such as signing up for a new account, finding the checkout, contacting support, etc.

Because they are short and specific, it takes a number of user stories in order to align the design with users’ goals. Nevertheless, they are an effective way to organize and prioritize design tasks.

Implementing user stories during our design process helps us accomplish three things:

– User stories ensure design is user-focused.

– User stories clarify design process to avoid feature creeps.

– User stories coordinate various stages of the design process.

We share our user stories through a collaborative spreadsheet where the client and various stakeholders can add any stories they feel are missing.

We also utilize job stories to help us define user tasks in product design. In short, a job story focuses on the ‘jobs that need to be done’ with an emphasis on context, causality, and motivation, as opposed to assumptions and personas.

Experience mapping is a process that involves creating a visual representation of a customer’s journey through a particular product or service. The goal of this process is to identify pain points and areas for improvement in order to enhance the customer’s experience. The process typically involves gathering data through customer interviews, surveys, and other feedback mechanisms, as well as mapping out the customer journey step by step.

Once the map is complete, it can be used to guide product or service design decisions that will improve the overall customer experience. The mapping process can be applied to a wide range of products and services, from physical products to digital platforms.

The process of creating a user experience (UX) design often involves the use of storyboards. Storyboards are visual representations that depict a sequence of events or actions in a user’s journey through a product or service. They are used to help designers and stakeholders understand how users will interact with the product and to identify areas that may need improvement.

The first step in creating a storyboard is to define the user’s goals and needs. This will help to determine the key interactions and touchpoints that need to be included in the storyboard. Once the goals and needs have been identified, the designer can begin sketching out the different scenes or frames that make up the storyboard.

Each scene should include a description of the user’s actions, as well as any relevant visual or contextual information. The scenes should flow logically from one to the next, creating a cohesive and engaging story. The designer may also choose to include annotations or notes to provide additional context or explain certain design decisions.

Once the storyboard is complete, it can be used to guide the development of the UX design. Designers can use the storyboard to test different design concepts and to ensure that the design meets the user’s needs and goals. Storyboards are an essential tool in the UX design process, helping designers to create engaging and effective products and services.

User scenarios are a way of understanding how users interact with a product or service. The process of creating user scenarios typically involves conducting research to understand users’ needs and behaviors, identifying their goals and pain points, and mapping out their journeys as they use the product or service. This process may involve interviews, surveys, observations, and other research methods to gather data.

Once the data is collected, it is analyzed and synthesized into user personas and scenarios that represent the different types of users and their specific needs and goals. User scenarios can help product designers, developers, and other stakeholders to better understand and empathize with users, and to create products and services that meet their needs in a meaningful way.

Goal: Draft a foolproof UX strategy by combining research data.

At this stage, of our UX design process, we combine the data collected from the previous phases and define a set of KPIs and a clear UX strategy.

A UX strategy is the plan for the digital product. It should articulate the brand, offer guiding principles, and support the long-term vision of the business. It is different from a customer experience strategy which focuses on different aspects of the brand, such as customer service, sales processes, brand consistency, pricing, and product delivery.

A well-defined UX strategy is made up of four components:

– Business strategy.

– Value innovation.

– Validated user research.

– Flawless user experience.

The UX strategy has one main purpose – to solve specific problems. For this reason, we take extra care to ensure that the business vision, user needs, and technical capabilities are aligned.

Goal: Define a design concept to align interaction patterns, user paths, and interfaces.

At this stage, of our design process we use a variety of methodologies to define a concept that will shape the entire design elements: interactions, the relationship between elements, tone of voice and copy, transitions, animations, etc. Basically, everything that is necessary to align product vision to reality.

Here is how we do it:

– Information Architecture

– User Flow

– Low-fi Wireframes

– Hi-fi Wireframes

– Interactive Prototype

– User Testing Report

We take all the collected data from the research phase to build an information architecture for the product. As the name suggests, information architecture is all about organizing information in a clear and logical way.

We generally present the IA using a mind map that gives a bird’s eye view of the system and shows the relationship between parts, thus helping users navigate complex sets of information. In our experience, this mind mapping process is particularly effective when performed in collaboration with stakeholders.

By visualizing the overall project structure, it is easier to understand the scope of the project and define feature priorities. The aim here is to make sure users will find the product more usable and intuitive.

User flows are a visualization of the steps a user needs to take in order to complete a specific task. The aim of user flows is to show the pages, logic, and action necessary to reach the goal. At the same time, it provides developers with a description of all possible user flows, alternate triggers, and errors.

We provide stakeholders with a user flow document created in a design-specification format that merges screen layout designs with flowchart-like representations of user interactions within the system.

As the design progresses, we continue to update this document over the course of a project’s lifespan. This allows us to iterate on the user flows more efficiently and identify any problems early on in the design process.

Low fidelity wireframes are the most basic visual representations of the design layout and features of the product. They are typically static and their role is to map out the skeleton of the interface its screens, user flows, and information architecture.

Low-fi wireframes allow us to communicate visual ideas to stakeholders so that the design concept is easier to understand and we can quickly act on feedback from stakeholders and users. This lets us make changes before further design and development take place.

High fidelity wireframes are much more realistic depictions of the final design than low fidelity wireframes. They are built in the advanced stages of the UX design process and are usually interactive, mimicking authentic interface interaction.

Final iterations are made at this stage, with a focus on refining layout, graphics, and spacing. Based on our experience, high fidelity wireframes are useful to showcase a more accurate depiction of what the final product will look and feel like before it is finalized.

To give our stakeholders an even more realistic visualization of the product in progress, we create interactive prototypes as part of the wireframing and design processes. We do this using a variety of tools, depending on whether we want to test simpler or more complex functionalities.

An interactive prototype is beneficial to the overall design process in a number of ways, such as:

– Brings the design to life.

– Generates feedback from proper context.

– Reduces overall development time.

– Acts as a reference tool for developers.

– Confirms shared vision among users and stakeholders.

– Validates assumptions and tests hypotheses.

We find it constructive to take a step back from time to time and validate our assumptions and design decisions by conducting a series of user tests using an interactive prototype.

After the usability testing is complete, we develop a user testing report which contains a summary of our findings, as well as suggestions for improving the design. This document provides insight into users’ expectations and is important in evaluating a product’s success.

The user testing report also provides context to the testing, as it outlines testing goals, test setup, and user demographics.

Goal: Develop and standardize the graphical interface of the product.

At this stage, of our design process we begin to develop the graphical interface of the product. Here we apply everything we have learned from users and stakeholders, and proceed with exploring ways to design interfaces that are consistent and scalable.

All decisions regarding the visual design of the user interface are documented in a UI style guide. A UI style guide standardizes the grid system, layout, color palette, typography, iconography, logos, and imagery.

Here are all the stages we cover in the visual and UI design phase:

– Moodboards

– Visual Design Mockups

– UI Animations

– Design System & UI Library

– Design Specification For Developers

Once we have a solid understanding of how the user flow works, it’s time to think about how we want the product to look and feel like. A great way to start with that is by compiling a moodboard which is a diverse compilation of design inspiration to help us lay out our options in front of us. Based on these options, we come up with the very feel that’s consistent with the brand, practical and delightful.

Mockups are a visual depiction of how the user interface will look like. They can be low or high fidelity, static or interactive, single or multi-page. We create our visual style based on branding guidelines provided by stakeholders or come up with a style from scratch.

Mockups are a visual depiction of how the user interface will look like. They can be low or high fidelity, static or interactive, single or multi-page. We create our visual style based on branding guidelines provided by stakeholders or come up with a style from scratch.

We also deliver short animations as part of our UX design in order to enhance the overall presentation and interactivity of a product. UI animations show the main interactions, transitions, and flows within the system.

When used in the right context, UI animations make the design stand out and steer users towards their goal. Not only that, but such elements as animations and illustrations help delight users which boosts retention and general enjoyability of the product.

A UI design system is a collection of iterative components and guidelines that explain how these components work. Or more simply, it’s a set of standards for design and code that reinforce design consistency.

A design system features the following components:

– Style and design guidelines – icons, typography, colors, spacing, and illustrations.

– UI libraries – form design elements, images, navigation, and overlays.

– Content style guide – voice, tone, language, principles and objectives.

Having a design system document is a powerful toolkit for our clients’ internal design teams. It enables them to maintain consistency and scalability when building new pages and adding new functionalities.

One methodology used to develop design systems is atomic design. This methodology is made of five stages that work together to create interface design systems in a more hierarchical manner. The five stages of atomic design are:

– Atoms. Basic elements such as form labels, inputs and buttons.

– Molecules. Simple groups of design elements that function together as a unit.

– Organisms. Relatively complex components that form distinct sections of an interface.

– Templates. Groups of organisms that function together and demonstrate the page’s underlying content structure.

– Pages. The highest level of fidelity that shows what the interface will look like with real representative content in place.

One of the greatest advantages of atomic design is that it allows a more critical approach to the UX design process and lets us look at each component on its own and as a part of a larger whole. In turn, this encourages a more consistent and scalable design.

Design specifications are developed at the end of the design phase and are intended to be used by developers. These documents communicate details about the UI – such as colors, typography, and measurements – and information about the product – such as user flow, behavior, and functionality. Developers use this document to build the product to the designer’s specifications.

In our experience, we find that design specifications for developers are crucial to the success of the final product. Though various aesthetic choices – like fonts – might not seem like a big deal to developers, the design specs explain why this design choice was made. Essentially, it makes sure everyone is on the same page and developers correctly implement the design as envisioned.

Goal: Find out if the product is producing the desired result.

Once the product is launched it’s time to measure the results. Have the desired KPIs been achieved? Have metrics shifted? Are users interacting with the product as intended and is the product producing the desired result? This is what we seek to find out at this stage.

To find this out, we provide clients with a correction document for developers and a usage analytics report:

– UI Polishing & Correction Document For Developers

– Usage Analytics Reports

At some point after the implementation of a design, it’s very likely that some changes will need to be made. Usually, these are minor corrections that can have a great impact on the design and user experience.

We go over the user interface again to spot any inconsistencies or design flaws and take notes. When we validate the design, we craft a correction document for developers. This document depicts specific parts of the design that need to be corrected with an explanation for each one.

A usage analytics report contains insights into how to improve the design and enhance the user experience. But it’s not just data and visuals. The report contains explanations and recommendations on where design improvements can be made and why.

We use a variety of tools to collect new usage data and feedback from users. Our aim is to provide you with a full overview of interactions. Specifically, which features are being used and by whom, how much time users are spending on separate pages, and what trends can be observed in user behavior.

A usage analytics report is also a useful record to see the impact the design has had on the product after developers have acted according to the correction document.

At our company, we pride ourselves on our commitment to our clients. We understand how important it is to deliver a design that not only looks great but also offers a user experience that is second to none. That’s why we always go the extra mile to ensure that every detail is taken care of, and our clients receive a design that they can be proud of.

We believe in providing real solutions to real problems. That means taking the time to understand your needs and goals so that we can create a design that meets your specific requirements. We don’t believe in a one-size-fits-all approach. Instead, we take a customized approach to every project, ensuring that you get a design that is tailored to your unique needs.

And we don’t stop there. We’re with you every step of the way, from the initial consultation to the final product launch. We believe in building long-term relationships with our clients and providing ongoing support to ensure your success. So, whether you need help with design, development, or ongoing maintenance, we’ve got your back.