AI

ACE AI Startup Bootcamp

UI/UX Design & Interaction Design

πŸ“– View Session 5 practice lesson plan ← Return to Curriculum page
Day 5 UI/UX Design & Interaction Design Video + AI chatbot learning

UI/UX design & interaction design and AI learning assistant (Codex AI connection)

This is the 5th day's learning content that goes beyond the wireframe stage to design high-resolution UI/UX at the actual service level and materializes a user-centered service experience by applying a design system and state-based interaction. In this exercise, Codex Client Workspace will be used to conduct a UX Audit that objectively analyzes friction points in screen design, UI/terminology consistency testing between plan screens, shortened design to optimize user journey movement, secure logs of difficulties in applying high-age personas, and create quality ratings.

Audience: Students who have completed wireframe design
What you need: laptop, Figma account
Composition: 2 hours user-perspective screen review / 3 hours UI consistency verification and movement improvement design / 1 hour persona quality verification and evaluation report writing
πŸ“– Go to Session 5 teaching plan

πŸš€ Day 5 Practice MVP Tasks Roadmap

Go to the entire Task board β†’
TASK 1
UX Review

Task 1. Review the screen from the user’s perspective

Objectively verify screen specifications from the perspective of a novice user and find areas of inconvenience.

Task 1 Entry to the lab
TASK 2
UI Consistency

Task 2. Review screen consistency

We discover mixed use of terminology and asymmetries in button sizes and placement layouts between different planning screens.

Task 2 Entry to the lab
TASK 3
Journey Mapping

Task 3. Improving user flow

Derive the flow depth until reaching the destination and reduce unnecessary individual guidance steps.

Task 3 Entry to the lab
MISSION 1
AI Persona

Mission 1. Become a first-time user

By projecting an older persona who is somewhat unfamiliar with smartphone use, we secure vivid logs of sign-up difficulties.

Mission 1 Lab Entry
MISSION 2
Usability Score

Mission 2. Evaluate service quality with AI

Information readability, resilience, and flow efficiency are scored and comprehensive improvement plans are prescribed.

Mission 2 Lab Entry

Day 5 lecture video

YouTube Recommended Lectures
This is a list of recommended YouTube lectures corresponding to the core topics of the Day 5 curriculum (high-resolution UI, design system, state design, interaction, and prototyping). (Constructed of free lecture videos that allow external sharing and playback.)
πŸ“š Full list of lectures (5)
  • β–Ά
    1. Design System & Figma Variable Set Up - Full Tutorial
    38:15
  • β–Ά
    2. UI / UX Design Course - Mockup & Design in Figma
    3:58:30
  • β–Ά
    3. Master Figma Components and Variants in 20 Minutes
    20:00
  • β–Ά
    4. Figma Tutorial: Smart Animate and Drag Triggers
    15:45
  • β–Ά
    5. Figma Variables BEGINNER Guide + Variables
    18:42

Key takeaway notes

Day 5 Summary

Today's Key Goals

On Day 5, we move beyond the wireframe stage to design a high-resolution UI/UX at the actual service level and apply a design system and state-based interaction to materialize a user-centered service experience.

  • High-fidelity UI design: Typography, color guidelines, grid application
  • Building a design system: Standardization of common reusable components such as buttons, inputs, and modals
  • State Design: Default, hover, focus, active/inactive state definition
  • Interaction and Transition: Organic connection between screens and use of Smart Animate function
  • Usability testing and feedback: Flow verification through prototype execution
Study tip: Ask the AI chatbot on the right, β€œWhat is the critical difference between high-fidelity and low-fidelity UI?” or β€œHow do I use Variants and Auto Layout when creating a design system in Figma?” Ask the same question.