Project
Booking.com Website Re-design
Project Overview
Booking.com - Original Design
About
A web redesign project aimed at improving Booking.com's online experience by making the site more inviting and breaking the white background by adding abstract elements.
Timeline
5 weeks
Tools
- Figma
Role
Web Designer
Research & Discovery
Choosing the Brand
Selected Booking.com for its ease with booking flights and hotels all on one web-page.
User Persona Insights
Lisa & Mark
A retired couple that loves to travel. They prioritize getting the best deals, curted recommendtions, and a seamless booking experience.
Emily
An independent travel that thrives on spontaneity and adventure. Emily likes to book last minute weekend getaways and needs a quick hassle-free way to secure accomodations.
David
A frequent business traveller. He prioritizes efficiency, reliabiikty, and loyalty perks when choosing accomodations.
Competitive Research
Expedia.com
Another travel platform but with a different UI approach.
Airbnb
Focuses on experiences and unique stays with a more personalized feel.
Google Travel
Streamlined trip planning with an emphasis on recommendations.
Moodboard & Style Tiles
Style Tile A
- Darker/Neutral colors
- Use of whitespsce
- Minimal design
Style Tile B
- Brighter colors
- Abstract shapes in background
- Play with font in images
Design Challenge
Goals
- Promote membership options
- Highlight class variety
- Encourage wellness lifestyle
- Simplify site navigation
- Boost user engagement
Constraints
- Designing for multiple user age groups and skill levels
- Keeping it accessible for users with varying tech skills
- Balancing calming aesthetic with clear structure
Process & Outcome
Site Map
This sitemap helped define a clear content hierarchy before diving into wireframes and UI design. It was essential for planning page relationships and simplifying the user experience.
Wireframe Ver. 1
This wireframe was designed with a focus on user flow and task efficiency. Top navigation includes key links (About, Contact, Classes), while visual modules below support skimmability. Each section uses clear headings and a left-right layout to balance text and imagery. A bold CTA section is placed near the top for quick engagement. The page ends with a Contact block, ensuring users always have a next step. This structure supports both exploration and conversion without overwhelming the user.
Wireframe Ver. 2
This low-fidelity wireframe explores a clean and modern homepage design for CorePower Yoga’s website redesign. The structure is built to emphasize clarity, hierarchy, and user action. Key sections like About, Classes, Schedule, and Teachers are prioritized to guide users quickly to essential content. A prominent CTA (Call-to-Action) encourages engagement early, while areas like Careers, Free Trial, and Contact support brand connection and conversion.
PDF Preview of Concept 1
Concept Design 1
I kept the CorePower colors for my re-design but added more elements for Users to browse through the website providing more features on the Homepage. I added symbols to make content easy to understand and played with lines and circles throughout the page to break the whitespace.
PDF Preview of Concept 2
Concept Design 2
I continued with the similar design layout but experimented with breaking the whitespace with abstract shapes and elements. I didn't move forward with this design because I struggled with figuring out what type of elements could help the flow of the site.
Style Tiles / UI System:
Reflection
I learned a lot with breaking white space and adding abstract elements to the design. I kept the consistency with the brand colors and structure while also breaking the white space with thin lined circles and dash lines & circles.