Redesigning the Digital Experience: The Escape Room UI/UX Project

In 2022, during the early stages of my college career, I was assigned a project that would become a foundational building block in my journey as a front-end web designer and developer. Known as the Escape Room Redesign Project, this coursework emphasized the critical principles of UI/UX design, responsive web design, and image optimization. More than just a creative challenge, this was an academic milestone that showcased my ability to reimagine an outdated digital presence and transform it into a clean, modern, and user-friendly experience.

I earned an A on this assignment, further solidifying my early academic standing and contributing to my overall 4.0 GPA at the Texas State Technical College Web Design and Development program. It also marked one of the first projects where I truly experienced how design and code intersect to elevate the user journey.

The Objective: Turning a Poor User Experience Into a Modern Interface

The original website we were tasked with redesigning had many common flaws seen in outdated web properties: cluttered layouts, poor image scaling, unreadable typography, unresponsive menus, and a lack of accessibility. For educational purposes, the site's real name has been changed to "Escape Room" to avoid infringing on any trademarks or copyrights.

Our assignment brief was simple in theory but comprehensive in scope:

• Reimagine the site architecture and navigation

• Enhance readability and aesthetics

• Implement responsive design principles

• Use image optimization techniques to improve speed

• Incorporate external tools like Font Awesome for visual enhancements

• Create a functioning mobile-friendly menu

Technologies and Tools Used

To bring the new design to life, I used a combination of industry-standard tools and technologies:

• HTML5: For the semantic structure of all content

• CSS3: For layout, typography, and responsive design implementation

• jQuery (JavaScript): To handle interactive elements such as the mobile menu

• Font Awesome: For scalable vector icons that improved visual appeal without loading extra images

• Adobe Photoshop: For cropping, compressing, and color correcting images

• Media Queries: For targeting different screen sizes in CSS

Each of these tools played a critical role in both the visual polish and functional performance of the site.

Responsive Design: Mobile-First Thinking

Mobile responsiveness was a top priority. I implemented a mobile-first design strategy, ensuring the site looked and performed exceptionally on phones and tablets before scaling up to desktop. Using CSS Flexbox and media queries, I restructured content blocks so they could fluidly adjust to any screen size.

Special attention was given to typography legibility, tap targets, and menu accessibility. The addition of jQuery allowed me to introduce a collapsible mobile navigation menu with smooth animation effects, enhancing usability on small screens.

Image Optimization: Performance Meets Quality

High-resolution images are a double-edged sword: they look great but often slow down load times. As part of the project, I:

• Used Photoshop to resize and compress large images

• Converted images to modern formats (e.g., WebP) when applicable

• Included descriptive alt text for SEO and accessibility

• Implemented lazy loading for off-screen images

These steps ensured that every image on the site contributed to its aesthetics without compromising performance or user experience.

Visual Language and Color Theory

Choosing the right color palette was key to evoking the mysterious and adventurous vibe typical of an escape room brand. I opted for a dark-themed base accented with high-contrast CTA buttons and sleek hover effects. Font Awesome icons brought intuitive visual cues to the design, supporting better comprehension without requiring extra page space.

Typography was modernized using Google Fonts, and spacing was normalized across breakpoints for a cohesive, polished look.

Importing and Organizing External CSS

This was also my first experience managing external CSS imports, teaching me how to maintain modularity and organization within a growing stylesheet. I imported global stylesheets for icons and layout resets, and then layered in component-specific CSS.

This approach allowed the code to scale more easily, while remaining DRY (Don't Repeat Yourself) and organized. It also taught me how to troubleshoot CSS conflicts and browser inconsistencies—valuable lessons for real-world development.

UI/UX Strategy: Designing With the User in Mind

This project taught me that great design isn’t just visual—it’s experiential. By simplifying navigation, optimizing load times, and focusing on clarity, I was able to:

• Improve content hierarchy and flow

• Increase usability for all age groups

• Reduce cognitive load by limiting unnecessary elements

• Encourage deeper exploration via CTA buttons and scroll animations

Through wireframing and prototyping, I identified pain points in the old design and corrected them with modern UI/UX principles.

Lessons Learned

The Escape Room project was a crash course in the nuances of good web design. Some of my key takeaways included:

• The importance of responsive design as a default standard

• How small changes in layout and spacing drastically impact usability

• Real-world application of image optimization and external resources

• Bridging creative design and functional coding to build a holistic experience

Conclusion

More than just a class project, the Escape Room redesign was a milestone moment in my development journey. It was the first time I applied multiple design disciplines in a single build—from image optimization and responsive layout to interactive UI elements and visual cohesion.

The project not only earned me an A grade but also boosted my confidence in managing real-world design challenges, helping set the tone for the rest of my college career. It also gave me practical insights into HTML5, CSS3, jQuery, and modern design frameworks—all of which I still use in professional environments today.

Whether you’re rebranding a business or rethinking an old interface, the principles I applied in this early college project continue to shape how I build engaging, efficient, and accessible web experiences.