What is BThere?

Using AI, BThere aims to revolutionize how users find travel accommodations and activities. Users can input keywords or upload images related to their desired mood to receive personalized suggestions.

view desktop prototype

view mobile prototype

Project overview

Business Needs

Easy user input by simply filling out a few fields and expressing desired mood, and activities
Visual Inspiration by showcasing images that inspire travel aspirations
Transparent Choices by showing the results with a matching percentage

Our challenges

1.Getting information from user?

2.Giving information to user

How users can easily input information ?

How do we can provide enough information without overwhelming users?

My role

Team

Duration

Tools

UX/UI designer

Group of 4

8 weeks, part time

Figma, Photoshop, Zoom, Google Form

Design Process

Interview & Survey

As un initial phase, we conducted a survey followed by interviews to gain insights into the preferences, needs, and pain points of our users.

Here we present the top results.

In our survey, we looked into four main areas:

We used information from our survey & interview to design the search bar, accommodation cards, filters, and sorting options. Later in this case study, you can see the final solutions we have developed.

Interview results: User pain points

Time-consuming research
Overwhelmed by endless choices
Mismatched expectations
Lack of visual inspirations

There are four ways to gather information from users: writing key words, uploading photos, using predefined moodboards, Creating moodboards

To ensure a smooth user flow and visual appealing design for the search bar, we needed to prioritize which of these four ways is most important to users.

The question : How do you like to describe your desired travel vibe?

Solution: In our design, we included a large text box for entering keywords and an icon for uploading photos.

Search bar design:

Accomodation cards design:

To include essential information in our accommodation cards, we focused on understanding which types of information are most important to users.

The question : What information is most significant to you?

Solution: We included price, activities, location, and reviews in our card design.

The images within accommodation cards

We needed to determine which types of images that website offers, are most attractive to users. Then, we can design our cards to be visually appealing.

The question : Which kinds of images do you consider most helpful?

Solution: In our card design, we included photos capturing the ambiance of the place, inside the accommodation, and the surrounding landscape.

Visual design of photos

We wanted to find out how to display photos effectively for users.

The question : How do you prefer to view photos/videos?

Solution: In our card design, we have used mood boards to show the ambiance at a glance. Users can hover over the cards to view various photos and videos.

To identify the user pain points, we interviewed some users who reported using similar websites.

Interview results

Competitive analysis

Our survey highlighted the importance of shwoing information. We evaluated approximately 20 direct and indirect competitors to assess their information architecture, their methods of categorization, as well as their sorting, filtering, pricing, and booking processes.

Top Takeaways:

Information architecture
Accommodation categories and selecting the right titles for each type of accommodation
Additional industry-specific filters (ex: amenities like a pool, etc) enhance user search experience.
The presentation of pricing information in our accomodation cards.

Key findings from our research (Survey & Interview, Competitive Analysis)

Persona

User flow

After defining our persona and scenario based on our research results, we proceeded to create our user flow.

Mi-Fi Wire Framing

Based on our research, card sorting and our site map, we started sketching our ideas. Aafter several iterations, we developed clickable prototypes for validation testing.

In the next section of this case study, you'll see the final wireframes we developed after usability testing and iterations.

Initial Mi-Fi wireframes

Usability test- Phase 1

After transforming sketches into mid-fi clickable wireframes, phase one of usability testing was done with four users. Through iterations, we refined the wireframes before progressing to Hi-Fi prototypes.

Here, we showcase some of our design iterations.

Home page: Search bar

Iteration 1

Final iteration

Users struggled to find the search bar that we had placed in the scroll.

We positioned the search bar on the first page under the hero image.

Product page: Sorting & Map

Iteration 1

Final iteration

Initially, we included all sorting options on the page. However, after testing, we found that this caused significant confusion as users were overwhelmed by the amount of information, making it difficult for them to scan the page easily.

Competitive analysis and usability testing led us to adopt a dropdown menu for sorting, reducing information overload on the page and making it easier for users to navigate.

Final design

In our initial wireframe, we had put a small map format. By usability testing, we noticed that users need to understand where exactly the property locations are.

Finally, we added an interactive map displaying each accommodation's exact location. Users can hover over the cards to view their positions on the map.

UI kit & mood-board

Hi-Fi wireframing

Following usability tests on Mi-Fi wireframes, we designed the Hi-Fi wireframes and initiated the second phase of usability testing.

Hi-Fi wireframes

Usability test- Phase 2

We conducted multiple usability tests using the Hi-Fi wireframes, refining them through iterations before moving on to the Hi-Fi prototypes.

Here, we showcase some of our design iterations.

Product page: Search bar

Iteration 1

Final iteration

Users found it unclear whether clicking "edit" allowed them to modify the date, location, and other details, leading to frustration with the process.

We added a cursor to indicate text editability. By hovering over the fields, users could see color changes, signaling that they could modify the information.

Product page: Type of accomodation filter

Iteration 1

Final iteration

Initially, we placed the accommodation filters vertically on the left side of the results page. However, users struggled to find them, resulting in initial confusion.

After conducting competitive analysis, we moved them to the top of the page, and usability tests showed that it was easier for users to locate them.