UX Week3 assignment Usability Testing

Homework — Assignment Week 3

A. Write up your field notes from today’s experiments — the 5 second test, your using and brainstorming to-do session, the Heuristic Inventory form, and your after engagement reflections.

  1. The 5 second test
  • What is it:

The 5 second test reveals users’ first impressions and gut reactions to designs of an app. It’s a quick and useful tactic for improving UX. The targeted participants are shown each design for just 5 seconds. After the strictly timed 5 seconds, the design is hidden and participants are required to describe what they see or what they think the purpose and pattern of the design is. Designers should analyze results to see if the intended purpose and message are expressed clearly in just 5 seconds of viewing the design.

Also, they need to look for problems of different users who interpret it differently and may need to redesign some elements after the test.

  • Prior

At the beginning of the class, I doubted whether 5 second test could test the users’ understanding of the purpose and main message in the design of an app in such a short period. I believe, especially for non-native English users, they need lengthy time to understand the foreign language and functions of different buttons, images, or labels.

  • During

Luckily, the minimalist design of the prototype app built by ChatGPT has no technical jargon and no distracting elaborate design with only 4 buttons named Add, Delete, Complete, Sort, and a blank box where users can add a new task.

But it was very confusing to me as I had no clue about the purpose of the prototype app without a bolded or colored title.

As a visual learner, I think the combination of blue, white, and dark colors in the interface seems quite dull and unattractive. I think more contrasting colors can make the design more appealing to users who may be used to scrolling through a variety of colored images on the website and have high expectations of the strong visual effect of the interface of the app.

 

  1. Using and brainstorming to-do session
  • Prior:   
  • Do you use To-do lists? How often?

I use a pen to write ToDo lists on a daily basis because as a procrastinator whose life is very chaotic and overwhelming, I need to jot down what I need to do in learning, teaching, and personal life to help me externalize the main goals per day and prioritize what is significant and less significant. This can help me dampen my sense of anxiety and improve time management skills and efficiency in work, life, and study.

As a person who is not versed in memorizing, to do list with specific tasks allows me not to occupy much space in my mind to recall and avoid long-term cognition overload and can help me more focused on the current moment.

After I cross out some stuff that I complete, it gives me a sense of achievement and self-satisfaction and I am willing to finish more tasks next time.

 

  • Do you think your prior experience might influence your analysis of this tool?

Yes, my previous experience might influence my analysis of this tool. Because I am used to using to-do lists by handwriting, I am more interested in finding out whether the online to-do list tool is more doable, user-friendlier, and clearer to users than the handwriting version.

 

  • During &After
  • How well did it work for me?

1). The tile Todo List which is bolded and larger than the other element makes me clear about the purpose of the tool and knows what to do next in the tool.

2). The basic buttons of add and delete are doable. These meet the basic expectations on the to-do list.

3). The minimal design without any image makes the users focus on the function of the tool rather than wasting their time browsing unnecessary pictures.

 

  • How would make it better? 

1). Make the button “sort” doable and cause no trouble.

This “sort” button cannot work at all when I click on it. I think when users click on or drag one button on the website, they will feel very frustrated and add to their anxiety when they cannot have control of it.  Thus the “sort” button can add some subtasks like “work, study, family” to make it more obvious to the users and let them categorize their different tasks on the list.

2). Add one button called “prioritize”.

The user aims to have a more well-organized life using to-do list. So, they should decide which one is the most important task and needs to be done first and which one is less significant and can be accomplished later. Our brain loves ordered tasks so allowing the users can prioritize the task can make the overwhelming list more structured and help users to have a more productive day.

3). Add one “expected time” button.

Let the users type their expected period to finish each task. Otherwise, the to-do lists without expected time may be just like wish lists and the users lack motivation and do not have the urge to accomplish each task in a fixed set of time.

4). Make the color and design more visually appealing.

Bombarded with colored information on the website, the users may lack interest in such a plain design and need a more eye-catching to-do list with wonderful color match.

 

  1. The Heuristic Inventory form

The Heuristic analysis is a usability test that measures a pre-production app against industry standards.

  • Prior:

I am very curious about 10 usability heuristics because I think it is very hard to find a systematic way to analyze the usability of a tool.

These heuristics by Jakob Nielsen provide broad guidelines and principles for designing usable interfaces. They are useful criteria to assess and improve the overall usability of a system.

 

  • During:   
  • Visibility of system status – Keep users informed of what’s happening through feedback and status updates.

(Not sure. The to-do list on Dr. Pullman’s website can show some elements visibly but the users may not know status updates as they have no notification about the updates of this website. )

  • Match between system and real world – Design should reflect the user’s familiar language and logic.

(Yes! The to-do list is easy to understand with plain language in a natural and logical order.)

  • User control and freedom – Provide clear exits and undo options.

(No! I do not think the to-do list has a clear exit and undo button.)

  • Consistency and standards – Follow conventions and maintain consistency across interfaces.

(Yes, I believe the users do not need to wonder whether different words, situations, or actions mean the same thing in this simple to-do list.)

  • Error prevention – Careful design to prevent errors before they happen.

(No, I do not see a good default for slip prevention and undo button for mistake prevention in the to-do list.)

  • Recognition rather than recall – Minimize user memory load by making elements and actions visible.

(Yes, I can see what I have already typed in the blank and I do not need to remember information)

  • Flexibility and efficiency of use – Allow for customization to enhance expert use.

(No, I do not think this tool provides personalization by tailoring content and functionality for individual users.)

  • Aesthetic and minimalist design – Avoid irrelevant or distracting elements.

(Yes, the to-do list just focuses on the essentials and does not contain information rarely needed.)

  • Help users recognize, diagnose, and recover from errors – Provide good error messages.

(No, the to-do list seems not to offer users a shortcut to solve the error immediately.)

  • Help and documentation – Make help easily accessible, and focused on user’s needs.

(No, the to-do list cannot provide documentation to help users understand how to complete the tasks.)

 

  1. After engagement reflections.

There are several things I have learned from the class engagement.

The most important thing is less is more in the design. From the 5 second test, I find that the first impression of an app is very important to users as they will decide if they want to use it or not from the gut. If UX designers want to design a wonderful interface, it must be simple but effective, focused on the essentials without too many extra elements. Just like Steve Jobs’ presentation slides at a special Apple event at San Francisco’s Moscone West, his slides had extreme visual simplicity with a few words and simple diagrams but they were very effective and intuitive to the audience.

Besides, there are several steps when we conduct usability tests in UX.

1)Define the audience and their goals.

The first thing UX designers should do in a usability text is to figure out who the site is for. In class, we are convenience sample that is a subset of a population chosen simply because we are available in UX class and can share our opinions about the to-do list. But in reality, convenience samples cannot stand for a wider range of users so we should ask:

  • What nouns and adjectives describe the people who the designers expect will use the product or service most often?
  • What differentiates them from everyone else?
  • Is it their age, their interests, their problems? Maybe more.
  • Next, designers should figure out what the key product features are.
  • Why are people going to use it?
  • Why is it valuable to its users?
  • We should use some short keywords to describe our main product advantages 

2) Create Tasks that address those goals.

Write down the most important functions of the site. For example, for the to-do list website, the most important thing for people is to add a new task, mark the task as complete, delete a task sort the task and save the task locally. So the designer should reflect on whether their prototype can do these functions successfully. If “sorting” the task is not achievable, designers should redesign it.

3)Get the right people.

The fastest way to get the users is through the people designers already know, such as their friends, coworkers, classmates, and families. But designers should make sure they are the people who have the needs to use the product and services and they are not familiar with the product and are unbiased with it.

4 Practice suitable usability tests, watch users try to perform the tasks, and have field notes.

5 Reflection after the usability test.

When different kinds of usability tests like 5 second test and heuristic analysis are over, the designers should ask these questions to reflect:

  • Did the users know what the product was for?
  • What worked well? What didn’t?
  • Did users do what designers expected them to do? If not, what did they do?
  • Did users do things in the order in which designers had expected? If not, in what order did they do them?
  • What did users find interesting?
  • How many tasks were they able to do? Which one gave them trouble?
  • When did they look frustrated? Confused? What were they doing?
  • Did the site meet their expectations? If not, where did it fail them?
  • Do designers know what their expectations were?

When designers have outsiders view their products, they can think about whether they should improve their sites, the ways to fix the problem, and who they can work with.

 

B. Use Figma or Canva or some other mockup tool to mock up a better to-do list tool, where “better” means what you think is better.

I use Canva to design a mockup to-do list. I think it is better because it can meet the user’s other core needs in to-do list such as keeping a record of the date and expected time for each task, ranking the most important task to the least, sorting the task into different categories (work, study, and life) and supporting undo and retrieve. In the table, at first sight, there are 5 tasks they can fill for I do not want the to-do lists too lengthy and overwhelming, which may discourage the users from accomplishing them. So I just want them to think about the most important 5 tasks they need to do in one day. If the users prefer to add more tasks except for the 5 ones, they can also add them at the bottom of the table. Due to the color psychology, I prefer my warmer color choice in the design because I think the creamy and pinkish colors can make users especially anxious users like me feel more delighted and motivated to finish the to-do list than the dull blue one. However, my to-do list also has some downsides, like lacking flexibility and customization.

UX Research&Writing Week1 Assignment

* Assignment A. Read the Cases section of this website, spend some time reading and looking at each example case and thinking about what characteristics they have in common.

From the case studies provided by Dr. Pullman, I find almost all case studies include some key steps in design thinking especially in Haven Self Care Meditation App UX UI Case Study and Redesigning Airbnb for the new normal — a UX case study.

  • Why do we need to care about design thinking?

In the business world filled with complex and varied problems, we need to find a simple and useful way to tackle problems. The design thinking process provides a method and a unifying language for multi-disciplinary collaboration, leading to greater creativity and better solutions for problems faster.

  • What is design thinking?

Design thinking was first written by a Stanford Professor named John E. Arnold in “Creative Engineering” (1959). Design thinking is a human-centered approach to problem-solving that is used to create innovative and effective solutions. It is a process that focuses on understanding the special needs and perspectives of the end users, identifying the underlying problems, and exploring and testing different solutions.

When it comes to UX design, it can help designers create products that are intuitive, engaging, and user-friendly. Design thinking in UX design involves 5 stages:

  • Empathize: Learn about the end user and their specific needs, abilities, and challenges.
  • Define: Pinpoint the specific problem being addressed.
  • Ideate: Generate diverse ideas to address the problem.
  • Prototype: Build a rough model to generate discussion and feedback in order to further refine a design.
  • Test: Solicit feedback from end users.

NB: This process is meant to be a continual, cyclical process of improvement rather than a linear set of steps.

  1. Empathize

The first stage of design thinking is to empathize with the users. This involves understanding their needs, goals, and pain points. This includes consulting experts on the matter, engaging further into the issue to better understand the problem at hand, as well as working on the issue as a group to have a deeper comprehension of everything that is involved with the problem. The stage allows Design Thinkers to gain insight into the needs regarding the issue along with setting aside their personal assumptions regarding it. A substantial amount of information is gathered during this stage and is carried on to the next few stages to help define the problem and understand how to deal with it.

It can be done through user research, surveys, interviews, observation, and competition analysis.

  1. Define

The next step is to define the problem. The designers are putting together all the information they gained during the Empathize step. Essentially, they will analyze their data and put them in order to better concrete the problems. The stage will help the team gather great ideas and be able to understand how to use them effectively.

This involves framing the problem statement, setting goals, and identifying the scope of the project.

  • User Persona:

It is commonplace to set up a user persona in the second step. The purpose of creating user personas is to better understand the users of a product or service. A user persona is a fictional representation of the target audience based on user research that encapsulates their goals, behaviors, motivations, and pain points. It is based on qualitative and quantitative user research, not assumptions, and can represent a segment of their target audience instead of individual users. It usually includes demographic information like age, gender, and location and conveys relevant behaviors, attitudes, and motivations. The designers usually give the persona a name and photo to make them appear realistic.

  1. Ideate

Design thinkers start to use the information from the previous stages to generate logical ideas. The team will start to make ideas that may be “out of the box” or perhaps just ideas that may normally skipped over when not all of the information is presented. This allows for an alternative way to solve normalized problems.

 

It is significant for the team to generate a lot of ideas during this stage so designers can have many to choose from when starting the next phase Prototype. By the end of this phase, the team should have a few ideas to solve the problem. This can involve brainstorming, HME Questions, sketching, and creating rough prototypes.

  • HME Questions:

Sometimes, designers will use some How Might We questions to explore possibilities or potential solutions to a design problem or challenge and find the best solutions for users. They are open-ended starting structure focused on meeting user needs. Effective HME questions can help designers spark innovative ideas during the ideation phase and maintain a user-centered focus when the professionals evaluate and test design solutions.

  • Wireframes

A wireframe is a basic visual representation of a website, app, or software interface. There are low-fidelity, mid-fidelity, and high-fidelity designs for the wireframe.  Typically, mid-fidelity design for the wireframe involves more detailed representations of the layout, structure, and functionality of the product than low-fidelity design but with less detail and visual polish than high-fidelity designs.

  1. Prototype

With each new prototype, the team investigates different aspects of the problem and explores how each of the prototypes would fix the problem. By the end of this stage, the Design Thinkers should have a better understanding of the constraints that are apparent in the prototype. The prototype is a preliminary version or mockup of a product or application that is used to test and refine its design. A prototype can be created using various methods and tools, such as pen and paper sketches, digital wireframes, or interactive mockups.

  1. Testing

The final stage of design thinking is testing. It refers to the process of evaluating the user interface and user experience of a website, application, or other digital product to identify any usability issues, user pain points, or other areas for improvement.  Even during testing, the team can and will make alterations and refinements in order to make the product more polished for their needs. Essentially, the team can continue to do this until they either solve their problem or until they are satisfied with their product.

  • Usability Testing

The professionals can present findings from usability testing sessions, including user feedback, observations, and any design changes made based on the test results.

 

*Assignment B. Search for UX case studies and note one you find especially interestingsignificant or emblematic of all cases studies. The criteria of your preference is up to you. We just want more cases to look at.

I find one UX case study that is intriguing is Anisya Firdha Khairani’s UI/UX Portfolio: ZARA Website Case Study.

Below is the link https://medium.com/@ansyfkh/ui-ux-portofolio-zara-website-dd7a783470e6.

The reason why I choose this case study is that the author has a very clear-structured analysis of her redesign. Below is the screenshot of the mindmap I made about her analysis structure in the case study of the ZARA website. In addition, I am fond of Firdha’s complete and systematic analysis of the data, which made her result more convincing. Just as she mentioned, “Before designing the prototypes, I made a solution idea, affinity diagram, prioritization idea, information architecture, user flow, and crazy 8’s.” What’s more, I am keen on her smart choice of consistency with the original design style of the company.  ZARA uses basic colors for its website so her redesign style guide is not too different from the original.

 

*Assignment C. Based on your thinking and the outlines provided by ChatGPT and Copilot, design your own preliminary case study outline. What parts do you think are the necessary core of a case study? You might like to consult one or more of the other AIs.

My own preliminary case study outline:

  1. Background:

In the beginning, there should be brief background information on the product or service and the goals of the redesign.

  • the client/ the user
  • the industry
  • the problem statement
  • the goals and objectives
  1. User research:

This part explains how the UX designer conducted user research to understand the needs, preferences, behaviors, and pain points of the target users.

It may include methods such as

  • Qualitative research:

The goal of qualitative UX research is to understand users’ needs, perspectives, values, priorities, and context and gain empathetic insights that drive design decisions. It provides the “why” behind quantitative usage data.

User interviews – One-on-one conversations with potential or current users to understand their perspectives and needs. Interviews allow designers to ask open-ended questions and probe for deeper insights.

Focus groups – Facilitated group discussions with 6-10 users. This allows observing interactions between users and how they build on each other’s ideas.

Ethnographic research – Observing people in their natural contexts, such as at home or work. This can reveal insights that users themselves may not consciously realize.

Diary studies – Asking users to record thoughts, emotions, or activities related to the product or service in a diary over time. This captures real-world behavior.

User testing – Observing users interact with prototypes to uncover usability issues and confusion areas. Moderators ask questions as users think aloud.

Surveys – Good for getting broad feedback from many users. Open-ended questions allow for qualitative data even in a quantitative method.

Analytics – User behaviors, clicks, journeys, etc. provide qualitative insights into how products are used.

Social media monitoring – Comments and conversations by users about a product reveal feedback, pain points, and needs.

Card sorting- Cards representing product content/functionality are created. Representative users sort cards into logical groups and name the groups. Researchers analyze results to reveal users’ mental models for categorizing information.

  • Quantitative research

The goal of quantitative UX research is to back up design decisions with hard data-driven evidence. The numbers provide the “what” to complement the qualitative research that provides the “why”. The quantitative data delivers measurable evidence to demonstrate if designs truly meet user needs and business goals.

Usability testing – Measuring task success, completion rates, errors, and time-on-task during user testing sessions. Provides quantitative data on usability.

Surveys – Closed-ended questions answered on a numeric scale provide quantitative data on user preferences, behaviors, attitudes, and satisfaction.

Questionnaires – collecting quantitative data from many users efficiently through closed-ended questions. Effective questionnaire design includes using rating scales (e.g. 1-5, agree-disagree), multiple choice, and selecting all that apply questions.

Analytics – Event tracking and usage logs provide numerical data like page views, clicks, conversions, drop-off rates, etc. that inform UX decisions.

A/B testing – Comparing metrics like click-through rate for two variants of a design provides quantitative analysis of the better-performing option.

Eye tracking – Providing numerical heatmaps of where users look on a page and measures focus on key elements.

User interviews – This can involve numerical rating scales to gather quantitative feedback from users.

Benchmarking – Comparing user experience metrics from industry testing databases provides context and benchmarks.

Personas – Incorporating quantitative data on user demographics, stats, and behaviors makes personas more realistic         

          3. Ideation:

This phase describes how the UX designer generated and evaluated ideas to solve the problem.

It may include methods such as

  • brainstorming
  • sketching
  • wireframing

A wireframe is a basic visual representation of a website, app or software interface.

  • prototyping

The prototype is a preliminary version or mockup of a product or application that is used to test and refine its design. A prototype can be created using various methods and tools, such as pen and paper sketches, digital wireframes, or interactive mockups. With prototypes, designers can experiment with different layouts, features, and interactions to find the best solution for the user’s needs.

  1. Design:

This part presents the final design solution that was chosen after testing and feedback. It may include screenshots or mockups of the interface elements, interactions, animations, etc.

  1. Evaluation:

This section summarizes how the design solution was tested with real users and what results were achieved.

It may include metrics such as

  • usability scores
  • satisfaction ratings
  • conversion rates
  1. Reflection:

This includes what has been learned and what challenges have been faced from the project.

  • key takeaways
  • limitations
  • recommendations for future improvements or similar projects

 

From my perspective, user research is the most crucial part of a case study of UX design as it can provide some indispensable information for the following steps from the perspective of targeted users.

There are some positive effects on satisfactory user research.

First of all, great user research can help the insiders not to design just for a narrow scope of user groups.  The research will showcase who are real or potential users, which might be over the expectations of designers.  Secondly, the results from the user research coupled with some scientific and systematic methods can help UX professionals to avoid some biased subjective opinions and stereotypes in design. From the research, designers can know what are users’ problems and pain points, on which occasions they will use the products, or what kind of services users need. This information can provide some useful threads for thoughts on UX design in the next steps. Thirdly, good user research can help companies to save manpower, money, and material in real business.

Furthermore, if someone wants to become a wonderful UX designer, it is essential to have empathy for end users through user research. As their job is to make designs to attract users, UX professionals must understand their users thoroughly. They should build empathy for other humans who experience the product they create. In UX design, having empathy enables the designers not only to understand users’ frustration, but also to be familiar with their desires, fears, abilities (physical and emotional), limitations, reasoning, and goals. Conducting effective user research in case study can help designers fully understand their users so they can create innovative solutions for their problems as well as effectively enhance their lives.