Zeit Case Study
Research + Discovery | Define | Ideation + Strategy | Prototype | Test | Iterate
Role: Lead UX+UI Designer (Research, Interaction Design, Visual Design)
Client: Zeit Time Travel Tours
Timeline: 80 Hours Over 4 Weeks
Client: Zeit Time Travel Tours
Timeline: 80 Hours Over 4 Weeks
The Challenge
To design a Robust Responsive Website for Time Travel Company Zeit.
Proposal
Our objective is to create their new brand, design a timeless logo, and set up an e-commerce responsive website in which they can promote and sell travel packages to different times.
Research + Discovery
Tools used: Primary Research - Competitive Analysis - Provisional Personas
Background
Zeit, a hypothetical time travel company, is a subsidiary of Richard Branson’s Virgin empire. After a long struggle with ElonMusk, Virgin has been able to make time travel tourism available to all. A total of 289 destinations all over the world have been approved and finalized to receive people any
moment.
moment.
Interviews
Four participants, ages, 37-42. They all travel at least once a year.
Needs and Pain Points:
Needs and Pain Points:
|
|
Competitive Analysis
Performed a secondary research/competitive analysis, comparing direct and indirect industry competitors. Guided by my secondary research I created provisional personas to begin thinking about who might make up Zeit's user base. These rough sketch personas helped bring focus to my interviews and primary interview questions and allowed me to have a starting point for testing my hypotheses and assumptions regarding the goals, needs and frustrations of users.
Synthesis + Defining
Tools used: Persona - Empathy Map - Storyboard
Persona
Guided by my research I established Zeit's primary persona, Melissa (our persona) wants to have a vacation experience that is as brainless as possible.
Empathy Map
To synthesize the data, I constructed an empathy map by organizing the data points from each interview participant into groups. Then, I was able to deduce the user needs based off of the most common patterns within the user data.
Story board
Melissa said that she likes to plan and buy tickets herself. Although they usually know where they want to spend their vacation, they are pretty open if they find something interesting. When Melissa receives an offer from AMX vacation, she checks online to see what tours and offers are available. She then discusses her findings with her husband and daughters. They all decide to go on a trip to Japan.
Now that she knows where they want to go precisely, she searches the internet once again; she reads some reviews to see what tours and packages people suggest to Japan. She reads couple positive reviews about Zeit, and she also notices an ad about Zeit. She clicks on the link and goes to Zeit’s websites. She loves the friendliness and overall look of the site, and the variety of options and tours available.
She then selects the timeline, reserves a hotel and buys their tickets all from Zeit. She is one happy shopper!
Now that she knows where they want to go precisely, she searches the internet once again; she reads some reviews to see what tours and packages people suggest to Japan. She reads couple positive reviews about Zeit, and she also notices an ad about Zeit. She clicks on the link and goes to Zeit’s websites. She loves the friendliness and overall look of the site, and the variety of options and tours available.
She then selects the timeline, reserves a hotel and buys their tickets all from Zeit. She is one happy shopper!
Ideation + Strategy
Tools Used: Card Sorting - Project Goals Mapping - Product Roadmap - Site Map
Card Sorting Summery
- All 4 participants had “HISTORY” in their categories
- 50% of participants had “BUILDING/ARCHITECTURE” in their categories
- 50% participants had “ARTIST” in their categories
- Minimum of 4 groups were created by the participants
Business and User Goals
Moving into the next stage of defining the product, I mapped the overlaps of business goals, user goals, and technical considerations. I combined Zeit's business priority and goals with data from Melissa's goals and my primary research to articulate the user-business goals in the diagram.
With the project goals in focus, I created a product roadmap, with features presented in order of priority in terms of development, investment, and importance to business and user goals. Melissa's needs and priorities were used to focus the exercise. The roadmap includes proposed metrics for measurement so that the impact and effectiveness of the features can be analyzed.
Sitemap
Once I had all research findings and persona needs, a site map, task flow and user flow was developed focussed on the booking process.
Interaction Design
Task Flows - User Flows - Sketching - Mid Fidelity Responsive Wireframes + Prototype
User and Task Flows
After finalizing the site , I moved towards prototyping. I created a user flow based on simple use cases for our persona. In this diagram, our persona moves through two tasks: Mellisa visits Zeit and looks for some destination through Search option, and then selects the location and dates. In second task our persona knows where they want to go, chooses the destination from Categories and then proceeds with the options.
Responsive Mid-Fidelity Wireframes |
After some rough pencil and paper sketches and developing my user flow, I then designed low fidelity wireframes with Sketch, for desktop, tablet, and mobile.
When designing these wireframes, I made sure to address my personas' needs and pain points. I also wanted to include plenty of white space in the layout, to create a simple yet effective design for better customer experience.
When designing these wireframes, I made sure to address my personas' needs and pain points. I also wanted to include plenty of white space in the layout, to create a simple yet effective design for better customer experience.
Prototype
After designing low fidelity wireframes, I made few prototypes with Marvel and Invision, to have potential users test the design.
UI Design + Iteration
Icon Set - Brand logo - Brand Style - High Fidelity Responsive Wireframes - UI Kit
Zeit offers a groundbreaking travel experience. The desire with the Visual design was to communicate trust, fun, and adventure. With a timeless design in mind, I created few logos and made changes to reach the desired look. I wanted to use darker hues for the site to create a mysterious and enticing vibe that will suit time travel and Zeit. I also used a pop of color for contrast and white background on texts for better legibility.
Responsive High Fidelity Wireframes
I designed responsive UI for desktop, mobile as well as landing page for tablet. Here are the UI pages for desktop.
Below is a screen shot of the Responsive UI design for Mobile device.
User Testing
I created high fidelity prototypes in InVision focused on finding a destination and adding specific listing to their wishlist. User testing was conducted to identify and record usability successes and problems and overall reaction to the visual design.
An affinity map helped identify the wins and key issues, which were then rated according to severity and frequency. The findings included;
Success:
Pain Points:
Recommendations:
An affinity map helped identify the wins and key issues, which were then rated according to severity and frequency. The findings included;
Success:
- Generally, completing the tasks were simple for most participants.
- None of the participants had any significant problem in finding what they want.
- All participants were inspired by the colors used and overall look and feel of the site
- According to most participants, the site and its content, images, and layout were neatly done.
Pain Points:
- Some Participants took a different approach to that was prototyped/offered. However, since there are other ways to achieve their goal, they were able to complete the task anyway
- Most of the participants were concerned about the time travel safety and how it works. They needed more information on that
- All participants were confused about the heart icon to add the listing to their wishlist
- Most participants wanted to be able to share on social media
Recommendations:
- Most participants recommended keeping the important content in their field of view
- Participants preferred moving to the next page rather than scrolling up or down
- Add videos to galleries
- Add images and videos of the experience to the reviews
- Add more content to the listings
Below are revised wireframes after user feedback.
Changed made to Home Page: I moved “Book your trip” on top, for better access, since most of the participants were concerned about safety issues and where to find it, I added a safety portion on the landing page. Also changed the “Tips” icon to Safety & Tips, brought it in the middle of the page, and also made changes to the background to draw the attention to that area. Finally, I moved the map at the bottom, since reviews were more important to the participants.
Package Page: I removed the “APPLY” button at filter section, since almost every participant had an issue with it. Most of them preferred the options apply automatically as they choose. I also added additional icons for saving and sharing a listing. When a user saves a listing, a contextual message will pop up saying the listing saved to wishlist.
Conclusion
Refine, test and iterate!
The user feedback highlighted the importance and effectiveness of user testing early. Overall, the user feedback reflected the success of creating a brand that was bold, exciting, and inspiring to book a time travel adventure with the flexibility to make it their own.
The user feedback highlighted the importance and effectiveness of user testing early. Overall, the user feedback reflected the success of creating a brand that was bold, exciting, and inspiring to book a time travel adventure with the flexibility to make it their own.
Next Steps
The next steps would include diving deeper in the research and expanding the the screens and mapping out the complete site, and possibly making changes to the existing design considering the feedback received.