CASE STUDY
I designed an speculative space tourism website.
A reflection about space tourism revolution: is there a real necessity, accessibility, and sustainability of these journeys?
Orion
I've always been fond of science fiction, and I thought a good way to have fun while doing the final project of my degree would be to go beyond reality, in order to have more options to play with. That's why I created ‘Orion’.
The desired outcome is the creation of a speculative design for a website that enables users to embark on space journeys, while promoting innovation, responsibility, and awareness in space exploration. Also imagining how would be space tourism trips if those were accessible and inclusive for everyone. It's not just about visually appealing web design; it's about providing information to foster awareness and encourage participation in a dialogue about the future of space travel.
ABOUT THE PROJECT
Understand people's current habits in related to the planning, research and booking of their trips.
Evaluate the competition in the field of space tourism and identify current trends related to this kind of travels.
Develop a prototype that provides users with an inspiring, exciting, and memorable experience, creating a meaningful moment.
WORK PROCESS
To ensure the success of the product, it has been carried out through an iterative process from the perspective of design thinking to understand the possibilities offered by the technology, the product requirements that have been created, and the needs of the end users. It is essential to consider the user in all phases of the design process, and therefore, the UCD model has been utilized to ensure that people find the product useful and usable.
DATE
September 2023 - January 2024
ROLE
Art Direction
UX/UI Design
TOOLS
Figma
Phase 1
RESEARCH, DEFINITION AND IDEATION
1.DESK RESEARCH
In order to gather information about the design problem I conducted a desk research, which will allow to focus the decisions to make and determine the direction of the investigation.
2. BENCHMARKING
I conducted an analysis on products that directly compete with the website I wanted to create which have been selected to offer space tourism flight services. Additionally, two other websites offering commercial airplane flights had been taken into account. These websites included names such as Virgin Galactic, Blue Origin, SpaceX, Zero 2 Infinity, Space Adventures, as well as the airlines Ryanair and Vueling.
Benchmarking competitor
Competitor Analysis General Table
BENCHMARKING INSIGHTS
The analysis helped extract several insights that would allow me to shape the final product.
Attractive visual design and user-friendly interface: key to improving understanding.
Visual tracking of astronauts before and after travel: informative and entertaining.
Inclusion of travel kits.
Step-by-step explanation of the process: reduce uncertainty, increase confidence.
High-quality images to showcase emotions.
Reservation and rewards functionality: improves interaction, encourages loyalty.
Lack of direct online booking option: obstacle to quick booking.
Absence of sustainability information: significant omission.
Limited destination offering and price transparency: limits choices, transparency.
Use of categories and section division: facilitates navigation.
Visual timeline of milestones: educational and inspiring.
Elements such as trip planner and maps: aid effective organization.
Positive user experience, including accessibility: valued by customers.
3. USER PROFILE
I identified which are the main groups that could use this platform. For this reason I brainstormed the potential users discovering that some of them had an special interest because they have a close knowledge of the subject so I focused on two of them as in a real environment budgets are limited.
Therefore, the primary user and secondary user had been finally defined.
I selected the primary user in order to create a persona profile card. The primary user is people who are curious about the cosmos, space exploration, space tourism missions and travels.
Persona profile card
4. INTERVIEWS
I decided to interview potential users in order to study in more detail the initial question: Which are the main obstacles or challenges that prevent the future users travelling to space at the moment? How might we overcome these obstacles to make these journeys more accessible and sustainable in the future?
6 semi-structured interviews
Objective: to know the concerns of a group of diverse ages the main factor that unites them is curiosity about the cosmos, space exploration, missions and space tourist trips.
To achieve this I prepared a list of research questions and finally I ended up having the script for the interviews:
Introduction
Traveling experience
Interests and knowledge about space
Space exploration and space tourism
Needs and expectations
Sustainability and environmental impact
Content and space education
Technology and interactive experience
Personal impact
Future projection
Insights from the interviews
After the interviews I captured the insights into an Affinity Map which allowed me to extract that a predominant type of traveler was revealed: the one who plans trips in a general way without going into details.
Extracted from the Affinity Map
5. PERSONAS
As I said before, the knowledge obtained through the interviews gave me what I needed to create a representative profile for the web page future users. With this aim I created the profile of Jordi Pérez: he likes to improvise, planning his activities in broad strokes and letting himself be carried away during the trip. He investigates about basic aspects of the destination, asks friends and do some internet searches to get an idea of what he can do.
Persona
6. SCENARIOS
Using Jordi Pérez’s profile I created three scenarios in which Jordi uses the website, showing the interaction he has with it since the first access, user registration, personalization of preferences and other uses of the web page.
Scenario 1
Jordi discovers the space tourism website, personalizes it and navigates through it, noting which trips interest him the most.
Scenario 2
Jordi selects the trip and organizes it through the page.
Scenario 3
Jordi interacts with other space travelers through the website's online community.
7. USER JOURNEYS
I explained visually what I related in the scenarios to test the product and detect the touchpoints that the user makes when interacting with it.
User Journey Scenario 1
8. REQUIREMENTS
The data extracted from the research and definition phase allowed me to obtain the requirements that the web page must include.
I’m sharing below some of them:
Functional requirements:
Selection of user preferences when registering.
Provide instant connections with other members based on similar profiles.
Show the demand for selected dates and offer discounts if the user select dates with lower demand.
Create a wishlist with user’s favorite places.
Emotional requirements:
Display on the user's profile with highly personalized messages according to the preferences set by the user.
Information requirements:
Images of space, locations, of the ship, and elements of space.
Security requirements:
Security and trust in the payment process.
Environmental requirements:
Option to share experiences on social networks.
Phase 2
PROTOTYPING
1. INVENTORY OF CONTENTS
Once I had defined the functional and non-functional requirements of the web page, I created the content inventory to define the different levels of navigation and thus visualize the overall structure of the platform.
Inventory of contents
2. CARD SORTING
To ensure that the website was easy to use and intuitive, I used the card sorting technique, which allowed me to analyze the future users mental models and understand how they expect the contents to be organized and labeled. I observed how they grouped the documents provided to them and how they named each category. This technique was carried out through the Optimal Workshop platform with 15 participants. The card sorting was open, giving users the opportunity to include the products in groups whose names belonged to them.
Card sorting content cards
Card Sorting results
Identified 9 different groups for organizing cards.
Most participants agree on grouping in "Search, Home," "Community, Social Area," and "My Profile, My Space, Personal Area."
Some spaces are more debated: "Set up your trip" is divided, with over half grouping it in "Trips," causing confusion.
Cards "For unregistered users: see a space map to visualize destinations with basic points of interest" and "View saved favorite destinations" are often grouped together, though unclearly.
"Read and view content related to space, travel, discoveries..." typically placed in groups related to "Discovery, Information, Space learning."
"Buy tickets" is uncertainly placed, with suggestions for home, travel space, user profile, or even a dedicated "Purchase travel" section.
"View special offers or discounts obtainable with loyalty points" is often grouped in the user profile section, with names like "My Profile, User Profile, User Area, My Space, User Management."
3. TREE OF CONTENTS
According to the results reflected in the card sorting, I developed an intuitive structure for the web page contents. I defined five main sections, which will be available in the navigation menu of the web page. The start and search screens are accessible without registration, but the rest of the content is reserved for those who have created an account. Once they do, they can customize their profile and access the rest of the sections.
The elements that generated less consensus in the card sorting were located in several areas. The travel settings card, located by only 53% of users in the “Travel” section, remained there. On the other hand, the tabs “For non-registered users: View a space map to view destinations with basic points of interest” and “View destinations I have saved as favorites” were placed on the home page and in the "Wishlist" section under "Travel". The "Buy tickets" card were removed, as it makes more sense for the user to purchase a ticket after accessing a specific destination and, if applicable, make the final purchase of the ticket, accommodation, etc.
Tree of contents
4. FLOW DIAGRAMS
Once I defined the content tree, I recovered the scenarios and user journeys to graphically represent the user's navigation on the web page in flow diagrams. This diagram helps us understand and analyze the process the user follows, identifying actions, available options and possible friction points along the way. That helped to better understand the user experience and optimize it to achieve a more efficient, intuitive and satisfying process.
Flow Diagram 1
5. SKETCHES
The hand sketches mark a starting point in the visual representation of the screens and how they connect to each other. These first drawings were the basis for the creation of the prototypes and also to show the key elements of the screens and buttons, allowing the product to be quickly adjusted and improved.
Sketches
Sketches
Sketches
6. WIREFRAMES
The initial stage of development involved the creation of the low-fidelity wireframes, which will served me to observe what the interactions of the product are. These screens presented a basic structure of the components, connected to create an interactive wireframe prototype using Figma. This prototype was divided into three different flows, created from the previously defined information architecture.
Wireframes
Graphic Style
Orion webpage style guide
7. HIGH FIDELITY INTERACTIVE PROTOTYPE
This stage is based on the conclusions obtained from the previous phases, integrating sketches and wireframes for the prototype development. It was designed in digital format using Figma. The decisions taken previously were maintained with a particular emphasis on the visual part. After creating the various screens that allowed to test the user journeys and pre-defined flows, I proceeded to add other visual elements and connect each of the screens to create an interactive experience. This way the prototype could be functional and could be tested with users for more thorough evaluation.
In the next stage of the prototyping process I developed a high-fidelity interactive prototype. Initially, I established the visual identity of the web page defining its colors, fonts, icons and logo. I took as a reference the aesthetics of the universe using dark tones to evoke the atmosphere of space. In addition, I used secondary colors sparingly maintaining a minimalist aesthetic and clean lines.
Homepage
Destination page | Mars
Destination description
Travel: selection of dates, times and prices
Phase 3
EVALUATION
1. USER TESTING
Based on the scenarios and user journeys established in the project, I verified whether the various interfaces and interaction processes of the application were properly designed and whether users experienced difficulties in achieving their goals. The tests lasted approximately 20-30 minutes and were carried out by video conference through Teams or in person, using Figma using the prototype.
The main objective of these tests was to evaluate the level of usability of the web page and to understand the behavior of users while interacting with it. This provided me with information about potential problems and potential optimization ways. To carry out these tests, three people who matched the user profile previously defined were selected.
Tasks, observations and direct success percentage
2. DETECTED PROBLEMS AND PROPOSED IMPROVEMENTS
Through these tests I was able to evaluate the usability of the prototype generating several insights that would require an assessment to implement improvements in the final interactive prototype. With the observations and comments collected, the identified problems were selected and classified according to their severity. This allowed me to propose improvement ideas or specific solutions for each detected problem.
List of detected problems ordered by severity and solution proposal
3. LATEST CHANGES IN THE HIGH FIDELITY PROTOTYPE
Finally, to confirm that the final design with the improvements applied had obtained positive results, I carried out a second round of tests with users using the high-fidelity prototype. As in the previous round, the tests were moderated with three users, including a face-to-face session. I kept the same tasks that were used in the first round for a consistent comparison of prototype performance.
Problems identified in this phase were of minor importance and were limited to two specific aspects: firstly, the access button to the routes and excursions did not clearly induce its functionality since it did not have any highlighting effect when passing the cursor on it. On the other hand, when users accessed the events section and saw the event image at the top, they experienced difficulty discerning whether this image was interactive or simply a visual representation without associated content.
Results of task 1 (second round of tests)
4. LATEST CHANGES IN THE HIGH FIDELITY PROTOTYPE
Finally, the improvements observed during the second phase of user testing were implemented in the high-fidelity prototype to achieve the final version before development.
Changes made include:
Access button to routes and excursions: The previous button did not show any visual effect when hovering over it going unnoticed by users. It was modified by adding a color transition on hover to highlight its functionality and clearly indicate available access.
CTA to access the event information located at the top of the section: The image of the event was not clear enough as an interactive element so an additional button was introduced to make it easier to understand and use, making it more obvious that you can click to access the desired information.
Interact with the prototype
CONCLUSIONS
To carry out this work I used an iterative design process based on design thinking, focused on the users needs. These people have played a key role in the development of the project and in the configuration of the design.
In general, the methods defined to obtain the final product have been adequate and have been fulfilled to a large extent. However, the final phase lacked adequate time control possibly due to lack of experience, and excessive hours were spent designing the web page with Figma software, both to improve the aesthetics and to create interactive components. For this reason, I could not carried out and heuristic evaluation, which would have been beneficial to identify errors and good practices during the prototyping phase.
NEXT STEPS
First of all, it is crucial to perform a heuristic evaluation to identify potential problems that the web page may have, as mentioned before.
Second, this website was also designed to provide information and awareness about the future of space travels, as well as to stimulate participation in a dialogue about this topic. Although this idea was present, it may not have been prominent enough and has been a bit in the background. Therefore, it would be important to deepen this aspect in order to enhance this objective.
In addition, some of the designed pages need more complete definition of elements such as maps in the trip tab section and the trip generation feature based on users' personal preferences. The use and interaction of the space main map of the space displayed at the top of the home page should be reviewed. It should also be taken into account that the error, information, danger and alert banners and messages have not been designed, which are of vital importance to produce for an optimal experience with the website.
Another aspect initially planned was the accessibility analysis to ensure that it is usable for all users.