E-COMMERCE WEB DESIGN
Client: Zeit, a fictional time travel agency
Role: UX/UI Designer
Framework: DesignLab's UX Academy
Tools Used: Sketch, Illustrator, InVision, Zeplin
Zeit, a fictional time travel tourism company, is a subsidiary of Richard Branson’s Virgin Group empire. After years of discussions, the International Concordance on Time Travel has finally given Zeit the green light to begin developing the time travel tourism space. With a total of 289 approved destinations around the world ranging from prehistoric times through present day, Zeit is giving people the opportunity to travel into the past to experience history.
Zeit was looking to design an e-commerce website that allows customers to book travel packages to different times and places.
I created a time travel booking website that uses familiar online booking design patterns in order to create an intuitive and familiar experience for Zeit users.
I chose this assignment because I've always had an interest in books and TV shows about time travel so I thought it would be a fun project. That being said, it was difficult to research (and test) not only a product, but also a concept, that doesn't exist. Therefore I focused on real travel booking websites and aimed to better understand how users book travel online. Additionally, I was interested in seeing if there was any interest in traveling back in time and if so, where and when would they be interested in visiting.
I researched the most popular travel booking websites and looked at their strengths and weaknesses to get a better understanding of what is currently available and expected. I also created provisional personas to understand who Zeit's potential users might be.
With this broad understanding of the market trends and competitors, I then interviewed five participants about their personal experiences with travel booking. Each participant represented one of my provisional personas; The History + Sci-Fi Buff, The Adventure Seeker, The Wealthy Traveler, The Social Media Influencer, and The Weekend Getaway Seeker. I created an interview script with open-ended questions and recorded the interviews on my phone to make sure I didn't miss anything. I also created and distributed a survey and received 29 responses.
Additionally, I conducted a user observation where I watched as the user searched for flights, hotels, and activities online. I had already received a lot of data from my interviews and survey and didn't expect to learn anything new so I was surprised at how helpful the observation was in the end. The user became frustrated with certain aspects of the sites she was searching but didn't even realize that they were bothering her and would never have thought to mention it during an interview.
Here are a few key insights from this research:
Using OptimalSort, I had four participants categorize and label 30 cards (listing historical events and places) to see how potential users would sort and title the categories. Overall, the cards were sorted into similar groupings but the category titles were all over the place.
I did an additional round of testing where I had seven participants title pre-made categories. This helped me focus on finding the proper wording for the category titles. Some cards were repeated in multiple categories because many participants felt that some cards could fit in a few places.
I wasn't able to create every page listed on the site map due to course time constraints so I created a task flow laying out all the pages I would design. The task is for a user browsing the site and booking a trip.
After sketching different variations, I designed low fidelity wireframes of the key screens for the user task, which was to book a trip to Woodstock. I took a lot of inspiration from various travel booking sites and wanted to keep the site clear and easy to use.
It was then time to add the UI and visual design to my wireframes. I searched for inspiration on Pinterest and created a mood board as a reference. A UI Kit was created combining all elements used across my high fidelity wireframes.
Applying the UI kit and images to the wireframes, I designed high fidelity mockups for the key screens in Sketch and created a prototype using Invision.
As I prepared for testing, I created a test plan outlining goals, tasks involved, and a script. Using Invision App, I tested my prototype on four users. Testing occurred during the Hanukkah holiday so I offered all my testers a delicious sufganiya (donut) as a thank you!
Once testing was complete, I created an affinity map to highlight my findings and clearly see what iterations needed to be made. The biggest issue I had during testing was that every single tester thought that Zeit was virtual reality. Although they knew that the website was only a prototype and not a real site, they never would have thought that it was for something fictional like time travel. The great thing about testing is that it is always helpful to get another perspective and I would never have realized that the site could be mistaken for VR without it. After testing, I went back and iterated the prototype by adding additional copy to make it clear that Zeit is a time travel tourism site.
This was my first UX design project and I really enjoyed it! I learned many techniques from interview tips, to UI design (which was very new for me), to prototyping and testing. The most challenging aspect of this project was designing for a concept that doesn't exist (time travel) but I sharpened my problem-solving skills and was able to work through it. It was definitely a unique project and I'm very proud of the first site I ever designed!
View More Work
TwitterIntegrating an online feature into the iOS app (fictional)
Happy TailsDeveloping a live streaming platform for animal shelters (fictional)
HomeScanCreating an at-home photo digitizing service (fictional)
Tel: 058-621-0255 (Israel) / 646-299-8373 (NY)
Tel: 058-621-0255 (Israel) / 646-299-8373 (NY)