newweivecreation

Wanderwag

Graduation project | 2 weeks

Mission:
Create a pet-friendly hotel booking platform which helps dog lovers travel with their furry friends anywhere, anytime.

My role:
As a designer, I collaborated with five fellow designers to complete this project within a two-week timeframe. My responsibilities include developing a design system, wireframing, UI design, and prototyping.

Home page

Search results

Hotel information

Project background

Creating a hotel booking platform.

This project was the graduation assignment of the AAPD UI Design Bootcamp, where participants were assigned specific user stories. The primary objective is to design a product that effectively addresses the users' needs outlined in the given stories.

User Story #1: Booking Page

"I want to be able to set accommodation preferences (dates, location, number of people, etc.) on the 'Booking Homepage' and search, enabling me to find accommodations that meet my requirements."

User Story #2: Search Results Page

"I want to be able to browse photos, prices, ratings, and reviews of different accommodations on the 'Search Results Page', so that I can make preliminary decisions."

User Story #3: Accommodation Details Page

"I want to be able to view detailed information about the accommodation, including all photos, facilities, and additional services on the 'Accommodation Details Page' , allowing me to decide whether to book it."

Competitor analysis

Finding our direction.

After conducting an in-depth analysis of our competitors, we were able to refine our approach and determine a clear direction for the design.

By classifying our competitors according to their business models (axis-Y) and visual aesthetics (axis-X), we were able to uncover potential market gaps and define our own distinctive direction.

Universal

Specialized

Vibrant, Energetic

Clean, Settled

Our direction

Pin down

A pet friendly hotel booking platform with clean and settled visual style.

Price-based competition is prevalent among general-purpose hotel booking platforms, making it challenging for new entrants to gain a competitive edge solely through discounts.

To thrive in this competitive landscape, our strategy focuses on identifying and catering to the specific needs of a niche market, namely dog owners seeking pet-friendly accommodations.

Also, we believe that a clean and simple visual design, rather than a vibrant and attention-grabbing one, is more conducive to creating a reassuring and stress-free booking experience for our target audience.

Wanderwag

/noun./

A symbol embodies the essence of carefree exploration and the wagging tails that make every journey more enjoyable.

Mood board

Energetic, Unfettered, Relaxing

We created a mood board based on the core values of our product, guiding us in establishing the visual style's tone.

Design system

Color, Typography, Icon

Before we started the designing process, we decided our basic elements based on the core values of the product and set the visual foundation of the design.

Additionally, we made sure that the usage of colors is aligned with the A11y principles.

Basic component sets

We also took a step further to define the basic components that would be commonly used across the whole product.

The design

We started the design process from wireframing the user stories.

Due to the limited time frame, we aimed on delivering three major screens of our websites. Our first step is to create wireframes for each page to guide us through more detailed designs.

Visualize the using experience.

During the user interface design process, our approach is geared towards cultivating a dog-owner-friendly environment, emphasizing this through the visual presentation of the platform.

Additionally, we have developed an app format for this product to comprehensively address diverse usage scenarios.

Home page UI

Search bar interaction detail

Components in this page

Home page (mobile)

Default

Ready to search

Scroll down

Search bar activated

Search results page UI

Map modal interaction detail

Components in this page

Search results page (mobile)

Scroll down

Search bar activated

Filter list

Hotel page UI

Navigation bar status when scroll down

Components in this page

Hotel page (mobile)

Hotel introduction

Facilities and map

Room options

Save and share

After the project

What I have learned from a UI focused project.

Given the two-week deadline for our UI online bootcamp final project, we opted to prioritize competitive research to identify industry benchmarks and design best practices. While in-depth user research would have been ideal, the time constraints necessitated a focused approach.

Despite the limited user research, our project highlighted the crucial role of design consistency. Working on different pages individually posed challenges in maintaining a cohesive visual aesthetic. Recognizing this, we explored the concept of a design system, realizing its potential to streamline design processes and ensure a unified user experience.

This project presented an opportunity to apply my self-taught design skills to a real-world UI challenge. Collaborating closely with my team, we dived into research, discussions, and iterations to create a detailed design that addressed the project's objectives.

If you're interested in more detail of this project, please don't hesitate to sen me a massage. I'm always up for a chat!