Project Objective:

The objective of this project was to design an interactive, user-friendly web application that blends entertainment with intuitive interface design. The goal was to provide users with a fun way to test their knowledge of the hit television shows Breaking Bad and Friends while showcasing thoughtful information hierarchy, clear feedback mechanisms, and responsive design principles.

Key Features:

• Random Episode Challenge: Displays a random episode title for the user to guess, keeping the experience fresh and replayable.

• Season and Episode Selection: Users select the correct season and episode number, reinforcing engagement through interaction.

• Immediate Feedback: Correct or incorrect responses are visually indicated, encouraging continued play and learning.

• Show-Specific Styling: Typography, colors, and grid layouts are customized to match the identity of each show.

• Responsive Design: Grid layouts adapt to mobile screens, with a show/hide button for smaller devices to maintain usability.

Design Process:

• Research and Planning: Reviewed Breaking Bad and Friends episode lists, studied their visual identity, and identified key UX goals, including engagement, clarity, and ease of use.

• Wireframing and Layouts: Sketched grid-based layouts for desktop and mobile views, focusing on information hierarchy and intuitive navigation.

• UI Design: Applied show-specific fonts, colors, and spacing to create a visually cohesive experience. Tested legibility and visual feedback for correct/incorrect guesses.

• Development and Interactivity: Built the application in Visual Studio Code using HTML, CSS, and JavaScript. Implemented random episode selection, interactive grids, and dynamic feedback.

• Testing and Iteration: Conducted usability testing on desktop and mobile, adjusted layout, grid behavior, and feedback mechanics based on user interactions to enhance engagement and accessibility.

• Finalization: Delivered a fully interactive, responsive web application demonstrating a balance of visual design, interactivity, and usability.