A responsive website for an e-commerce website
Zeit has become the first company to achieve time travel* and make it available to the public. With over 289 destinations all over the world, users would be able to travel to historical places. Zeit wants to make it as easy as possible for users to buy tickets to travel.
*Note: This project is a hypothetical scenario if time travel were actually possible.
UX UI Design, UX Research, Branding
Figma, Optimal Workshop
4 weeks, Nov 2021
Zeit is a new company looking for an e-commerce responsive website that is easy to use and allows customers to browse through all the different trip categories. Zeit is also looking for a new logo that is modern and historical at the same time.
Design a responsive e-commerce website designed to be modern but historic giving the user an easy and comfortable way to browse historical places they would like to visit. A logo was also designed to reflect both a modern and historical feel, giving Zeit the branding they were looking for.
Using the design process
For the empathizing phase, I conducted research using both competitive analysis and user interviews to collect pain points and successes when it comes to booking a trip. In order to do that, I created my research goals to help guide me in conducting the user interviews and the competitive analysis.
- Understand how the user makes decisions on a product that they have not tried before.
- Understanding the difference between booking a normal tourism trip vs a time travel tourism trip
- Understand the process users use to narrowing down possible trips to certain locations
- Understanding the restriction users may come across when booking a specific time travel location/site.
Summary of Findings
With my research goals in mind, I conducted the user interviews to understand their needs and frustrations. Below are my key findings from the interviews.
- All participants seemed to appreciate the idea of an all-in-one site that takes care of travel, rentals and flights so they wouldn’t have do to do the guesswork when it comes to making decisions on a certain destination
- Participants need to have the ability to compare prices and reviews, before coming to a decision on a location and/or destination.
- A participant thought it would be helpful if booking sites had a page about things you should know about your destination before booking i.e., if immunizations would be a good idea to have before traveling to a certain county
- Participants generally would just like a stress free site, friendlier to help them come to decisions.
- Sites that advertise other areas of interest, after they already decided on a location
- Misinformed ratings, making a destination seem pleasant, but really it’s just average or even worse than anticipated.
- Sites advertising that if you changed your length of stay, you could save money. Usually they are already set in the timeframe that they want to take time off from work and this would just hinder their research.
- Filtering options not being as functional to help narrow a search for a destination
I also did research on what potential competitors strengths and weakness were when it came to booking. While time travel is difficult to do a competitive analysis against, I did my best to select companies that made sense to compare with to help me better understand the market. Below is the summary of my key findings
- There were no direct competitors for time travel so my next best option was to look at was space travel as that seemed to be the best comparison for time travel.
- Sites seem to keep a very clean and easy UI for the users to use. They are very readable, giving the users an ease of use experience.
- Booking sites use alot of photos, which seems to help the user come to a conclusion on where they would like to stay and/ or visit
- Most sites seem to use a review system to help users come to a decision on a destination
Creating a Persona
Now that I had completed my user interview and competitive analysis, I was able to create a unified persona that would help me make key decisions when it comes to designing a new e-commerce website.
With the empathizing phase complete, I began to look at how to define my findings.
I started by condensing all the information into three key considerations: business goals, user goals, and technical goals. By completing this exercise of condensing all the information, this helped me zero in on the goals needed to start designing a new kind of e-commerce website.
I also conducted a card sorting exercise to help me understand how users would expect a series of destination to be organized. I used optimal workshop to complete this exercise. I gave the participants twenty unique locations to categorize. I set the exercise as open ended so users could categorize it however they saw fit. I had 10 participants complete this exercise and was given a resulting 41 unique categories.
Using optimal workshop, I looked through how to standardize—meaning condense—these categories. I found their 3D cluster view was really helpful in standardizing these categories. I was able to standardized the forty-one unique categories in to just three main categories with defining subcategories to help users sort through destinations.
With the card sort completed, I could now confidently create a site map to aid me in creating the websites flow for Zeit.
Since I now had an idea of what the site map looked like, I could now created a user flow to help me visualize what one of the main tasks a user could complete. This helped me ensure the pages of the site flowed logically from one another.
Now with both empathize and define phases complete, I began to work on designing a responsive website, creating a logo, and UI kit for Zeit
To start the ideating phase, I began with sketching out ideas for the hero section of the website.
In my first sketch, I focused on the search/filter being the main part of the hero section since that is what users really wanted. I also felt it was important to include an "About Time Travel" section as this would be a daunting new endeavor for most users.
For my second sketch, I put more focus on the actual display of locations to make the site more inviting. I shrunk down the search bar but still big enough to denote it's importance.
In my final sketch, I tried having the "About Time Travel" as the first item on the hero section followed by reviews to give users more confidence in time travel right off the bat.
Once I finished my sketches, I moved on to creating responsive wireframes. I decided to use sketch #2 (pictured above) as my guide as I felt it would be the most familiar to users. The hero section would show case popular destinations and directly below that would be the "About Time Travel" section for users to get acquainted with time travel.
Creating a Logo
My next task to complete for Zeit was to create a modern logo for their time travel site. I began by sketching out my ideas.
Since this was a project that many other students would be working on, I assumed many would also think to use the "Z" in Zeit and turn it into an hour glass for a logo. I wanted to try do something else, to make it feel more original for my version of Zeit.
Below are my sketches and initial iterations before I came to a final design that I thought fit best.
My final task was to create a branding for Zeit. This was a struggle at first because I wanted to give the look of being modern but also give off a past type of vibe. My initial color scheme was going to be like a brown/gold color with a maroon as an accent color. But this just made the site seem very old and not modern at all which would not meet the requirement of making it modern. After some tinkering around, I decided to go with some rich colors that leaned to being more modern.
High Fidelity Screens
With both the logo and UI kit complete, I could now incorporate them into my wireframes to creative responsive high fidelity screens.
Now that I had my high fidelity screens complete and ready, I began preparing my screens for prototyping. I used Figma to create the prototypes for testing. I made three separate tasks for my test group to make sure the site was usable.
With prototyping complete, I gathered five participants to complete the three tasks. The goals I was to test were as follows:
- Test if the website was easy to navigate
- Test if a user could find and book a trip
- Test for any area of confusion the user may have
I conducted this testing in person using my personal laptop and mouse for the participants to test this prototype. I sat with them and explained where the tasks were and told them to complete them how they saw fit. I also told them I would observe and would not give them instruction as I was testing the sites usability. With that, I conducted the interviews and wrote down all of my finding into three categories: successes, pain points, and suggestions.
One of the main pain points for the users was that they had a hard time with the search bar. This was partially due to how I prototyped the screens. This was my first ever project I prototyped so I was not aware of all of the functionalities Figma had to offer when it comes to prototyping. If more time was allowed I could have prototyped it better for the participants.
With the time I did have, however; I did work on some of the suggestions to help me create my final high fidelity screens for this project
High Fidelity - Finalized versions
Since this was a limited timed project, I was not able to work through another round of testing. However, given more time, these are the next steps I would have taken to create a piece ready for handing off:
- Create new versions of the prototype based on the user tests.
- Test again with old and new participants
- Add more screens to make the product more complete
- Prepare file for handoff and for the the project to go live
This has been a great learning experience as my first ever design project! I feel good about my design, but I know it could do better given more time and maybe some more design reviews and critiques