TIMELINE:

Approx. 3 weeks

TOOLS:

Figma, Whimsical.

MY ROLES:

End-to-end Product Designer

PROJECT TYPE:

User Research, Strategy, Interaction Design, UI Design, Prototyping, Usability Testing

Project Background

AION is a fictitious time travel tourism company, which is a subsidiary of Richard Branson’s Virgin Group empire. After years of discussions, the International Concordance on Time Travel was announced giving AION the green-light to begin developing the time travel tourism space, within a set of standards and restrictions. A total of 289 destinations ranging from prehistoric times through today have been approved and finalized to begin receiving tourists. Being the first of its kind, AION requires an ecommerce site that will allow potential travelers to learn about their destinations and make the booking process as easy as possible.

Challenges

I approached this project by coming up with the most important questions that I'd need to be facing when designing this responsive website.
How can we create a booking experience that is both user friendly and transparent?
How can we explain to users what a time travel vacation is?
How can we keep all the information as organized as possible?

Research Plan

The purpose of empathy research was to gain an understanding of the needs, behaviors, and pain points the typical traveler incurs when booking a trip. The main goal was to identify features that are important to travelers when booking their trips on a website. In order to gather this data for primary research, a questionnaire was completed by 10 participants and 1:1 interviews were conducted on an additional 4 participants. During the interviews, I asked each of the participants about the process they go through when booking a vacation, I also asked them about their booking and vacation preferences. They also shared past experiences with me.
‍
Secondary research was conducted by completing a competitor analysis on 4 popular bookings, travel and tourism companies as well as collecting online data about vacation trends. (Some of the sites reviewed were Skyscanner, Air BNB, Geo EX, and Symphony of the seas.)

Research Results: Key Insights

Transparency:
Most bad booking experiences that occur as a result of bad customer support. Users want to know what they are paying for and are turned away by hidden charges and fees.

Guiding Principle: Pricing and cost breakdown should be clearly displayed whenever possible. Especially throughout the booking flow.

‍Navigation & Discovery:
Users get frustrated by complicated interfaces and do not want to spend time navigating through confusing websites.
‍
Guiding Principle: The site should display content in a clear and consistent manner in order to enable users to find what they are looking for and discover new destinations. A filtration system should be implemented to assist users in finding exactly what they are looking for.
‍
‍Excitement & Mood:
Most users expressed the feeling of excitement when booking their trip, but stated that the design did not contribute towards their emotions.
‍
Guiding Principle: Create a UX that reinforces the feeling of excitement when booking a vacation.

‍Pricing:
Price always plays a role in booking a destination. Users like to feel that they are getting the best possible deal. At times, the price will determine whether or not a user will book a trip.
‍
Guiding Principle: Provide users with the feeling that they are getting the best possible deal on their trip.

Flexibility & Personalization
Some users like to plan trips that cater to their behaviors, desires, and needs, while others would like the entire trip to be planned for them.
‍
Guiding Principle: Offer the option to create personalized itineraries when relevant.

Persona Development

Brandon Hayes was created as a user persona by analyzing behavioral patterns in the data that was collected through research. Brandon will assist the design process by enabling us to better address the needs and goals of the ideal user group.
Brandon represents a millennial professional who is looking for the perfect travel experience. Due to the time constraints of this project, only one persona was developed. A secondary persona would have been a baby boomer history buff.

Empathy Map

In order to understand things from Brandon's perspective, an Empathy map was created. This better helped me to understand Brandon from an emotional point of view, and allowed me to humanize him. This information will help design the site for the needs of Brandon, and others in his situation. Although this empathy map is based on Brandon's emotions, we also based our design based on the emotional output of our research participants.

Competitor Analysis

Competitor analysis was a bit tricky to conduct because there currently are no companies offering time travel vacations. Instead, I decided to review companies and products that offered similar services. In order to keep the research as diverse as possible, I created a deliverable for my stakeholders which consisted of 5 unique competitors that offered similar services.
‍
Summary of Findings:
Travel sites can be broken down into three specific categories:

1. “Book it yourself” type platforms like Kayak seem to be very popular. Users can book what they want, how they want, and at their own pace. These are popular as users are not tied down.

2. Itinerary based platforms for users that want limited headaches when traveling and prefer for everything to be prearranged. They are also used for trips that are off the beaten track that must be planned ahead of time.
‍
3. Inspiration based sites where users can browse different itineraries, and see ratings from fellow travelers.

Another type of travel site I encountered was a future travel site that offers the possibility to take travel that is not currently available but maybe sometime in the future.

AION needs to combine the elegance of Luxury Travel sites with the brilliance of alternative travel sites. Lastly, it needs to include the edginess of a futuristic tech site.

Product Goals

Once the competitors were thoroughly analyzed the next step was to properly identify the most important goals for the project. I found four goals that were most important to our customers, four goals that were most important to our users, and four goals that were beneficial to both. These goals would help guide me during the next stages of the design process.

Site Map & Card Sorting

Six Participants were used in order to help see how potential users might naturally categorize different trip options. Based on their general responses a rough site map was created. The card sorting also helped me gain an understanding as to how users categorize different events that have taken place throughout world history. These were the first steps taken towards developing the information architecture as the user interface begins taking shape.

Task Flow

I built a task flow that follows the user's direct path through the site from point of entry until conversion (booking a trip).

User Flow

Once the task flow was completed, I went one step further by mapping out all the main interactions that a user would take in order to reach the booking process. This included filtering preferences for a specific trip, adding it to "my trips" (save for later), selecting a trip, and booking it.

Branding & Logo

The primary colors of the AION brand are white, dark blue, purple, and magenta. White and navy represent the contrast of night and day. Purple and magenta represent dusk and dawn which symbolize the changing of times. The O is replaced with a back arrow which embodies traveling back in time.

UI Design

The UI design was inspired by user research and context. As mentioned previously, it was important to the users that the information and navigation on the site be as transparent as possible. An easy to use filtration system was put in place so that users would be able to search for specifics, but at the same time discover more trip options.
The UI of the site includes a "timeline" theme as most people think of time as something linear. Timelines are implemented throughout the site including the itinerary sample.

Wireframes

I began to work on the wireframes once the basic branding design came together. The wireframes went through quite a few iterations until the final product was completed. When designing wireframes, I used as much organic text as possible. This better helped me envision what the pages will actually look like. Once the wireframes were completed I began working on a mid-fidelity design. The wireframes in this deliverable are the third iteration of the basic flow.

Usability Testing

With the prototype complete, I went ahead and began putting together a Usability Test. I recorded my results and made minor adjustments to the design based on their feedback.

Usability Test Plan

Usability Test Results

Affinity Mapping

The feedback and test results provided a very clear guide as to what improvements needed to be implemented. An affinity map was created to assist with the visualization of the feedback. Not only did it help me discover what worked and what didn't, but it also assisted me in understanding the next steps for this project and helped me prioritize the order of updates that needed to be made.

Next Steps

This project has yet to be completed as there are more features that have yet to be implemented including changes to the UI based on user feedback. The final screens of the booking flow need to be designed as well. After this, we will continue testing and iterating in order to continue improving the product.

Final Thoughts

I found designing a hypothetical project based on non-existent technology both challenging and rewarding. The most important thing that I learned from this project is the importance of user research as I believe that more thorough user research should have been conducted before the start of this project. Another is not being afraid to start over. Halfway through, I realized that the original design did not match with the research I had conducted. I decided to take this project back to the drawing board and came up with this current design.

View More of My Work

AION Time Travel

Project Background

Challenges

Research Plan

Research Results: Key Insights

Persona Development

Empathy Map

Competitor Analysis

Product Goals

Site Map & Card Sorting

Task Flow

User Flow

Branding & Logo

UI Design

Wireframes

Prototype

Usability Testing

Affinity Mapping

Next Steps

Final Thoughts