UX/UI Design for Zeit, a fictional travel company.

Client
Zeit

Year
December 2022-February 2023

Zeit is an innovative company founded on the basis that travel doesn’t have to be confined to this time period. Helping users travel in new ways, using patented and safe technology.
As a new company, with a never before seen concept, Zeit will need to build a trustworthy, attractive and easy to use website that will create positive user experiences.

  • Who is our User?

    In order to properly determine who our user is, I conducted three in-depth interviews with frequent travelers ages 30-60 years old.

    Questions were divided into two categories: Traveling and Booking. Due to the constraints of not being able to divulge to interviewees fully what Zeit Travel specializes in, I gleaned more from the booking questions.

    Some notable takeaways from the interviews included:

    3 out of 3 users complained of booking websites frequently using hidden fees and told me that it built a sense of distrust towards the company. Clear websites with accurate and transparent pricing structures were important to all participants, as was attractive UI design. All 3 participants were invested in making their own travel decisions and plans, though Participant 1 said she would be interested in a company that booked an experience for her if the options were attractive.

  • Who is Our Competition?

    Zeit is just an idea, and because nothing exists like it yet, choosing competitors was based upon other, broader factors, like travel, booking and experiences offered.

    Prior Travel is a company founded in 2018 that specializes in high end and unique travel experiences. They offer the user the ability to really kick back and let the company take the reins. As Zeit will be a booking website that will be for people with more high incomes, it is important to research a luxury travel company.

    Airbnb was an obvious choice, being the king of vacation rental companies, and with a robust booking feature. I chose Airbnb also because they have an attractive and accessible UI design.

    Booking.com is the #1 travel booking site so I wanted to review their website to understand what about them is important to the user.

    Virgin Galactic, Richard Branson’s spaceflight foray, was researched because as far as concept goes, it fits the bill in relation to the unique futuristic nature of Zeit.

  • What Does the Market Say?

    Post-Pandemic, people are eager to have unique adventures and travel experiences.

    According to the World Travel and Tourism Council, 2022 travel projections will reach pre-pandemic levels in 2022/2023, opening up more opportunities to entice travelers with something new.

    Christie Hudson, a PR executive for Expedia Travel, said, “Travel is no longer about going somewhere. Coming out of such a large period of constraints and limitations, 2022 will be the year we wring every bit of richness and meanings out of experiences.”

    This tells us that competition will continue to expand in new and varied directions.

My research led me down a path of understanding about who my user is, and how the website I design can enhance their experience and encourage them to book with Zeit.

Meet Matt Walsh.

Age: 32 Years Old

Gender: Male

Occupation: Sales Executive

Archetype: Adventurous Techie

Location: Palo Alto, California

Status: Married, no children, but plans to have them.

Income: 250k/year

Having established my persona, I began to work on gathering and creating more information to guide myself towards an idea of what the website should be.

Utilizing task flows, user flows, wireframes and a sitemap, I was able to start planning the website execution effectively.

Sitemap

The Sitemap was useful for getting my wireframes going (see below) but overall things changed from my initial sitemap to what the website eventually looked like.

Information Architecture

Information Architecture

User Flow

Initially, I had an idea to include a concierge feature on the website, so further imply luxurious and ease of travel, but time constraints caused me to eliminate this feature as I moved further on in the project.

Task Flow

This task flow was useful in determining that eventually I would need to add in more things for the user to have to do before they could finish the booking, such as choose accommodations, enter passenger details, etc.

Wireframes for Desktop

These wireframes are for the Homepage, Trips Page and a Destinations Page. The Homepage is meant to be pretty minimal, but with obvious CTA buttons and places to easily find more information on who the company is, as well as a generous part on the bottom dedicated to guest safety. In my research of more luxurious travel brands like Prior Travel, Exclusive Resorts, Space X and Virgin Galactic, search bars are not prominent on the front page, because the cost is usually prohibitive and requires more personalized booking. I decided to add a search bar in the Trips page, so as to provide some search option for those who know exactly what they want. My intention for the site was that people would be browsing, at least initially, until they became more frequent visitors.

The Destination page features a place to choose to reserve a date, and a price per person listed, a price that includes all taxes and fees. The Destination page was a point where I could also direct users to book additional experiences and choose accommodations for their journey.

Responsive Wireframes for Desktop, Tablet and Mobile

The Desktop Wireframes I made overall moved seamlessly to their tablet and mobile versions, and I decided to put one photo on the mobile homepage at the top instead of the two, as it didn’t quite fit with both on there. The homepage is very photo heavy, and I think it translates well to both mobile and tablet.

Having done the work to build out a frame for the site, and having gained a better understanding of my persona’s expectations, I was able to move onto the branding and UI design.

Zeit branding was crucial to the success of the website as we know from our persona that our user values attractive and contemporary designs and uses it to measure value in the products and things they choose. I wanted the colors to be associated with trust and excellence, and I opted for a mostly blue color palette that is known to reflect this. In understanding my persona profile, I developed the branding around his style, which is meant to be sleek, interesting, artistic yet readable and accessible. I wanted the website to feel like a contemporary museum but for time travel. Because I couldn’t use any photos of the actual experiences and places offered, black and white historical photos and artworks were a way to work around this while also creating a sense of cohesion amongst the photographs.

I chose Wremena Light as the font for my headings, as I found it highly legible at a large size, and implies elegance without being too stuffy. BIZUDP Gothic Regular and Bold was for my subheadings and buttons, etc and I chose it for how it complimented and worked with Wremena.

Having created a set of brand elements, creating the responsive screens using my ready made wireframes was a smooth process, and though I made some minor changes, the responsive screens ended up being mostly true to their wireframes.

Responsive Screens

Responsive Screens

Homepage

After going back and forth about how to put the search feature on the front page, I decided for something subtle that wouldn’t take the site too far into a generic booking site direction.

Trips

I wanted to show a strong variety of trip options up front, and then attempt to guide the user to explore more of the other pages and add-ons available, including concierge services and additional experiences.

Destination

Once the user has chosen a place to go, they are taken to a unique destination page where they can make some more choices pertaining to their trip before they can move on to reserving a spot.

Booking

The reservation booking page is quite straightforward, the user has a place to enter passenger details as well as review their accommodation options. There is also a map of central Mexico City highlighting the places the user will be visiting on their trip.

Confirmation and Pay

Simple and readable confirmation page. The user still has breadcrumbs at the top in case they need to make any changes and can also amend any passenger details as well. The user must click “I agree” on the two questions to ensure they have read and agreed to the safety guides.

But does it work?

Prototyping

Prototyping

The prototype I built required me to create 3 more responsive screens, one for Accommodations, one for an Experience Detail Page, and one for a secondary confirmation page.

I tested the prototype on 3 subjects. They were asked to use the website while on a zoom call. With observation and also utilizing Google Forms to conduct a post-test survey, information was gathered on website usability. I put my results into an affinity map to help me make sense of how to finalize my Prototype.

Version 1

Version 2

The usability tests showed me the places where I could improve my prototype. It helped me to see the website with fresh eyes and I was able to see the areas that were confusing on the site, and gave me solid ideas to implement.

I added in one small pop out that required the user to choose an accommodation before they finally book, but otherwise did not add in any more pages.

Next

Julio