Zeit Mock-up.png

Zeit | Responsive Website

ZEIT | RESPONSIVE WEBSITE DESIGN

  • Project Scope: 4 weeks / 80 hours

  • Role: Strategy, Research, UX Design, UI Design

  • Tools: Sketch, Invision, Zeplin, pencil


INTRODUCTION

Zeit is a subsidiary of Richard Branson’s Virgin empire. After a long struggle with Elon Musk, Virgin has been able to make time travel tourism available to all of us. Over 100 destinations all around the world, from pre-historic times to today. People will travel to controlled and extremely protected places that most closely resemble what we know of today as resorts, but including organized (and secured) trips to nearby cities and attractions, where interaction with locals will be limited. However, Zeit travelers will be able to look at and do things typical of the time, such as workshop activities or attending shows.

GOAL

  • Design a responsive e-commerce website that is easy to use and allows customers to browse through all the different trip categories and details, filtering depending on interests and classifications you feel are relevant.

PROCESS

Zeit Process.png

01. RESEARCH

Zeit is a unique product with no direct competition in the market. However, the end use of the product is most similar to other travel booking websites. Behavioral patterns of users are expected to be most similar to the ones we have today. For this reason, I planned the research around understanding current travel booking market and its travelers.

COMPETITIVE ANALYSIS

Identified and analyzed other travel booking websites in the market in order to identify strengths and weaknesses of comparable products. This was an essential step to identify must-have features of the websites and areas of opportunity. Then created provisional personas to empathize with the user and understand pain points & expectations.

Zeit Competitive Analysis.jpg
 

USER PERSONA

Establishing a connection with the user and building empathy is essential to create effective solutions. I created below user persona based on my research findings. The goal of this exercise was to gain insight into the user’s behavioral patterns and build empathy to better understand their goals & frustrations.

 

USER INTERVIEWS

In order to gain further insight into the user, I recruited users based on the provisional personas. Three participants, aged 30-55, were interviewed in person and over the phone. Here are the key takeaways:

  • Powerful search options should be included in Zeit to accommodate the flexible traveler. (eg. travel sometime in the next 6 months, under x amount of budget)

  • Users should get travel recommendations and inspiration.

  • In order to have a more personalized feed, there should be an option to create an account. This content should be more personalized based on their behavioral patterns when users are logged in.

  • Travel packages and experiences should have customer reviews for visibility.

  • Experiences should be clearly highlighted under itineraries. Users should be able to browse experiences and get directed to destination packages, as experiences alone can be a factor to book trips.

  • There should be visibility to fees, policies and terms&conditions on pages leading up to a purchase.

  • In Zeit, there should be an interactive map.

  • The platform should not be cluttered with irrelevant information and ads.


SITE MAP

Based on the findings coming out of the card sorting exercise, I created below sitemap.


03. INTERACTION DESIGN

In previous phases, I explored user needs, researched the market and mapped out the site based on user feedback. In this phase, the content and the flow of the website is further explored.

USER FLOW

I created a user flow to show how the user can navigate through the site. I explored three different scenarios with three different users and mapped out their potential journeys on Zeit’s website.

RESPONSIVE WIREFRAMES

High-fidelity responsive wireframes were created for the home page using Sketch.



04. USER INTERFACE DESIGN

This phase focuses on branding, setting up design language and polishing up our design.

BRAND STYLE TILE

Brand style tile reflects the modern yet retro aesthetic of the brand. For this reason, I used a combination of a neutral colors along with a striking pop color that is in line with Virgin’s color scheme.

Zeit Style Tile.png

RESPONSIVE UI DESIGN

After having alinged on branding in this phase, I moved on to creating high-fidelity responsive wireframes.


05. ITERATION & IMPLEMENTATION

Last phase of the project was focused on validating our designs with users.

USABILITY TESTING

Here’s the prototype created in Invision.

Usability tests were conducted with three different participants. Here’s a summary of my findings:

  • All users were able to navigate the site and complete tasks without problems.

  • Users complimented on the home page and thought it was intriguing and inspiring. On the home page, users’ first reaction was to click on photos and expected to be directed to destinations.

  • There was one comment about a potential UI improvement regarding the cards design.

  • There were a few minor UX improvement suggestions.

  • One user recommended making the search bar hidden and represented by search icon only, which can expand when tapped on.

  • All users responded positively to the visual elements on the site and the overall ‘modern’ aesthetic.

AFFINITY MAP

I created an affinity map to summarize and visualize my findings:


NEXT STEPS

Having completed usability tests, I identified areas of improvement and made necessary revisions to my designs.