Design Project

You'll DESIGN, BUILD, and TEST your own human-AI interaction system.

Tips & Info

What do we do?

This is a team-based, half-semester-long design project, in which you'll create an original human-AI interaction system on your own. You can pick any kind of system that you learned in this course, e.g., recommender systems, emotion detection systems, data visualization systems, and many more. You'll work in teams of three people. More information about each milestone will be added to this page. Here is the timeline and grading weights for each milestone:

  • Team Formation (week 6): 0%
  • Ideation (week 7): 20%
  • Pitch (week 11): 20%
  • Prototype (week 13): 30%
  • Final Presentation (week 15): 30%
  • Final Report & Video (week 16): 20%
Please note that all team members will receive the same grade for all the milestones.

Why do this?

Now that you learned the importance of human-centered design and the importance of harnessing the power of AI to create smart system for people, it's a good step forward that you apply what you learned to a problem you deeply care about. It's a great way to learn further, and potentially make impact.

Does my project idea qualify?

Projects are open-ended, so please be creative. But here are some requirements:
  • Your project should have a real AI technique running in the background.
  • Your project should have some user interface. We expect most projects to be a novel human-AI interaction system that pepole can interact with on the web. Data mining or analysis focused projects are okay, but there needs to be some visualization or analytics dashboard component that is interactive and accessible by others to understand your results.
  • Your prototype doesn't need to be a fully implemented platform, meaning that it needs to focus on the core human-AI interaction concept you're introducing, rather than to build all the database backend, login, etc.
  • Connecting to your own research is encouraged, but please make sure to talk to course staff early about how to make it happen.

Examples

Here are example systems:

How do we submit?

We'll create an assignment in KLMS for each milestone.

Late Policy

For each milestone deadline, all members of your team will lose 10% for each late day. Submissions will be accepted until three days after the deadline. After then you'll get 0 on that milestone. Please note that late submissions for final presentations are not allowed.

Team Formation

Milestone 0: Team Formation

Due: 11:59pm on 10/8 (Thu)

What do I do?

You'll need to find teammates to work on an exciting project for the rest of the semester. Each team should have 3 people by default. In exceptional cases we'll accept 4-person teams.

How do I find teammates?

Here are three methods you can use:

  • You can use Campuswire to post advertisements for finding teammates. Please use the "Team Formation" category when posting.
  • We'll give 5 minutes at the end of two classes in the 5th week for in-person team formation.
  • Use office hours to talk to us about project ideas so that we can make connections, and you can also run into other classmates.
Please try to have diversity in your own team crowd, in terms of skillset, interest, and background.

How do I submit?

Please fill out the design project sign-up form.

Pitch

Milestone 1: Pitch

Due: in class on 11/10 (Tue) and 11/12 (Thu)
20% toward your project grade

What do I do?

In a team, you'll identify a problem that you'd like to tackle with your project, and brainstorm approaches to solving the problem. After you've identified an interesting problem, a set of concrete tasks you want to support, and a set of possible solutions, it's time to turn these into a convincing pitch!

You'll have 10 minutes to do the following:

  • Motivate the problem.
  • Present the identified tasks and explain why they matter.
  • State what your proposed solution is, and why it'll be able to solve the problem and support the tasks well.
  • Share your plan: (1) In your team, who'll be responsible for what? (2) How will you find the dataset, algorithm, and users to use and test your system?

After the pitch, you'll have three minutes for Q and A.

Note #1: We'll enforce a strict 10-minute time limit by cutting off the presentation. Please plan and rehearse.

Note #2: Note that all team members should present at least once between the pitch and the final presentation. This means if your team decides to have only some members present in the pitch, the remaining members should definitely present in the final presentation.

Grading

  • Organization (10%): Overall structure and flow of the presentation.
  • Problem (20%): Well defined? Is it a real problem? What's the evidence?
  • Solution (30%): Novel? Feasible? Quality control / aggregation / motivation... thought out?
  • Plan (10%): Who does what and deployment plan.
  • Visual aids (10%): Design and readability of the slides, use of effective visual aids and examples.
  • Overall (20%): Delivery and clarity of the presentation. How engaging was the overall talk? Handling Q&A went smoothly?

Your report

You'll present in class and submit your slides after the class, which are due 11:59pm on the day of presentation.

How do I submit?

Your team's slides should be submitted as a PDF file, via KLMS.

Prototype

Milestone 2: Prototype

Due: 11:59pm on 11/24 (Tue)
30% toward your project grade

What do I do?

Now's the time for a fully functional and interactive prototype that is ready to be tested by your target users. You need to build a prototype that supports end-to-end scenarios. Your prototype needs to support at least three distinct tasks. This does not mean you need to build three separate prototypes, but rather this means you need to build one complete prototype that is flexible enough to support the three tasks. You may choose to reuse or revise the tasks and the UI you created in earlier stages. Make sure your tasks are centered around novel human-AI interaction you intend to support. Other features (e.g., detailed my page design, complex login management) can be hard-coded or fed with fake data.

Your report

Your report should include:

  • Project Summary (maximum three sentences): (1) the problem you're addressing, (2) what your solution is, (3) what unique approach you're taking in your solution (how it's different from other similar solutions). This summary will be used as a blurb on the project gallery.
  • Instruction: Give a quick tour of the interface, and also show off some of the highlights of the interface. Note that this should not cover all features you have; focus on the most exciting and important parts. Use screenshots and callouts.
  • URL of your prototype: A live version of the prototype for evalation. Note: the URL must work at least until your assignment is graded. Course staff will run your prototype to do a heuristic evaluation for grading. If the link doesn't work, your team will be penalized. If there are specific requirements (e.g., browser or device settings), include them as well.
  • URL of your Git repository: Make sure to add a README file that briefly describes the code, e.g., main JavaScript file, or where main feature implementations are, etc. Several lines are enough.
  • Libraries and frameworks: List any external dependencies you used for your implementation (e.g., Bootstrap, Semantic UI, etc.).
  • Individual Reflections: Each member should write this part on their own, reflecting on their own experience. Merge all members' mini-reports in the final report. Answer the following questions:
    • Which part of the system did you directly contribute to?
    • What were some of the difficulties you faced?
    • List one useful skill you learned while working on the high-fi prototype.

Grading

  • Project Summary (10%)
    • Clear description of the problem?
    • Clear description of the solution?
    • Clear description of the approach?
  • Instruction (20%)
    • Screenshots are added?
    • Is the instruction clear and easy-to-follow?
    • Screenshots capture representative features of the prototype?
  • Prototype (40%)
    • The prototype is complete in that it supports an end-to-end scenario?
    • Heuristic evaluation results: how usable is it?
  • Implementation Notes (15%)
    • Prototype URL is accessible and works properly?
    • Repository URL is accessible and contains README?
    • Libraries and frameworks used are listed?
  • Individual Reflections (15%) -- graded individually
    • Individual contribution clearly specified?
    • Difficulty discussion has enough depth and insight?
    • Non-trivial implementation skill added?

How do I submit?

One report per team. Your report should be submitted as a zip file. The instructions should be written in Markdown (please use the .md extension). Submit using KLMS.

Final Presentation

Milestone 3: Final Presentation

Due: in class on 12/8 (Tue)
30% toward your project grade

What do I do?

Now that you have an awesome prototype, it's time to tell us about what you built and what you learned from having real users use the system.

You'll have 7 minutes to do the following:

  • Motivate the problem.
  • List the main tasks you're trying to support.
  • What is your solution? How is it different from existing systems? Why is it better?
  • Walk through your interface. You can use video or screenshots, or even do a live demo. But be careful with live demos, because they require a lot of practice and include many moving parts.
  • Show us how your deployment went. What are some exciting results that suggest your application served the tasks well? What did you learn from designing human-AI interactions?
  • Limitations, implications, and possible improvements.

Note #1: We'll enforce a strict 7-minute time limit by cutting off the presentation. Please plan and rehearse.

Note #2: Note that all team members should present at least once between the pitch and the final presentation. This means if your team had only some members present for the pitch, the remaining members should definitely present for the final presentation.

Grading

Here's how your pitches will be graded.

  • Problem (10%): Well defined? Is it a real problem? What's the evidence?
  • Solution (30%): Does the application deliver its initial promises? Is it novel? Feasible? Are important design factors such as usability, fairness, ethics, metrics, visualization, privacy, etc. well thought out?
  • Results (30%): What did you learn from the deployment? What are the qualitative and quantitative results from users? Insightful lessons?
  • Discussion (10%): Depth in discussion of limitations, implications, and possible improvements.
  • Delivery (10%): Is it well-organized? Is the story clear? Flow and clarity of the presentation.
  • Visual aids (10%): Design and readability of the slides, use of effective visual aids and examples.

Your report

You'll present in class and submit your slides after the class.

How do I submit?

Your team's slides should be submitted as a PDF file, via KLMS.

Final Report

Milestone 4: Final Report

Due: 11:59pm on 12/23 (Wed)
20% toward your project grade

What do I do?

Now that you have deployed your system, seen people use the system, and collected useful data, it's time to wrap it all up! You'll write a short report and make an engaging video that showcases your system.

Report

  • Quality arguments (max. 500 words): Make convincing arguments for what makes your interface "great" and why the expected human-AI interaction is successfully supported. Add comments from users, UI screenshots, etc. that could support your arguments. Depending on your interface, you may focus on different aspects: neat features, visual design, usability, novel UI components you designed, hardcore implementation, etc. This is your chance to convince us that what you created is a high quality user interface.
  • Evaluation (max. 500 words): How did your deployment go? Report the number of users, results, analysis, etc. Use visual aids (e.g., charts, tables, graphs) to effectively communicate the results. NOTE: Please do not include results generated by your own team!!
  • Discussion (max. 500 words): Connect the lessons from the project to important aspects of human-AI interactions covered in class: usability, fairness, ethics, metrics, visualization, privacy, etc. What worked well and what didn't? Why? What would you have done differently?
  • Individual reflection (max. 500 words per person): Each member should write this part on their own, reflecting on their personal experience. Merge all members' mini-reports in the final report. Please answer the following questions:
    • What worked well and not in your team? How did you overcome any hurdle in teamwork? What lesson about teamwork did you learn that you might apply to your next team project?
    • Through the team-based design project experience, what did you learn about human-AI interaction and web-based implementation?

Video

Record a 2-minute video that captures the user context and the killer features of your UI. Be creative in how you plan, structure, and record the video! Check out project gallery for inspiration. You need to set the stage by starting with users and their problem. Avoid using slides and try to capture realistic context, and don't hesitate to "act". Do not show the UI from the beginning. You need to show parts of your final prototype to demonstrate how the user might perform the task using your system. Rather than describe all the features you implemented, focus on the flow of the task.

NOTE: Make sure to connect the user scenario and the solution. A common antipattern is to make the UI description too generic, not about solving the particular user problem captured earlier in the video.

NOTE: Due to the pandemic, we recognize it'd be near impossible to record a video of multiple humans interacting. In grading the videos, we will not focus on interaction between characters. Feel free to use animated characters, split screens with multiple characters captured separately, etc. to creatively communicate the idea behind your interface. We will not focus on the production quality regarding this aspect of your video.

Grading

Here's how your report will be graded.

Part 1: Report (10% toward your project grade)

  • Quality Arguments (25%)
    • Convincing arguments with supporting evidence?
    • Is it overall a high quality interface? We will look at a variety of aspects such as novelty, feasibility, UI-level contribution, etc.
    • 500 words or less?
  • Evaluation (25%)
    • Is evaluation complete and shows if and how the system worked as expected?
    • Results are reported and communicated clearly?
    • 500 words or less?
  • Discussion (25%)
    • Discussion touches upon important aspects of human-AI interaction supported by the team's application?
    • Discussion has enough depth and insight?
    • 500 words or less?
  • Individual Reflections (25%) - graded individually
    • Teamwork discussion includes both the good and the bad?
    • Teamwork discussion has enough depth and insight?
    • Design process discussion has enough depth and insight?
    • 500 words or less?

Part 2: Video (10% toward your project grade)

  • 2 minutes or under?
  • Overall organization and flow of the story?
  • Quality and variety of shots and rhythm?
  • User needs well captured?
  • UI introduced convincingly but not as dry list of features?
  • Engaging and creative?

Deliverables

  • Report: One report per team. Your report should be submitted as a zip file. The main report should be written in Markdown (please use the .md extension). Also include your original video MP4 file in the zip file as well. Submit via KLMS.
  • Video: (guidelines adopted from CHI 2017 Video Showcase, which also has links to many inspiring videos)
    • Encoded as an MP4 using the H.264 codec. No exceptions!
    • You'll upload your video file on YouTube. Include the URL of your posted video in your final report.
    • All spoken dialog must be closed captioned (subtitled) to improve accessibility.
    • Resolution of at least 1280px x 720px.
    • The 16:9 aspect ratio is recommended.