UX GUIDE Prepared by : Manjunath Kunder | Reference : Google | Version : 1.0.0 | Last Update : 17th Sep, 2018
Generally, UX represents a user’s perceptions of a system—ease of use, utility, and the effectiveness of the user interface (UI). UX design focuses on building systems that demonstrate a deep understanding of end users. It takes into account what users need and wants while making allowances for the user’s context and limitations.
Every product design has different approach and ways of working, but there are some commonalities to the creative process.
2.1 Lean UX Design Process
Lean UX, based on the foundation of Agile development, is a user-centric approach that focuses on reducing the waste produced during the design cycle, and enhancing the UX through multiple iterations without spending much time on documentation.
As stated above, Lean UX is based on three main phases — build, measure, learn.
Design Cycle with Lean UX
Problem Statement & Assumptions
Whenever team encounters a problem statement, focus on “Why” and not “How”. This will guide to form assumptions. An assumption is formed out of the given problem and is assumed to be true. Also, it’s quite obvious that, the assumptions can prove to be wrong at some time in future but they can be changed whenever it happens.
Assumptions are normally generated on a workshop basis. You get the team together and state the problem and then allow the team to brainstorm their ideas for solving the problem. In the process you generate answers to certain questions that form your assumptions.
Typical questions might include:
• Who are our users?
• What is the product used for?
• When is it used?
• What situations is it used in?
• What will be the most important functionality?
• What’s the biggest risk to product delivery?
After brainstorming on problem statements and merging different ideas, hypotheses are created. The hypotheses are used to test assumptions.
Ex : Consider User Signup form; We believe that enabling people to save their progress at any time is essential for smartphone users. This will achieve a higher level of sign up completions. We will have demonstrated this when we can measure an improvement of the current completion rate of 20%.
We state the belief and why it is important and who it is important to. Then we follow that with what we expect to achieve. Finally, we determine what evidence we would need to collect to prove that our belief was true.
If we find that there’s no way to prove our hypothesis – we may be heading in the wrong direction because our outcomes are not clearly defined.
MVP (Minimum Viable Product)
The Minimum Viable Product (MVP) is a core concept in Lean UX. The idea is to build the most basic version of the concept as possible, test it and if there are no valuable results to abandon it.
MVP is a product with just enough features to satisfy the early customers and to provide feedback for future updates. MVP can also be a Low fidelity (Lo-Fi) prototype for example, paper prototype or digital prototype which your users can interact with and view different screens as a result of there actions. It could be also a Landing page, Product Video etc.
User Research and Testing
User research and testing, by the very nature of Lean UX, are based on the same principles as used in traditional UX environments. However, the approach tends to be “quick and dirty” – results need to be delivered before the next Agile Sprint starts; so there’s much less focus on heavy-duty, meticulously document outputs and more focus on raw data.
2.2 Double Diamond Design Process
Created by The British Design Council, the Double Diamond model portrays modes of thinking that designers use.
Divergent thinking — Think broadly, keep an open mind, consider anything and everything
Convergent thinking — Think narrowly, bring back focus and identify one or two key problems and solutions
Double Diamond model is divided into four distinct phases:
Research — insight into the problem — Discover customer problems
• Rip the brief, cluster findings into topics
Synthesis — the area to focus upon – Define specific customer problems
• Cluster learnings, Find insights, Create HMW(“how might we...”) questions
Ideation— potential solutions – Develop potential solutions to these customer problems
Implementation— solutions that work – Deliver feasible and viable solutions to these customer problems
• Build/Prototype, Test/Analyse, Iterate/Repeat
2.3 IDEO's Human-Centered Design Process
IDEO defines human-centered design as a creative approach to problem solving that starts with people and ends with innovative solutions that are tailor made to to suit their needs.
The first phase is all about observing the end-user, learning, and being open to creative possibilities. Identify patterns of behavior, pain points, and places where users have a difficult time doing something—these all lend to tremendous opportunity. Put yourself in their situation to see what their experience is, and feel what they feel.
In this phase you start brainstorming ideas with your team based on what you learned from your observations and experiences in Phase 1.
Your goal is to come up with as many ideas as you can.
As you’re coming up with ideas, stay focused on the needs and desires of the people you’re designing for. If you do this, your group’s ideas will eventually evolve into the right solution.
3. Rapid Prototyping
In this phase you’re going to quickly build a simple prototype of your idea. This makes it tangible and gives you something to test with the end-user.
4. User Feedback
This is the most critical phase of the human-centered design process. Without input from your end-user you won’t know if your solution is on target or not, and you won’t know how to evolve your design.
Once you get feedback from your users, use that information to fuel the changes to your design.
Now that you’ve validated the usefulness of your solution with the end-user and gotten your design just right, it’s time to get your idea out into the world.
2.4 Agile UX Design Process
Agile UX describes the combining of Agile Software Methodology with UX Design methods and follows a set of simple steps. Design sprints are a framework for teams of any size to solve and test design problems in 2-5 days.
Sprint Design Plan
What are the user needs, business need and technology capacities?
What is the key strategy and focus?
How might we explore as many ideas as possible?
Select the best ideas so far.
Create an artifact that allows to test the ideas with users.
Test the ideas with users, business stakeholders and technical experts.
5 days Design Sprint
2.5 The Genius Method
The Genius Method is inspiration-based – it relies on the visual design and user experience teams to make decisions based on their intuition, experience and expertise without significant external input. Since the Genius Method relies heavily on inspiration, it is best suited for designers with many years of experience. This approach is generally faster than UCD/HCD, with sizeable cost benefits because it relies on the intuition of the design team, rather than using a controlled data set and user research. You will come to conclusions faster and with less systematic documentation, and there is less risk that a brilliant concept will be dismantled by research participants that don’t actually know what they want in the context of your concept, and team meetings. It is the individual nuances of the Genius Method that makes it such an effective and innovative design methodology.
Go with the Genius Method if:
• You are working with a highly experienced team
• You trust your colleague’s intuition
• You trust your own intuition
• You have a deep understanding of your end users’ ultimate goals
3. UX Methods and Metrics
3.1 Usability Testing
Usability testing is a way to see how easy to use something is by testing it with real users.
Different types of Usability testing are:
1. Moderate Usability Testing
Testing the site/app with Live users
Guerrilla Usability Testing
Guerrilla usability testing is a way to evaluate how effective an interface is by testing out its visual design, functionality and general message on its intended audience and capturing their responses.
What makes guerrilla usability testing unique is that participants are not recruited in advance. Instead, members of the public are approached by those conducting the study during live intercepts in cafés, libraries, and malls, or in any other natural environment.
Focus groups gather approximately 6-8 representatives of your target market together with a moderator and have them discuss their feelings, attitudes and ideas on topics. They attempt to gather many people'sthoughts and attitudes on ideas and/or designs.
Users will form an opinion on your site within seconds of visiting. Blink Testing tells you what information and visual elements resonate with your customers within those first few seconds. A test participant is shown a page for five seconds. Once the page is hidden from view, participants provide their initial impression and what they recall.
Eye Tracking Test
Eye Tracking Tests use a combination of specialized hardware and software to record the movement of a user’s eyes as they view and use a product. The resulting heat maps show you where the user’s eyes move and where they focus for extended periods of time. This data helps suggest which page elements need greater prominence, which elements should be de-emphasized, and which elements users are ignoring.
System Usability Scale (SUS) Survey
It consists of a 10 item questionnaire with five response options for respondents; from Strongly agree to Strongly disagree.
1. I think that I would like to use this system frequently.
2. I found the system unnecessarily complex.
3. I thought the system was easy to use.
4. I think that I would need the support of a technical person to be able to use this system.
5. I found the various functions in this system were well integrated.
6. I thought there was too much inconsistency in this system.
7. I would imagine that most people would learn to use this system very quickly.
8. I found the system very cumbersome to use.
9. I felt very confident using the system.
10. I needed to learn a lot of things before I could get going with this system.
2. Un Moderate Usability Testing
Testing the site with remote users
A/B Testing, or Split Testing, is a method of testing one change on a page – the wording of a headline or the placement of a button, for example – to see how it performs compared to the original. Users follow one URL and are either shown the original (version A, the control) or redirected to an edited version (version B, the treatment).
Tools: Google Optimise , Zoho-PageSense etc.
3.2 Research Technique
Requirements analysis is an assessment of the business, users and technical requirements of the project. The analysis help to define what needs to be plan and why.
We run Requirements Analysis to help to generate, create and start defining:
- • Users requirements
- • Business requirements
- • Technical requirements
A user interview is a technique for gathering qualitative information, either from existing or potential users. Project team members do not represent the actual users of the product. Therefore, one of the best methods to understand users is to speak with them directly.
Example: User Interview, Expert Review, Stakeholders Interview etc.
Before you start working on design prototypes for your own product, assess the current state of the market with a Competitive Analysis (also known as a Competitor Analysis). Compare the features, navigation, content, visuals, taxonomy, and/or usability of your competitors to see what consumers might expect from your product, and how your product can contribute to the market in a way others have not.
Web Analytics are the quantitative data gathered about a product’s use, which is accessible through software applications to support business decisions about the value of current and existing functionality. While Web Analytics are an excellent method for finding problems with digital products, they are less useful for explaining why users are having the problems.
Tools: Google Analytics , Hotjar etc.
The goal is for a group to generate as many ideas as possible without passing any judgment. Ideas are refined and built upon as the session goes on. With no fear of judgment, participants feel comfortable sharing more unusual ideas.
A Persona is a representative model of a user type based on data from real users. Data must first be gathered from research, such as contextual user interviews and ethnography, and then synthesized into a profile. While a Persona is based on real people, it contains only the behaviors that will help design the product.
User Journey Map
A Journey Map is a visual summary of a Persona’s experience using a product or interacting with a brand. It illustrates each touchpoint and how they feel about it. These maps, like personas themselves, are based on real data from interviews, ethnography studies, and contextual research.
Journey Map formats are not consistent from company to company, or even product to product.
Job stories evolves from real people, not from the personas. The situation of a user triggers the motivation, which leads to the expected outcome. It talks with the real people’s context and casualty. Job stories triggers the “WHY” which helps the product team to look at the casualty of a user without any assumptions. It helps to look at the exact motivation of a user, not implementation.
A typical job story will look like:
“When a new product is launched, I want to get notified So I can decide whether to pre-book or Just add to list.”
“When I don’t want to upload and I want to paste a picture in comment So I can complete quickly.”
JTBD (Jobs To Be Done) Framework
This method of focusing on causality, anxieties, and motivations to the job story is from Jobs To Be Done framework.
Jobs to be done is a framework for identifying and exploring the key tasks and jobs that users need to get done. It focuses on what users want to get done, rather than just looking at how they go about doing it. Jobs to be done can help to identify what is important to users and to design tools, products and services that provide better solutions. The framework is best explored through interviews to discover jobs to be done with users, a workshop to analyse and map out jobs, and then a survey or follow up workshop to help prioritise jobs and potential solution criteria.
Affinity Mapping& Card Sorting
An affinity map, also known as an card sorting, gives designers a complete picture of their early research process. It is a physical, tactile, and editable design artifact that’s invaluable for showcasing trends, themes, and areas of opportunity for discovery and improvement. With just a few tools, you can create a visual representation of large amounts of data that will help to inform your future strategy.
Both Affinity Diagramming and Card Sorting are used for Product Planning & Information architecture.
Affinity Diagramming - this is done with a group which you have to present your guiding question and people will write their opinions on information on sticky and paste on the whiteboard or wall, then collect all ideas you ask that group make the set of the ideas which make more sense to them.
Card Sorting - There are two types of card sorting:
1. Open Card Sorting : In this participants are asked to organize topics from content within your website into groups that make sense to them and then name each group they created in a way that they feel accurately describes the content. Use an open card sort to learn how users group content and the terms or labels they give each category.
2. Closed Card Sorting : In Closed Card Sorting, participants are asked to sort topics from content within your website into pre-defined categories. A closed card sort works best when you are working with a pre-defined set of categories, and you want to learn how users sort content items into each category.
2x2 matrix to understand what issues might be both important to the business* and to the user.
An Empathy Map (or Persona Empathy Map) is a graphic illustration that depicts what a Persona is experiencing, thinking, and feeling in a particular scenario. This scenario is often an edge case in order to exaggerate potential pain points that the product team would not typically consider.
Empathy Maps consist of an image of the persona in the center with blocks of the background around them dedicated to what they think, feel, and do in that scenario. It can be used in conjunction with a Journey Map to flesh out a persona’s behavior and strengthen the designers’ emotional connection to the persona.
Sitemaps are a hierarchical diagram showing the structure of a website or application. They are used by User Experience Designers and Information Architects to define the taxonomy through grouping of related content. They are an important step of the user centred process as they ensure content is in places users would expect to find it. They can also be used as a reference point for wireframes, functional specifications and content maps.
3.3 Google's HEART Framework
How to Choose the Right UX Metrics for Your Product? Google’s HEART Framework helps measure the quality of user experience. You can apply HEART to a specific feature or a whole product.
Measures of user attitudes, often collected via survey.
Ex: Satisfaction, Perceived ease of use, Net-promoter score
Level of user involvement.
Ex: Number of visits per user per week, Number of photos uploaded per user per day, Number of shares
Gaining new users of a product or feature.
Ex: Upgrades to the latest version, New subscriptions created, Purchases made by new users
The rate at which existing users are returning.
Ex: Number of active users remaining present over time, Renewal rate or failure to retain (churn), Repeat purchases
Efficiency, effectiveness, and error rate.
Ex: Search result success, Time to upload a photo, Profile creation complete
But how do you figure out which metrics to implement and track?
The Goals, Signals and Metrics process facilitates the identification of meaningful metrics you'll actually use.
Paper prototype/ Sketch
Low Fedility Prototype / Wireframe
High Fedility Prototype
5. UX Design Criteria
1. Technical Feasibility
Is the technology needed to power the design solution available or within reach?
Sometimes the goal is to create a new technology, but sometimes we need to work with what we’ve got. Determine what your goal is on this front early on.
Does this solution honor the client’s budget?
We all have to work within budgets, and even if you have the best idea in the world, if it’s outside of the client’s budget then the solution isn’t viable.
3. Business Goals
What would success look like?
Understanding the key goals of the business, client, or project is critical. There may be several agendas or desired outcomes at play; clearly naming and prioritizing these will make decision making during the design phase much easier.
How long will this take?
Of course most of us would like to have what we want yesterday, and I’m not advocating for unreasonable deadlines. But when a reasonable client request is to have a project up and running in two months, yet our solution is projected to take six months to complete, it’s not a feasible solution. There’s no need to extend the timeline simply to accommodate our own ideals to the detriment of a client’s deadline.
6. UX Jargons
Designing a welcoming experience for new users by easing them into it. The design of the onboarding process for your site is usually limited to a first-time use scenario.
A mathematical ratio with origins in ancient Greece, also known as the Greek letter Phi. It is found in nature, and has made its way into graphic and print design as people deem it to be the most visually appealing layout to the human eye. The Golden Ratio approximately equals 1.618. We find it when we divide a line into two parts so that the full length divided by the long part is equal to the long part divided by the short part.
A diagram designed to identify cause-and-effect relationships between factors in a given situation. It is made up of a "head", which states a problem, and bones along the spine that represent factors and categories of factors.
Adaptive Web Design
Adaptive web design (AWD) uses the server to detect the device that’s been used for viewing the website. In other words, the sever will be used for determining whether the website is being viewed on a desktop, a smartphone, or a tablet. A separate template is being maintained for each device, i.e., the template displayed while viewing the site on a laptop screen will be different from the one that’s displayed when the same website is viewed on a smartphone screen.
The small bits of text/copy that help instruct and alleviate the concerns of users. Microcopy examples are error messages, contact form explainers, security notes, payment instructions, etc.
6 'WH' Question
WHO, WHEN, WHAT, WHY, WHERE, HOW. These questions are key to learning. You can never answer these questions with YES or NO. These questions are asked at the beginning of conversation when you are meeting someone new.
User Shadowing is an extremely useful behavioral observation practice that is used by UX designers and researchers to learn how people perform day-to-day tasks within their natural environment. It is especially useful when designing software products that will be used by people within a work environment, such as an office setting, lab, shop or out in the field. The key learnings from each user shadowing session are then compiled and used to help inform the design of a software product’s user experience.
Micro-interactions are events which have one main task — a single purpose — and they’re found all over your device and within apps. Their purpose is to delight the user; to create a moment that is engaging, welcoming and, dare we say it — human.
Storyboarding in UX is tool which help you visually predict and explore a user’s experience with a product. It’s a very much as thinking about your product as if it was a movie in term of how people would use it. It would help you to understand how people would flow through the interaction with it over time, giving you a clear sense of how to create a strong narrative.