Responsive e-commerce adventure travel booking site as a conceptual project
Case Study: Zeit
Role: UX/UI Designer, Branding
Project: End to end mobile application, MVP conceptual design for phase 1 of Designlab’s UX intensive.
Duration: 160 hours, 2/10/21 - 4/18/21
Tools: Figma, Miro, Zoom, Optimalsort, Google Forms
Background:
Zeit, a subsidiary of Richard Branson’s Virgin empire, is endeavoring to send humans on inter-planetary voyages, making time travel as accessible and safe as booking a trip to Hawaii. With years of research and testing into the field and a team of scientists on the cutting edge of technology, Zeit is excited to launch the product to the masses. First they need a responsive direct booking app that enganges consumers while engendering trust.
Challenge:
Since time travel is a not yet existent industry, research will be based on current space/adventure travel booking sites. The app should engage as well as educate consumers on the safety of time travel, while allowing direct booking. Branding must be modern and fresh, yet classic and historical.
Solution:
Create a responsive travel booking app that shows products with correct categorization and filtering, allows users to select departure date and duration, and educates consumers about the product. Create branding that reflects the modern yet historical aspects of time travel.
1: Research
Looking into the Adventure Travel market
The fastest growing segment of the tourism idustry, adventure travel is defined by a mix of nature, culture and physical activity. While risky activities comprise part of the picture, it’s more about active engagement, authentic interactions with, and respect for, nature and local culture.
To discover if there was any opportunity for time travel to appeal to this population segment, I conducted secondary research on current industry trends, as well as ran a competitive analysis on similar companies to help narrow the focus of primary research. After getting a good picture of who this service might appeal to, I released a survey to various ages and backgrounds to get personal insights into what motivates and challenges today’s travelers.
Methods: Secondary research, competitive analysis, provisional personas, user surveys
Research goals:
Understand the current market
Identify potential customer base
Understand user’s preferred method of booking and why they use it
Define user likes and pain points
Understand user’s comfort level and preferences for time travel.
Secondary research: Key Market Insights
$589 billion revenue in 2018
Adventure tourism is the fastest growing travel segment
Growing interest in undiscovered locations
Direct booking important
Largest customer base in Europe and US
Largest travel market is Asia/Pacific
Couples are the largest growth persona
30-41 yrs is the largest growth age group
Personalized digital content increasingly important
Travelers are smart, informed, and prepared
Travelers inspired buy passions, interests, and destinations
Focus on natural environment, learning, and meaninful experiences
Booking inluenced by referrals from friends
Strong images, video, and articles important
Competitive Analysis:
A quick look at direct/indirect competitors’ booking platforms, target markets, features, price points, pros and cons to help identify potential opportunities.
While a company like REI Adventures offers many destinations, the price tag is formidable and they are mainly outdoors oriented. Airbnb’s mission is more in line with adventure tourism, but doesn’t offer as many options. Made using Miro.
Provisional Personas:
Made to help identify different groups of travelers. These were helpful in clarifying that Zeit would most likely appeal to Adventure Seekers, Luxury Travelers, and Nomadic groups, which formed the basis of who I targeted in my surveys. Made in Keynote.
Primary research: gathering potential customer feedback
I rounded up 7 frequent travelers of various ages/backgrounds to uncover what their joys/challenges are during the booking process, and why they choose certain experiences over others.
Surveys
Participant selection based on secondary research/provisional personas. Criteria was frequent traveler who uses apps/websites to book trips.
Tool: Google Surveys/remote
Participants: 7
Length: 22 questions
Time to complete: 10 min
Demographics: frequent travelers, ages 20-60
Objectives:
Understand user’s general travel habits and needs.
Understand user’s preferred methods of booking and why they use them as well as what their pain points are.
Understand willingness and preferences for time travel
Assumptions:
That users will adopt use of the app and will be easily able to navigate and book on it
That all safety protocol will be followed by users/operators
That our service holds up in practice
That we will be able to innovate despite future competition
Survey Insights
Respondents travel for work and pleasure
Adventure travel/risk based activities preferred during leisure travel
Respondents enjoy new experiences, most would try time travel
All respondents prefer direct booking online, either with the specific airline or through an app.
Travelers motivated by luxury upgrades like first class seating and free beverages, flexible booking, a rewards program, and a wide range of times/destinations.
Travelers need a straightforward, easy to use booking platform that remembers information and communicates with other apps.
Frustrated by not enough travel options and confusing booking language, having to re enter information.
2: Define
Defining our users
From our research we came to understand that there are many different travel segments, which have different needs based on their situation. Our user base, adventure travelers, tend to travel for leisure, are mostly in the 30-41 age range, and want experiences that allow them to be immersed in a culture and nature in a unique and organic way that at many times involves physical activities. I created a persona and emphathy map to try to get inside the mind of our ideal user.
Methods: User Persona, Empathy Map, Task Flow, User Flow, Site Map
User Persona:
In order to understand our audience, I created a realistic representation of our ideal user based on information from our research that outlines their frustrations, goals, and needs.
Jana represents the qualities of adventurous, spontaneous, adaptable, and efficient in her use of time and resources, and needs an intuitive yet fresh booking platform that supports those traits in a user.
Empathy Map:
Diving deeper into Jana’s thoughts, feelings, and actions around travel booking in order to get a complete picture of our user’s motivations.
Project Goals
I created a Venn Diagram in Miro to examine how the business, tech, and user goals are distinct as well as overlap for the main goal of making time travel safe, popular, and profitable.
Information Architecture
Task flow/user flow mapping was useful in deciding how Jana would best navigate the Zeit travel booking process and and why she would make those decisions. This exercise helped clarify what pages were necessary and what steps could be streamlined to get Jana to checkout as quickly as possible. Made in Miro.
3: Design
Developing the brand
Now that our main task, “purchase a time travel experience using specific filters” has been defined through our user lens, it’s time to think about the features a user needs to accomplish that flow. I started by looking at similar adventure travel booking sites to see how they handled UI requirements and patterns such as Airbnb Adventures, REI Adventures, and NatGeo Adventures. I drew some preliminary sketches then began on wireframing.
Methods: Wireframes, Mood Board, UI Kit/Branding, UI Design
Wireframes:
Mid-fi responsive mockups to get the rough size and placement of elements for the site. Users will need to be able to book trips using mobile, so how the design translates is important. The features and layout are based on the research and feedback collected from survey respondents, a card sorting exercise, and site flows.
Setting the mood:
I chose dark UI as a theme for time travel, as it referenced iconic images of space travel in pop culture and would be easily recognizable by a user. I used Material Design and IOS Standards to guide the development of features, and tools like Pinterest to gather style inspiration.
I used a color palette generator to check the palette, and Webaim to check accessibility. I applied Glassmorphic design techniques to the modals and other card like features throughout the site. The UI Kit and style guide helped me visualize how all elements worked together.
Tools: Figma, Pinterest, Webaim
Fonts: Playfair Display/Nunito
Style tile + logo + UI Kit
UI Design:
Once the basic UI elements were in place, I selected images, illustrations, and icons that matched the color palette and tied the design together in a way that would appeal to our target audience.
High Fidelity
4: Prototype and Test
Figma hi-fi prototype
In the design verification phase I created a prototype in Figma, taking the separate UI elements and joining them in a way that would allow a user to adequately test my ideas and see what needed iteration or clarification.
User Testing
I selected 4 participants who frequently book travel online to conduct in person user tests. Each test took about 10 minutes and users were encouraged to think out loud while I recorded their results as well as points of confusion or frustration. I formulated specific tasks based on current flows and scenarios to guide them through those tasks.
Objectives:
-Evaluate how users navigate the interface from homepage to checkout defined by task.
-Gather thoughts and impressions about the site/brand/content as a whole
-Define frustrations/pain points in navigation
Method: In-person user testing of a hi fidelity mockup in Figma
Tools: Figma, Figma Mirror
Task: purchase the featured experience on the homepage hero image
Test Subjects: 4 users:
Age range: 30-50 years old
Frequent travelers that book online
Interested in time travel or adventurous experiences
Synopsis: Participants were easily able to proceed from homepage to checkout without major confusion.
Observations: most participants intuitively wanted to click the CTA’s and underlined links, swipe L on scrolling galleries, scroll to read the entire page, and click the form fields to enter their info.
Participant feedback:
Easy and straightforward to use
Unique experiences a plus
More links should work and galleries should scroll.
More trip and company details to convince one to buy an experience; not sure one would purchase time travel on a mobile app.
Wants cue to keep scrolling for details
Affinity Map
Quantifying user’s test results by color in preparation for priority revisions. Many users wanted to swipe R on galleries and click on CTA’s, links, and formfields that weren’t animated yet, which led me to believe that my design was realistic.
5. Priority Revisions
Changes made based on user/mentor feedback to improve the navigation and booking experience.
Added CTA to “Our Misson” modal to find out more information
Edited text to clarify company message in “Our Mission” modal
Standardized modal colors/gradients/text
Added activity icons for quick recognition
Edited hero image text and placement
Fixed spacing and colors overall
Fixed top nav bar to include options in a hamburger menu
Fixed passenger info modal
Navigation
optimized for latest phone sizes
added hamburger option menu and quick profile access
fixed font hierarchy
Informing the user
Edited wording to make company mission more clear
Added a CTA to modal to find our more detailed info
Fixed spacing and alignment
Passenger Options
optimized for latest phone sizes
standardized modals
can add or subtract guests
6. Next Steps
Next Steps:
re-test with users to see if the aesthetic changes made work as planned
develop other flows/features
break checkout into separate frames for different phases
Reflection:
Type and quality of research is important. If I would have known better what problems I was solving for, I would have solicited different participants and asked more specific questions relevant to what I was creating. The card sort would have been closed rather than open, as I needed specific responses to help with site organization.
Wireframe quality is key. I used my wireframes as templates for the hi fidelity versions, and spent a lot of time going back to clarify sizes/placement/fonts/etc. I would have made more specific decisions earlier on, like design patterns that are appropriate.
Organizing files/layers in Figma makes revisions easier. Also keeping copies of everything to show iterations.