Imagine: You get to re-live specific points in time, without worrying about any of those butterfly effects that cause irreplaceable damage to the very fabric of time. That sounds great, doesn't it?
Well lucky for you! It now exists... almost.
Zeit, a subsidiary of Virgin, has the technology to now provide time travel to the general public. Not only do you get to choose a point in time, but you also get to choose a place in the world. With 289 trip packages planned, they are now looking to set up their online presence and booking process in order to entice travelers to book a future trip (to the past) with them.
How do we provide a functional booking experience for these trips?
From user research, I defined the following needs that users had when it came to traveling and booking experiences:
Much of the inconveniences surrounding booking trips is what comes after: Figuring out what to do. With all the planning needed, from having to manually look up places to go to (along with images), activities to do, the weather, what to bring, mapping out points of interests on a map and trying to maximize efficiency... planning gets long-winded. Users need to be able to plan everything easily through Zeit in order to have a less-stressed time beforehand.
And with so many details to consider, users need to be able to easily access this information in order to reduce the amount of frustration they have with feeling unprepared going into a trip.
Having a flexible itinerary in the context of buying a travel package is a necessity because it helps save time with researching and allows users to pick and choose what they want to get out of activities.
The features that Zeit offered boiled down to shaping Zeit's business model to cater to user's needs and to offering these services in a user-friendly way on the website throughout the booking process. The interface was achieved by utilizing existing design patterns.
Time travel is here. Zeit, a subsidiary of Virgin, has the technology to now provide time travel to the general public. I was tasked to create a brand identity and set up a responsive e-commerce website for Zeit to sell their 289 available trip packages.
Disclaimer: This is a speculative project. Zeit is a fictional company.
How do we provide a functional booking experience for these trips?
Team
Role
Duration
Tools
Self-directed, with feedback given from mentor and peers
UI/UX Designer
12 weeks
March - June 2019
Figma, Adobe Illustrator, InVision, Maze, Whimsical
01. Research & Analysis
02. Ideate & Define
03. Design
04. Usability Testing
Researched the current market and potential users
Explored how to best approach site architecture and user navigation
Created a brand identity and applied it create a high fidelity prototype
Evaluated viability of product's features through testing and feedback
Purpose: Scoping out the current market and potential users
Process: Market Research, Competitive Analysis, User Interviews, Persona, Empathy Map
Since Spotify's app and service is already at the forefront of its industry, uncovering statistics and users' experiences would help determine what area I could improve with a new feature.
I researched the travel market to locate trends and demographics. Learning more about these two aspects gave me a sense of who Zeit's audience might be and their needs.
Gone are the in-person travel agencies of yesteryear. With Internet becoming so prevalent in our every day lives, digital travel sales were accounted for 50% of total travel sales in 2018 and direct booking via a company being the #1 trend in sales. Why is this the case?
With information, travel agents, and pictures all available online, it is easier to make a judgment from the comfort of one's own home.
Online payment methods have become more secure, making consumers feel secure in making these large purchases.
Being able to pick-and-choose different travel packages across different companies supports the conveniency factor of digital booking.
Key age groups that travel are 22-56 (although certainly everyone travels!). Generations within this range each have slightly different driving factors as to why they travel, so I took a look at these.
- Motivated by immersive experiences that lets them live life as locals in unique destinations
- Influencer culture drives Gen Z's consumption of travel trends and where to go
- Motivated by adventure, food, and "bleisure" (business and leisure)
- Due to their extensive use of technology and social media, they are huge drivers of the travel market growth
- Motivated by exploration, family-oriented activities, price sensitivity, and cultural interest
- Reviews and informative content heavily influence their decision-making
- Motivated by "bucket list" trips, activities, and feeling pampered
-Tend to take the longest trips (10.5 days on average)
Comparing strengths and weaknesses of Zeit’s competitors allowed me to get a better understanding of available features and offerings on the market. This would later guide decisions on Zeit’s product strategy and user interface.
I reached out to ten participants who traveled within the last year to understand their pain points and preferences that they have when booking and traveling. The interviews were conducted with open-ended questions.
Some key findings were:
“ I think for me, it's plotting out where we want to go. And really figuring out everything we want to do, and plotting it out and see how far everything is. ”
Participant #3, Athena, when asked about inconveniences of planning trips
• Simplify the complexities of researching for a trip
• Provide assurance that the destination is safe
• Entice users with local experiences
Utilizing the findings from research, I created a persona under the name of Markus. Through Markus, I could build empathy and understand user needs, behavior, and pain points when it came to traveling and booking.
.png)
Next, I developed an empathy map to get a full scope of Markus' behaviors and attitudes. By building more empathy through Markus, I could identify what Zeit would need to offer.
Both the persona and empathy map defined overarching needs to accomplish:
Purpose: Explored how to best approach site architecture and user navigation
Process: Card Sorting, Site Map, User Flow
With a catalogue of 289 trips that Zeit offers, being able to sort and filter through them would streamline user experience. Using an in-person card sorting with four participants, I could see how users would categorize different trip packages.
Recurring categories were time period, location, and activities. These were indicative of users' filtering mindset and were thus implemented in categorizing the available trips.
Synthesizing information from the competitive analysis research and card sorting, I generated a site map for Zeit’s website. The map helped me visualize the relationship between screens and the overall flow of the site.
A user flow was created to simulate how a user would navigate through the site to book a trip through Zeit, while considering how to meet their needs through Zeit's various features. This would later provide a usability testing task for site functionality.
Purpose: Created a brand identity and applied it create a high fidelity prototype
Process: Mid-Fidelity Wireframes, Style Guide, UI Kit, High Fidelity Responsive Mockups
To build Zeit’s website, I first sketched designs, then created mid-fidelity wireframes to visualize information architecture and better understand the flow between screens. Below is a sample of several wireframes.
I created a style guide to build a framework for Zeit’s visual design. Keeping in mind that Zeit’s debrief wanted a brand identity that was both futuristic and historical, the choices for the logo, colors, typography, and photo treatment exaggerated a retro and modern feel.
I created a UI kit to use for reference for various UI elements on the website. The treatment of all elements were done to align with the look and feel of the brand identity.
Utilizing the wireframes, style tile, and UI kit, I built a high fidelity version of the landing page and experiences page, along with tablet and mobile versions.
The interactive map originally found on the landing page wireframe was moved to the “Modern History” page to better streamline the user experience on the landing page.
The remaining pages were built as desktop pages only for usability testing.
Purpose: Test the viability of implemented features through usability and feedback
Process: Usability Tasks, Affinity Map, Final Prototype with Priority Revisions
I conducted usability testing with eight participants using Maze in order to test the functionality of the website and observe user interaction. Through this, I could identify pain points or areas of confusion on the pages that could be improved.
I provided three tasks flows for participants to complete:
To identify what worked, consistent user actions, and what to improve upon, I created an affinity map based on my usability findings.
Using the affinity map, priority revisions were completed to continue to ensure that Zeit's website was functional and user-friendly.
Zeit’s project provided a challenge in that it was the full scope of what goes into building a digital product—from researching all the way to implementation.
As some drafted UI elements were changed in the finalized prototype, I discovered how these patterns might be better improved upon by either simplifying them or adjusting them to fit on another page. Looking at these patterns in a different perspective helped me understand what sort of design patterns users and I should expect when looking at e-commerce websites.
Tighten Up Visual Design
To ensure a smooth and proper handoff, I would inspect the visual design to ensure that all elements are consistent with one another.
Build Out Additional Pages
As the website was not fully fleshed out, the remainder of the pages can be built out to make a complete prototype.
Re-test Components and Iterate
With many potential features to test (such as the interactive maps, specific trip pages), I would continue to delve into any specific pain points users may have with these features.
