Zeit
Responsive e-Commece Website for Travel
My role: UX/UI Designer
The Mission:
Zeit was a DesignLab UX Academy Project
Zeit is a luxury travel company selling the experience of traveling through time to historic events.
My job: Create branding and a responsive website for Zeit. The site should explain the process, allow users to search for different destinations and have a booking feature.
Design Process:
1
Discover
Methods:
Competitive Research, 1:1 Interviews, Secondary Research
2
Identify
Methods:
Project Goals, Persona, Card Sorting, Site Map, User Flow, Task Flow
3
Design
Methods:
Mood Board, Style Tile, Sketches, Wireframes, Mockups, UI Kit, Prototyping
4
Verify
Methods:
Remote User Testing, Decision-making Quadrant, Priority Revisions
1
Discover
First things first! In this phase I learn about the industry, the competition and begin to empathize with the users.
My Research Goals
Learn about travelers and their decision-making process
Identify key users and their pain points.
Understand the information seeking. behaviors and priorities
What motivates the client?
To better understand travelers, I performed 1:1 interviews with 5 people from my personal contacts. Each 30-45 minute interview consisted of a script of open-ended questions.
Key Insights
From the interviews, I was able to make an initial list of desired info:
Customer reviews
Clear presentation of booking and defined steps.
Pictures and text descriptions
Security and safety information
Clear pricing structures
and things to avoid:
Mandatory group tours
Tight schedules
Confusing schedules
Long layovers
Competitive Analysis
I chose to research some of the more reputable options in the high-end adventure travel niche as well as some of the more accessible and most popular travel websites to compare and gather information about the industry.
2
Identify
Taking a closer look at the data, I can start to define the problems and put a face to the user.
My Goals for Defining
Synthesize findings from Phase 1 to generate personas
Understand prime motivators and detractors
Identify key components, features and pitfalls
Meet The Avid Traveller
I analyzed the findings from the 1:1 Interviews and compiled a Persona to represent the user. This allows me to more readily empathize with the user as make design decisions.
How do travelers sort destinations?
To explore possible categorization structures for time travel destinations, I conducted card sorting exercise using OptimalSort.
I asked seven participants, ages 27 to 47, to sort 30 cards denoting pre-selected time travel destinations into categories of their own choice. Users were required to sort every item and name each category.
3
Design
With the problem and user defined, I begin making design decisions.
Design Goals
Create branding for Zeit
Create a high fidelity responsive prototype
Borrowing From the Past
I looked at a number of styles before stumbling on something a little surprising. The tone elicits the brand words: Cultural, Refinement, Luxury, Wonder, Historic and Discovery.
Getting Straight to the Point
Travel is primarily about location, right? I’ll make the landing page a map.
What makes Zeit different? History. I’ll put time on a line. A timeline slider.
Shaping the Pages
Using the maps and flow charts from the previous phase, I sketched and refined the user interface.
Not reinventing the wheel
Innovation is great, but standing on the shoulders of giants will do just fine.
Here are some of the design patterns I chose to replicate for the user interface.
Putting the pieces together
The elements are polished and assembled into mockups prior to building a working prototype.
4
Verify
The design looks bold, fun and inviting.
But is it effective?
Testing Goals:
Identify design improvement opportunities
Identify Information Architecture improvement opportunities
Identify opportunities for improving UX writing
User Testing
I met with 7 user testers via recorded video chat to test the prototype.
I presented several scenarios to each subject and had them interact with the prototype in real time and noted comments, behaviors, successes, failures and surprises.
I wrote insights from each interview on sticky notes, a different color for each user, and organized into quadrants.
Priority Revisions
Insights from the interviews pointed toward a few key changes to be made before handoff.
Handoff
The prototype was then prepared for handoff
to developers using Zeplin.
Conclusion:
I had a choice of doing this as a class project or doing something more realistic. I chose this because I thought it would stretch my imagination and be a bit more of a challenge. It certainly did. Working to represent a product that is new and innovative means there are fewer analogs to borrow from and more need for research and testing.
Choosing a more realistic project may have fit better in my portfolio, but I don’t regret the lessons learned about more technical prototyping, the value of user interviews, or how new and innovative products require several layers of innovative design.
Interactive Prototype
Please feel free to explore
(Hint: look for prehistoric stuff, like a Mastodon Photo Safari)