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.
Strengths: tailored itineraries, worldwide destinations, travel expert support. Weaknesses: moderate to high cost, Llmited to the present, unpredictable quality of experience
Strengths: safari-style travel, private & small group, generous cancellation policy. Weaknesses: high cost, limited choices
Strengths: curated packages, excellent reputation, many options. Weaknesses: high cost, limited to the present, not very customizable
Strengths: affordable, wide variety of experiences, well designed interface. Weaknesses: limited experiences, does not include travel, disputes are common, quality control is poor
Strengths: detailed user reviews, strong ratings system. Weaknesses: no customer service, popups and messy ads, cannot book entire trip experience easily
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.
A small random sampling of destinations was used to make the test less cumbersome.
In this dendrogram, the highlighted areas suggest possible groupings.
Areas of agreement are highlighted in this Similarity Matrix.
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.
Inspiration for the branding comes primarily from the Art Moderne movement of the early 20th century. Luxurious and futuristic with nods to new discoveries in science.
A small snip of the digital dabblings that evolved into the logo
The logotype was simplified to bring the brand solidly into the present. This version suggests refinement and multi-dimensionality.
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.
Initial sketches included a unique view of the world map.
Annotated wireframes help explain features.
A more polished rendering. I replaced map UI replaced with something more recognizable.
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.
ATTRIBUTE FILTER
The ability to filter by various attributes was also supported by the research. The ability to narrow results will enhance usability of the map search function.
BROWSE GEOGRAPHIES
Searching by geographic location is supported by the 1:1 research and is featured in all competitor sites.
SEARCH THIS AREA
This feature will avoid updating features on the map until the user explicitly requests an update.
MARKER LIST
Search results and suggested destinations populating a side pane as well as the map area allow for flexible interaction by the user.
Putting the pieces together
The elements are polished and assembled into mockups prior to building a working prototype.
Developing a style tile helps to further refine the look. Colors were altered for better accessibility.
I build a UI kit to make assembling prototypes easier by creating uniform assets.
The final High-Fidelity mockups show responsive designs for multiple devices. The UI has changed notably from earlier iterations.
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.
These insights shed light on improvements to be made prior to moving on to development. In the end, only a handful of revisions to the UI, graphical elements and writing were needed to move forward.
Priority Revisions
Insights from the interviews pointed toward a few key changes to be made before handoff.
Usability: Some testers were using smaller screens and could not immediately tell that they could scroll down on certain pages. Reducing the breaks on these pages makes it clear that more content is available.
Progress and Trust: Testers gave consistent comments that a progress indicator and a back button during the checkout process would instill more confidence in the purchase.
Interactivity: Unanimously, my testers suggested that the map and side bar should react to mouse hovers.
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)