Role | UX Designer
Objective | To create and Design a responsive website
My Zeit Case Study is a school project I created for DesignLab
Skip to:
Background
Time travel is a dream come true form some people who would want to go back in time and explore the old world.
I can imagine parties at the Palace of Versailles and Mozart's symphonies. After a decade of long and careful consideration or discussion with Elon Musk. Officials in Brussels last month, have announced the International Concordance on Time Travel, allowing Zeit a set of comparative evaluations so that they can explore and share the experience of time travel. Zeit asked me to help in creating a new site and brand for their responsive e-commerce website that will market time travel tours.
Goals
To start my project I spent some time brain storming and collecting the needs and pains for the user in this product. Identifying the stakeholders and the way the users could book a trip to travel back in time. In creating a responsive site the data that the users will need for the site became the the most important part of the design process. I put together a list of needs for the design process in order to start my research. I used the methodologies of Market Research and Competitive Analysis and Secondary Research and Surveys and Interviews in order to create a proper case for my site by identify the needs wants and pains and gains for the stakeholder.
Process of Design
Methodologies
Market Research and Competitive Analysis:
Understand and see what has been done already successes and failures. What has worked for other agencies in the same industry and what has not worked out as good.
Secondary Research:
Look at the existing research and ideas that brought time travel out to life. From movies and stories that have been created, and from travel websites.
Surveys and Interviews:
Discovering answers of the travel process and choosing a destination from surveys and interviews will help the research process.
Live Prototype
Prototype Video
High Fidelity Prototype
After creating the main high fidelity wireframes I started to add on the functionality of the prototype. Show casing everything from the start of the project. Using the information I found in my Research, and the Site Map, User Flows the Low Fidelity Wireframes and the UI kit that were created and found during my design process. It really is a magical moment when its finally put together and now the stakeholders can see their final product.
I tested my prototype out of 7-10 users who all said they enjoyed their experience and for the site colorful and easy to use and navigate through. Many people expressed how much they enjoyed the imagery, colors and how bright and fresh the interface design looked. They loved how the logo either looked like a star or a running man which felt to them as traveling. They mentioned how fun it would be to time travel and the design of the site made it look easy and fun to investigate for a first time user. They noted the modern look and found it necessary for a time travel site.
High Fidelity Wireframes
Using the low fidelity wireframes and the UI and Brand kit, the Site Map and the Task Flows, I created the high fidelity wireframes for the site. I found inspirational images for the hero section and the booking travel trips that would help represent the location of the deal or package. Looking for the right imagery for this site was challenging since it needed to make sense for the travel trip booking. For the "About Us" section I found an image of how the machine works, for the stakeholders who would be interested in that. I then put the images together on each section and added the buttons that I had in my UI kit, added in the logo and the small details of the social media and five star reviews for the bookings.
The hamburger navigation feature tool is the best type of hierarchy for this design. It creates a one stop location for the site. Whenever the user feels lost and indecisive they know exactly where to hit. It extends the user to their account, to the filter search page, feature trips which is the explore page, about us and the tool for them to log out.
Brand and UI Kit
I wanted to create a clean and fresh brand for my stakeholders. Time travel isn't something that has ever been done before so I wanted it to be modern and new but also represent the magic of time and travel. To start this process I looked at different movies that were currently out there about time travel or going back into time I loved the idea of a romantic past time, and the design operation from Star Wars and Back to The future. Since going back into the past is what we are selling here I looked at images that my stakeholders would encounter when traveling back in time.
I played with different colors and fonts and created a logo that stood out and represented time and space and traveling at the speed of light. When creating the logo I used the letter Z and made it look like a star. The main goal for creating the logo for time travel was to make sure that it carried the spirit of time travel. Even without the companies name I still wanted the stakeholders to see time travel in the logo. The colors I used, came from the images I found on Pinterest and other sites that talk about the past. I then modified the colors so that they would work well on a website
I put together some UI design elements that were necessary for the functioning of the site. Created a navigation bar a check out system and search tool. Since time travel can be something that could be booked all in one day, I wanted to make sure that tool was easy for the user to handle when booking their trip. So that part is a one day booking for the stakeholder .
Low Fidelity Wireframes
I created both desktop and mobile wireframes design so that I could decide later what which prototype I wanted to create after both sets were made.
When creating the low fidelity wireframes I gathered the CTAs that were created while making the user task flow and task flow. I started out with the hero section of the site and added in the main features that I came across from the research of the stakeholders that will need to CTAs. So I used the CTAs that were created for the hierarchy of the site design. I used the hamburger icon so that any drop down feature would be accessible for the user. I wanted to make sure the homepage stood out for the navigation so I put a the main CTA there for the user to book a trip right away. Which would lead them to the filter page so they could filter through the featured trips for whatever time period they are looking to explore. I also wanted to make explore the past fun and interesting since traveling back in time is something new for my users.
For more information on the design process of my low fidelity wireframes take a look at my annotations that I added to the mobile pages. I created the annotations for so that when I tested the low fidelity prototype I could remember the background and reasons behind each action in case the testers came across any pain points during its testing.
Task Flow and User Task Flow
Starting the Task Flow I decided to use my persona to justify the needs and pains of that stakeholder. Crafting this site to the user needs made it easier to understand that pathways that the stakeholder will want to take when booking a trip back into time. From my interviews it was identified that people love to explore and hear about reviews from past stakeholders in order for them to finally book the trip. My user task flow show the pathways for all stakeholders routes on the site.
The CTA's were the most important part of this project so I knew where to put the next pages for the stakeholders so that merging to the next page was a simple task. Understanding the thought process that comes to booking a trip, from my research I noticed the stakeholders tend to change their mind of their trip vacations, so moving forward I knew I wanted to make those CTAs the hierarchy for the site, for when the user changes their mind the needed pathway was available for them and they do not come across pain points during the booking process.
Site Map
After creating the feature road map for the responsive site, I listed out the highly needed features and the structure the site will need by creating a site map for this project. Founded from my research in my competitors analysis the needs for the site would be a log in / sign up section, a way for the stakeholder to explore the trips and also read reviews quickly so they could move on to the next deal or package if they find that they are no interested. A place for them to contact support and get more help in order to make the purchase as well feature for the user to be able to filter through the destinations so that they can find what they are looking for faster. I started the site map by listing the homepage and then the top pages that the user will drive into first when opening up the site. I then thought about the top features from my feature road map and scaled out the top feature for each section on the site map.
I created a provisional persona to help Zeit's case for this site to be created. To travel at the speed of light. Making a family trip a easier task for my persona and backing all its reason's.
I found that websites were the key ingredient to booking a vacation. Networking and searching on the world wide web were also big factors to actually booking the trip.
My persona wants to use a tool that is easy and fast and straight forward. Which is why I am going to make Zeit a tool for anyone to use, that has an account.
Competitors Analysis
I spent a lot of time researching different travel sites for my site. Learning about their weaknesses and strength's.Here are the direct competitors that I found that will be a great resource for Zeit. Airbnb seems to be the easiest sites to use in terms of design layout. GeoEx also has nice layout that will be something I use for designing Zeit.
I found that three of my competitors, mostly start their site by price of travel and not really by the feedback or experience of the journey which is something a user can might have a hard time looking through when trying to book a vacation.
I found that two of my competitors are not for everyone, they tend to only market themselves for just the wealthy. They have market trend of selling experiences and they only market special deals and packages for small groups.
Conclusion
Zeit Time Travel is a dream project I have. Time travel isn't real and i'm not sure if there will ever be a site for traveling into the past, but man! What an adventure that would be. I've always wanted to travel back in time and explore the old world and even be apart of it. As so, creating this project has been so fun. Who knows though? Maybe one day time travel could be a possibility and we can all do it and what other way than in your finger tips.
Knowing my audience has been a huge support. Doing the research of the strengths and weakness of it's competitors and interviewing people who regularly travel, helped build the design. Using the in formation of the feature road map, site map, and task and user task flows brought the wireframes to life. The UI and Brand for the company was also extremely important in the design and creating a modern and realistic feel.
Overall creating this was really fun and I hope one day we can all see it in the future.