ZEIT
Responsive Web Design
A brand new e-commerce travel site that offers the ability to book time travel packages to the general public.
View Case study
My Role UX/UI Design & Branding | Tools Survey Monkey, Sketch, InVision | Time 4weeks
ZEIT is brand new travel service offering time travel packages to over 280 destinations in the past from prehistoric to modern day.
Develop a rsponsive, ecommerce website that can easily sell time travel package to the public and convince its potential users of its trustworthiness as well as design the ZEIT brand.
A responsive site that offers users the ability to search, discover and book time travel vacations with ease as well as educational components and reviews to establish trust in the brand and products.
*this was a spec project done while attending design school
Explore this section to dive deep into my design process and see how this project came together or skip below to the takeaway to see what I learned.
After synthesizing the interview data the following viewpoints were formed
Further analyzing of the research allowed me to spot patterns in behaviors, goals and attitudes of the interviewees. These patterns then helped me to create Véronica, a typical product user of ZEIT. Véronica allows me to keep the user as my focus of the design.
I created an empathy map based on Véronica to help me understand my user when designing.
Finally, I created a storyboard also based on Véronica to help me better understand how our users will interact with ZEIT.
I performed a card sorting exercise with 6 participants in order to develop an optimal site structure and to help users easily sort through the more than 280 time travel packages ZEIT will offer.
Each participant was given 46 cards contains the name of an event in time, location and year. They were asked to sort the cards into groupings that made the most sense to them.
Most participants were not very familiar with history before the 20th century
After synthesizing the card sorting research I was then able to create the following site map.
After designing the architecture based on my research, I developed the following user flows to understand the ways in which a user might try to complete tasks.
After having a coffee with a friend who just told her all about ZEIT, Verónica decided to go to the site and create and account
After listening to the podcast Scene on Radio Verónica has become extremely interested in African American history. She decides to head over to ZEIT to see if they have any trips focussed on the topic. Since she has used the site before she decides to head straight to the home page and use the search function. After browsing some packages and reading reviews she finds the perfect trip to purchase. As she is checking out she realizes she doesn’t remember her password, rather than checking out as a guest she resets her password then finishes the booking process.
Based on the user flows I was then able to create a responsive set of mid-fidelity wireframes.
New/old. Future/past. Modern/historic. Fresh/classic. These juxtapositions are what fueled the branding design for ZEIT. The act of traveling back in time is ironically a futuristic idea and there is no color palette more futuristic than the galaxy palette. The blues of the palette also help signify trust while the purple and fuchsia hues add a fresh, exciting touch. The logo which is clean and modern pairs nicely against these colors and the imagery chosen while historic in content in modern and vibrant in technique.
Once the branding was approved I was then able to create the following UI kit.
I used the approved UI kit to then create a set of responsive pages for the ZEIT homepage and product page.
Using a mixture of wireframes with some UI flowed in to key pages, I was then able to make a mid-fidelity prototype using Invision that I could use to conduct usability testing. Each test was done in person with 4 participants, 3 female, 1 male ages 28-48. Each participant was asked to perform 2 tasks. All tests were recorded.
You are a massive Star Wars fan and friend recently told you about a website that allowed you to travel back in time and attend the making of Star Wars Episode 4, A New Hope. You go directly to the website’s home page and browse until you find the travel package for the Star Wars listing. You review the package and then book your travel.
As an avid traveler you were browsing the internet for new vacation ideas when you came across the ZEIT homepage. Intrigued by the idea of time travel, you decide to explore the site to see what types of trips it has to offer.
After reviewing the test recording I was able to make this affinity map to help me process my findings and determine my next steps.
Overall, when searching for and booking a specific package, the current site iteration seems to perform successfully but could benefit from a few small changes. For exploring the site and discovering packages, the current iteration needs improvement to be more successful. Below are some changes to consider.
Want to have coffee, work together, or just say hi? Email me, I'd love to hear from you.
