Course Content and Outcomes Guides (CCOG)

CCOG for MM 177 archive revision 202704

You are viewing an old version of the CCOG. View current version »

Effective Term:
Fall 2027

Course Number:
MM 177
Course Title:
Digital Product and UX Design 1
Credit Hours:
3
Lecture Hours:
20
Lecture/Lab Hours:
20
Lab Hours:
0

Course Description

Covers the principles and practices of digital product designs for user experience (UX) and user interface (UI). Presents scalable components and responsive elements. Designs interfaces across multiple devices: mobile, tablet, and desktop. Audit available.

Intended Outcomes for the course

Upon successful completion of the course, students should be able to: 

  1. Navigate product design interface and workspace.

  2. Apply UX principles to create effective layouts and flows.

  3. Design reusable components and scalable design systems.

  4. Build interactive prototypes that communicate design intent.

  5. Apply accessibility and responsive design best practices.

  6. Export assets for handoff to developers.

Course Content (Themes, Concepts, Issues and Skills)

Week 1 – Introduction to Product Design & Figma Fundamentals

  • Course overview and expectations

  • The role of product design in UX/UI

  • Figma setup and workspace tour

  • Hands-on: Building your first screen and using frames, text, and shapes

Week 2 – Layouts, Hierarchy & Composition

  • Grids, spacing, alignment, and visual flow

  • Structuring interfaces for clarity and usability

  • Hands-on: Create a basic mobile app layout

Week 3 – Typography & Color Systems

  • Establishing visual hierarchy through type and color

  • Creating Figma styles for text and palettes

  • Hands-on: Build a mini style guide

Week 4 – Components, Variants & Auto Layout

  • What are design systems and why they matter

  • Building scalable components and responsive elements

  • Hands-on: Create a reusable button and navigation set

Week 5 – Prototyping Interactive Flows

  • Connecting frames with interactions and transitions

  • Motion, animation, and micro-interactions

  • Hands-on: Prototype a simple user flow (e.g., sign-up or checkout)

Week 6 – Responsive & Accessible Design

  • Designing across devices: mobile, tablet, and desktop

  • Accessibility fundamentals: contrast, legibility, and navigability

  • Hands-on: Redesign a page for inclusivity and multiple breakpoints

Week 7 – Collaboration & Version Control in Figma

  • Team libraries, branching, and commenting

  • Iterating and maintaining consistency in team projects

  • Hands-on: Group collaboration exercise

Week 8 – User Research & Testing with Prototypes

  • Planning and conducting usability tests

  • Capturing insights and applying feedback

  • Hands-on: Conduct a peer-to-peer usability test and iterate

Week 9 – Systems Thinking in Product Design

  • Scaling a design system for multiple use cases

  • Managing variants, tokens, and naming conventions

  • Hands-on: Expand your design system and document it

Week 10 – Developer Handoff & Real-World Workflows

  • Preparing files for developers (Inspect mode, annotations, exports)

  • Design documentation and presenting design intent

  • Hands-on: Create a handoff-ready project package

Week 11 – Final Project & Presentations

  • Students present a polished, multi-screen product prototype

  • Final critique and group feedback

  • Wrap-up discussion: How to build your portfolio and next steps in UX/UI