Section F: Putting It All Together—Capstone Prototype Project
Introduction & Overview
Read summaries of the section's main ideas at different levels of detail.
Quick Overview
Standard
The capstone prototype project is the culmination of your UI/UX journey. In this section, you will walk through all phases of design: defining a problem, empathizing with users, ideating solutions, prototyping, testing, and refining. You'll create a medium-fidelity or high-fidelity prototype using Figma, incorporate real feedback, and present your final work. This project not only reinforces everything you've learned but also prepares you for real-world product design tasks and portfolio development.
Key Concepts
-
| Concept | Description |
-
| :--- | :--- |
-
| Capstone Prototype | A final interactive mockup project combining all UI/UX skills. |
-
| Persona Development | Creating a fictional user profile to focus the design process. |
-
| Visual Hierarchy | Structuring visual elements so the most important ones stand out. |
-
| Iteration | Making multiple improvements based on real user feedback. |
-
| Interactive Prototyping | Designing clickable flows that simulate a real app experience. |
Examples & Applications
Problem: Students struggle to order from multiple local restaurants quickly.
Solution: An app that prioritizes search, filter, and quick checkout flow. User testing showed confusion around payment flow—redesigned layout improved clarity (Iteration).
Memory Aids
Interactive tools to help you remember key concepts
Memory Tools
- Define → Understand (Persona) → Test → I**terate
Memory Tools
- Find users → Engage in testing → Extract insights → D**esign changes
Analogies
The capstone is like building a house: Research finds the land/needs, Wireframes are the foundation, the Prototype is the built structure, and Testing ensures the doors and windows work perfectly.
Flash Cards
Glossary
- Iteration
The process of refining and improving a design repeatedly based on testing and feedback.