Hotello

Overview

Hotello is a user interface design for a hotel booking application developed for my Visual Design class at Kennesaw State University. The prototype aims to evoke the comforting experience of arriving at a hotel as night falls, emphasizing the reassuring glow of hotel lights guiding guests to their destination. This narrative of warmth and safety is the cornerstone of the Hotello design.

Utilizing Variables

To enhance adaptability, I leveraged Figma’s variable system, allowing me to create a responsive design that works seamlessly across different screen sizes and modes. Key features include:

• Multi-Device Responsiveness: Developed layouts for desktop, tablet, and mobile, ensuring a consistent user experience across devices.

  
  

• Auto Layout and 8-Point Grid: All components follow an 8-point grid and auto layout properties, ensuring scalability and consistency in design.

Prioritizing Consistency

Consistency was a key principle throughout the Hotello project. By utilizing reusable components and Figma's variable system, I ensured that design elements remained uniform across all screen sizes and modes. This approach enabled:

• Visual and Functional Consistency: From buttons to typography, every design element was systematically aligned, creating a harmonious user interface.

  
  

• Scalable Design: Ensured that the design could be easily maintained and scaled for future updates, minimizing potential discrepancies during development.

Ideation and Integration

The design system for Hotello was established early in the project, which provided a solid foundation for further refinement. As the design progressed, I focused on continuously improving the UI by iterating on assigned pages and components. During this process, I kept several core principles in mind:

• User-Centric Design: Designed with a focus on presenting information in ways that maximize clarity and value for users.

  
  

• Design Heuristics: Applied fundamental usability principles, ensuring that the interface is intuitive, accessible, and engaging.

  
  

• Iterative Improvement: I regularly revisited and enhanced the design based on feedback, ensuring that the solution addressed both functional and aesthetic goals.

Simplifying User Flows

Simplicity was key to creating an intuitive experience in Hotello. I aimed to keep user flows straightforward while introducing small, delightful interactions to make the experience enjoyable. Some key strategies included:

• Streamlined Interaction: Simplified the process of tasks like hotel check-in, allowing users to complete them effortlessly.

  
  

• Minimalist Design: Focused on reducing visual clutter, using only essential elements to guide users through the interface.

Conclusion

Hotello was one of the first full-scale visual design projects I developed in Figma, making it a pivotal part of my journey as a designer. The project allowed me to explore the intricacies of storytelling through visual design, using a contrasting color palette to enhance the user’s emotional experience. This project solidified my passion for crafting enjoyable, cohesive, and user-centered interfaces. Designing an entirely new interface from scratch was a unique challenge that helped me grow creatively while understanding the users' needs in an adventurous, engaging context.