Brief

Roles: Researcher, Branding, Logo designer, UI designer

Tools: Photoshop, XD, InVision, Illustrator

Goals: E-commerce website, Logo

Zeit is a time-travelling agency, offering a total of 289 destinations all over the world, up from prehistoric times through today. People will travel to controlled and protected places with organized (and secured) trips to nearby cities and attractions. While interaction with locals will be limited, the travelers will be able to look at and do things typical of the time, like workshop activities or attending shows.

How do you create a website for a novel product?

01. Research

02. Define

03. Design

04. Prototype

  • Competitive Analysis
  • User Interviews
  • Empathy Map
  • Persona
  • Project Goals
  • Feature Roadmap
  • Card Sorting
  • User Flow
  • Sketches
  • Wireframes
  • Logo and UI Kit
  • Hi-fi Prototype
  • User testing
  • Affinity Map

Research

While time-traveling is a new product, the service in its core - traveling - is not. And since the goal is to create a website that promotes service I needed to determine the people who would likely to time-travel and what competitors offer a similar service.

Using various research methods, here are the questions that I needed to answer to determine potential users, competitors, and their behavior :

Who the customer and the competitor is.

What people expect from traveling.

What people like to do while traveling.

What difficulties people experience when booking a trip.

What motivates and what discourages people from traveling.

How competitors handle their booking process.

Competitive Analysis

Competitive analysis is the best way to quickly look at the relevant best practices and what should be avoided. To determine the competitors I focused on the type of travel that Zeit offers - organized group trips with activities. Also, I looked for a company that offers a brand new product.

The take-aways from this analysis were: Royal Caribbean's booking process and detailed itinerary; it will be important to provide as much information about the time-traveling process as possible, like Virgin Galactic does; like Costco Travel, Zeit could explore adding more flexible dates and/or include flights to HQ to make traveling and planning more convenient.

Interviews

Interviews allowed to have a glimpse at what potential users would need from this product/service so that I could address their needs and pain points in my design proactively. I conducted 4 interviews with people who were in their 30's, working full time, and travel at least 3 times a year locally and/or internationally.

Based on set of questions about what they look for in traveling, how they organize it, and what they wish could be easier in the process, I consolidated the following pains/needs and the opportunities to address them:

Pains/Needs:

opportunities:

  • Compare the prices
  • Flexible itinerary
  • Arranging transportation
  • Information about destination and activities.
  • Show the prices for different dates
  • Detailed itinerary
  • Easy booking process

Persona

Combining all the findings from the interviewees about their behavior, what they like, and what they struggle with when it comes to traveling, into one fictional person allows to have a 360 view of all aspects that needs to be considered in making design decisions.

Define

After learning who our users are, the next step was to determine what the website should have. This is where using the persona comes in handy.

Project Goals

While it's helpful to know what users want, it's not always feasible to build a product that serves all the needs, since that may not be profitable and realistic. Thus it's important to look at the persona's needs vs company's goals through the lenses of technical limitations to determine where the goals overlap and where a compromise can be found. This was then translated into more granular and concrete list of features that would need to be built in.

Card Sorting

The next step was to find out the way to structure a website that would be clear and intuitive for users. I had 10 participants grouping the destinations and I learned that there should be a distinction between specific events and general time periods.

Site Map and User Flow

Now that I know what the website must have to achieve users' and company's goals, I could put together a website structure. This is where the website starts to get some shape and "bones" to build on. With a user flow, I could validate the site map and what pages were necessary to design for user testing.

Design