I took a UXWell, a year-long user experience course, and these are my notes.
Table of Contents
Table of Contents
- Weekend session 1 (September 2023)
- Weekend session 2 (October 2023)
- Weekend session 3 (November 2023)
- Weekend session 4 (January 2024)
- Weekend session 5 (February 2024)
- Weekend session 6 (March 2024)
- Weekend session 7 (April 2024)
- Weekend session 8 (May 2024)
- Weekend session 9 (June 2024)
- Celebration👑
Weekend session 1 (September 2023)
Introductions – so many good lookin’ fancy folk here, and me :))
FigJam tips:
Press S to add a sticky
Press Ctrl + Enter to add a new sticky note
Press X to add a connection
We received the book Designing for the Digital Age (abbreviated as DftDA).
In this course we, the students, are responsible for our learning. The organizers and mentors are our guides to help us.
In the beginning, it’s good to learn the craft from master, later we can break the rules and transcend them (Shuhari).
Intellectual humility – admit when being wrong.
Course structure
As part of the course, we have weekend session roughly once a month. On Saturdays, we learn new things and on Sundays we apply them on Our product. We (me and my classmates) formed a ‘product team’ to work on it.
Approximately 10 hours per week we spend working on activities to practice what we’ve learned or to prepare for the next weekend session.
We have 1 hour every week with our mentor.
We might organize a study group as well.
Pre-mortem
Technique for identifying and mitigating risks. Participants imagine future and everything that could’ve gone wrong. Then they try to think of ways how to prevent things from going bad.
UX craft
Craftsman such as woodworker needs information from the customer to make what they need.
There are many things that UX people need to do, and there are things they don’t do.
Similarly to a regular doctor, they need to have an overview and basic understanding of the field. They might ask you to see a specialist if need be.
Definition of user experience:
https://www.iso.org/obp/ui/#iso:std:iso:9241:-210:ed-1:v1:en
“person’s perceptions and responses resulting from the use and/or anticipated use of a product, system or service”
Our ad-hoc process is untested, better to use a design process that’s been applied and verified in practice. There has been many throughout history: IA, Usability, RUP, Double diamond, Design thinking, Design sprint, Goal-directed design…
In this course, we follow the goal-directed design from DftDA book.
When applying for a UX job, it’s worth asking what process they use. It’s good to have a common clear process for all instead of each person having their own custom process.
Teaser for session 2
What to expect from the next session that will focus on research.
Reading books
Just some tips on reading, how to choose books, and how to get most out of it.
Read with an intention what you want to get out of a book. Prepare thoughts or questions you’d like to get answered.
When learning from books…
- Add our own thoughts instead of just highlighting pieces of text.
- Explain it to someone.
- Try it out.
Feedback
We give it in order for something to change the next time around. Reinforcing desired behavior.
3 concepts:
- Growth mindset that things can improve.
- Using language that invokes emotions and it’s not only a description of what was observed.
- Rationalization of coming up with stories to excuse us and to help use cope (Mistakes Were Made book).
3 rules for better feedback:
- Specific
- Not personal
- Doesn’t suggest solution
Concept mapping
A great way to put everything related to a certain topic on a paper. Your concept map can be improved by asking others what’s missing. Creating it in a group helps everyone get a common understanding.
It’s different from a mind map because there is no root node, and ideas can be connected with each other.
It’s recommended to start on paper or whiteboard. Then create a refined digital version in OrgPad or other tools.
Information visualization
Visualizing is a great way how to communicate ideas, to explain something to someone.
Text
It’s important to identify what’s important and don’t write down everything being said. Speech is more than 3x faster than writing. The goal is to remember, understand and be able to reproduce it.
Reduce text, imagine writing a telegram (very old short messages), and by understanding the flow of the ideas, it’s easier to reduce what needs to be written down. In order to remember content of videos, it’s recommended to take notes like this.
Doodling
We played a fun game of drawing things under 5 seconds 🙂
Visualizing can help us understand it, and doodling is fun. So doodle it!
We did exercises on basic doodling skills such as drawing lines (fast vs slow) , geometric shapes (starting point, direction of drawing), visual alphabet of simple shapes, and objects (composed of basic shapes).
It can come in handy to have a set of everyday objects you can draw from memory such as those from Make a World book.
We doodled people as well – simple human figures with correct proportions with joints that strike different poses. It’s recommended to start drawing at the center of mass ie. draw the body first.
Other stuff
Write fast or very slow. Try different sizes and shapes of letters.
Try different shapes to separate unrelated elements, add descriptions, different borders, bullet points or shading (adding it while talking about), different structures, …
A great book that goes into detail about visualization is The Doodle Revolution.
Project on a horizon
Gathering information about a new project, filling in gaps and gaining an understanding.
Designer can receive a specific task what to do. Beware, it might not be wise to start working on it right away. Unless you do “song requests” (“Alright, I’ll play your favorite now”). The danger of this approach is that designer becomes “a pencil for wireframes” or “figma monkey”. Designer is there to solve user’s problems. What’s the real problem that the task is supposed to solve?
A different approach is to have “an immune system”. Reject the task. Don’t assume anything. Ask questions to understand the actual problem.
The hybrid approach to transform the cooperation is accept tasks at first and gradually gain more understanding by asking questions.
UX project brief is a list of things to keep in mind at the beginning of a new project. Evaluate client, not every cooperation is worth it. Same for the project.
Intro to Our product
This is what we’re going to be researching and designing throughout UXWell.
Inspiration: As designers, we imagine the future. We’re all cyborgs. Our tools are disconnected. Tools should be simple. We still stick to paper and other metaphors for digital tools (folders suck). Bret victor.
There are valuable sources of information on the internet to be discovered similar to ore bodies in mining. We want to keep track of such places and easily retrieve them when needed.
Our internet browsers have history and bookmarks. There is raindrop, and other services (rip delicious).
We drew a concept map together.
Mentor introductions
Mentors were introduced. We were encouraged to schedule “a first date” to get a feel if there is a good fit.
Follow-up activities (1)
- Professional development plan
- Chapter 1 of DftDA (Goal-Directed Design process intro)
- Conceptual map and pre-mortem for Our product
Started meeting weekly with my mentor Tom.
Weekend session 2 (October 2023)
Prep activities (2)
Activities in preparation for Weekend 2.
- Coding basics (as in categorizing comments/observations, not to be confused with writing software code)
- Design hypothesis (rules, research questions/problems, write some for Our product)
- Research basics (Just Enough Research chapter 2, DftDA chapter 4, choose type of questions and write some that could be used for an in-depth interview)
- Behavioral attributes/variables (DftDA pages 247-252, video)
Types of questions
Excellent pick and choose question types from Validating Product Ideas by Tomer Sharon:
Sequence: A sequence of actions or an event is sometimes hard to remember. Keep that in mind and try to help your interviewees come up with steps while asking what happened next.
Example: Walk me through your day yesterday. And then what did you do next?
Guided tour: Have the interviewee be your guide, almost teacher, of a process, series of actions, achieving a certain goal, using certain products, etc.
Example: Can we take a look at your email account together?
Specific example: Asking about something specific will provide you with the little details that help you understand the interviewee’s behavior and choices.
Example: Who did you call from your cell phone earlier today? What did you talk about?
Quantitative/inventory: Usually, an interview held with a relatively small number of people is not a reliable way to gather valid quantitative data. That said, if you are aware of it, you can use quantitative questions to better understand the type of person you are conversing with (e.g., if the answer is 1 or 1,000, it might indicate two very different audiences).
Example: How many of your contacts fall into that category?
Changes over time: A year back is a long time ago and memory of details is not very accurate. Yet this is still a question that might help you understand your interviewee’s behavior and allow him to remember relevant stories.
Example: How are things different now than a year ago?
Reenactment: Rather than asking for attitude or opinions, this question encourages interviewees to show you how they behave, given a specific task. This is one of the best questions to ask during an interview.
Example: Please demonstrate exactly how you did that.
Three wishes: A great question for understanding current pain points. What really matters here are not the wishes but the reasons for expressing them.
Example: If you had three wishes to make this better for you, what would they be?
Validating Product Ideas by Tomer Sharon
Research basics
We shared our experiences with research. Research saves time, money and effort.
Terms:
- Research problem – a context (generally, what problem we want to address by doing the research)
- Research goals – areas of interest to be explored during research
- Research questions – questions to be answered through research (more granular breakdown of goals)
- Hypotheses/assumptions – very specific statements to be (dis)proven
There are many different research methods each one with its own pros and cons.
At the beginning, clarify timing, budget, people (who, when, what – responsibilities), form of the output, communication channels and sharing.
Work backwards: What do you need to decide and what data you need to make that decision? “We’ll estimate everything” isn’t a good approach.
Design hypotheses
We looked at some of the hypotheses from prep activities. Often, our hypotheses were too vague to be measurable.
The hypotheses used in UX usually aren’t scientific, instead they help us get from the problem to a solution. They are UX research hypotheses or design hypotheses.
Clients often request solutions rather than what’s the problem. It’s the designers job to ask questions and find out the real problem.
Hypotheses should be:
- Specif and clearly understandable for everyone involved
- Testable – we must be able to prove it or reject it
- Causal (includes cause and effect)
Hypotheses template we can use:
We think that <cause> , we will <effect> [because <reasoning>].
- We think – our assumption
- Reasoning is optional
Example: “We think that by adding a help prompt to the order form, we will increase the number of online orders because we will assist customers in overcoming concerns about online payment.”
Sometimes we formulate hypothesis first and then work our way up to the research problem. It can work both ways depending on the situation.
It’s unnecessary to finalize hypotheses during the workshop or call with a client (it takes some time). Sometimes, prioritization is required as there are too many potential hypotheses to test all.
During this session we also practiced writing research questions.
How to recognize our users?
We’re taking about behavior segmentation.
When we would want to open a shop, we would look at number of similar shops and alternatives nearby, shopping areas, number of potential customers, their income, family status, local culture, and so on. We would want to understand overall context of our users. For example, if we expect families we should provide shopping aisles wide enough for a stroller
How would we would define our target audience? What attributes or behavior would help us recognize users that would benefit from using our product the most?
Variables/attributes you can always start with:
- Mental models
- Motivations and goals
- Frequency and duration of tasks
- Quantity of objects
- Attitude towards tasks
- Technology and domain skill
- Tasks performed
We practiced writing variables describing UX Well participants. Keep in mind that variables must be clearly measurable (values or categories).
Once we have the data, we can start to see patterns emerge (people will show up together again and again).
In-depth interviews
It’s about going into detail, to understand why. We’re not merely talking.
Interviews are 1 on 1 sometimes with a 3rd person taking notes, and hidden observer(s). Interviewing 5 people from a homogeneous target audience should be sufficient.
Recommended length is 60min (max 90min as it can be quite draining for the responded) and moderator needs 30min break in between (usually spend on fixing unforeseen issues that always crop up).
Everybody lies. Observe non-verbal signals, ask follow-up questions to check for consistency.
The right interview method reduces impact of biases. There are many biases that can influence the research, keep them in mind.
Active listening rules!
Interviews can be both with an expert or target audience (sometimes one person can be both, we don’t know).
Lookback is a handy tool for interviews. It allows recording, taking notes and invisible observes.
Recruiting participants is tough – forums, recommendations, word of mouth…
Moderator uses a discussion guide to steer the conversation.
Discussion guide
Depending on a designer or context, each guide can look different. Some designers prefer very simple outline, whereas others prefer detailed guide.
Usually, it includes the research goal, date and names, introduction, questions and conclusion. It can also contain setup instructions, thing to keep in mind, lower priority questions if there is more time, and more if needed.
Examples can be found on User Research Library.
Discussion guide is based on previously established research (problem, goals, questions, hypotheses). It’s good practice to get it reviewed by a colleague and doing a pilot.
If there are too many questions, they need to be prioritized. We don’t want to go over the time limit.
When asking people about their experiences it’s recommended to ask about a specific event rather than what they usually do, as it tends to be more firmly imprinted in their memory (“last time you bought a car” vs. “when you usually buy a car”).
We practiced writing interview questions.
Our Product
During Sundays we apply what we learn and work on Our Product.
We came up with behavioral variables for potential users, discussed and organized them. Similarly, we prepared questions we would like to get answered by the expert.
We watched Petr prepare a discussion guide directly in front of us in preparation for the interview with an expert, then the interview.
Interview
It’s handy to use shortcut symbols such as “+?” or emojis as a quick note for any follow-up questions or important observations that might come up during the interview. Write down exact phrase they said to spark their memory when asking a follow-up question about it.
Take notes, recording tool might fail.
Find common topics, open up to respondents to build rapport.
Don’t invite the same people for another round of the interview, only for a different activity (eg. usability testing). You can learn more from new people.
Follow-up activities (2)
- Analyzed expert interview in Condens.io.
- Revisited behavioral variables – added a few more, grouped them and created scales for selected few.
- Revisited problem/research questions.
- In order to prepare for expert interview:
- read pages 118-148 from DftDA, and chapter 5 from Just enough research.
- watched 2 expert interviews from last year in Lookback
- created session guide
- Interviewed mentor as a dry-run.
- Interviewed expert.
- Watched Start at the End.
Weekend session 3 (November 2023)
At the beginning we discussed our expectations and previous activities.
Reflection on interview with expert
My top takeaways:
- Experts don’t always answer to “expert”. They might be hobbyists who are “just very enthusiastic about the subject”. Take that into account.
- Effective screening ensures that the participants meet the specified criteria.
- It’s recommended to use existing types of questions to reduce bias.
- Transcribing by hand takes time but ensures deep inspection of what was said.
Interviews should help use identify behavioral attributes and unmeet needs we can use for Our product.
Interview evaluation
- Operational tasks – handling transcripts and tools
- Analysis – coding using tags
- Synthesis – sense-making, behavioral patterns, filter tags
- Creating report – with insights
Code interview in multiple passes. Revisit already coded interviews to ensure consistency and identify patterns across respondents.
Watch out for interpretation of interpretation – you don’t want to play Chinese whispers with your findings! Stay as close to original data as possible. Provide a reference to the source (eg. respondent’s identifier).
Kryptonite irradiation is a playful approach to get stakeholders see user’s point of view and an experience of getting out of regular day-to-day work. Each stakeholder receives one user interview to code. It requires close examination and getting familiar with the user. Funnily enough, stakeholders start to quote “their users” instead of relying on their own assumptions.
Lessons:
- A team of researches should agree on codes and their meanings.
- Repeated research may yield no fresh insights.
- The findings from an extensive study can be divided and shared gradually to avoid overwhelming stakeholders.
We explored coding in Condens.io, a great tool 🙂
Variables/attributes for target audience
We expanded and discussed variables/attributes for the target audience of Our product. We tried identifying the ones that would make sense and brainstormed potential questions for user in-depth interviews.
We aim to find a specific unmet need and tailor design of Our product to fulfill it. A different approach is to copy competition (eg. MS Teams vs Slack).
Coding interviews
Recommendation is to tag skills, frustrations, goals and actions.
Skill is what they know or can do. Frustration is what problems they have. Goal is what they want to achieve and action is what they do.
Example:
- Goal: wants a nice flat
- Action: hang a picture, drill a hole, buy a power drill
Participant recruitment
Screener is a questionnaire used in UX research. People fill it out, and you can decide on those who are suitable for your study. The form can include basic info about the research, reward, interview times and other logistics to help potential participants decide if they want to participate.
Selected advice:
- It’s recommended to send SMS reminder to participants on the scheduled day.
- Plan for 10-20% of no-show, people won’t come for various reasons.
- There are people who routinely try to join all the different studies and give you the answers they think you want to hear.
- Provide all required information to a professional recruiter in advance so they don’t have to ask you any follow-up questions.
Follow-up activities (3)
- I tagged my expert interview in Condens.io and wrote a report with findings.
- We (product team) selected the most important behavioral variables.
- I prepared a draft of a brief for recruiter (as an exercise).
- I prepared a screener survey.
- I asked around for help in recruiting participants for user interviews.
- I scheduled and moderated two in-depth interviews.
- I reviewed and corrected interview transcript, and coded the interview in Condens.
- I created report with findings from the interview.
Weekend session 4 (January 2024)
Prep activities (4)
- Read about context scenarios in DftDA.
- Watched a video about Value Proposition Canvas.
- Read about quantitative research (CZ).
Expectations & reflection
- We discussed what we want to take away from this session.
- We agreed that weekly online meetings are incredibly useful.
Reporting on interviews
We shared what we found out during our interviews.
Attributes in interviews (Condens.io)
- We highlighted sections in interviews that included any potential target audience attributes.
- We placed all relevant highlights on a digital whiteboard and put them in segments.
- We had a discussion about it.
It’s recommended to work directly with unaltered data and to minimize interpretation (use whiteboard in Condense and original video snippets).
Intro to questionnaire surveys
Eva Kneblova introduced us to the basics of quantitative research, focusing on questionnaires.
Pros and cons:
- Advantage is you can ask many people, segment them and compare.
- Disadvantage is targeting only online population (85% in Czech Republic).
My notes:
- Questionnaire needs to be tailored to use on mobile phones (eg. types of questionnaires, and should aim at suitable audience).
- General questions “Do you go to the cinema?” or “Do you enjoy tourism?” won’t tell us much about the people. It’s better to ask more specific questions such as what movie genre they like or types of tourism activities they prefer.
- Watch out for skewed results due to only a specific group of people responding to the questionnaire.
- Similarly, keep the respondents motivation to fill in the questionnaire in mind (are they angry? are they curious about the results?).
- Structure the questionnaire so that different segments of people answer appropriate questions (questionnaire might branch and merge).
- Arrange the questions so that they naturally flow into one another and help respondents recall information more easily.
- Test the questionnaire on a small sample of the target audience first to avoid any screw ups. Or at least ask your friends/family/coworkers to roleplay their responses.
- Sensitive questions should be placed by the end of the questionnaire. Instead of asking for a specific number, let people choose a range (salary). Specify gross vs net salary.
- Begin the questionnaire with an intriguing question that captures respondents’ interest. They are curious about what types of questions are there. Save routine (and boring!) questions like name and age for later. If they lose interest, you might still get answers for the first few questions.
- While processing open-ended questions with AI works for English, it’s not as effective for Czech.
- Don’t ask for 2 things in 1 single questions eg. “Do you exercise and eat healthy?”.
For questions with ranges:
- Ensure that response options are well-designed to avoid clustering all respondents into a single category. It’s not helpful to have all respondents choose the same salary range bucket.
- Use CSÚ‘s ranges or industry standards to be able to compare data.
- Ranges shouldn’t overlap such as “18-30 yo” and “30-50 yo”. What would a a 30-year-old select? Use non-overlapping ranges eg. “18-29 yo” and “30-50 yo”.
We practiced writing effective questions.
Clarifying target audience attributes for Our Product
We selected first few attributes that should help us identify intendent user of the product we work on during the UXWell course.
We decided that our product should focus on users that will use it for work.
A couple of notes:
- Identify attributes first, create scales/categories and then place respondents. Avoid prematurely ruling out any respondents as non-target audience.
- Some stakeholders might have preconceived notions about the word “Persona”. Talk about “Familiarizing with a target audience in a structured way” instead.
- Having user guide us through their task can be more time efficient than simply sitting in the back and performing direct observation (field study). Watch out for observer bias (Hawthorne effect). Place yourself out of the way, blend into the background.
Value proposition canvas
We used part of the canvas to map out respondents’ pains and gains (staying as true to original quotes as possible).
This reduced form is great for talking with stakeholders without having to teach them the entire canvas first.
Context scenario
Use case, user story, or a job story are all ways how to describe system use.
In this situation, context scenario is the most suitable as it tells the story of persona and how they will user the product.
It should contain enough detail but stay away from specific design solution.
Follow-up activities (4)
- We (product team) agreed on 11 attributes/variables for mapping our interviewees.
- We placed interviewees on attributes scales.
- We grouped interviewees based on attributes scales and identified candidate groups that could represent our target audience.
Weekend session 5 (February 2024)
Sometimes, tools that designers use, like personas or scenarios, don’t help much and aren’t worth the effort. It really depends on the situation. Just like craftsmen choose the right tools for their work, designers should also pick the tools that best fit their project.
Prep activities (5)
- Read up on data model in DftDA (pages 428-433).
- Read up on requirements in DftDA (pages 322-331).
UX research reporting
We had a discussion regarding UX research reporting, and concluded that the level of detail required in the report is dependent upon its intended use.
For a small team, conducting a workshop can serve as the primary method to disseminate information. In contrast, for a large corporation, the report will be archived, necessitating that readers be able to extract all necessary information solely from the written document.
Report should include summary at the top. People who need more information can read further.
In-depth interviews iteratively
We talked about doing research iteratively. You might be interviewing 4 people one week, recruiting 4 more people 2 weeks in advance and changing parameters for recruitment 3 weeks in advance.
Our Product: Pains & Gains
We decided on primary target audience for our product and reviewed their pains & gains.
Brainstorming
In order to generate ideas that would help our target audience, we tried a few warm-up exercises to get the creative juices flowing.
The idea is to bring people to the state of mind where ideas flow freely. The goal is to generate as many ideas as possible.
“Yes, and…” – borrows from improv where people build on ideas of others without judgment.
Brick factory – imagine we have a lot of bricks, let’s get rid of them. Stupid ideas welcome.
Word association – just say whatever word that comes to mind and propose someone else to go next.
Real estate broker – people guide others through a space, where players create and justify objects without asking questions.
After completing the brainstorming session for Our Product, we used the Note and Vote technique to decide on the best ideas. This method ensures that decisions are not influenced by others. Participants first note down their preferred choices. Only after all have noted their favorites the votes are revealed.
Context scenario for Our Product
We revisited the topic of context scenario.
The story format is accessible to anyone making a great tool for validating with both SMEs and BFUs (Are they excited upon reading it? Great!). It helps to design faster, prioritize features, and get common agreement in a team. Once you have a scenario based on research you can use it for argumentation.
Both written and storyboard formats are possible. It only captures the happy path without errors. Usually, there are a lot of edge cases and it’s not worth the effort until the scenario is validated. Whether users use one option or the other isn’t crucial in the scenario (paying by cash or card).
It’s recommended to start with a basic outline of the story and having a clear start and an end. Coding “activity” in interviews helps in writing scenarios because you know what people do. Focus on specific pains & gains + ideas in the scenario.
We started writing context scenarios in groups for Our Product.
Requirements
What users need to do? What they need to know? Split context scenario into sections and for each write down functional and informational requirements.
Don’t copy what the scenario says, imagine the situation and what is required of the product to provide (function, information).
We tried this on an example and for Our Product.
Data model
What information is gonna show up in UI?
Sources for data model are numerous: interviews, scenarios, mental models, reality, competition, domain expertise…
Use this to inform developers about the information they need to store and how it relates to other data.
A piece of information doesn’t need to an object or attribute (eg. app settings option).
The cardinality of objects inform the choice of UI elements. Some design systems provide recommendations based on the “shape of data”.
We practiced writing down data model for Spotify.
Jan Kubec
Jan told us about his experience of improving POS system. Here are some ideas that resonated with me:
- The mindset: help the business, don’t push the correct UX way.
- There is never enough time to do the things the right way.
- Portable camera is great for field observation (eg. measuring time on task).
- Make friends, and ask them what sucks so it can be improved.
- Transparent communication with stakeholders, show work in progress for early feedback.
- Design artifacts are just tools for communication.
- Set expectations that final product might not look exactly like the design.
- “We know this sucks, but tell us what’s right with it.” – and critics can’t object anymore.
- Ask questions they can’t answer so they’d have no choice but to let you talk to actual users.
Follow-up activities (5)
- We (product team) revisited pains and gains to gain a shared understanding.
- We agreed on certain characteristics of the target audience.
- I read about personas in DftDA on pages 265-274.
- We selected certain ideas for our product and omitted others.
- We came up with outline for a context scenario.
- I skimmed through Adaptive Path’s guide to experience mapping.
- I sketched a simple experience map.
- I wrote a context scenario with persona, experience map and ideas for our product in mind.
Weekend session 6 (March 2024)
Prep activities (6)
- I read about Petr’s procedure of collecting inspiration (clipping screenshots of state-of-the-art on the platform, competition, interfaces that handle the same entities; annotating screenshots – what will and will not work for our product and why).
- I watched a video about The Design Studio Method.
- I read about interaction framework in DftDA on pages 425-426.
- I read about key path scenarios & functional element grouping in DftDA on pages 451-455.
Materials for next steps
What do we need going forward? Persona, context scenario and data model.
Persona
We highlighted goals and problems of our product’s target audience. The value proposition template provides a concise structure for it:
People have goals on various levels, from life goals down to minor tasks. We should focus on goals on the appropriate level where our product can assist them.
Context scenario
Context scenario can include repetition. Some activities may occur more than once. It’s beneficial to describe how the same activity is performed under different circumstances.
Data model
Warning: If your project consists solely of a data model, you might end up creating just a “database viewer”. This means you’ll end up with a UI that shows a list of objects and a detailed view for each type. The importance of context scenarios lies in their ability to illustrate the activities being carried out and how they can guide the interface design to support these activities effectively.
Interaction framework
Let’s design a basic structure of the product.
Write key path scenario
Take a context scenario and transform it into key path scenario by including functional elements (chunks of UI) that will fulfill requirements/needs.
Context scenario + requirements/needs + functional elements:
Key path scenario:
In case of a physical product, functional elements might be physical parts.
Group functional elements
Use the scenario to group functional elements. What elements are most often used together?
Collect inspiration
Gather and critique ideas from various sources.
Sketch
Create sketches of different screens.
Tom Koliba
We had an interesting interlude to our design process. During a fireside chat, Petr and Tom discussed how they tackle design at Oracle Netsuite.
I’d highlight Redwood, an Oracle design system, especially the storytelling framework, a guide for convincing people that the design concept is the best place to start solving a user problem. Will come in handy!
Collecting inspiration
It’s not just about collecting great pics and stacking them together. An active approach offers much more value.
For each piece of inspiration, mark the parts that catch your eye. Note what would work, what wouldn’t, and why.
You can start picking bits and pieces for your product and you won’t have to remember why a particular picture caught your eye.
Sources of inspiration:
- Reviews
- Similar products
- Competitions and awards
- Interface libraries
Timebox this activity. It could stretch on indefinitely, and additional time invested will yield diminishing returns.
Design principles
Klara introduced us to various principles that designers should keep in mind while creating designs.
Norman’s 7 principles
These are the principles from Norman’s book The Design of Everyday Things.
Discoverability – the ease with which users can find what actions are possible and how to perform them. Discoverability results from appropriate application of five fundamental psychological concepts: affordances, signifiers, constraints, mappings, and feedback.
Affordance – Determines what actions are possible both by object properties and abilities of a person (animal/robot/agent) using it. Glass affords looking through.
Signifiers – Indicators or a signals such as sign, label or drawing. Signifier communicates where the action should take place. Door has a handle.
Constraints – They limit the set of possible actions. There is only one way to plug in a USB Type-A connector.
Mapping – How controls correspond to the actual thing. A layout for light switches and lights.
Feedback – Response of a system to an action. Press an elevator button, and it lights up to let you know your input has been registered.
Conceptual models – Simplified explanations of how things work. Users know break pedal slows down the car without needing to understand complex mechanics of brake pads, hydraulic brake fluid, or the electronic systems involved in the process.
Jacob’s 10 heuristics
Here are Jakob Nielsen’s 10 general principles for interaction design:
5 Visual-design principles
The principles of scale, visual hierarchy, balance, contrast, and Gestalt.
Gestalt principles
Gestalt Principles are principles of human perception.
Laws of UX
Laws of UX provides an excellent overview of all the different principles, heuristics and biases that play a role in designing user experiences.
Relationships with developers
We spoke about how crucial it is to establish and maintain relationships with developers. We discussed striking a balance between advocating for changes when they are essential for users and, in certain situations, letting go to preserve the relationship.
Chocolate might help.
Design studio method
The Design Studio method is an excellent approach for generating and iterating on ideas, and gaining buy-in from stakeholders. It is a collaborative process that involves developers and other stakeholders, leveraging their collective knowledge and expertise. It consists of several rounds, each timeboxed.
On the other side, it’s not easy to advocate for, organize, prepare and facilitate. Facilitator doesn’t have a capacity to participate themselves.
We used design studio method to ideate 3 ideas for our product.
Preparation
Participant list requires a thoughtful consideration. Who to invite and what to tell them?
A clear goal is needed and it require materials (persona, context scenario, data model, inspiration…).
Participants receive materials and are given enough time to review, ensuring they are familiar with the context and requirements. Individuals are organized into cross-functional teams to promote diverse perspectives.
One neat trick is to provide participants with dull pencils to prevent them from drawing unnecessary details. At this early stage, it’s too soon for details. The focus should be on developing broad concepts.
Warm up
Warm-up exercises can help frame the activity in such a way that people won’t spend too much time perfecting a single idea. Design studios encourage participants to generate numerous ideas that may be half-baked and far from perfect—and that’s perfectly okay! Once the good ones are selected, they can be further improved upon.
What’s the best way to kick off a design studio workshop? Elephants! 🐘
- Draw an elephant in 20 seconds. Looks good?
- Now you have 10s. Acceptable.
- Do it in 5 seconds. Brilliant. 🤣
Alternatively, ducks can work as well.
Time pressure helps combat the blank page syndrome and forces people into drawing stuff. Any stuff. Fast.
Play background music to aid participants in focusing and to keep them aware of the passing time.
Rounds
For the first two rounds, allocate approximately 5 minutes for designing and 3 minutes for pitch/feedback for each participant.
In later rounds, the design phase can extend to 30 minutes or more, with 10 minutes allotted for pitch/feedback.
The facilitator should keep the time.
First round
Participants work individually to sketch out ideas. Each member then pitches their ideas to their team, receiving feedback.
Second round
With the feedback in mind, participants refine their ideas, possibly stealing concepts from teammates. Ideas are pitched again within teams for additional feedback.
Third round
The third round focuses on the team developing a collective approach to the problem. Teams share their ideas with each other and gain insights through feedback.
Fourth round
For further refinement of ideas, a fourth round follows the same collaborative approach as the third round. The downside is that it takes additional time.
Feedback rules
Feedback must be specific and non-personal, and should not propose solutions.
Participants should avoid giving feedback that is simply ‘I like it’ or ‘I don’t like it.’ Instead, the focus should be on whether the idea helps the user achieve their goal and the reasons why.
Participants are encouraged to share their thoughts on what would work, what wouldn’t, and the reasons behind their opinions. This feedback process resembles the approach taken when collecting inspiration. Facilitator can show examples of pics with marked feedback.
Pitching should be distinctly separated from feedback. However, participants may pitch each small idea and receive feedback before proceeding to the next. There’s no need to pitch all ideas in one go.
Facilitator should help participants follow these rules because inexperienced participants are likely to propose solutions. Seasoned participants can get proper feedback by asking follow-up questions.
Paper prototyping
The prototype is the cheapest artifact you can create to validate an idea.
Prototypes of different levels of fidelity are suited for testing different things. A simple sketch may be sufficient to validate a concept, structure or layout. To test an idea for a videogame, you might need to develop a working interactive digital prototype that includes all elements of the game.
At the same time, different tools are suited for developing prototypes with varying levels of fidelity (whiteboard, pen and paper + scissors, digital paper tools such as Concepts app or Remarkable tablet, Figma, code).
Prototyping with pen, paper, and scissors offers several advantages. By cutting out pieces and interchanging them, you can simulate interactions and swap parts based on feedback without the need to redraw everything. This method is fast, enabling quick iterations. If you’re in the same place as your users, it allows for rapid testing of various ideas.
When testing, offer users specific goals and let them handle these by themselves.
Both the design studio method and paper prototyping involve design work without the use of a computer 😊.
Weekend session 7 (April 2024)
Prep activities (7)
- Product team finalized context scenario and data model for our product.
- Product team prepared interaction framework of the product.
- I read How to fix a bad user interface about 5 UI states (blank, loading, partial, error and ideal states).
- I watched Klara’s Figma tutorial (p1, p2):
- Hold space while moving a a layer to keep it in frame.
- Hold shift when multiple layers are selected to enable alignment controls with frame and not the selection.
- Shift+G shows/hides layout grid everywhere.
- Layer constraints work not only with frames but also with layout grid.
- Use sections and frames to organize components.
- Detach style to quickly check the actual value (and undo to put it back).
- Layer is highlighted on hover on all the frames it appears in the prototype .
- Photopea is a Photoshop plugin inside Figma.
- Blobs plugin makes random blobs.
- BlendingMe plugin interpolates between two layers to create interesting visuals.
- Use quick actions (Ctrl+P) to change nudge amount. Big nudge is 10 by default. You might want 8 for 8px grid.
- Prototype has ‘Scroll to’ animation.
- Constraint ‘Left and right’ keeps the same sides of the frame. Same constraint can be used with layout grid to simulate responsive layout.
- Use canvas stacking from advanced autolayout settings in combination with negative gap between items.
- Component properties make for flexible components (show/hide buttons, pre-select list of icons, change text easily).
- Figma provides playground files such as Component Properties Playground.
- I tried Radix Themes UI kit.
- I watched and read Bret Victor.
Radix UI
As a practice, each of us recreated a screen using Figma components from Radix UI kit.
Handy Figma shortcuts:
- Shift+a autolayout
- Shift+i resources (useful for finding Radix components)
- Shift+Enter select parent layer
We talked about states of UI: empty, loading and error. Afterwards, we practiced making them in Radix:
One way to put items on left and right side is to use autolayout with auto gap and width set to fill:
We used component properties feature to edit text inside component without having to drill down inside the component:
Multiple components (not their instances) can be combined as variants. Paste to replace is useful when putting replacing placeholders inside components or layers (works with multiple objects as well).
We used Radix UI to create first pieces of our product’s UI.
Usefulness testing
In contrast to usability testing that focuses on how is to using the product, usefulness testing is if they would even use it in the first place. This why it makes sense to perform it in the discovery phase.
Technology acceptance model shows us how people use products and the impact of perceived usefulness:
A set of questions gauge the perceived usefulness of a product in a quantitative manner which is helpful when stakeholders require numbers:
These questions can help us understand what makes product “useful” – accomplish tasks more quickly, improve performance, increase productivity, and so on.
Usefulness testing in practice
To perform qualitative usefulness testing prepare a few key screens in any level of fidelity so that participants would understand what’s the product about (marketing materials such as screenshots could work as well).
At the beginning, provide participant with a minimal info as not to influence them.
Questions to ask participants:
- What is this?
- What would you use it for?
- What needs to change to make it more useful to you?
Usefulness testing is fast and easy, and can be performed alone or in combination with other methods such as in-depth interview depending on a situation.
We tried a fun exercise in small groups. Each group prepared a custom-made app for someone from other group and then we tested its usefulness.
Survey analysis
Vojta showed us a few examples how to use statistics when processing responses from questionnaires (comparison of proportions calculator, statistical hypothesis test, cumulative histogram).
I don’t understand it well enough to explain it here, yet.
Design systems
Petr, Julius and Klara shared their experience with design systems. I extracted some key lessons.
New design system
Don’t create a design system in the hope that people will use it. They won’t.
Instead, identify common components that require a non-trivial amount of work, and facilitate discussions on how to share code and reuse components across products. People like this because it saves them work.
Design systems shouldn’t be bloated with all possible variants of the same component. Only the most common variants should be included.
Onboarding
Onboarding new people to a design system is an important part of working with it. Designers should use existing components if possible instead of coming up with their own because it saves development time.
Semantic tokens help guide people to a proper use of values. A name like ‘button-brand-color-background-active’ makes it clear when to use it, as opposed to ‘primary-red’ or even ‘#ff8080’). Only the semantic names should be available to design system users.
Usability testing
Kaci walked us through preparation and conducing of usability testing to prepare us for the 8th weekend session.
Create a list of all the little activities and tasks necessary. Assign yourself and colleagues as needed. Want to improve in usability testing? Focus on particular activity or task.
Refresher:
- Goals = What the clients needs to achieve
- Research questions = What do we want to find out
- Hypotheses = We believe that…
- Questions in the scenario = How we will ask so we find out what we need
Most common questions for usability testing:
- Are they able to find information and understand it correctly?
- Are they able to discover a feature and use it without problems?
- What issues prevent participants from finishing a task?
Usability according to Nielsen and Norman:
Usability is defined by 5 quality components:
- Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
- Efficiency: Once users have learned the design, how quickly can they perform tasks?
- Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
- Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
- Satisfaction: How pleasant is it to use the design?
Participants recruitment is more or less the same as with in-depth interviews. However, the session guide is different. It’s more specific because it involves testing a particular prototype and includes tasks to be performed. Participants give hands on feedback for specific elements of the prototype instead of talking freely and broadly.
To create a session guide, proceed iteratively, gradually adding detail. Provide instructions in the language of the user, not the system (say “send a crystal vase about the size of a wine bottle via post”, not “send fragile 30cm tall item via post”).
Webpage with great resources about usability.
We brainstormed what we want to test during the usability testing of our product.
Weekend session 8 (May 2024)
Session 8 was all about usability testing.
Prep activities (8)
- We (product team) prepared a prototype for usability testing. I made one of the components in Figma.
- Product team recruited participants and prepared session guide for usability testing.
Why usability test
It helps the team to make a better product. Users will have fewer problems and send generate fewer support tickets.
It doesn’t make sense to test the usability only to report the findings without taking the action to improve the product.
Even a small testing with just 2 users to reduce the risk of going the wrong way is better than none if you’re pressed for time and don’t want to slow down the development.
Session guide for testing
Start by asking questions to gauge their situation in relation to the product. Understand why different participants use the product in different ways. Relate their attributes to their actions. Try to see the product through their eyes.
Whatever you tell them about the testing at the beginning is what they’ll expect. Make it clear. Set a right mindset of using the product to complete usability tasks, not just talking about how would they use it in theory. Make sure the prototype makes it possible to complete said tasks.
Do a reflection at the end with questions such as:
- “How would you describe the product to the friend of yours?”. They will tell you how they perceived the product.
- “What was the most difficult for you?”
- “You got 3 wishes. What would you change to make it more useful to you?”
- “What would you like to say to the people who make the product?”
Sometimes you won’t write the session guide yourself. You need at least 30min to get familiar with it and tweak the phrasing to make it sound like you.
Roles
- Moderator
- Observer and notetaker
- Stakeholder
Severity of usability issues
Low severity ! (marked with s single exclamation mark)
Small problems that don’t discourage participants from completing the task and might delay them up to tens of seconds.
Medium severity !!
Problems that cause longer delays (1-2min) and don’t prevent participants from completing the task, including instances where participants overlook something important that can cause issues down the line.
High severity !!!
Problems preventing participants from completing a task or requiring moderator involvement. Situations where participants believe they have completed the task when, in fact, they haven’t, or instances of misunderstanding the product.
Note on testing in person
The way moderator and participant sit during the usability testing in person is important.
Take into account participant’s field of view. You don’t want sit in the direct line of sight and take away attention from the product.
Respect their personal space: don’t sit too close (varies between cultures).
Notetaking styles
The usefulness of each depends on the context. For example, I didn’t even try to use sticky notes on a small laptop screen when more than half of it was occupied by the participant’s screen share.
Sticky notes
Add sticky notes or comments on a canvas with prototype screens. The good thing is that it’s very visual, and the comments are right next to the screen elements. However, it’s harder to evaluate as a whole because there’s no filtering and the sticky notes are all over the place. Additionally, it might take time to place the comments in the right spots.
Rainbow spreadsheet
Observations are color-coded to represent different participants. The advantage is being able to quickly reveal patterns and insights. This makes it easy to prioritize problems. On the other hand, it requires having clearly defined parameters for when to check participants’ columns. The fastest to fill during the testing.
Structured table using platform like Airtable, Coda…
Note each observation directly in the table, add columns with desired parameters such as issue severity. The easiest to filter and analyze. Smart platforms can automatically add columns with the notetakers name, timestamps and more. It can be a bit slow to take and label each note during the testing.
Naturally, plain old pen and paper or a simple text-taking app might be the best in some cases. It’s the fastest way to take notes. However, it requires analysis afterward to organize and extract actionable insights.
Best practices
Be wary of what participants say and focus instead on their actions. There is often a discrepancy between the two, which people may not be consciously aware of.
Watch out for first impressions: first reaction can be misleading. Observe how they evolve over time.
Extreme reactions, whether positive or negative, often do not represent the target audience. Focus on common patterns.
Participants might request a feature they expect to use, but that doesn’t guarantee they will use it once it’s implemented. Instead, focus on the reasons behind the request: what circumstances or situations lead them to believe they need this feature?
Interpretations can be misleading. Focus on what participants actually did, not what they didn’t do. Don’t jump to conclusions at this point. Merely note down your observations, don’t interpret them.
Lessons from usability testing
We performed usability testing of our product.
The Czech word “maketa” (“mock-up” in English) nicely illustrates the prototype’s limitations to the participant.
Make the content of the prototype relevant to the participant including the language. There are plugins that make it easier to swap text and images.
Hide prototype hotspot hints (blue highlights in Figma).
A good way to achieve team alignment is to engage developers in usability testing as observers and ask them to identify the top three usability issues.
Usability testing can uncover additional attributes of the target audience.
Reporting
Handy structure for reporting:
- We observed…
- From this, we infer that the problem lies in…
- The cause is…
- That’s why we suggest…
Here is that structure applied to a major issue we identified:
- We observed that participants confused folders of links with individual links.
- We infer that the problem lies in the lack of understanding that folders are created automatically to store links, which are also saved automatically.
- The cause is that participants don’t expect this behavior.
- We suggest to modify the automatic saving (eg. notifying the user when links are automatically saved to folders) and provide an option to save links manually.
Weekend session 9 (June 2024)
The final weekend session of the course!
Prep activities (9)
- I wrote a reflection about the course, my expectations and how it went.
- I jotted down a few details about a change I’m thinking about.
- I remembered a conflict between myself and another person.
Change
Petr introduced a handy set of questions to ask yourself when you’re dealing with a change:
1) Why make the change?
- What is your motivation?
Understand the current situation (and where you want to get):
- What do you know about it?
- When did it start and how/why?
- How it makes you feel?
The end goal of a change shouldn’t be an output (eg. make a presentation) but rather an outcome (eg. develop a shared understanding in the team).
A short story of the current situation and a postcard from the future can help you sell people on the idea of making the change. Postcard is written in the present tense as if you were already in the future describing the current and improved situation.
3 aspects to consider:
- What procedures you do and how, and what are you going to do differently?
- What skills you have and don’t have? What do you need to learn / hire?
- What tools are part of the change? What tools will ease the change?
2) What people are involved?
- Are your interests aligned?
- Who drives the change?
- Who’s interested?
- Who’s impacted and how?
- Who’s not impacted?
- Who’s on your “team” realizing the change?
- Who’s passive regarding the change?
- Who’s publicly opposing the change?
- Who can help?
- Who do you report to?
People’s motivation to work on the change themselves is important because “You can lead a horse to water, but you can’t make it drink.” (except Chuck Norris).
Clarify you role:
- What is your role?
- How others perceive it?
- What is your capacity for the change?
- Do you have enough time to make the change successful?
- Doesn’t it even make sense for you get involved?
3) What’s the first milestone of a successful change?
To celebrate first win and validate the right approach. How can you show the change is going well?
Again, consider 3 aspects:
- What is the smallest change to procedures we want to make? What’s going to stay the same?
- What skills and level of expertise we need to learn? Can we learn it easily?
- What tools we need immediately? What can wait?
4) When is the change completed?
To stop pushing and reach satisfaction. It can be difficult to know when to stop 🙂
Nonviolent Communication
We had an interactive session about the nonviolent communication (NVC) with Helena.
There are layers of social conditioning we follow. Work on uncovering the original you to find your true needs.
You and them
NVC employs active listening. However, we must make room for ourselves to stay true to our own needs, Yes, pay attention to others but don’t lose yourself. Stay centered, remain aware of your own body.
It’s their world so keep a distance. Don’t get swept up by your own, potentially violent, emotional reaction. Separate what you know from what you assume.
Closed questions
Short closed questions don’t disturb the speaker. They allow us to quickly check if we understand what the speaker is saying. However, they aren’t suitable to uncover more details.
Declarative sentences, especially those indicating a lack of understanding, can lead to conflict because they demonstrate you haven’t listened to them at all! If you find yourself declaring something by accident, end the sentence with something like “…isn’t it?” or “…do I understand correctly?” to change it into a question.
Don’t blow up
Are you in a difficult situation? Is it somewhat tolerable, so you’re doing nothing about it? Clear things up, communicate your needs, and move forward. Sure, it’s risky, but do you really want to stay in this hell and risk blowing up one day?
Ethics in design
We discussed ethics in design using a fishbowl format. Here is a quick overview of what we talked about:
- Would you design an electric chair?
- There is no hippocratic oath for designers.
- If unsure, open a discussion about ethics with your colleagues.
- Consider reputational risk in your career (gambling, adult industry…) and how comfortable you are talking about it.
Design career
Martin shared his experience, and we discussed the spectrum of design roles, importance of soft skills for designers and compared working in different types of companies. Courses are great as a networking opportunity.
Reflection
My expectation was that the UXWell would help me find a job as a UX Designer, and it did!
The knowledge and skills I gained during the course have given me the confidence to work independently as a UX Designer, including the ability to perform a small-scale research by myself.
Tom‘s mentoring accelerated my personal growth and greatly improved my chances of landing a job.
I enjoyed having classmates and working on projects together. It beats taking any online design course alone.
A big thanks to Petr, Zuzka, Tom, all the lecturers, and my classmates for making my UXWell so awesome!
Celebration👑
At the end, there was a cake (no lie!), some tears, and a certificate.
Leave a Reply