Information System Design
UI/UX Research Project
Course: COMPSCI 179 Design of Useful and Usable Interactive Systems
Instructor: Krzysztof Gajos
Date: Jan.-May., 2022
The course covers skills and techniques necessary to design innovative interactive products that are useful, usable and that address important needs of people other than yourself.
You will learn how to uncover needs that your customers cannot even articulate. You will also learn a range of design principles, effective creativity-related practices, and techniques for rapidly creating and evaluating product prototypes. You will also have several opportunities to formally communicate your design ideas to a variety of audiences.
KEYWORDS:
Information System, UI/UX, Interactive Product, User Research, Storymap, Usability Testing
OBJECTIVES
- Design useful interactive systems. Learn how to discover real and valuable needs and aspirations of people who might be very different from yourselves. Make design decisions that appropriately support those needs and aspirations. Articulate and validate your design hypotheses. Identify all relevant stakeholders and design your solutions such that all of them will advocate in favor of your solution. Begin to recognize that technological solutions exist as part of complex sociotechnical systems.
- Design usable interactive systems. Recognize that designers and users often have different mental models of interactive systems. Uncover users' mental models of relevant tasks and make design decisions consistent with those models. Analyze existing solutions and design new ones using contemporary knowledge of human perception, cognition, and motor performance. Design for diverse abilities. Appropriately use existing design principles. Create interactive prototypes. Design, conduct, and analyze results from usability studies.
- Be intentional about and accountable for societal consequences of your solutions. Recognize that design decisions (what problem to solve, for whom, and how) impact the distribution of power and resources in a society. That is, design inevitably has moral and political consequences. Articulate and explain your moral and political stance. Make design decisions consistent with your stance. Analyze your designs for likely indirect and "unanticipated" consequences.
- Be ready to be part of or lead design organizations. Contribute to effective teamwork. Lead teams with or without authority. Understand the benefits and challenges of diverse organizations. Effectively communicate design research and design decisions. Provide systematic design critique. Productively receive design critique. Use effective team-based creative processes.
Project 1
Overview-
Fast, Cheap and Out of Control: A new transportation solution for
Harvard campus
The Problem
The addition of the Allston campus opened up many new fantastic resources for the Harvard community, but it also made transportation a burden. A student who narrowly misses the Quad - SEC shuttle, may spend 45 minutes or more on the commute from their dorm to class. A researcher traveling from the Law School to SEC has to endure a torturously circuitous route. And even without the extra challenges that come with the Allston campus, a Mather resident wishing to visit a friend at Currier for a mid-day meeting may also spend 30+ minutes on the trip despite a relatively short distance because of the lack of a direct connection.
Our interviews with students indicate that the inefficient transportation options (long intervals between shuttles, indirect routes with numerous intermediate stops, lack of direct routes between some pairs of locations) cause them to reconsider courses, research opportunities, and social events. Our interviews with faculty and researchers suggest that while many established collaborations can be sustained via Zoom, the transportation challenges make it less likely for colleagues who are not yet collaborating to meet, discover shared interests, and develop new collaborations.
The Approach
To address the challenges brought about by having a small number of large shuttles running infrequently on fixed routes and schedules, the new system will consist of a large fleet of small (12 passenger) autonomous vehicles that can travel on demand between any pair of existing shuttle stops. People should be able to request a shuttle using a personal device. The optimization system for assigning shuttles to riders is being developed by another team. They estimate that nobody should need to wait more than 3 minutes for a shuttle once they
requested it. The shuttles can accommodate up to 3 wheelchairs (each wheelchair takes approximately as much space as 2 non-wheelchair riders).
The Mission
Your mission is to design the user experience for this new shuttle system. This will include:
● Ride request experience using the rider’s personal mobile phone
● Ride finding experience – it is possible that multiple shuttles will arrive at a stop in a short period of time. There needs to be an easy way for riders to decide which shuttle is theirs. Part of the brief is to design the signage for the shuttles. The signage can be fixed or dynamic (i.e., a permanent sign or a digital display). The signage can include multiple modalities (visual, audio, etc) if needed.
● Boarding experience – the shuttle system will need to know if the people who requested a shuttle actually boarded it. Part of the brief is to decide if any additional interactive technology is needed on the shuttle to support this and to design the interaction with that technology.
● Disembarking experience – again, the shuttle system needs to know if the people who were meant to exit the shuttle at a particular stop actually did so.
● Your solution has to support riders using wheelchairs and riders with vision impairments.
● Your client does not know or prescribe what specific features the solution should include. It is your job to understand the exact habits and needs of diverse shuttle riders and to decide if and how to support those needs in your solution.
You can assume the following:
● Every rider will have a personal digital device equivalent to today’s top-of-the-line smartphones. Consequently, you can use any of the capabilities that currently exist on the market.
● Every rider will have an electronically-readable identification (an ID card, a phone, etc).
● A shuttle can wait up to a minute for the rider to start boarding.
● There will be a shelter at each stop.
Milestone 01-
User Stories, User Story Map and the Information Architecture
Step 1: Conduct interviews with diverse riders (current and potential)
Elicit numerous diverse stories of actual or desired shuttle use. Also ask people about situations when they decided to travel without using a shuttle or when they gave up on making a trip – such stories can reveal paint points in the existing solutions that your solution might be able to support. Ideally more than one team member should participate in any one interview to enable a more robust interpretation process. You should aim to interview 5-8 people. You will know that you are done if you cannot learn anything new from additional participants.
Step 2: Synthesize the user stories into a user story map and information architecture
Create a user story map that captures the different activities that may be part of the shuttle-taking experience. Capture the steps involved. Remember that the user story map is informed by people but it takes the product’s perspective (i.e., the steps and the details should capture how people would perform activities using your product). A user story map should capture the breadth of what people might do with your product – it should capture both the common and the uncommon activities.
Decide which activities to include in this version of your product. Remember, not all activities that you have documented need to be supported in the first version of your product. But you need to explain your decisions.
Create a high-level information architecture showing the potential flows through your application. Not sure what to include or whether to draw or omit an arrow? That’s fine. Make decisions that you think help your team think about your product and that support clear communication to the people outside your team (i.e., the teaching staff).
Milestone 02-
Prototype and Cognitive Walkthrough
Step 1: Create a prototype of your solution
Using your User Story Map and your Information Architecture as starting points, develop a Figma prototype of your solution. Two important considerations:
First, as discussed in class, we recommend that your prototype should have:
● High-fidelity content (all the wording should be carefully chosen, all shuttle stops real, etc);
● Low-fidelity visual design (use simple grayscale design);
● Medium-fidelity behavior (all the interactive behaviors that are key to usability should be there, others can be ignored).
Second, notice that there is a tricky aspect to your project: you need to account for what’s on the screen of the rider’s phone, the displays on the exterior of the shuttles and, possibly, devices inside the shuttles. How to build such a prototype?
Step 2: Prepare for the cognitive walkthrough evaluation
1. Complete enough of your prototype to support all the steps that the other team will evaluate.
2. Write the exact steps necessary for a rider to get from SEC to a stop in Harvard Square (cover the entire journey from requesting a ride to getting off in Harvard Sq). And by steps we mean actions that people will have to perform with your interface (down to every input, button click, etc).
3. Create a second scenario covering a different use case (e.g., a group wanting to ride together). Write the exact sequence of steps for a person to successfully complete this scenario. Mark the steps (e.g., with **) that are different between this scenario and the basic one. This is to help the evaluation team focus their efforts.
4. For each of the two scenarios above, create Cognitive Walkthrough Evaluation templates (as google docs) for the evaluating team to use.
Milestone 03-
Revised Prototype and a Usability Evaluation
Step 1: Revise your prototype based on the results of the cognitive walkthrough
Step 2: Create a plan for your usability evaluation
As discussed in lecture, prior to meeting with your users, prepare a written plan consisting of the following:
1. Hypothesis or hypotheses you want to test.
2. Scenario(s) – they are the context for the tasks you will give to your participants (e.g., “Imagine that you live in the Quad, that it is raining, and you need to go to Widener to pick up a book”).
3. Specific tasks for your participants to perform. E.g., “use the Fast, Cheap and Out of Control Shuttle System to get to Widener.” Remember to communicate the tasks entirely in the language of your participants. Do not reveal the vocabulary or the structure of how the task is conceptualized in your product. Design the tasks to stress test all the major features of your product. A typical usability evaluation will have 3-5 tasks (though yours may be different). They may all refer to the same scenario or you may have different scenarios for different
tasks.
Step 3: Conduct your usability evaluation
Step 4: Revise your prototype based on the results of the usability evaluations
Project 2
Overview-
A novel product concept for tourists visiting the Harvard campus
The Challenge
Use the power of mobile technology to transform the experience of being a tourist on Harvard campus.
Milestone 01-
Needfinding and Ideation
Step 1: Conduct contextual interviews
Conduct contextual interviews with about 6 individual tourists or small groups of tourists. Joining a large tour group may be impractical because members of such groups are unlikely to be able to withdraw to engage with you in the interpretation of their actions. Feel free, of course, to observe large groups, take pictures, and record any insights, but the core of this assignment should be done with informants with whom you can have a deeper interaction.
Some practical considerations:
● Ideally, do the contextual interviews in pairs. You can also do them individually. More than two people will make it hard to build a productive relationship with your informants.
● Take pictures of interesting situations or artifacts. Ask permission, of course. Pictures will make the conversation with your teammates much easier so print your most informative pictures before starting the affinity diagramming process.
● If your informant asks you a question (e.g., “What is this building?”, “Are there any interesting events today?”) it is ok to answer. But, in turn, it is ok for you to ask back why they asked that particular question.
Step 2: Use affinity diagramming to uncover valuable insights
As a team, use the affinity diagramming technique to uncover important needs/goals/aspirations of your users and the obstacles that prevent them from fulfilling those needs/goals/aspirations. Remember to collect observations along with validated interpretations. Your job is to uncover patterns in the data that will reveal interesting design opportunities.
Step 3: Write your problem statement
- People and Setting. Typically, we define the people for whom we design in terms of the properties of the people themselves and a setting in which we want to intervene. For example: “Individuals who have to look after a small child during the day.”
- Core tension. This is the need you will have uncovered. We call it a tension because it often involves a trade-off or a conflict of some sort: your stakeholder wants to achieve a particular goal, but some obstacles get in the way. For example: “Our stakeholders want to find places or activities where the child can be stimulated, engaged and safe, and where the caregiver can also relax a bit and enjoy themselves. But most places that are kid-friendly are not attractive for adults, and in most places that are relaxing for adults, kids are either not safe or not welcome.”
- Axioms. This is an optional element, that captures any other principles or constraints you want to keep in mind. For example, your client may demand that the solution should make prominent use of mobile technology. Also, you as a designer may bring some values or pragmatic constraints to the project. For example, you may declare that any solution you design should be profitable or environmentally sustainable. While the other parts of the approach thesis are derived from your research, the axioms are more arbitrary and do not need to be grounded in evidence (though you should still explain your rationale).
Milestone 02-
Ideation; Generating and Testing Product Concept Hypotheses
Step 1: Individually, ideate numerous diverse ideas for product concepts that might address your problem statement
Each team member should aim to generate individually a minimum of five distinct ideas before the team comes together for collective brainstorming. Try to generate a mix of conservative and outrageous ideas. Some crazy ideas are good. You will not know where the boundary of reasonable is until you have crossed it. It is typically easier to make an interesting idea feasible than to make a feasible idea interesting.
Step 2: Ideate as a team, generate product concepts
Share your ideas with each other, generate more. Combine elements of different solutions. Give attribute listing a try if you feel like it. At the end, select your top 4 diverse product concepts(it’s OK if a couple of these ideas are similar to each other, but there should be some ideas in this set of 4 that are very different from each other).
Step 3: Generate hypotheses
For each idea, articulate your assumptions and hypotheses. For each idea, put your hypotheses on the uncertainty–impact diagram. For each idea, select one high-uncertainty & high-impact hypothesis to test.
Step 4: Create appropriate prototypes
Create prototypes that will allow you to test your hypotheses in a manner that is quick, cheap, and informative. If you use simple prototyping techniques (like storyboards), we expect you to prototype all 4 of your candidate solutions. If you choose something much more elaborate, you can prototype just 3 or 2 ideas.
Milestone 03-
Feedback, Final Concept, Pitch
Step 1: Collect data to test your hypotheses
Test your hypotheses with real tourists! For each hypothesis/prototype, try to get data from 3 different tourists/groups.
Practical considerations:
● Make sure that the clients you talk to meet the criteria set out in your problem statement (e.g., if you are creating a solution for families with small children, seek out families with small children).
● If practical, present each client with prototypes of at least 2 ideas. Clients who see only one option will give you a lot of false praise. Clients who see multiple options will give you more candid feedback.
● Ideally, work in pairs so that you can immediately discuss feedback with each other.
● Take pictures (with permission)
● Take notes!
Step 2: Synthesize the results
Systematically evaluate your hypotheses in light of the data. Which were supported? Which were unsupported? Which were inconclusive? Where did new important questions arise?
Step 3: Develop your final product concept
Step 4: Create an interactive demo
At the end of this project, you will need to show your idea off to the rest of your studio. You will need a compelling experience. For that, you will need an interactive demo. Your demo should support three distinct scenarios. The important thing is that you will be operating the demo so all the demo needs to support are the three scenarios that you have scripted. Stuff that is not part of the demo does not need to be developed at all. As a reminder, your demo should have:
● High fidelity visual design. These days, when you ask people to react to a product concept, people pay attention to the visual design and they interpret it as a signal of the team’s competence.
● High fidelity content. Use real or realistic content. No Lorem ipsums, no “test users”.
● Low fidelity behavior. Remember, nobody but you will touch the demo. It has to look real when you perform it, but you do not have to support real interactivity.
Project 3
Overview-
Problem of your own choice
The Timeline
Week 1: Identify problem area
Week 2: Needfinding, moral stance. Perform needfinding (most likely contextual inquiry) with relevant stakeholders. Analyze the data using affinity diagramming. Articulate your moral stance that will help you reason about the societal impact of your product.
Week 3: Product concept candidates. Testing product concept hypotheses. Generate several product concept candidates, articulate hypotheses related to each, test the start testing the hypotheses.
Week 4: Final product concept. User story map + Info architecture for the UI. Pitch. Finish testing your hypotheses, synthesize what you have learned, develop your final product concept. Draft the user story map and the information architecture. Pitch your product concept to your studio!
Week 5: First detailed UI prototype. Usability evaluation plan. Develop a prototype of the UI for your product. Develop a plan for your usability evaluation.
Week 6: Cognitive Walkthrough. Revised UI prototype. Usability evaluation. In studio immediately after submitting milestone 5, conduct cognitive walkthroughs of each other’s prototypes. Revise. Conduct usability evaluations with your target users.
Week 7: Final project presentations. Final reports. Present your product concepts and final solutions! Finalize learnings from your usability evaluation. Finalize and submit your final report.
Milestone 01-
Identify problem area
Step 1: Identify possible problem areas to pursue
Find 2-3 problem areas (not solutions!) that are likely to provide opportunities for impactful products. For each problem area, provide:
● A description of the problem area
● The population(s) you wish to target
● Design inspirations (examples of specific questions or problems, statistics) that will help the reader see more concretely what kinds of things could be improved.
● Major products/solutions already targeting this problem area (that’s your competitive analysis); aim for about 3-5 diverse examples that show the true extent to which this problem area has been addressed by others. Keep your eyes open for non-mobile or non-technology solutions that exist in that space. For each, explain briefly what specific problem the product addresses and how. Feel free to include screenshots or other illustrations if this helps to explain the product.
● Is there room for a technology-based solution? Given what has been tried before, is there reason to believe that you can make a substantial positive impact with a technology-based solution?
Milestone 02-
Needfinding, moral stance
Step 1: Choose your problem area and write your mission statement
Write your mission statement. A mission statement should be quite broad (e.g., “improve the experience of being a tourist on Harvard campus”). It should not presume the specific problem nor a solution. But it should be focused enough to help you identify who you should interview during your formative research.
Step 2: Identify key stakeholders and conduct contextual interviews
Who are the stakeholders? For most problem areas / products, there are multiple groups who are impacted by the product and whose needs and motivations need to be considered for the product to succeed. In Project 2, for example, it is very likely that your product concepts somehow impacted students, local business owners, university administration, or people living in the vicinity of the university. Your exact ideas about the most relevant stakeholders will change as your ideas become more concrete, but start by identifying at least two stakeholder groups that should be included in your initial needfinding.
Step 3: Use affinity diagramming to analyze your data
Step 4: Write your problem statement
Step 5: Develop your moral stance for this project
1. Articulate one of your moral values. What does it mean to you, and why is it important?
2. How will your project support the value you have chosen?
3. What are some potential unintended or indirect ways in which your project or design choices could fail to support the value you have chosen? What are you doing to avoid this from happening?
Milestone 03-
Product concept candidates. Testing product concept hypotheses.
Step 1: Individually, ideate numerous diverse ideas for product concepts that might address your problem statement
Step 2: Ideate as a team, generate product concepts
Step 3: Generate hypotheses
Step 4: Create appropriate prototypes
Milestone 04-
Final product concept. User story map + Info architecture for the UI. Pitch.
Step 1: Collect data to test your hypotheses
Step 2: Synthesize the results
Step 3: Develop your final product concept
Step 4: Start drafting a user story map and information architecture for the prototype you will build over the next 2 weeks
Create the initial user story map and information architecture for the digital component of your product concept. You do not need to conduct new interviews. However, as much as it is relevant and appropriate, refer back to your needfinding interviews to inform what details should be included in your design and how.
Milestone 05-
First detailed UI prototype. Usability evaluation plan. Cognitive Walkthrough.
Step 1: Complete the user story map and information architecture for the prototype
- Create a user story map that captures the different activities that your product will support
- Create a high-level information architecture showing the potential flows through your application.
- Synthesize and explain your UI design approach. Let’s make sure that the UI decisions you have just made support your product concept and that all parts of your product concept are supported by the UI.
Step 2: Create a UI prototype of your product
First, chances are that you may not be able to prototype all parts of your system. Overall, prioritize those parts that are core to your product concept over components that are generic and play only minor support role (e.g., if you build a product that people need to pay for, you can deprioritize the payment UI).
Second, regarding the fidelity of the prototype:
● Content: High-fidelity content (all the wording should be carefully chosen, all sample content real, etc);
● Visual design: you can choose your level of fidelity. You can use low-fidelity approach like in Project 1 or, if you have already thought about the aesthetics of your product, you can create a higher fidelity visual design.
● Behavior: Medium-fidelity behavior (all the interactive behaviors that are key to usability should be there, others can be ignored).
Step 3: Prepare for the cognitive walkthrough evaluation
Step 4: Start creating a plan for your usability evaluation
Milestone 06-
Revised UI prototype. Usability evaluation.
Step 1: Revise your prototype based on the results of the cognitive walkthrough
Step 2: Finalize a plan for your usability evaluation
Step 3: Conduct your usability evaluation
Step 4: Start revising your prototype based on the results of the usability evaluations
Step 5: Prepare an 8-minute final presentation
The format is up to you, but here are some elements to pay attention to:
● Argument (problem statement, who are you designing for? What is your approach? What impact can your product have on people? Are your claims supported by evidence? Do not include fake user testimonials this time).
● Demo (an interactive demonstration of a part of your prototype needs to be woven into the story). But don’t just list the features. Instead, show how a person can benefit from using your product.
● Professionalism.
● Every person on the team has to participate in some way during the presentation.
Milestone 07-
Revised UI prototype. Usability evaluation.
Step 1: Deliver your 8-minute final presentation
Step 2: Finish revising your prototype based on the results of the usability evaluations
Step 3: Finalize your report