Within this project:

Zeit Travel

Responsive Web
UX/UI Design, Branding
Project Overview
As part of a test project I was directed to complete a full scale responsive web project for the fictional time travel company, Zeit. Because this project has no direct competition and a risky business model, research prior to design was of the utmost importance.

Humans have been dreaming and romanticizing about time travel for almost as long as stories have been told and Zeit aims to make this new and unbelievable way of travel as accessible as possible. My goal was to properly represent the futurist technology of this project while equally merging with the historic importance of the destinations.

My Contributions
Final deliverables were to be a responsive, filterable website that is easy to use and properly portrays the Zeit brand. We needed to ensure the site was appropriately informative for users to further understand the process of time travel and their trip, yes approachable enough to make time travel feel safe and trusted with Zeit.

In addition, the company was looking for a logo and visual identity that is appropriately timeless while representing the futuristic feel of Zeit.
Research
Competitive Analysis
user interviews
data synthesis
persona creation
storyboarding
empathy mapping
Because of the abstract nature of Zeit's product (time travel to past historic moments throughout human history), research took on a rather creative approach. When working with something that is the first of it's kind, as well something that doesn't actually exist yet, I needed to think outside the box. The clearest route to workable data was through diluting Zeit down to what it was at it's core: a specialized travel company looking to establish trust and break into the market.

A competitive analysis of travel sites for every budget was completed as well as a detailed persona breakdown. In the design of such an abstract product and brand, Mark became the cornerstone for which decisions regarding Zeit's site would be built.
Research Goals
  • How do we create trust in users when it comes to such an innovative & possibly uncertain product?
  • What makes a traveller choose one experience over another?
  • What information about an experience is most important to a potential traveller?
  • What might push someone from being an early/late majority user to an early adopter?
  • How can we make a travellers experience as simple and straightforward as possible?
  • How do we ensure users are informed of details/risks involved without fear or overwhelming them?
Summary
While some research showed standard data in line with that of a typical travel site, I did gain new perspectives on how to position the Zeit brand as well as several insightful needs of users. I discovered users are looking for personalized experiences, and while they of course want to trust the company they travel with, they prefer to rely solely on reviews rather than facts about safety provided by the company. Additionally, due to the cutting-edge type of travel Zeit is planning to offer, this means major bragging rights for anyone taking part in one of their trips, so ability for social engagement is crucial.
Information Architecture
sitemap
card sorting
feature mapping
Being that the main productgoal was to provide clarity and straight-forwardness from the moment a user lands on the Zeit website IA was crucial. It was determined that the focus of the site would be an extremely user friendly search system to which all points of exploration would point, meaning that the perfect trip was always right at a users finger tips.
Interaction Design
User flows
task flows
responsive wireframes
Now that information architecture was firmly in place, I was able to confidently move forward with fleshing out the more detailed flow of the site as well as dive into initial responsive wireframes.
Responsive Wireframes
Having completed such extensive research on features and users' needs as well as having many comparable products in the form of current working travel sites, our low fidelity wireframes were quite developed. Desktop, tablet and mobile versions were all created.
[ click thumbnails to expand ]
User Interface
logo design
brand identity
ui kit
high fidelity mockups
Through user interviews I knew that how I was going to position the Zeit brand and it's first impression on users was going to be extremely important. I wanted the design to provoke feelings of adventure, excitement and the unknown, but also ensure users were made to feel trusting and secure in purchasing a trip with Zeit.
The Logo
Encapsulating the ingenuity of time travel combined with historic importance isn't a simple task. I began with initial rough sketches of various ideas and digitized them. History and future were melded together in several different forms and icons.

Through iteration things were narrowed down to the final choice above, featuring classic clean lines of a custom typeface dissipating into the future.
Initial digital sketches:
The UI Kit
Ensuring the overall mood of the brand was carried across the entire project was essential in order to create the foundation of trust and reliability we were looking for with such an innovative product. A comprehensive UI Kit was created with this in mind.

A rich jade as the main brand color provides depth and intrigue to the overall design, while the accent color of sunshine yellow gives a punch of friendliness and adrenaline. A soft teal was also introduced as a complimentary brand color.
High Fidelity Mockups
With our well developed low-fidelity wireframes as well as a carefully planned brand style guide in place, I moved forward with the creation of our high-fidelity mockups.
[ click thumbnails to expand ]
Prototype
The Redbike prototype was created in desktop format in Invision.
view prototype
Usability
prototyping
user testing
data synthesis
affinity mapping
Through all of the above steps, a digital product was now ready for creation... or was it? The most crucial step in the design of all products is testing. Having live users move through the site, share their thoughts and point out any possible useful changes was imperative in order to deliver the best product possible.
Affinity Mapping
After working through 5 live user testings and making note of all crucial navigations and comments, data was synthesized into an affinity map noting actionable best steps to move forward. From there priority revisions were made and the project was exported from Sketch via. Zeplin.
[ click thumbnails to expand ]
Conclusion
Though initially Zeit responsive site seemed like a large and somewhat abstract project through the systematic breakdown of all necessary parts and application of design thinking across all bases, a beautiful digital product was born!
← previous project
next project →
Looking for a designer for an upcoming project?
Work with me
Above all, always

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

iterate.

Interested in working together?
I'd love to hear from you.

Whether it's a new freelance project, a possible contract or a position, I'm always interested in connecting and hearing about new ventures, ideas and possibilities.

Woohoo! Talk soon!
Oops! Something went wrong while submitting the form.