ASTRA Logo Full
Responsive e-commerce interstellar travel booking site
ASTRA Mockup Laptop
Responsive e-commerce interstellar travel booking
ASTRA Logo Full
ASTRA Mockup Laptop & Mobile
Responsive e-commerce interstellar travel booking
ASTRA Logo Full
ASTRA Mockup Laptop & Mobile
Client:
ASTRA
Role:
UX/UI Designer, Researcher, Visual Designer
Project Type:
UX/UI Design, Research, Branding, Prototyping
Tools Used:
Figma, OptimalSort, Maze
Year
2022
View Prototype
*This is a fictional project, consisting of real and fictional destinations. While the content may be fictional, the research and UX processes are organic and real
ASTRA Mockup Laptop & Mobile
*This is a fictional project, consisting of fictional destinations.
*The following Background and Goal sections appear in the crawl in the video above.

OVERVIEW

Client: ASTRA
Project type
: UX/UI Design, Research, Branding
Role: UX/UI designer, Visual Designer
Timeline: 12 weeks
Tools Used: Figma, OptimalSort, Maze
Background

ASTRA NOVA

ASTRA is a division of Cosmo, the multi-trillion dollar company responsible for making interstellar travel possible by inventing the HyperX drive. It is the year 2122; the successful colonization of Mars, the creation of numerous stations and outposts around the Milky Way, and the stabilization of the black hole, Nera, allowing humans to reach the Veyyon Galaxy has created an unprecedented chance to drive interstellar as well as intergalactic tourism.

Project Goal

ONE SMALL STEP FOR MAN

With space travel mastered, and the universe connected to a degree never before seen, ASTRA is seeking to understand its potential user base and build a responsive e-commerce website to facilitate booking interstellar and intergalactic travel. (And of course, to eventually get bought out by Elon Musk VI for a ridiculous amount of money.)
Design Process

AND, HERE. WE. GO

RESEARCH

DEFINE

IDEATE

PROTOTYPE

TESTING

1
2
3
4
5
Research Goal
Competitive Analysis
User Interviews
User Persona
Empathy Map
User Journey Map
Card Sorting
Site Map
Task Flow
User Flow
Wireframes
Responsive Design
Logo Design
UI Kit
High Fidelity Wireframes & Prototype
Usability Testing
Affinity Map

RESEARCH

Research Goal

'ASTRA'NAUTICS

The journey of a 1000 miles begins with the first step, I'm starting mine with a bad pun and a research goal. The purpose of research for this project was to understand the online travel booking market to get into the minds of potential travelers who regularly book travel through online booking services, and to better understand their behavior concerning online travel booking as well as any other goals and pain points that they considered significant.
NOTE: While this project is set in a fictional future, data had to be gathered from the year 2022. As such, due to the COVID-19 pandemic during that time, data gathered reflected  traveling habits during that time and not the future.

MARKET RESEARCH

Space travel is a relatively new endeavor, but will most likely fit into the already existing global travel market and the behaviors associated with it when it becomes a norm.
  • The travel industry is estimated to be worth around $1.2 trillion annually, and the online booking market makes up 63% of that, or roughly $756 billion (StratosJets, 2022)
  • 27% of all online spending is spent on travel bookings. (Inkadvertising, 2021)
  • 83% of US adults want to book their trips online (StratosJets, 2022)
  • Over 148 million travel bookings are made online annually. (StratosJets, 2022)
  • In 2022, 64% of those who book trips online make them on desktop, and 44% make them on a mobile device. This shows a shift from 2021, when 59% of bookings were done on desktop and 41% on a mobile device (SalesCycle, 2022)
  • In a post-pandemic world, three concerns top the charts for the surveyed travelers: (Amadeus, 2021)
  1. Fear of contracting COVID-19 (41%),
  2. Quarantine or self-isolation mandates in different regions (41%),
  3. Last-minute cancellations or changes due to travel restrictions (37%)
  • The comfort and ease of online travel booking, along with it’s growth in recent years is reflected in the fact that employment of travel agents is projected to increase only 5%  from 2020 to 2030, slower than the average for all occupations (BLS, 2022)
Competitive Analysis

THE COMPETITIVE SPACE

That pun was intended. With an understanding of the current market, I now needed to see how established travel booking companies were currently delivering their services. I conducted a competitive analysis by looking at, and analyzing those who would be likely competitors of ASTRA. Analyzing competitors of ASTRA allowed me to gain more insight into the current travel/trip booking market, as well as identify their strengths and weaknesses that could be utilized in my design decision process
Competitive Analysis
Click to enlarge
User Interviews

DO YOU HAVE A MOMENT TO TALK ABOUT

To better understand the behaviors, goals, and pain points of those who book travel online, I conducted one-on-one user interviews with 4 potential users who mainly booked travel through online services.
  • Users spent between $2000 - $10,000 USD on travel per year.
  • All users book airline travel on average twice a year.
  • 3 out 4 users report an average trip duration of 2-4 weeks.
  • 3 out of 4 users stated that they often travel with family and friends.
  • All users preferred booking trips on their desktop/laptop as opposed to mobile.
While they generally reported positive experiences with travel, the COVID-19 pandemic their travel habits, including increased stress while going through airports and traveling less than they would normally do. Some important takeaways noted from the interviews are listed below:
GOALS & OBJECTIVES
  • Book trips quickly without hassle
  • Spend less than a day traveling
  • Discover new places and experiences
  • Cancel/change trips in case of unforeseen situations
  • Create their own itinerary, search for specific times, dates and airlines
PAIN POINTS
  • Confusing, hard to navigate website
  • Lack of proper information for, and site not updating to reflect unavailable trips
  • Inflexible cancellation/change policies and resulting poor compensation
  • Fluctuating prices which force one to move fast to make a purchase

DEFINE

Empathy Map

SO TELL ME MORE

I then created an empathy map to capture additional observations and notes from the user interviews to further complement my user persona. This was useful to organize all my notes as I was running out of space (there's that pun) on my wall for stickies.
Card Sorting

GALACTIC SOLITAIRE

Card sorting was conducted remotely via OptimalSort to see how users organized planets, galaxies, and other content on the site. 20 cards listing the various destinations were created for this activity. To make sure the participants weren't completely lost in space, I gave them a brief description of the fictional destinations before the card sort to give them more of an understanding of what they were. You're welcome, John.

IDEATE

Site Map

INTERSTELLAR NAVIGATION

With the data gathered from card sorting, I proceeded to create a site map to create a basic outline of the navigation on the site. This was done to visualize the organization users expected to see as per the card sorting exercise and to get a better picture of what options the user would have for them when they first landed on the homepage. Can't have you getting lost John.
Task Flow

“ROADS? WHERE WE'RE GOING, WE DON'T NEED ROADS”

With all the information I had collected thus far, I created a task flow to illustrate how a user would approach the task of booking a trip, from the moment they arrived on the site to the point where they successfully booked a trip. This was done to get a feeling of what pages and features I would eventually integrate into the design and what potential obstacles the user might run into.
User Flow

HOUSTON, WE HAVE A FLOW

Having outlined the main task in the task flow, I created a user flow map to illustrate the various decisions a user might make on ASTRA and what paths they could take toward booking a trip. With the user flow laid out, I now had a clear image of the pages to prioritize for my initial wireframes. Do or do not John, there is no try.
Site Map

INTERSTELLAR NAVIGATION

With the data gathered from card sorting, I proceeded to create a site map in order to create a basic outline of the navigation on the site. This was done to visualize the organization users expected to see as per the card sorting exercise and to get a better picture of what options the user would have to them when they first landed on the homepage. Can't have you getting lost John
Task Flow

“ROADS? WHERE WE'RE GOING,
WE DON'T NEED ROADS”

With all the information I had collected thus far, I created a task flow to illustrate how a user would approach the task of booking a trip, from the moment they arrived on the site to the point where they successfully booked a trip. This was done to get a feeling of what pages and features I would eventually integrate into the design and what potential obstacles the user might run into.
User Flow
User Flow

HOUSTON, WE HAVE
A FLOW

Having outlined the main task in the task flow, I created a user flow map to illustrate the various decisions a user might make on ASTRA and what paths they could take toward booking a trip. With the user flow laid out, I now had a clear image of the pages to prioritize for my initial wireframes. Do or do not John, there is no try.
Wireframes

ASTRA’S ANATOMY

Now that the captain has switched off the seat belt sign, it felt like the right moment to begin working on the wireframes for ASTRA. I initially focused on the home page, search results page, and concepts for the trip booking section. But like a measly bag of pretzels, those pages by themselves did not convey the flow I had envisaged, and the flow that was outlined in the user and task flows. I then proceeded to flesh out and add the rest of the necessary pages to properly visualize the ASTRA experience.
Wireframe Low Fidelity
Responsive Design

TECHNICALLY NOT A PLANET

Sorry, Pluto, that was uncalled for. I created variants of the home page for tablet and mobile screens to visualize the responsive design. Due to the time constraints of the project, these weren't fully fleshed out which will be a focus for future iterations.
Logo Design

MAKING A STAR LIGHT, STAR BRIGHT

In Latin, ASTRA means "star". I wanted to capture the essence of space while simultaneously representing a premium look for my logo. To do so, I created a shining star at the end of the first A in ASTRA and incorporated a ring around it similar to Saturn's ring.
UI Kit

IT’S ALL COMING TOGETHER

With the logo designed, I proceeded to create a UI kit in order to assist me during the design process.
UI Kit

PROTOTYPE

High Fidelity Wireframe & Prototype

THIS IS WHERE THE FUN BEGINS

Utilizing my wireframes, UI kit, relevant puns and the finalized logo, I went about creating  high fidelity wireframes and an interactive prototype within Figma.
Searching for Destinations

IT TAKES TWO TO MAKE A THING GO RIGHT

For ASTRA, I created two ways for a user to search for their destinations. One was a simple navigation menu, the other was an interactive map of the galaxy which allowed users to explore, discover and learn more about their chosen galaxy.

NAVIGATION MENU

One way was for a user to utilize a navigation menu that they could access from the main navigation bar at the top of the page.

GALACTIC MAP

The other was an interactive map of the galaxy, that could be accessed from the homepage, which allowed users to explore, discover and learn more about their chosen galaxy.
Booking a trip

THE MARTIAN

The following shows John booking himself a round-trip to Valles Marineras Station on Mars. He's definitely been saving up because those Economy tickets are not cheap.
Searching for Destinations

IT TAKES TWO TO MAKE A THING GO RIGHT

For ASTRA, I created two ways for a user to search for their destinations. One was a simple navigation menu, the other was an interactive map of the galaxy which allowed users to explore, discover and learn more about their chosen galaxy.

NAVIGATION MENU

One way was for a user to utilize a navigation menu that they could access from the main navigation bar at the top of the page.

GALACTIC MAP

The other was an interactive map of the galaxy, that could be accessed from the homepage, which allowed users to explore, discover and learn more about their chosen galaxy.

GALACTIC MAP

The other was an interactive map of the galaxy, that could be accessed from the homepage, which allowed users to explore, discover and learn more about their chosen galaxy.
Booking a trip

THE MARTIAN

Just a simple round-trip from Earth to the Valles Marineris Station on Mars.

TESTING

MISSION LOG

  1. Book a trip to Mars
  2. Search for a destination

Usability Testing

GO/NO GO FOR FLIGHT

To assess my design, I conducted remote usability tests of my prototype on Maze. Two tasks were presented to participants with the goal being to;

MISSION LOG

  1. Book a trip to Mars
  2. Search for a destination

  • Gauge how easily user’s could perform the tasks
  • How user’s search for their destination.
  • How long it takes them and which method (navigation, map) they prefer most.
  • Make notes on any difficulties and feedback provided by users.
  • Utilize the information gathered to iterate and improve upon the design.
Affinity Map

HOW WAS YOUR FLIGHT?

Following the usability test, I compiled the information gathered into an affinity map.  The majority of the participants were able to complete the first task without much hassle and enjoyed the experience. The second task presented some difficulty to the participants and their feedback was noted.
WINS/STRENGTHS
  • Easy to understand and use
  • Participants enjoyed the appearance of the homepage
  • 2 out of 5 participants stated that the Galactic map was their favorite part, and made the site feel more interactive
  • Average overall experience score: 9/10
WEAKNESSES
  • Expected a search bar/icon in galactic map to search for destination .
  • Some unfinished design (no zoom on map)
  • Some were unaware of the presence of the Galactic Map on the homepage
  • Text heavy on certain pages

REFLECTIONS & FUTURE

ASTRA was my first user experience design project and I thoroughly enjoyed the process. Throughout this project, I was able to learn many techniques pertaining to research methodologies, UI design, and prototyping to name a few. Even though this was a fictional project, I followed the same UX design processes that I would for any other UX project. Looking back, I do realize that improvements could be made especially within the research phase of the project since I had a rather small pool of users to interview. This is definitely something I will be more mindful of in the future.
Regarding the future of ASTRA, I would focus on:
  • An onboarding experience to introduce users to ASTRA and the website, especially the galactic map
  • Some minor UI changes, especially those mentioned during usability testing
  • Cutting down on the amount of text on certain pages.
  • I focused on the Milky Way Galaxy for the first version, but fleshing out the pages for the Veyyon Galaxy and its' associated planets and giving users some context on intergalactic travel would be essential for future iterations.
  • Designing the mobile and tablet versions

MORE OF MY WORK

Add a feature
LVL-UP
End-to-End Application
GAIA
Responsive Redesign
DUNBAR PIZZA & INDIAN FOOD