Just think about it, time traveling to the past, visiting times and places in history, what a thrilling idea! Well, Zeit now makes all that possible with a time machine manufactured in Munich, Germany. With cutting edge technology Zeit offers many time travel adventures to over 400 times and places with new times and locations coming soon! Just think about it, you could have tea in the Victorian era or watch the pyramids in Ancient Egypt being built, where would you want to go?
Zeit has carefully calibrated each trip to ensure a secure, safe and wonderful experience for each time traveler. So whether you're a single traveler wanting an adventure, a group of historians or families of all ages wanting to experience history, Zeit has something for each of you and you can have the piece of mind knowing that Zeit is looking out for your safety, security and trip experience.
Presently, Ziet needs help with branding and creating a highly usable responsive website to make all these trips available for travelers all around the world.
Project Details
CLIENT | ZEIT
ROLE | LEAD UX & UI DESIGNER (RESEARCH, INTERACTION & VISUAL DESIGNER)
TOOLS USED:
Research: Interviews, Observation, Competitive Analysis, Task Analysis, Industry Research.
Synthesis: Empathy Map, User Journey Map, Persona, Pen & Paper.
Product Strategy & Ideation: Storyboard, Site Map, User flow.
Interaction Design & Testing: Pen & Paper, Task Flow, Sketch App, Marvel and InVision.
Delivery: Zeplin.
Design Goals | Challenges
Deliver an engaging and responsive website to bring Zeit to light for travelers all around the world.
Brand Zeit with a logo and visual system that depicts time traveling to the past.
Build upon existing knowledge of design patterns and user expectations to create an engaging and fluid experience for time travelers.
Research & Discovery
Market & Industry Research
Because Zeit is a futuristic innovation that has recently been manufactured, it has no direct competition, for now. But that doesn't mean that other travel companies and websites can't offer insight into the travel industry. What strategy did travel websites use? How do they target their demographic? What makes users use the travel websites they do? What insight could I leverage from these travel companies to help position Zeit in a travel space? To help me answer these questions, I started with market research a competitive analysis, taking notes on what the strengths and weaknesses were for each company helped me to better understand the travel space.
INSIGHTS
The better deal versus the experience. When booking travel, some people are looking for the experience, like going to Disney Parks, they sell the experience. Other travelers want a better deal. They will shop several travel websites that offer discounted travel because the better deal is their focus. You also have those that fall in the middle, where it is just situational for them.
Time matters. A traveler could want to book a trip in a hurry, maybe they have a busy schedule with work and life booking their trip has to be efficient. On the other hand, you also have travelers that want to browse and take more time choosing their travel selections. It's all about convenience, travelers what to find their travel options and make their selections in a quick, fluid way and book with little to no complications. The smoother the process the better the experience.
A trusting brand goes a long way. What makes a trusting brand? From the customer service to booking a trip via mobile or computer device, to the actual trip experience. A fluid and great experience builds trust, credibility and paves the way for users to want to return because they found the company to be reliable.
INTERVIEWS
To get further understanding I conducted interviews, asking questions that would shed light on possible pain points, areas of friction, and positive goals for potential users. My interview script went through basic questions from travel preferences to the thought and consideration of time travel. I wanted to gauge how people felt about that concept because that would help to be a guide on how to position Zeit to make it approachable and trustworthy to people that may be uneasy or skeptical with the idea of time travel.
SYNTHESIS & DEFINING
After all the interviews, I gathered all the insights from each participant and organized them so I could view all the information side-by-side. After doing so, I started to see patterns and organized the information accordingly. After noting all the patterns I started on my persona and then my empathy map.
PERSONA
Victoria is the primary persona that resulted from compiling all of my research findings. Victoria has a very busy schedule with family and professional obligations, and as much as she would like to take the time to plan the next vacation for her and her husband, she just can't find the time. Now, she would consider time travel but has reservations on just how safe, secure and reliable it is. Between her being short on time and her reservations she needs a smooth and efficient browse to booking process.
EMPATHY MAP
To dive in further and explore relationships, patterns and with the use of the persona, I created an empathy map made up of observations and statements from my user interviews and I organized them into the appropriate categories. The empathy map was a great tool to help further the defining process. It helped me to gain a deeper insight into potential users by taking information from my research and using to articulate what I know so far about a certain type of user.
KEY INSIGHTS
Time travel is a subject of high skepticism, but there is an interest and curiosity about it that people have. Those I interviewed expressed a range of thoughts and feelings, from expressing interest and curiosity, to reservations about safety and security. Many asked about the likelihood of them getting stuck in the past and not being able to return home to their time. There is definitely a mixture of feelings regarding time travel, but on a basic level, people want to feel safe and secure, they need to trust that they can and will return home, they need to be guided through the process and be assured that their wellbeing is top priority. Earning their trust starts with meeting those needs. After they are on board, that's where the fun and adventure can begin.
Project Strategy
COMPARING BUSINESS & USER GOALS
To help define the product I mapped out three sections, business, customer and technical considerations as well as how they overlap with one another. This helped me to identify the main project goals for each and what would be important in the portions where they overlap. This will prioritize the goals that will best benefit the needs and desires of all three sections and allow a better focus on where viable solutions are needed.
Defining and Prioritizing Features
After establishing all the project goals, I created a feature matrix that lists them in order of priority in terms of development, investment, and importance to business and user goals. This helped to put things in perspective as the project continued to take shape and served as a helpful checklist for the next steps.
You can view the features matrix here
CARD SORTING
For the next step, I conducted an online card sorting. The online survey enabled me to survey participants in an efficient and convenient manner, I surveyed 6 participants in total using the online tool, Optimal Sort. Because the product and brief were so unique, I used this to gauge where people would be interested in going the most if they could item travel. There were several categories for them to group the locations as well as the option to make their own labels.
SUMMARY
All together, the patterns of groups in the different categories identified where users had the most interest in going and the most popular categories. This gave valuable insight on what information would be of greatest benefit to both business and user.
SITE MAP
Based on all the results so far, I created a site map outlining the structure and flow of content for Zeit's site, with the objective of creating the most simple and intuitive navigation possible.
INTERACTION DESIGN & TESTING
USER FLOW
Moving into ideation with the content of the site map as a foundation, I created two user flow examples to think through multiple paths a user might take through Zeit. The two examples cover tasks from the browse to booking to even sharing tasks. In this diagrams below you have Silvia, Jack and their user flows through the website. Mapping these user flows helped to guide me on the key items to prioritize as I began my wireframes and prototypes.
TASK FLOW
This task flow was a great way to streamline a basic flow through the website with a basic objective.
ROUGH SKETCHES
Before I dove right into digital wireframes, I made some rough sketches of different layout ideas. Pen and paper is a great way to move through ideas quickly and it saves on times and resources. After sketching a few of them, I had an idea of what direction I wanted to take.
WIREFRAMES
These wireframes are key pages for the user flow. First you have the browse page where a user can make their first selection, next is an example of a selected option, then on to a trip details page, booking page and lastly a congratulations confirmation page. These wireframes were designed with the browse to book task in mind and how to make that flow efficiently for users.
RESPONSIVE DESIGN
To get a better idea on how the content for Zeit would translate from a desktop to mobile device, I created layouts to see how all the content would fit together and flow across multiple devices. Both the low fidelity wireframes and high fidelity mockups are shown beow.
Low-Fidelity Prototype
I created the low-fidelity prototype for mobile using the online tool, Marvel. This gave me insight on how all the content was grouped together and if there were any aspects that needed to be revised.
High Fidelity Prototype
After reviewing the design of the website and how it was taking shape, I decided that the look could be pushed further. So I redesigned the look and feel for a more graphic centered experience.
HIGH-FIDELITY PROTOTYPE
I created the high-fidelity prototype for desktop using the online tool, InVision. This was used for user testing and observation. Please select the link below to view the prototype.
You can view the high-fidelity prototype here
USABILITY TESTING
TESTING PLAN
Six participants were asked to walk through the prototype. I asked each participant to complete a browse to book task and I observed and took notes on how they navigated the site. Please select the link below to view my testing plan.
You can view my testing plan here
AFFINITY MAP
This affinity map was used to compile all the data from the user tests. I listed areas of positivity and concern regarding user navigation as well as areas of positivity, concern and other for user comments. I also made a note of wins and possible solutions.
Takeaways
Overall, each participant was able to navigate through website smoothly, efficiently and make it to the booking process successfully. There were some areas of concern that were quickly revised and adjusted for a better use experience. Users felt the website was easy to understand and really appreciated the graphic centric style. They liked the overall experience and easy of use of the website. The feedback gained through user testing helped greatly in identifying what changes should be made, how they should be prioritized, and which features should be given priority in future stages of design and development.
NEXT STEPS
Iteration and Implementation - Implement changes stated in the affinity map.
Test - If possible, run further tests with the revised prototype.
Handoff - Gather all assets together and create the specs documentation for handoff to development.
VISUAL DESIGN
BRAND IDENTITY
For Zeit's branding design, I started with some brand attributes, which were influenced from the project brief and my user research. The attributes were: FUTURISTIC, DYNAMIC, CLEAN and ENGAGING.
MOOD BOARD
To gain further branding inspiration I created a mood board on Pinterest and just for some added fun, I entertained different branding directions. Please see below for some examples.
LOGO, STYLE GUIDE & UI KIT
After I established the design direction I wanted to go with, I created a Logo, Style Guide and UI Kit for Zeit. These are living documents which can be updated and applied to the site and brand as Zeit continues to develop and grow. These documents will help to ensure that all branding remains consistent throughout the product.
Handoff + Implementation
I used the online tool, Zeplin, to create the specs documentation for the handoff of the design to development. This offered an opportunity to check the design's properties once more and clean up any discrepancies.
PROJECT TAKEAWAYS
I was given a brief to make a time travel responsive website with tablet and mobile examples. After doing my research and conducting contextual inquiries I found that users had mixed feelings about time travel, sure it would be an exciting experience, but would it be safe? Was there a possibility a user could get stuck in the past and not return home? How would they be prepared to go to the past? These and more were concerns users had regarding time travel. Users needed to feel safe, take care of and prepared for an out of this world experience. After defining the information further and going through the next steps I had the information I needed to start the structure and design of the responsive website. The resulting website was user friendly, functional, had eye-catching imagery, stellar colors and a lot of information to help ensure users of safety, preparation and a memorable experience they would never forget.
NEXT STEPS
In the next steps I would want to continue further with user testing to further refine the user experience with Zeit to ensure it’s functionality. If there were new concerns that came up through testing, then I would start the process towards creating solutions for those concerns, leading to a better user experience.