AI-Integrated E-Commerce Design (Pilot)

Revised July 16, 2026 — reflects the AI-assisted design workflow developed in the RWD-ecommerce studio project, now cross-referenced against Google's REVEAL framework (see the Evaluation Criteria section).

Course Description

CT302 Digital Product Design I equips students with the skills to design a responsive e-commerce experience the way modern design teams actually work today: an AI-in-the-loop workflow that shifts the emphasis from design thinking to thinking design. The course is built around a semester-long studio project, the redesign of an e-commerce brand's homepage and product detail page, carried out in two connected phases.

In the first phase, students use AI as a research and planning collaborator to select a brand candidate, audit its live website, synthesize UX research, and define a brand profile before writing a project proposal that includes a site map and wireframes. In the second phase, students explore art direction through a moodboard and apply it as an initial art direction in Google Stitch, then iterate and finalize the design in Figma, building an essential design system and a fully responsive homepage and product detail page. Throughout, students learn not just to use AI tools, but to direct them: verifying research, leading and defining art direction with AI-in-the-loop, and applying human design judgment at every decision point.

Student Learning Outcomes

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

1. Conduct AI-assisted market and competitive research to identify, compare, and select a brand candidate for redesign.

2. Perform a live UX/UI audit of an existing e-commerce site and synthesize research into a clear set of pain points and design opportunities.

3. Define a brand profile — target audience, mission, and brand archetype — and translate it into a project brief and value proposition.

4. Use AI selectively to explore concept directions, then critically evaluate and refine that output through hands-on design work in Figma.

5. Apply UI design fundamentals — typography, color, layout, and responsive principles — to build a mobile-first, essential design system.

6. Design a responsive e-commerce homepage and product detail page across desktop and mobile breakpoints (4 final screens) using Figma's components, variables, styles, and Auto Layout.

7. Present a complete design process and outcome professionally, articulating where AI accelerated the workflow and where human design judgment shaped the final decisions.

Studio Project: Title, Description & Scope

Project Title: Responsive E-Commerce Website Redesign

Description: Each student selects one e-commerce brand as a redesign candidate and, working across both course phases, delivers a complete design case for that brand. The final deliverable includes the research and project proposal that justifies the redesign — brand selection, live site audit, UX research, brand profile, and project brief — plus a fully responsive design for the brand's two most important pages: the Homepage, which establishes the site's art direction and first brand impression, and the Product Detail Page (PDP), the most functional page in e-commerce and the one most directly responsible for conversion.

Scope: The final deliverable has two parts — the research and project proposal, and the design, described below.

Part B design scope: 2 pages × 2 breakpoints = 4 final screens per student.

Reference file (Nespresso example):
https://www.figma.com/design/pSWxcZKOCZdTtLHtnCrTtS/RWD-Nespresso?node-id=0-1&t=Gorjn0CTsIxBXxUx-1

The linked Figma file shows the expected structure and fidelity at each stage — lo-fi wireframes, art direction proposal, moodboard, and the 4 final screens — using Nespresso as a worked example. Students design their own selected brand to this same scope and structure.

Studio Project: Title, Description & Scope

Grading Scale

All projects must be submitted for a final grade no later than the last day of class.

Projects & Evaluation

1. Project Proposal — 40 pts

Discovery & Define phase. Students research, audit, and define the brand and problem before proposing a direction — using AI as a research and drafting collaborator throughout, with all findings verified and cited.

• Brand profile: target audience, mission, and brand archetype.

• UX research synthesis: including target audience, current site pain points, and competitive/market position, using AI to accelerate data-gathering but requiring students to verify findings against real sources.

• Brand comparative landscape: evaluate at least three brand candidates against a scoring matrix (visual potential, before/after impact, UI teaching value, PDP richness, mobile-first urgency, existing references) and recommend one, with rationale.

• Live site audit: conduct a hands-on audit of the selected brand's current site, focused on the homepage and PDP only for this project, documenting specific pain points, missing elements, and design opportunities section by section.

• Project brief: problem statement (user perspective + business perspective), design opportunity, value proposition framework, feature scope for the home page and PDP, key discovery questions, and success metrics.

• Sitemap and low-fidelity wireframes: covering the Homepage and PDP at both desktop and mobile.

• Presentation: a 3–4 minute professional pitch covering research, brand rationale, and proposed direction, submitted as a Loom recording.

Duration: 7 weeks.

2. Design — 30 pts

Students move into hands-on UI design, building an essential design system and the 4 final responsive screens: Homepage (desktop + mobile) and PDP (desktop + mobile).

• Art direction & moodboard: 2–3 named creative directions, each with a moodboard, 3–5 guiding visual principles, and annotated "why" callouts connecting mood to specific UI decisions. AI may be used briefly to explore concept directions, but the proposal itself is built and judged hands-on in Figma.

• Essential design system: color palette (primary, secondary, neutral, semantic), typography (typefaces, scale, line-height), spacing scale, and core components (buttons, inputs, cards, navigation).

• Responsive Homepage: desktop + mobile — establishes the brand's art direction and first impression.

• Responsive PDP: desktop + mobile — the site's most functional page: product identity, imagery, specs, and add-to-cart.

Duration: 7 weeks.

3. Final Presentation — 20 pts

• A polished 4–5 minute presentation walking through the full process: brand rationale → research insights → design decisions → final responsive design (4 screens).

• Clear articulation of how AI was used at each stage (research, concept exploration) and where human design judgment overrode or refined AI-generated output.

• Submitted as a Loom recording and presented live in class.

Duration: 1 week (Week 15).

• Delivery & Clarity — 10 pts: professional pacing, visual polish of the presentation itself, and clear communication of the design rationale.

• Reflective Reasoning, demonstrated live — 10 pts: scored using the Reflective Reasoning row of the Cognitive-Process rubric below, applied to what the student says, not just what they submitted in writing.

4. Weekly Assignments & Participation — 10 pts

• "Week of the App/Web": choose a digital product each week and explain, in blog format, what makes it effective or notable.

• Active engagement in critiques, studio work sessions, and class discussions.

• Regular attendance and punctuality.

Evaluation Criteria — Cognitive-Process

Assessment Framework

Every deliverable in this course — Project Proposal, Design, and Final Presentation — is assessed using this framework. It looks past the polish of the final screens to the thinking underneath: how a student directs AI, curates and challenges its output, and contributes original, hand-finished work. Each dimension names the evidence students should be logging and documenting as they go, and the Google tool most naturally suited to producing that evidence.

This framework is grounded in the same principle behind Google Research's REVEAL benchmark for evaluating AI reasoning chains: a correct-looking final output can still result from a flawed process, so real evaluation has to check each step, and separate factual (Attribution) errors from reasoning (Logical) errors. CPA applies that same lens to a student's design process.

Citation: Jacovi, A., Bitton, Y., Bohnet, B., Herzig, J., Honovich, O., Tseng, M., Collins, M., Aharoni, R., & Geva, M. (2024). A Chain-of-Thought Is as Strong as Its Weakest Link: A Benchmark for Verifiers of Reasoning Chains. Proceedings of the 62nd Annual Meeting of the Association for Computational Linguistics (ACL 2024). arXiv:2402.00559. https://doi.org/10.48550/arXiv.2402.00559. Dataset: huggingface.co/datasets/google/reveal

Students should treat prompt logs, workflow maps, prioritization frameworks, revision trails, mood boards, design system documentation, process notes, and original source files as graded artifacts in their own right — not incidental byproducts. Submit them alongside the Project Proposal and Design deliverables.

How This Converts to Points

Score all 8 dimensions on the 0–3 scale in the rubric on the next page, once against the Project Proposal evidence and once against the Design evidence. Each pass produces a raw score out of 24 (8 dimensions × 3 points).

• Project Proposal points: (raw score ÷ 24) × 40. Example: a raw score of 17/24 → 17 ÷ 24 × 40 = 28.3 pts.

• Design points: (raw score ÷ 24) × 30. Example: a raw score of 20/24 → 20 ÷ 24 × 30 = 25.0 pts.

Final Presentation (20 pts) and Weekly Assignments & Participation (10 pts) are scored separately, as described in Projects & Evaluation above.

Detailed Scoring Rubric

Use this rubric to score each of the 8 dimensions from 0 (Not Evident) to 3 (Exemplary), based on the evidence the student submits. See the previous page for how raw scores convert into Project Proposal and Design points.