Reimagining History

Zeit is a concept project from my Designlab bootcamp that is focused on developing a responsive website that allow users to book trips to discover the past through time travel.

Zeit is changing the travel industry by providing people with the opportunity to time travel. They are looking to do this through their product experiences, from their brand logo to their website. That is why they are focused on having a user-friendly experience that will attract users.

Role:

UX/UI Designer

Time:

4 weeks, 120+ hours

Type:

• Optimal Workshop

• Hybrid activity

  • Group items based on the boxes already provided or create new groupings

Activity & Results:

• Diverse representation of gender, age, education and location

• Participants - 9 total

• Recruitment via Slack Groups

Options:

• Sort 27 cards into 5 groups

• Categories or Groups

  • Experiences

  • Menu

  • Company

  • Support

  • Account

Conclusion:

Account:

There were several items that were listed across multiple locations with minimal overlap for each of these sections: Account, Company, Menu and Support.

Support:

The cards that were most debated were the following: Travel Insurance, Cancellation Options, Sign up, Travel Plus, Packages, Terms & Conditions, Privacy Policies, How it Works, and About.

Menu:

Another observation was that many cards were also split between sections that will be together – i.e. Footer will include the Company and Support categories and as such wouldn’t be competing for cards that were split between them.

The site map provides the foundational architecture for the site and how the information will be organized. This allows for a more intuitive navigation experience for users because it feels seamless. Given some contradictions in the card sorting activity, it was important that the site map took into account these discrepancies.

The booking task flow provides an outline of the expected user behaviour when they navigate through the website to book an experience on Zeit. Outlining this process allows us to consider success routes while at the same time considering alternative paths and gaps along the way.

Wireframes

My wireframes, the Landing page and the Experience page, came about from combining my site map, user flow, task flow, sketches and market analysis. On the Landing page, the Hero includes an image and a search bar as the main interactive piece. The Hero is followed by the Experiences section where the user will find trips, an Interactive Map, Testimonial and Travel Perks section.

Overall, the design of the pages remain the same across screen sizes. However, the layout changes slightly for the smaller screens. In addition, the tablet and mobile versions have more interactive features that are activated by touch. This includes features like swiping, and zooming.

Logo Design

I sketched out brand ideas for the logo and shared my designs with my team and then, with my mentor. I was not happy with the results but I continued drafting ideas.

I used Adobe Illustrator, a tool I recently learned to use, to come up with several iterations. I thought of time as a continuum of existing events that overlap. To represent that, I used overlapping circles and arrows. Through union, subtract, exclude, and intersect selections, I created new logos that led to my current logo.

UI Kit

Although time consuming, I was more efficient with my design process by creating a UI kit that included components I could re-use in my responsive design.

The components and color palette brought the pages to life while also cutting down on recreating designs.

Objectives:

Identify and improve the UX/UI of Zeit’s responsive sites through the following steps:

1. Test overall usability of the website.

2. Figure out if users can complete the core tasks within the website.

3. What can we learn from the steps that users take to complete tasks?

4. Identify pain points and potential opportunities.

5. How long does it take for a user to complete tasks?

6. Are there any parts where users are getting stuck?

Participants:

• 5 participants

• Remote and in-person

• Moderated and unmoderated

• Ages: 22 - 40 years old

• Travel enthusiasts

Goals:

• 100% Error-Free Rate

• 100% Completion Rate

Affinity Map

The affinity map represents the results from my testing and conveyed what I would need to prioritize in my updates.

Challenges:

• Users had a hard time understanding content

• Add auto-populate search bar

• Lack of multiple entry points

• Lack of filter options

Successes:

• Clean design

• Easy to use and navigate

• Interesting features

Suggestions:

• Engaging content & copy

• Add auto-populate destination

• Filter results

• Personalized experience

Prioritization Matrix

I focused on tasks that would be high in value to users but low in effort. This meant that I would be auto-populating destinations, including more access points, and updating images, copy, filter and content.

The Results

The new prototype took into account users’ feedback. Based on the prioritization matrix, I tackled the following:

1. Providing multiple access points to increase exploration

2. Adding relevant, engaging images and content

3. Simplifying filter options

4. Adding a share option and auto-populated destination

Before

Multiple access points

Participants were confused by how they could access the Experiences page and often overlooked the “See all” link.

Relevant images and content

The site lacked a difference between any other competitor in the market, including images and content that reinforced its difference to the market would allow the site to standout to participants.

Simplify filter options

The initial site had several filter options provided that did not make sense to include. Not only were they irrelevant, they confused participants.

Share option and auto-populated destination

When planning, participants are usually considering someone else’s opinion, a share icon and auto-populated destination would make it easy for them in making decisions.