Zeit

2019 - Individual Project

Responsibilities: Branding, User Experience, Interaction & Visual Design

View full Prototype - This link will open in a new browser tab.
Zeit

Introduction

"Zeit" was a hypothetical project chosen out of three available options through UX Academy that was an exercise on an innovative eCommerce product. I chose this particular project because I felt it would give me the most experience in designing and researching a project where the product doesn't exist yet.

Company Information:

Zeit is a subsidiary of Virgin that has developed a way to travel to destinations in the past through following international regulations. With over 289 destinations all over the world, customers would travel to these protected and controlled areas and stay at secured resorts with trips to nearby areas or activities.

Summary of brief:

  • Create a new brand that is both Modern & Fresh, Classical & Historical
  • Additionally, create a responsive eCommerce website in which Zeit would be able to sell travel packages for their customers to different times.

From the brief and the project requirements that were provided, a design question was determined:

"How might we create an eCommerce website that can provide a satisfying experience that is both simple to use and informative?"

Research Methods

Understanding that Zeit is a very niche travel option, the unknowns of "time travel" posed some challenging aspects especially during user interviews since it is a new product that hadn't been used before.

I needed to find out who I would be designing for, and how I could create a meaningful solution that would fit their needs.

Secondary Research

During my secondary research I took a look into the current adventure travel industry and the potential competitors that Zeit may have in this same area.

Primary Research

The approach to gaining insight through primary research was to find out how people currently travel and what their pain points in selecting an adventure travel option (or destination) might be.

Research Findings

Through my primary and secondary research, I was able to determine potential solutions to issues that my participants had, as well as narrow down who the target audience is.

Insights were found on the behavioural commonalities and the frustrations that the participants had. From these insights, I was able to begin to understand and empathize with Zeit's potential customers.

Needs

  • Simple Navigation: Navigational items should have concise descriptions with their related pages.
  • Filtering: Filter should offer a simple layout with choices that aren’t overwhelming.
  • Content delivery: Content should be simple and clearly describe the destination without excessive information.

Wants

  • Desktop Focused: All participants performed their travel research and bookings on desktop with no mention of using their tablets + mobile devices.
  • Location Information: All participants enjoy exploring their destinations, it may be worth providing information that helps them locate the best spots to visit (perhaps a visual map, and imagery taken at the destination).

Opportunities

  • Intuitive Booking Engine: The majority of participants expressed a frustration when needing to repeat or start over in their purchasing process.
  • Rating system: It was found ratings helped inform participants in their booking decisions.

Next Steps

With the information gathered along with my new found empathy for Zeit's target audience, I was then able to define create a representation of Zeit's target audience through a persona.

Then using the persona I was able to explore how their environments, what they think, see, and feel can affect their decision making processes through an empathy map.

These deliverables both helped to summarize findings and create an alignment and reference points for future work.

Persona of Candice Picard
Persona
Persona of Candice Picard
Persona of Candice Picard
Empathy Map
Empathy map for the Zeit persona

Defining & Structuring

Sitemap

From the results found in card sorting and previous secondary research, a page structure was created in the form of a sitemap. This helped me see the relationships between each page and provide further context for the planned navigation for future processes in the Zeit project.

User Flow

Keeping my persona in mind and referencing both a task flow and sitemap, paths were created that depicts the process they would go through and any outcome to a potential decision they make while using the Zeit website.

Creating a user-flow helped me see a clear depiction of key interactions of how my customers would use the Zeit product. As well as show how to help the persona along towards their goal of purchasing a trip.

Sitemap thumbnail view
Sitemap
Sitemap for Zeit
Zeit User-Flow thumbnail
User Flow
Zeit project User-Flow

Branding & Identity

In keeping with the original brief's request for the branding to be both "Modern & Fresh" as well as "Classical & Historical", keywords were then selected ("timeless, "trustworthy", "adventurous"). Additionally, understanding that Zeit's form of travel was the first of its kind, the branding needed to deliver a sense of confidence and welcoming to its future customers.

Holding the brief's objectives as well as keywords, a logo concept was created from looking into the meaning of "Zeit" [German for "Time"]. Then I explored different types of symbolism before finally settling on the Humming-bird direction.

A mood board was then created to gain some inspiration on the imagery, typography, colour choices to help create an overall feeling that best resonated with the branding objectives.

The final logo typography choice was "Domain Display Narrow" which I felt carried the perfect blend of modern and classical for the logo. I decided to stick with a sans-serif typeface set for the headers ("Montserrat") and body copy ("Open Sans"), not only to keep with the modern and fresh intent but to ensure that the content was easily ready for an inclusive design.

Zeit Branding

Ideation

Sketches and Wireframes

Using the sitemap and user flow, I began my ideation phase with some sketches and moved onto building key pages in the form of a wireframe.

The wireframes were created while referencing a UI requirement document based on the insights I gained from the prior interviews and research as well as the Zeit project brief and user flow.

Once the wireframes were completed, a prototype was used in some quick user-testing which helped bring further insight into how to best present the interactive items and content areas.

Zeit Wireframes

Visual Design Solution

The next step was turning the wireframes into a more fleshed out representation of the final product. I wanted to keep with a more visual design with just enough information in keeping with the initial feedback from the interview participant's feedback.

Another prototype was created using the first version of the mocks and user-tested once again with different participants maintaining the same demographic outlines. The feedback gained from the results of the user-testing were integral to helping to simplify features and gaining a better understanding on what content was most important.

Updates to the mocks were made from these results which included updates to the UI, removal of extra stylistic features, and better placement of content for a better overall experience in the Zeit product.

Check out the prototype! - This link will open in a new browser tab.

Zeit desktop mocks

Conclusion & Takeaways

Being this was my first UX project, I found going through the entire process very rewarding. From the research to the iteration stages, it was great seeing the concept come to life with a purpose and confidence from the testing that it aligned with both the business and target market audience's goals.

Through the process of this project, I learned the importance of good research and how it can help create a solution.

Of course, there are areas of the visual-design that can be improved and if I had more time in the project, it would go towards creating a better delivery of the destination cards, especially on the search results and destination landing pages--then performing more user testing to validate the updates.

View full Prototype - This link will open in a new browser tab.
Click to go back up to the Top