User Interface and User Experience Design

Title User Interface and User Experience Design (51230)
Quarter Autumn 2019
Instructor Andre Marques (



  • Instructor: André Marques
  • Email:
  • Office: JCL 352
  • Office Hours: Fridays 3:30-5:30 PM. I encourage you to meet with me individually to ask questions, discuss your personal goals, and progress in this course. I am always available via email and will usually reply within 24hrs.
  • Prerequisites: Core Programming.
  • Course Website: Google Classroom


Whether you’re ordering a burrito, boarding a plane, chatting with friends, booking your next yoga class, or reading this sentence—you’re likely using software with a user interface.

This course will teach you how to create useful and engaging user interfaces. 

We will cover different methods of approaching design problems, how to conduct research to understand users, create prototypes, discuss, present, and assess design.

Learning Objectives

At the end of this class you will be able to:

  • Implement design processes within various contexts: personal projects, startups, and structured software development teams.
  • Understand the needs of users and identify meaningful problems to address in order to create positive experiences.
  • Create prototypes of any fidelity using contemporary design tools for web, mobile, and design systems.
  • Articulate design decisions and provide constructive feedback.

Course Components


Lectures will prepare you for assignments each week by covering relevant topics as listed in the schedule.


Demos will provide hands-on demonstrations in class on how to use design tools.


Short online surveys will be used throughout the quarter to assess your needs, progress, and allow you to give me any feedback you may have.

In-Class Activities

Student Interviews 

During the first six weeks, you will interview your classmates to gather requirements for each design assignment. 


We will collaborate as a class and in small groups to assess design decisions made on assignments. You will be asked to informally present your designs. I will provide you with structure and guidance throughout this process.


You will be given six assignments. Instructions will be given during class and posted online. Assignments are due the following week at the start of class. Each assignment will require you to create a prototype using Figma, InVision, or both. Assignments may also contain questions related to the class material, which will require written responses.

Assignments are due the week after they are assigned at the start of class. 

Late assignment policy: We will discuss assignments in class where solutions will be presented by students and discussed—as a result, it is important to complete assignments on time. You will, however, be given 1 slip day, which can be used on any of the 6 assignments (not the final project) e.g. if something comes up and you need an extra day, you can use it on any of the six assignments.

Final Project

The aforementioned assignments will give you the knowledge and skills necessary to begin the final project. This project will require you to: identify a design problem, interview users, synthesize research, iterate on prototypes, and present your work to the class during week 11.


A project proposal is due on week 6. Students will each submit a project, but we will work as a team throughout the process. I encourage you to start thinking about design problems that interest you at the beginning of the quarter and to speak with me prior to submitting a proposal. I will help you create a project that will allow you to experience the full design process and that will be challenging, but doable, within the given timeframe.

Deliverable Milestones

These will not be graded, but are meant to serve as milestones to guide you through your project. Deliverables will contain research findings, prototypes, and iterations.

Final Presentations

You will create a PechaKucha style presentation of about 5 minutes (depending on the number of students enrolled and time available to us). This presentation will summarize your design process, materials, prototypes, findings, and experience. Your final project will be assessed based on the deliverables (research findings, prototypes, iterative work) and final presentations. 


  • 25% Classroom Activities & Participation 
  • 50% Assignments
  • 25% Final Project



Approaching a design problem. Knowing where and how to start will set you in the right direction on design projects. 

  • Design Process
  • Creative Problem Solving


Finding the right problem to solve. Understanding people and their experiences will give you insight into the prototypes you should create and test.

  • Need Finding
  • Human-centered Design
  • Research Methods
  • Personas
  • User Testing
  • User Journeys
  • Metrics
  • Research Synthesis


Creating useful prototypes. Design principles will guide you through the creation of visual interface and user workflow decisions to address the needs of your users successfully.

  • Accessibility
  • Principles, Patterns, & Techniques
  • User Goals & User Flows
  • Information Architecture
  • Visual Design (layout, typography, icons)
  • Paper Prototypes
  • Low Fidelity Prototypes
  • High Fidelity Prototypes
  • Iterative Design
  • Design Management


Communicating design decisions and providing feedback. Design is often a team effort, so we will learn how to successfully work in a design environment with others.

  • Presentations
  • Critiques


  • Notebook: Observations and paper prototypes. Bring to class each week. We sketch prototypes, diagrams, and gather feedback from users in this class. It will be helpful to have a dedicated notebook to refer to throughout the quarter, as our work will be iterative .

  • Figma: Low & high fidelity prototypes. Figma is an online user interface design tool that is free for educational use. We will create and share user interfaces with this tool

  • InVision: Interactive prototypes. InVision is an online product design tool that is free for educational use. We will create interactive prototypes with this tool.


  • This class has no textbook.
  • Readings may be assigned weekly and will either be available as links or PDFs on our class website. Readings will support topics covered in class.


Week 1

  • Lecture: Introduction to user interface and user experience design
  • Demo: Figma introduction
  • Classroom Activity: Interviews for Assignment 1
  • Assignment 1: Flyer prototype

Week 2

  • Lecture: Discussing design and basic interface design principles
  • Demo: Figma website design basics
  • Classroom Activity: Group feedback on flyer; interviews for Assignment 2
  • Assignment 2: Simple website prototype

Week 3

  • Lecture: Designing responsively and interface design principles continued
  • Demo: Figma responsive layouts
  • Classroom Activity: Group feedback on website, interviews for Assignment 3
  • Assignment 3: Responsive website prototype

Week 4

  • Lecture: Application design principles and patterns
  • Demo: InVision interactive prototype basics
  • Classroom Activity: Group feedback on website, interviews for Assignment 4
  • Assignment 4: Web application prototype

Week 5

  • Lecture: Accessibility, native app patterns, and needfinding
  • Classroom Activity: Group feedback on web application, interviews for native app
  • Assignment 5: Native app prototype v1 & project proposal

Week 6

  • Lecture: User on-boarding, retention, and habits
  • Classroom Activity: Group feedback on native app, Interview students for iteration 2
  • Assignment 6: Native app prototype v2

Week 7

  • Lecture: UX research methods
  • Classroom Activity: Group feedback on project findings
  • Project: Research & findings deliverable 1

Week 8

  • Lecture: Design systems and user stories
  • Classroom Activity: Group feedback on project
  • Project: Prototype & testing deliverable 2

Week 9

  • Lecture: Designing with metrics, feature prioritization, and agile iteration
  • Classroom Activity: Group feedback on project
  • Project: Prototype & testing deliverable 3

Week 10

  • Lecture: Presenting design and design management
  • Classroom Activity: Group feedback on project
  • Project: Project presentations

Week 11

  • Student Project Presentations
Prerequisites (Courses)

Core Programming required.

Prerequisites (Other)


Software Engineering Specialization (
Mobile Computing Specialization (


Wednesday 5:30-8:30pm


JCL 298