The UX Design Process

Methodologies and Deliverables, Simplified

1. Stakeholder Interviews

The first step in any design or development process is to interview the stakeholders to find out what are their business goals and what they expect out of a final product, e.g. a website, application, or software product. Stakeholders are those people whose feedback and approvals are required throughout the UX design process. Stakeholders are behind the concept of a software product or a website, so it’s critical to understand what final product they have envisioned. Stakeholder interviews usually build around a problem statement, and then finding possible solutions to that problem. Problem statement translates to the business needs which provide a clear picture of what’s the basic reason to develop a particular product.

Here are some tips on conducting a successful stakeholder interview:

• Identify all key stakeholders whose feedback and approvals are required to carry out UX design activities
• Try to conduct one-on-one interview with each stakeholder to uncover unexpected viewpoints
• Record stakeholder interview as-is, and don’t rephrase their answers, as it may distort the actual message
• Compile the insights of individual stakeholders into one document and distribute it to all stakeholders for review and comments

Stakeholder interviews offer rich insights into the minds of stakeholders and help UX designers to get the focus right. The best thing to do is to keep the designers and developers actively involved in the process so that they get a clear picture of what’s the goal of a product.

2. User Research

User research is often conducted simultaneously with stakeholder interviews, and there’s not much difference between the expected outcome of stakeholder interviews and user research. While stakeholder interviews give us insights into what is the business goal of a product, user research tells us what features users expect from the product.

However, before you even start conducting user research, you should know what type of users fall within the target audience, what are their behavior patterns, what they expect from the product, etc. Create user personas or user profiles to get into end-users’ mindset, and identify user journeys to know exactly what steps different users take to complete a specific task in a system. I’ve explained the two important facets of user research below.

User Profiles

Creating user profiles or user personas is the first step in conducting user research. A user persona is usually based on two dimensions – Demographic and Psychographic. Elements such as age, gender, education level, income group, culture, etc. fall under demographic dimensions. On the other hand, Psychographic dimensions cover the behavioral aspects of a user, such as likes and dislikes.

Here’s an example of a user persona:

• Sarah
• Works at an apparel store in New York
• 26 years, Single
• Wears assorted, expensive designer apparel
• Curates music collections and promotes local bands
• Uses iPhone
• Loves exploring new places to hang out
• Comes from a creative, middle income family
• Avid traveller
• Advocates cross-cultural social initiatives

User Journeys

User journeys describe at a high level what path different users follow to complete a specific task within a system, a website, or an application. In case of an existing application or website, user journeys show the current user workflow, and help us find areas of improvement for a better workflow. User journeys are a great way to understand the application from a user’s point of view. It gives you valuable insights about how you should create the flow of activities from one point to the other, so that everything false in the right place and users are able to complete a set of tasks effortlessly.

3. Site Audit

Site audit is done specifically in scenarios where we already have a website or application, which needs to be improved from UX perspective. Site audit is necessary to know the exact state of UX in the current product and find out areas of improvements that could lead to a better user experience. Though site audit includes a vast list of elements to verify, here’s a list of some key areas that shouldn’t be left out. Key user-specific activities should be easy to locate in the app or a website, e.g. objects, actions, options, and menu items. In addition make sure that main navigation is easily identifiable and navigation labels are clear and concise.The system should always keep users informed about what’s going on at the backend. The app or website should use non-technical and day-to-day terms that are familiar to end users.

It should be clear whether different words, situations, or actions mean the same thing. Error messages should be expressed in plain language and they should also offer a solution, a next step for users. Make sure that the help information is easily accessible, well-organized, and relevant. Page or application load time should be reasonable. Font types and text formatting should be conducive to easy readability. Homepage should be easily digestible in 5 seconds. If users take long to understand what the page is all about, it’s highly probable that they’ll leave the page. As I said, there are several other factors that need to be verified in a site audit, following the ones mentioned above will ensure a good user experience. Even then, I suggest you conduct the audit based on the requirements specific to your application.

4. Requirements Definition

Gathering requirements itself is a standalone process in a software development life cycle (SDLC), which includes conducting stakeholder interviews to describe product overview, business perspective, functional requirements, technical requirements, usability requirements, assumptions, project constraints, and more. Therefore, the next step is to document the requirements based on information gathered from stakeholder interviews, user research, and site audit. Remember that the requirements are purely based on insights gathered from stakeholder and user interviews, so it’s important to do the first three steps right in order to create an accurate requirements definition document.

The business analysis team is primarily involved in requirements definition of the project, and they follow a typical structure for the requirements definition document, as described below:

Documents:

• Current process and problems
• Goals and objectives
• Stakeholder requirements
• Issues and risks
• Thoughts and ideas
• Business process sketches
• User interface sketches
• Screen flows
• Wireframes
• Use-case specifications
• Use-case diagrams

Glossaries and terms

The entire design and development activities are done as per the requirements mentioned in this document; therefore requirements should be described meticulously so as to keep the project on the right track.

5. Information architecture/ Wireframes

Information architecture (IA) and Wireframe are all about organizing the content and flow of a website or an application, so that users can complete their tasks and achieve their goals easily. The focus is on creating usable content structures out of complex sets of information.

On the other hand, wireframe is the skeleton of a web page or an application. It shows the priority and organization of various elements on the screen, and how all these elements fit in to the overall structure of a website.

Following are the steps involved in developing information architecture of a website, which also includes wireframing.

Content organization

Organization of content is the first step in the IA process, which deals with formally classifying content based on how the users of a particular domain might access it at various levels. However, before your start organizing content, it’s critical to develop a thorough understanding of that content. Techniques such as card sorting can be used here, where all navigation labels of the website are written on different cards, and users are asked to place these cards in a way they want the information to be organized. This technique provides valuable insights, from end user’s perspective, on how various content elements can be organized to make content discovery effortless.

Information relationships

Creating information relationships is all about making the information usable. For example, on an online book store, people might not always remember a book they want to purchase by its title. Therefore, it’s important to connect various metadata elements to a particular book, such as author, publisher, year of publishing, awards, etc. so that users can find a book title by its author name or publisher name, and so on.

Creating Navigation

The next step is to provide a navigation structure to the content being organized. This is where sitemaps and wireframes come into play. While sitemaps display page relationships and paths, wireframes displays page-level content organization.

Basically, wireframes bring together all three elements of information architecture – content organization, information relationships, and navigation system – and present them through a basic structure.

Before you actually start working on wireframes, choose the appropriate fidelity of wireframes:

• Low fidelity: Low fidelity wireframes are usually created during the initial stages of a design cycle. Paper sketching is the low-fidelity approach to wireframing, and is specifically useful during the brainstorming and conceptualizing phase.
• Medium fidelity: Medium fidelity wireframes are more refined versions of wireframes which show the behavioral or minimal functional aspects of the application or a website. These wireframes are more relevant in determining how good the user experience is, and whether user needs will be met.
• High fidelity design: High fidelity designs are closest to the final product, with various visual elements incorporated in the design, like colors, images, design, and typography. High fidelity designs can be used for usability testing, and serve excellent reference for developers to get a good idea of the final product.

6. Visual Design

Visual design focuses on the aesthetics of a site or application. But more than the ‘look & feel’ factor, the design is driven primarily by the ‘usability’ factor. By usability, I mean focusing toward creating delightful user experience for the users. Especially in case of user experience design, user-centered visual design is the dominant design approach. That’s why visual design is also referred to as user-centered design within UX design process.You would agree with me in that look & feel alone cannot guarantee a great user experience for end users. If the design, irrespective of its creative quality, interferes with the usability of a website or application, it’s not a good design. Let’s unravel some key principles that are associated with visual design. Based on explicit understanding of users Visual design is based upon explicit understanding of users, tasks and environments. The aim is to use the design as a supporting element that enhances usability. The design goes beyond the look and feel element and leads to the workability of the design.

User-centered evaluation

The entire design process is driven by user-centered evaluations. Users are constantly involved throughout the visual design process to get feedbacks, make changes, and redesign. Design iterations are done based on the feedback received from users’ evaluation of the design. After each evaluation, design is refined further. In this case the priority is given to the usability factor, and several look & feel factors might be sacrificed.

Focus on whole user experience

Visual design cannot be done in isolation from other UX elements, such as information architecture, user research, prototypes, etc. The design addresses the whole user experience, not just the ‘design’. Eventually, the design should support all the elements of UX design.

7. Prototypes

Prototyping is the process of creating interactive simulations or paper sketches that work or look like the final product, and getting these validated with broader teams of users, including end users, stakeholders, developers and designers. And doing all this rapidly is call rapid prototyping. In recent years, rapid prototyping has been adopted by design and development teams alike to get better results, faster.

A typical rapid prototyping process involves following three steps:

• Creating the Prototype In the first step, prototypes are created based upon the description of the product given by stakeholders and data gathered from user research.
• Reviewing the Prototype The final prototype is reviewed by stakeholders and other users, and it’s evaluated on the basis of whether it meets the end users’ requirements or not.
• Refining the Prototype Once the feedback is received, the prototype is refined as per the changes suggested by users. The above 3 steps usually go through multiple iterations until the prototype meets the requirements of the final visualized product.

However, before getting into rapid prototyping it’s important to scope a prototype, while keeping following things in your mind: Decide what needs to be prototyped. Mainly, complex applications are a good candidate for creating a prototype. Determine what percentage of the final product needs to be prototyped. In this case, focus only on those features that will be used most number of times. Weave a story around the prototype so that it covers all features developed in the prototype. It’s about creating a user journey that should evaluate all features included in the prototype. Plan your iterations, so that broader areas are prototyped first, such as creating homepage or key landing pages first. As you move along several iterations, focus on detailed aspects of prototyping, such as users trying to find a brochure or downloading it.

Determine how closely the prototype will resemble the final product. For example, will it be a sketched prototype or a styled prototype? Will it be static or interactive? Will it include dummy text or real content?

8. Testing

Testing involves evaluating and benchmarking the usability of a final product with real users. Testing is the key to delivering delightful user experiences to end users. Depending on a particular project, testing may involve following types of testing approaches:

Usability testing

Usability testing involves evaluating and benchmarking the usability of a final product with real users. It is the key to delivering delightful user experiences to end users. All or a combination of following techniques can be used to conduct usability testing:

Concurrent Think Aloud (CTA) testing involves real-time feedback and responses from users as they interact with a product.

Retrospective Think Aloud (RTA) technique asks users to retrace steps they followed to complete a task. This helps in determining whether a particular process is repeatable. Concurrent Probing (CP) involves asking questions from users while a testing session is in progress. Retrospective Probing (RP) is about asking questions and thoughts of users after they’ve completed their session.

Site analytics

This is particularly relevant in scenarios when you already have a website up and running. Site analytics provide valuable data related to various metrics like click-path, average time spent on the website, bounce rate, etc. that gives valuable insights about user behavior – how the website visitors are using your website.

Based on the analytics data, you can then enhance the IA, navigation and other UX elements, implement the changes, and again revisit the analytics data to see if the changes resulted in any improvement.

A/B testing

A/B testing is a method to test two variations of a web page by subjecting them to experimentation, and finding the version that delivered better results than the other. For example, there are two website designs and you want to know which works better. To find this out, split the traffic to these two versions of the website and measure their performance based on metrics such as number of conversions, bounce rate, sales, etc.

Summary

User experience design process may differ according to the type of website or application you are developing. For example, in some UX design processes, designers and developers prefer doing a prototype before the visual design or user-centered design so that they only design the final product ones it’s thoroughly tested and meets all major requirements of stakeholders and end users.

Though the order of some steps in UX design process might differ in different scenarios, it’s important to start from scratch i.e. conduct stakeholder interviews and user research. UX design is all about delighting end users, therefore stakeholder interviews and user research should be done with due diligence. These are the two critical steps that are skipped during most projects. Do these first and the rest will fall into place, and the chances of failure will be very low or non-existent.

Click here to view a sample Case Study