Want to work together?
If you like what you see and want to work together, get in touch!
susirepo@gmail.com
In this time-travel responsive website design, I had the challenge to make it look and feel realistic and create a brand design consistent with the Virgin company's style, so it looks like part of the family.
I worked alongside a mentor who worked as a manager, and other students from the Bootcamp as indirect team members who gave me feedback throughout the process on a weekly basis.
The human race has been dreaming about time travel for ages. How is it finally possible? These are truly exciting times to live in! We as part of the innovative, expansive, and adventurous Virgin group, have been finally able to make time travel tourism available to all of us. With a total of 289 destinations all over the world, from prehistoric times through today.
Let's time-travel!
We want to: Promote a new time-travel service and help make the engagement of a newly launched travel service reach out to a new age of explorers while keeping true to Virgin's values and legacy.
Company's base needs: Create a platform that engages and attracts new users to book and trust our time-travel services.
User's base need: Have an easy way to understand, book, and trust this new service and technology, alongside the support and answers to their needs.
Design a responsive website with friendly and easy-to-understand experiences that answer users' potential questions through informative tools and features.
A how-it-works section, different ways to communicate with experts, audio and video tools for both inclusivity and better immersiveness, and lastly easy navigation to find and book tours make this website unique and increase revisits.
I ran a competitive analysis taking references out of services like flight booking, trip/tour service providers, and unique experiences like a trip back and forth to the outer layer of earth. Along the way, I created feature matrixes and built four archetypes from which the following persona was created.
Now I had a better understanding of how different patterns work for a travel service, and more importantly, what people expect from time traveling and how they think of the past. Afterward, I created a parallel between market trends and features derived from the research findings.
After understanding who I was designing for and having a better look at how to use the market trends for this new service, I ran an ideation session alongside studying some interesting Virgin companies' sites.
1) I took inspiration from Virgin Galactic and its horizontal scrolling experience.
2) I tried to come up with different ways to search for the tours.
3) While ideating, I paid attention to what sections to include to deliver a complete experience to this type of traveler. To achieve this, I asked myself, what would a traveler need while planning, before, during, and after traveling?
4) This question led me to the sections: blog, disguise, masterclasses, and how-we-do-it.
Once I felt like I had something to start with, I jumped right into Figma and digitalized low-fidelity wireframes iterations to, later on, test with them.
1) I split the header into two groups. On the left, the options are all related to the tours and the user's interest, for instance, travel history and saved tours. The options on the right are related to searching and user profile.
2) In the middle of the header is the logo.
3) Above the header is an alert message communicating information travelers should be aware of before booking a tour.
After a few iterations, a couple of group crits with fellow students, and mentor 1:1 sessions, I decided to test some hypotheses by running user tests with potential users.
The first thing I paid attention to was the hero section. Usually tech companies and Virgin use a video or GIF covering the whole visual spay. Therefore, this aspect was kept throughout the iterations.
Search bar: At first I struggled a lot with search patterns. I started with an open search bar, however, since this project is limited in the number of tours available it could lead to frustrations for users. I was also confused about no users. Peer-to-peer group critics and lo-fi user tests later confirmed this. FINAL: I placed a search icon on the header so users could easily access it.
Timeline: At first I struggled a lot with the experience of the timeline. I want it to accentuate the first tour section on the landing page. However, it often confused users, some thought it was an extra filtering feature, and others thought it was a way to scroll through the options. FINAL: I decided to separate it (like in version 2) from the tour section, and create it as a visual way to visualize the year of the tour displayed, like a progress bar moving alongside the user scroll horizontally.
Reviews, Blog, Disguise, Masterclasses: These didn’t change throughout the iteration process until the visual design because these are extra features that are highly valuable to users and function as hooks so that users get access to more relevant information. However, they don’t affect the main flow intended to be tested.
Now that I have a better idea of the whole experience, I decided to study how Virgin uses its brands to design Zeit’s accurately. Here’s what I found from these 4 websites.
1) They all use rounded geometric fonts. And, is only one primary font, just on special and sporadic occasions there is a second font being used.
2) The color palette is very similar using reds, whites, blacks, and purples. The only one that changes is Virgin Galactic which only uses shades of purple.
3) The use of illustrations to explain the technology or service details
4) User of photography or video in the hero section in an inspirational manner
5) The book CTA is squared and has a special hover effect that is different on each website
6) Each of these websites has a unique layout and section distribution that resembles the service they provide
For the final result, I also used different aspects from the brand study, like, geometric typography, use of gradients, black/dark backgrounds, outlined CTAs, and the color palette.
I realized that Virgin uses simple combination mark logos with the Virgin logo inside the logo mark. Also, it uses gradients or shades to give volume. Their logos somewhat relate to the service each provides in a way that easily depicts their product, and finally, the use of special typography for the logotype.
Great, we have a logo! Now, how might we design this website to look exciting and inviting so users feel compelled to explore their way to booking a tour?
First, I created 3 mood board directions and these are the overall winners. These two explore galactic, futuristic, and technology imagery in combination with modern, clean, and dreamy colors and textures.
At last, the best was to combine both of them taking the most out of each.
After having a basic idea of what this website could look like I opened up Figma and created different versions filled with colors, textures, and images the final low-fidelity wireframes. This process was rather fast since the brand study and style tile were thorough enough. I started with the homepage, the category page, the product detail page, and the five pages of the check-out process followed in that respective order.
This clip will automatically play on the hero section depicting Zeit's time travel concept. Just like on other Virgin company's websites, there could be the budget to create an original video clip for the website on real-life project bases.
After feeling like there was enough to start testing I ran two different user tests:
Remote user testing and Interview user testing.
Interview user tests:
5 participants of which two have been part of the process since the beginning, 2 were aware of the project but had never participated at any stage of it, and one person was completely new to the project.
Remote user tests:
Through MAZE.com I was able to reach 12 participants that were completely new to the project.
1) Make the navigation better and easier to eliminate constraints and frustration
2) Rearrange some of the features, especially on the landing page, so that it has a better white space allowing for more relaxed navigation.
3) Make the EXPLORE MORE more relevant and easy to find.
This is the version used to run the user tests. Before this version, there was one to which I changed some features and details based on mentor guidance and peer-to-peer group critic feedback.
At this stage, I also created a version of the mobile variation. However, I stopped on this first version since the user test would only run on the desktop.
Category page: it is designed to deliver as many options as possible to users. Here they have already clicked on one of the filters, therefore are pursuing to explore tours more specifically.
Design aspects & features: This page starts with a catchy image manipulated with filters to make it stand out and match the website's aesthetics. This image would be the photography of a place, object, or person determined by its content. In this case, it was historical periods: Greek columns.
Following the section is a navigation bar with further filtering options with a horizontal scrolling experience. Users will know which filter they're on based on the titles of the tour-card options below and the highlighted word among filter options.
Users will find where to travel by exploring through the raws of tour cards. On this version, users can bookmark the tour they're interested in, preview a destination through an XR experience, or go directly to book it.
To change: The bookmark on this version, as shown on the homepage, looks like it is selected. It should be modified to reflect how users interact with bookmark icons.
'Explore More' is another feature to be enhanced, for one, because it is too small, and second the location to make it more visible and easy to find.
Product page: after users click on one tour they can read all the details of the tour. First, they find a snapshot of the history of the period, figures, and objects to visit, aided by an audio option. Here we find a PREVIEW to have a closer look at where this tour would take travelers through XR options. Second, each day's details and the tour details have clickable links. Lastly, there is a contact CTA in case users have special requests.
Special features: This page welcomes users with an integration of the main attraction of the destination, with geometric shapes to create a dynamic look. In this first section, there is a description of the history of the place to visit. There is a description in writing, as a short description with key highlights, and the same description in audio, as a big play button with sound-wave lines to catch users' attention and to make it self-explanatory about the purpose of the audio. This way of displaying the audio experiences resembles that of the Virgin Galactic website, giving continuity to the brand.
The following are the highlights of each day of the trip. The section below provides a more thorough description of the inclusive and exclusive services offered. There are also cards linking to more information about the diet, stay, health insurance, and other key aspects. This information is presented in writing and audio.
Another feature of this page is the contact links. Since this service is pioneering, users may have some things to be clarified by an expert. Hence, two CTA s linking them to a chat with a professional and another one to scheduling a phone call with an agent.
For the final version, I decided to simplify the landing page by using illustrations for the extra features, added a BLOG link on the header since many participants mentioned how much they liked this feature, and lastly added more and/or reorganized the filters, text links, and tours cards.
Header: For the heather, the logo is located in the center to the left of the logo users will find tour-related links, and on the right a search icon, language, and the sign in CTA.
Hero Section: It stayed very similar to earlier versions, but with higher contrast for better text readability. The description is highlighted so that users easily understand the purpose of Zeit's service.
Tour cards: The main change is that they're slightly smaller to minimize the risk of overwhelming the users and to make them easier to scroll through.
These cards are organized horizontally so users can scroll to the sides to reveal the other options.
Each card has a thumbnail showing a highlight of the tour, a bookmark icon at the top right corner, a header with the name of the tour alongside a short description, and two CTA buttons. One to book the tour, as the main option with a gradient of color fill. The other one is a secondary CTA, with a gradient or color outline and no-fill. Lastly, a decorative timeline gives users an interesting way of knowing the time they are traveling to.
Lastly, a decorative timeline gives users an interesting way of knowing the time they are traveling to.
Reviews: The reviews have a picture of the person leaving the testimonial, the opinion in text and audio, starred rating ranking what others think of that review, and a direct link to the tour the writer booked.
In the first section of this page, there is a breadcrumb for users to go easily back to the previous page and know where they are on the website, since there are many filtering layers, users could get confused easily.
Next, at the top of the second section, another row of filters directly related to the theme of this page, and below it is the tour options distributed in horizontal scrollable rows with three options showing each time.
These tour options are smaller cards than the ones on the homepage. They have a bookmark icon, a description, and two CTAs too.
And finally, the reviews, the blog, disguise options, and masterclasses all related to the theme of the page.
The main change to this page was the distribution of the information and some added details.
Many users asked for the prices on this page during the user testings, hence adding the price details in the first section for users to find them quickly.
The chat/contact CTAs were pushed to the bottom of the page since users expressed that they thought the reviews, blog, masterclasses, disguise, similar tour options, and book/preview were more important.
A book/preview CTA section was added near the bottom of the page, so users didn't have to scroll up again if they wanted to book the tour.
The check-out process has five pages:
1) The first one is where users get to choose dates, and passengers, communicate if they have a specific request/need, and see the price. Besides that, I added a quick link to Virgin Atlantic so users who need it can book a flight to Germany, using Virgin's services to get to where hypothetically the tour begins. Another feature on this page is the opportunity to share the details of the tour (as an email, but this could be more open to sharing it through other platforms)
2) This is where users input their information or that of the traveler. In case the person is traveling a group, there is an option to buy the tour for a group or to book for a group and then split the bill so that each traveler pays for their tour.
Users also have the chance to register a new account or to log in if they haven't. Originally, the idea was to allow travelers to book without registering an account. however, this would be very challenging for the company, therefore it was not adopted on this version.
3) On billing address and payment process users can use the information from their account to automatically fill all the boxes. Also, if they are traveling as a group, they can send an email or text to those who are traveling together for better and faster communication.
4) In this step, users can check all the tour details. Users can go back to the homepage, contact/chat with one expert for further querying, or o cancel the tour if they see any inconveniences.
After updating all the pages with the final design, I set up the prototype for further user testing. Although it is not fully functional, the mini-interactions, scrolls, and hover states are all connected and operating. This is the Figma prototype, thus it does not present a video or a gif in the hero section.
Besides running another user test to check the revisions, design the rest of the pages. Firstly, design all the filters and each variation. Secondly, design the blog, disguise, and masterclass sections. Thirdly, design the log-in process. Lastly, make the hero section's clip work properly on a prototype.
This was an interesting project because of the concept of the service.
Regardless of how crazy the concept was, the goal remained the creation of a product that looks and feels familiar for a user to navigate through, like booking a regular tour or a trip, but more special and with a touch of techy feeling into it.
This project taught me how to work under the constraint of a brand. Having based the project on Virgin as a brand helped me keep it all consistent and to have a more down-to-earth product.
Also learned to actively listen to others' feedback and how to take those thoughts and convert them into actionable steps and solutions.
If you like what you see and want to work together, get in touch!
susirepo@gmail.com