Kronosphere

Responsive E-Commerce Time Travel Site

Project Overview

Kronosphere has been authorized to move forward with commercial chrono-nautical (i.e. time) travel for nearly 300 pre-determined locations. Kronosphere will offer secured experiences throughout the historical timeline and needs a website for guests to browse and purchase experience packages.
Project Scope
Responsive Website, Branding
Tools
Figma, Invision
Role
UX Designer

Challenge

As the first company of its kind, Kronosphere hired me as their UX Designer to establish their brand identity and design a responsive e-commerce site dedicated to the purchase of these packages.

Objectives

Design a responsive, e-commerce website where guests can browse and filter through different trips to find an experience of their choice.
Design a logo to reflect Kronosphere’s mission to be modern and fresh, while also being historical and classic.
View Prototype

Process

01 Empathize

Market Research
Competitor Analysis
User Surveys
User Interviews
User Persona

02 Define

Project Goals
Card Sorting
Site Map

03 Ideate

Feature Roadmap
Task Flows
User Flows
UI Requirements
Wireframes
Branding Guide
Responsive Design
UI Kit

04 Prototype & Test

Hi Fidelity Prototype
Usability Testing
Affinity Map

01 Empathize

Research Plan

Who are we designing for?
There are 7.8 billion people in the world? Are we designing for everyone? How do we know what they will need in a time travel site? Simple answer...we don’t.
So, lets conduct some research.
To understand the users goals, wants, needs and frustrations we need to conduct research. We ask questions, we listen and we empathize.
The goal is to identify
Our target users, the reasons people trust a travel experience and what their expectations are when booking.
Methods used
View Research Plan

Market Research & Competitor Analysis

What is everyone else doing?
With patterns from competitors and tourism reports, I compiled data regarding current and potential trends in travel booking.
Travel Trends among Global Travelers
Global Travelers are more likely to travel to Zurich (which is the initiation point for time travel) or try an experience that is outside of their culture, so I concentrated on those trends.
  • 45% start booking by deciding on a specific destination
  • 67% of high-income travelers said they would rather spend money on activities than a nicer hotel room.
  • 49% won’t book without reviews
  • 85% of travelers use mobile devices to book travel activities.
  • Historical and heritage tours jumped 125% in popularity in 2017
  • 57% of online tour and activity bookings via mobile in 2018 but 73% of revenue was from desktop.
Chat and AI
81% of travelers considered it very important for brands to provide personalized  experiences to their customers and it looks like companies are trying to add to that personalized experience through chat and AI.
  • 60% of  travel companies say they offer customer service via chat.
  • 28% are experimenting with/using AI
  • 25% are experimenting with/using voice search.
Patterns
Patterns across sites tell us what users are used to and what they might expect upon reaching Kronosphere’s website.
The most popular sites:
  • Use the search function as the main CTA
  • Make filtering available and simple
  • Show pricing quickly
  • Offer upgrade and add-on options
  • Use conventional and intuitive navigation
  • Show high-impact images
  • Make reviews easy to access
  • Took 2 clicks to get to the booking page.
Competitor Analysis
Strengths
  • Clear navigation
  • Quick to book
  • Lots of offerings
Weaknesses
  • No full-service packages
  • Third-party vendors
  • Policies differ by vendor
Strengths
  • Navigation is clear
  • Easy to book
  • Lowest price gty
  • 24/7 support
  • Full-service offerings
Weaknesses
  • Cluttered
  • Overwhelming amount of info
Strengths
  • Navigation is clear
  • Easy to book
  • Lowest price gty
  • 24/7 support
  • Full-service offerings
  • Can book in one place
Weaknesses
  • No time travel
Strengths
  • Easy Nav
  • Allows customization
  • Offers some full-service
Weaknesses
  • Nav is unclear
  • Limited to specific dates

User Surveys

How do people approach travel booking?
I wanted to understand general travel habits, so I sent a survey across digital channels with Google Forms (due to pandemic restrictions). Survey received 19 respondents ages 25-44.
Type of Respondents
12 female
6 male
1 non-binary

73% Single with no children
52.6% reported an income of $50k or higher.
74% reported traveling alone or with up to 2 more adults
58% traveled for leisure 1-2 times per year and most preferred to travel by air
User Survey Responses
  • 90-95% of respondents book their travel online and use their desktop
  • 82% reported using third-party discount sites or direct-booking sites rather than search engine results or through tour companies
  • The recorded responses ranked cost (53%), security (32%), convenience (37%) as top 3 most important considerations when booking travel followed by service, customization and the ability to upgrade

User Interviews

How do people book and what do they think/feel about it?
With a general idea of what questions to ask based on previous research, I wanted to understand individual booking processes, expectations and frustrations. I conducted user interviews over Zoom to obtain qualitative data regarding their pain points and goals. Five people ages 25-39 participated in 20-minute interviews.
Type of Respondents
2 female
3 male

40% solo travelers
40% solo or couple travelers
20% family travelers
Interview Findings
  • All users expressed positive experiences with loyalty programs and as the reason they would keep coming back to a specific vendor.
  • Users wanted clear and transparent communication in booking, delays and customer resolution
  • Users want control in booking, modifying & how they view info
  • Users want convenience in how they book and pay
  • Users want to trust the brand so they want to know that it’s safe, that it’s worth it and that it is credible
View User Interview Research

User Persona

Now, who are we designing for?
I created Kathusca, a user persona, from the data and assumptions concluded this research. She is a person who wants good deal, but also wants the process to be convenient so she doesn't have to worry about the details. Keeping her in mind will allow me to fully empathize with my user as I plan and prioritize features.

02 Define

What problem are we trying to solve?
Now that we know who we’re designing for, what do they need in order to have a successful experience on the site? Where might they experience frustration? How can we mitigate that? What will delight them?
Here's where we identify content and features that will be important to the user.
We also need to consider the goals of the business and perhaps any constraints that we will need to work with. Identifying all these items will allow us to plan out a successful site.
To help us define the elements required for a successful site we use

Project Goals

What do the business and users have in common?
Common goals included safety, repeat traffic, a responsive website, build a relationship between the business and the user and making it easy to book a trip.

Card Sort

How will people navigate the site?
A card sorting exercise provides us with insight as to how people naturally group items. This helps us to determine information architecture like site navigation.
I conducted an open card sort using Optimal Workshop
•   8 participants. Ages 24-44
•   Participants sorted cards in groups that made sense to them.
•   Participants were given 30 cards of notable moments in history
Dendogram: Merge Agreement Method
Participants generally agreed on categorizing by geography first  and then by type of event.
Resulting categories to consider for site navigation
•   Location
•   Music, Arts and Culture
•   Famous Landmarks
•   Historical Figures
•   Sports
•   Science and Nature
•   Time period

03 Ideate

Let's solve that problem!
We’ve done the research and set the foundation, it’s time to start generating ideas. Some ideas we’ll throw away and others we’ll keep, but the point is to keep churning until we have plenty of ideas to pick and choose from to find the best solution.
To help optimize these ideas, we create

Task Flows

What will our user do?
We’ll give our user persona, Kathusca, some tasks to complete and identify the path she would take. This will highlight any items that may have been missed and provide more insight to how a user might navigate.

User Flows

How will our user complete these tasks?
Going into further details, we walk through many possible scenarios as Kathusca completes her task.
Why are these details important?
As we move forward to create our UI requirements, these user flows help flesh out the elements the user may interact with and the different possible paths they may take.

Wireframes

Time to start building out the pages!
We started with sketches (lo-fidelity) to complete ideas quickly and move on until finding a solution that meets all requirements based on research.

With the foundation set, mid-fidelity wireframes allow us to focus on visual design principles and placement/size of the different UI elements.
Desktop Mid-Fidelity Wireframes
Responsive Mid-Fidelity Wireframes

Branding

Let's put together a style tile and design the logo
We gathered ideas from across the internet in Pinterest to get a sense of the “mood” or art direction for the brand using the brand attributes:
•   bold
•   geometric
•   welcoming
•   historical
Logo Design
Best practice for any design is to sketch first! Tried out a few ideas based on the concept of time and methods of travel. Some sci-fi inspiration here and there, but ultimately a mariner navigation device--the astrolabe--inspired the final.
Style Tile
The mood board set the art direction, so choosing the color palette, typefaces and font styles took inspiration from those choices.
Each item has either been added as a component or to the style library for easy access and consistency throughout the site.

04 Prototype and Test

Let's put it all together and test it out!
Measure twice, cut once. If we discover what’s not working on the important tasks (based on research) before the product goes to market, we’ll save time, money and user trust by delivering a much better product.
So, let's put together

Prototype

Let's see it in action.
Hi-fidelity pages were mocked up in order to allow users to accomplish specific tasks as laid out per the task flows.

Here, I used InVision to to generate an interactive prototype to test the home page, category page, how it works page, search results page,  and product page.

Usability Testing

Think Aloud Remote User Testing
Prototype shared via InVision and met with participant over Zoom.
Seven users participated between the ages of 25-50
Scenario and Tasks
You’re a big music lover, always going to concerts and your friend Mike recommended that you check out the new time travel website because they have concerts there too. You’re completely new to time travel. You’ve never time traveled before.

Task 1. Find out how time travel works
Task 2. Find a concert for a first time traveler
So, how did it go?
All users were able to complete the tasks successfully. We recorded findings for reference at a later point in time.
View Usability Test Research

Affinity Map

What did we learn?
An affinity map is a great way to categorize observations to see what functions well, what could use improvement and what may need more testing.
Insights
Users were able to navigate pretty quickly and use the search and filter functions. Most comments were regarding some visual hierarchy items and expecting an explanation of how it works on the product page.
Recommendations
  • Testing different placement and contrast of trip label to take advantage of visual hierarchy. (high effort, high impact on usability)
  • Restructure the copy to make it more scannable by using additional headers  to and chunking out the information. (Low effort, low impact on usability)
  • Add a “How It Works” section to the accordion menus (after Itinerary and Amenities) to include a few sentences on how time travel works and reassure the user that specific details will be sent upon booking, to assist users without interrupting their flow. (low effort, high impact on usability)

Priority Revisions

Fixing some issues.
Based on the recommendations suggested from the affinity map findings and prioritizing those by effort vs impact, we made those updates and some cosmetic ones as well.
Before
After
Before
After
Made the updates. We're all done right?
Not quite. It’s important to determine if another round of usability testing is needed and repeat this process as needed.

Reflection and Next Steps

Reflection

This was my first attempt to conduct a full study using the Design Thinking process. I learned how to apply different methods in order to find the problem faced by the users and how to prioritize solutions to effectively answer those pain points. I look forward to applying this knowledge toward future projects.

If I had more time, I would have liked to employ further empathetic exercises like the empathy map and storyboarding to better understand my users. Additionally, I learned that conducting secondary research first is a more efficient use of time. I look forward to refining my research and testing skills as I approach other projects.

Next Steps...Design Implementation and Hand-off

Time for the developers to start coding.
Once testing and revisions are complete, it’s time to hand over all appropriate documentation to the developers and additional team members to implement.
We won't be washing our hands of the project though.
We’ll be available as needed to answer questions and work on updates or new feedback.