In the previous blog we saw the main difference between UI [User Interface] and UX [User Experience]. In this second part, we’ll get into something more substantial – UX Design Process.

Most UX designers are already aware of the design process, but sadly, many important facets of the UX design processes are either totally ignored or overlooked. The result, a product that neither engages, inspires nor adds any value to the end-user. Best UI/UX designers make it a point to give great prominence to every important facet of design process leaving no stones unturned.

In this article we shall focus on all those important facets of UX design process. We tell you what they are? What goes into it? How it is done? And offer best practice tips that top UI/UX designers follow today.

Here’s the overview:

Part 1: Pre-design Stage

        Stakeholders interview

        User Interviews

        User Surveys

        Competitive Analysis

        Reference Documentation

        Customer Journey Maps

Part 2: Design Stage

        Sketches

        User Flows

        Sitemaps

        Paper Prototyping

        Interactive Wireframe

        Mockups

Part 3: Usability Testing

        Defining the Goal

        Preparing the Test

        Conducting the Test

        Presenting the Result

Firstly, the UX design process is not just about designing an app, it is all about careful planning, understanding user behavior, and then crafting a product accordingly. Remember, UX designing is not complete without solid background research and documentation. And a good design documents are the ones that enhances the design process and effectively conveys design thinking to others.

Let’s begin.
                                                            Part 1: Pre-design Stage

Stakeholders Interview

Why you need it?

Stakeholders are your bosses, subordinates, colleagues, customers or peers. The stakeholders interview is one of the first steps in any UX projects.

The objective of having a stakeholder interview is to get a clear understanding of the business and technical requirements of the project you are about to begin. Getting their opinions right from the beginning helps UX designers to steer in the right direction. 

The stakeholder interview are a powerful tool which will give you lot of information

And here’s a sample script which can help you create your own stakeholders interview questions.

Best practices:

*  The questions you ask depends on the type of the stakeholder you discuss with. Here are some of the stakeholders you can interview – Marketing, engineering, Sales Executives and SMEs

*  Pay attention to these:

            Assumptions

            Requirement lists

            Prescriptive solutions    

*  Spend at least an hour with the stakeholders asking questions and discussing

*  Record the interview if possible, to avoid missing or misinterpreting views

*  If possible ask the stakeholder to provide some background documents that help you in the project

User Interviews

Why you need it?  

The main purpose of carrying out user interviews is to narrow your design focus according to what your user want. The responses from the user interviews will reveal design ideas that work, and ideas that won’t work.

In the end, the collected data can be used in creating personas.      

Best Practices:

* Since the users are most likely strangers, be friendly for better response.

* Before you begin the interview create an overview document and share it with your team so that they can add their inputs and concerns.

* The overview document should cover these areas:

Goal – what you eventually gain from this interview

User Background – User’s demgraphic info (title, gender, age, etc.)

Behavioral Questions – About what user gets frustrated about, habits etc.

Product Question – Why they would use the product like this, and what improvement they’d like to see

* Ask them to eloborate as much as they could

* Record the interviews and share it with your team

* You could also invite developers or marketers to sit with you so they can ask specific questions

* Try to conduct interviews at the users’ convenient spot

User Surveys

Why you need it?

User Surveys are lighter version of User Interview. Though it is not as detailed as an interview, it  has its advantages. The main objective of user survey is to ‘recognize patterns’ and it works out cheaper compared to interviews.

Best Practices:

* Let the surveys be short (limiting to 6-8 questions) and about 3-minute read

* Have closed loop questions, sticking to yes/no/choices as answers

* Let the important questions be on top

Competitive Analysis

Why you need it?

The name says it pretty much. Here, you gauge what your competitor does – their strategy, their approach, their tactics, the resources they use, and so on. The goal here is to sketch a business/technical goals using your competitors strategies in understanding end-users.

Understanding your competitor can help you in understanding the end-users.   

Best Practices:

* Try and get a group of people to evaluate your competitors. If not, do it yourself.

* Use a spiderweb graph, which helps in visualizing and understanding better.

* Visualize it for each competitors

* Compare results  

User Personas

Why you need it?

This is one of the most important documents used in analyzing users. It is said that a UX designer can ignore any other documentation, but NOT the user persona. User personas should represent what type of customer you are dealing with and it should answer this important question “Who are we designing for?”. User personas are the result of the data obtained from user interviews or people who you’ve observed and who represent the target audience.

Here’s a video that plainly explains how to create user personas.

And here is the sample of a typical user persona.

Image Source: Smashing Magazine

Best Practice:

It does not matter how vast the information you have, it is how relevant the information is to your product.

User Stories

Why you need it?

Once the user personas are ready, you can start creating User Stories. The objective is to establish different users and different goals to create a design for their different needs. User stories are used to map roles into actions and goals.

Here’s a typical template.

   Image Source: Smashing Magazine  

Once you collect a series of such stories, user’s goals begin to emerge. Then use these stories to develop different scenarios. This way, you can stay close to user’s goals.

Best Practices:

* Let it be simple and meaningful

* Let it be specific

* Share it with the entire team to get feedback

Customer Journey Maps

Why you need it?

Customer journey mapping is a process of creating a visual interpretation of the overall story from a customer’s perspective within an organization, product, or brand over a period of time and across all channels.

Customer Journey Maps should include:

Personas – which illustrates needs, goals, thoughts, pain points of the user

Timeline – a period of time

Emotion – illustrates user emotion such as happiness, anxiety, eagerness etc.

Touchpoints – What the customer is doing. Their actions and interactions with the organization

Channels – Where the customer interaction is taking place (App, website, in-store etc.)

        Image source: Digitalgov

    UX team at work, working on a customer journey map  

Best practices:

* Break the process into different key steps

* Share it with others and examine the design through someone else’s eyes, it may reveal further insights

* Try and involve other participants in the journey map creation

* Once created, share them with as many relevant people as you can      

                                                              Part 2: Design Stage

Sketches

Why you need it?

Once the customer journey map is in place, it is time to sketch out the details.   

You needn’t have to be really good in drawing. Rough sketches can convey ideas quickly and easily. And you could also create, scrap, and recreate ideas and designs.

Best practices:

* Don’t aim for beautiful sketches, just ensure that it conveys the message effectively

* Use more details only when it is needed, otherwise focus more on the navigation, sizes and position that makes users’ life easy.

Image Source: invisionapp

User Flows

Why you need it?

With user flows, now we enter a phase where you actually chart the actions that take place within the product. While user scenario focuses on user situation, mindset etc., the user flow focuses on the users’ journey through the product to reach their goal.

Here, you will map out how a user will move through a product. For example, if a user wants to buy a home appliance, there are two approaches he is likely to take. First, the user will directly enter into a e-commerce app, search the product, and make a purchase. Second, the user will check the reviews first, head to the e-commerce site, view the reviews, go to the search tab, enter the product, and then purchase the product. Though both type of users come to the same product, can you see the difference in their approach? That’s user behavior.

Now, keeping in mind both these users, you will craft a flow that facilitates both.

In this stage you visualize the prototype (through sketches or documentation) without actually building them.     

Best Practices:

* Let it revolve around objectives  – of both yours and the end-users

* Designers can approach user flows through these two methods:

                Shorthand method

                Writing-first method

Here’s example of the shorthand method, from UXPin.

Example: A Banking app

Scenario: User wants to turn on ‘auto deposit’

Shorthand User flow sample steps. Note: Inside the brackets are your buttons and links

Step 1

Would you like to set up auto deposit?

[Set auto-deposit]

Step 2

Select Deposit Frequency

[Weekly / Once a month / Twice a month]

Step 3 (If the users select ‘deposit weekly’)

Deposit Weekly   

[Select day] (opens calendar)

Step 4

Enter amount (display amount field)

[Set auto-deposit]

Here’s a detailed article on how to create user flow through Shorthand method.  

And here’s a detailed article about the writing-first method by Jessica Downey.

Site Maps

Why you need it?

Many tend to confuse between ‘user flows’ and ‘site maps’. There is one factor that differentiates both of them – user behavior.

Site maps refers to your content structure, whereas user flows refer to the different ways users navigate to accomplish various tasks.

The whole pupose of site map is to improve a product’s information architecture.

Image source: UXPin

Best practices:  

* Create card sorting before you start with site mapping

* Though site maps are typically static, it would be more helpful if they are clickable

* Clickable site map procedure: First create a primary navigation, through each item in the primary navigation create a new page, on each page create/draw boxes representing all clickable links, and then for each link create a shell page.

Paper Prototyping

Why you need it?

Just like sketches, paper prototyping helps UX designers to quickly validate and make changes accordingly. Though they only help in conveying basic ideas, and not detailed product experience, it still remains one of the most preferred methods. However, if you could spend some extra time and add little bit creativity, you could surely make the process more detailed.

Paper prototyping is one of the most effective and cheaper ways to test and share ideas. 

Image source: Creative Commons (Samuel Mann)

Best practices:

* It would be easier (and fun) if it is performed in groups

* It should neither be too detailed nor be too simple, strike a balance

* Sketch each page design on individual pages

* You can take help from sites like sneakpeekit.com

Interactive Wireframe

Why you need it?

Interactive wireframes are used to solidify IA (Information Architecture). It is used to test your product’s page flow and content structure simultaneously.  

Best practices:

* Always build your interactive wireframe with a prototyping tool, which allows you to later integrate it with much advanced designs

* Use common elements

* Go for mobile-first design

* Focus on light-interactivity

Mockup

Why you need it?

Through mockups you showcase your product visually. They focus on fidelity and act as a visual roadmap for developers.

       Image Source: UXPin  

Best practices:

* Use clear names for files, folders, layers, icons etc.

* Use a grid system

* Design seperate mockups for different screen sizes

* Keep an eye on typography

                                                               Part 3: Usability Testing

There are four steps of usability testing, and we focus on each of them to see what each focuses on, and they can help designers achieve better.  

Defining Goals

Setting clear goals about the outcome of the usability testing is crucial, and it can help designers in finding best solutions and finding the best route to get there.  

Answer these questions:

Why are you conducting this test? What’s the goal?

Which methods are intuitive to deliver the best to users?

Which form of design works best for this business or industry?

Best practices:

* Make a list of questions and prioritize it

* Turn the answers to these questions as the test’s hypothesis

Preparing the test

There are hundreds of usability tests out there. The key is not about which tests are best, it is all about which one will work best for a specific need.

Tests can be divided into the four categories – scripted, decontextualized, natural, hybrid

Scripted – used to analyze user’s interaction with product, based on set instructions (hallway usability tests, tree testing, benchmark testing)    

Decontextualized – These tests does not involve product, but lets you analyze generalized and theoretical topics (surveys, user interviews)

Natural – this lets you analyze users in their own environment. Used to examine user behavior and pinpoint their feelings (diary/field studies, A/B testing, first click testing, beta testing)     

Hybrid – Helps understand user mentality (quick exposure memory testing, participatory design, adjective cards)

Best practices:

* Keep it brief and to the point

* Ensure that it has – Background, goals, Questions, Tactics, participants, timeline and test scripts  

Conducting the Test

The process of conducting the test begins right after you’ve collected the relevant feedback from the team. It involves pulling in right participants, scheduling time, and creating the test documentation.

If you’re not sure how to go about recruiting participants, here’s an useful article which can help you pull it off.    

There are two ways to conduct a test:

  Moderated (being present with users)

  Unmoderated (allowing users to work on their own)

Best practices:

* While performing moderated test, make users comfortable, test competitors products, don’t interfere unless it is needed

* If possible record the session (to gain insight about audio, facial reaction, clicks etc.)

* Collaborate with team mates and take their feedback on the conducted test

Image Source: UXPin

Presenting the result

The only way to leverage the full potential of the test is to present the result well.   

Best practices:

* Explain the root of each issues as clear as possible

* Categorize and prioritize issues

* You could create a cloud folder (with universal access) and share

* Offer recommendations

Conclusion

The UX design process is a long one, but when done correctly, it can help designers and developers gain solid insights into the user experience, and it can help avert big problems before it becomes too big to handle. We stress, once more, that design documents should ‘compliment – not supplement – the design process’. We hope this article has helped you in gaining a clear understanding of the documentation part of the UX design process.

                                                                          **   

Ideaplunge is one of the leading UI/UX design studios in Bangalore, offering wide range of services to Startups and Fortune 500 companies.

Have a project in mind? Or looking for a UX/UI expertise? We can help you out in achieving your dream project just as you’ve envisioned.

Leave a Reply

Your email address will not be published. Required fields are marked *