Zeit logo and wordmark

Responsive website design and branding from scratch for a theoretical travel company

Mid fi and High fi mockups of Zeit website designs
Blue arrow pointing down

Project Overview

Problem

  • Zeit is a theoretical new company focused on bringing time travel to the public for the first time in history
  • The company needs branding and a responsive website to advertise and sell their time travel packages

High Level Design Goals & Objectives

  • Create new branding with a logo that is both modern and historical
  • Design a responsive e-commerce website that is easy to use and facilitates customers browsing trips and booking an experience
SCOPE
Responsive web, branding
ROLE
End-to-end UX/UI designer, UX researcher, branding
TOOLS
Sketch, InVision, Photoshop, Google Docs Suite
PROJECT DURATION
80 hours
TEAM
Individual with input from mentor and peers

Contents

I organize my personal design system and case studies using the five phases of the Stanford Design Thinking Process.
PHASE I
Empathize
Goal: Understand users' needs, desires, and pain points, as well as the greater context of the industry and comparable firms.

Research

Research Goals
Market Research

Even though Zeit presents a unique form of travel, it would still function within the online travel booking industry and have a similar customer base as current large booking sites. I recorded major takeaways from my research to give me context about market trends and competitors to inform my design process, viewable in my research debrief.

Competitive Analysis

In order to better understand potential competitors and gain valuable insight into what makes online travel booking platforms successful, I performed a competitive analysis of 3 direct competitors and 2 other major players in the industry.

Provisional Personas
Primary Research
User Interviews

I conducted 2 rounds of interviews with 3 users in each round, with round 1 focusing on their experiences booking travel on other platforms and round 2 learning from & building upon Round 1, and asking more specific questions about their preferences in planning & booking travel excursions.

I then transcribed all the interviews so I could identify patterns and key insights in the responses.

PHASE II
Define
Goal: To synthesize all the insights, observations, and information gathered during the Empathize phase to gain a full understanding of potential users and the problem that needs to be solved.
Research Synthesis
I compiled lists of important conclusions to keep in mind while ideating and designing, such as:
  • Almost 80% of travelers prefer to book on desktop over mobile, as comparing bookings is easier and most users believe they can't get the same deals on mobile as on desktop
  • Having new experiences with friends is important to  younger users
  • Even tech-savvy users think booking is too complicated
Key Insight
Users think booking travel is too complicated, especially on mobile -- they're willing to do research on mobile, but prefer to book on desktop
I created a venn diagram of business and user goals so I could identify alignments and balance priorities between the two, better enabling me to craft the designs around these goals.

With all this in mind, it was time to craft a User-Centered Problem Statement:

How might we design an intuitive and navigable user experience, an engaging user interface, and an attractive brand identity that not only capture the essence of time travel and inspire brand loyalty but also motivate users to book experiences with Zeit?

PHASE III
Ideate
Goal: Creatively brainstorm a wide range of ideas about how to solve the problem.
Looking back on my research, specifically the competitive analysis and user interviews, I generated ideas of possible features for the website and ranked them by importance.
Card Sorting

When considering how to organize the information architecture of the project, I wanted more insight into how users might categorize the experiences Zeit offered. Patterns emerged as participants created some similar categories as each other, such as sorting by general themes like art and ancient empires. This validated my assumptions about the intuitiveness of organizing the trips in this manner.

Sitemap

Creating this crucial document of information architecture allowed me to outline and validate the pages I would need to design and how they related to each other.

(Some pages, such as the interactive map & time periods categorizations, were excluded from the final designs due to time constraints.)
Flows

A task flow helped me visualized a linear path a user might take to book a trip. I then expanded on the task flow to build a user flow, mapping out different choices a user could make to how users will navigate the site, further validating my sitemap and the pages and elements needed. View the user flow here.

Task Flow
Wireframing

Beginning with low fidelity sketches, I tried several ideas for structuring the website. Using pen and paper allowed me to explore different ideas quickly and efficiently.

Mid-Fidelity Wireframes

I digitized my home page design into mid-fi wireframes, keeping the pages modular for easy conversion to tablet and mobile sizes.

Homepage - First draft
Homepage - Second draft (w/ some branding elements)
Mid-Fidelity Prototype

Mocking up a prototype in Sketch allowed me to better evaluate the usability of my mid-fi designs and validate the logic of the user flows.

A look into the process

Different approaches I tried for the nav bar and an Experiences drop-down menu

Responsive Wireframes - Annotated

Thanks to the modularity of my designs, it was simple to translate them to mobile and tablet versions. I annotated major elements to explain functions that weren't obvious from just the wireframes themselves.

Branding

Due to the paradoxical nature of a company using futuristic technology but selling journeys into the distant past, my guiding idea for Zeit's branding was to convey a subtle flair of science fiction yet retain a sense of timelessness.

A modern, minimalist take on a timekeeping device used for centuries fit my vision perfectly. A sleek hourglass would represent the passage of time and double as a Z for Zeit. The logo could also be animated, rotating clockwise 180 degrees to symbolize the turning back of time.

An ultra bold, wide Acme Gothic font with some slight negative tracking had the perfect balance of modernity and classicality.

Since Zeit is a travel company, I wanted the main focus of the site to be the photos. Keeping this in mind, I chose a calm, muted dark blue-grey for the primary color to use for large components like the nav bar and footer. I also used this color for the any text on the white background to give high contrast and good readability instead of using a harsh black.

In a similar vein, I chose a bright mango orange for the highlight color so that call-to-action buttons or other important components would stand out on busy pages full of colorful pictures. I faded this into a lighter tangerine to make a subtle but interesting gradient.

Style Tile / UI Kit
To consolidate the branding and UI elements, I created a combination style tile and UI kit.
PHASE IV
Prototype
Goal: Create a high fidelity, usable prototype of the product that will be ready for testing.
High Fidelity Responsive UI

Finally, we come to the hi-fi designs! After some more iterating on my wireframes, I landed on using a uniform card system for experiences, categories, and testimonials. Using a system of distinct cards had the benefits of both keeping information neatly grouped together and making the sections more cohesive with each other.

Home Page
Experiences Page

This was the last page to come together in its final form. I originally used the experience category cards from the Home page, but this design was very plain on desktop and made the Experiences page redundant. It didn’t add much value and didn’t give the user any more info on what the specific experiences themselves were or what they might be like. However, I still thought the Experiences page was an important part of the user flow, so I redesigned the page.

The new design showed 5 experiences within each category using a card system that keeps with my intention of putting focus on the photographs. I stuck with the original design for mobile since the new card system would be too busy in 2 columns and too vertically lengthy in 1 column on a small screen size.

I chose to design the page using the category browsing method since it was the most consistent with how the research participants sorted the experiences during card sorting. If I had more time and/or resources to use on this project, I would have liked to build out the location and time period variants of the Experiences page organization.

Category Page

The simplest and most straightforward to design, this page uses Philosophy & Religion as an example category, with the specific experiences laid out in cards.

Specific Experience Page

Plato's Greece, 368 BCE used for an example. The tabs in the tab bar (Overview, Itinerary, etc) link to their respective sections of the site, and the bar is sticky, so it will stay in the window as the user scrolls past it.

On desktop, the "Purchase tickets" box is also sticky, staying with the user at all times since getting potential customers to book tickets is the main goal of the site.

Prototyping

Using the Hi-Fi designs, I built a basic prototype in Invision.

V2 of the prototype, created using the revised designs after prototype testing and iteration.
PHASE V
Test & Iterate
Prototype Testing

I tested the prototype with 5 potential users, recording them on video and then writing out their actions and any verbal or nonverbal communications they made during the trials. Using these results, I generated some main observations about successes and pain points.

For example, none of the 5 participants scrolled down on the home page past the first hero image. When asked about this afterwards, participants said that they didn’t realize there was more to the page and that it looked like a complete page already.

Iteration
Priority Revisions

In order to improve the designs, I ranked the pain points by importance and time required to revise. I needed to make optimal use of the little time I had left to complete the project.

A major change I made was to address the hero image problem mentioned above. Making the banner photo on every page shorter was an easy solution to implement and would make it more obvious to the user that there is more content below it.

According to the Nielson Norman Group, visitors often leave web pages within 10 to 20 seconds. Decreasing the height of the hero image will push the Featured section up above the fold, showing them the most popular experiences in hopes of grabbing users' attention within that crucial time frame.

Another issue I noticed during testing was that since the Experiences page exactly mirrored a section of the home page, it was a little redundant. I decided the Experiences page would add more value and possibly save users a click if specific experiences were displayed for each category. Similar to the Features above the fold idea, showing users trips that may interest them could increase retention and click-through rate.

If I had more time, I'd make a drop down menu, build out other pages and features like the checkout process,

Before & After
Final Thoughts

The project's goals have been met. Zeit now has:

At this point, I would usually give the pages and other necessary deliverables to developers to build, most likely using a software like Zeplin to facilitate the handoff efficiently.

If I had more time and resources to use on this project, I would:

Thanks for scrolling!

Browse my other case studies
Let's get in touch!
✉️ mwestholtermann@gmail.com