UX research UI designer Prototyping Usability Testing
Timeline
2 months 80 hours
Team
me
My task
Figma Photoshop Maze Optimal Workshop Whimsical
About the company
Zeit is a made up company which is promising to be a first company which is able to make time travel tourism available to all. They are going to be selling tours to 289 destinations all over the world, up from prehistoric times through today.
Zeit's goal
create their new brand (logo is supposed to be modern, fresh, classical and historical at the same time)
design an e-commerce website in which they can sell travel packages to different times. The website should: be responsive, allow customers to browse and filter through all all different trip categories and details, provide information about how the service works in order for people to understand and trust the company
Let’s start collecting some data
Challenge
It’s a very new service on the market which made it quite difficult to derive some assumption which would help me to navigate the further research.
Solution
I derived the assumptions based on general traveling and willingness to take risk. Not to spill the beans, in the interviews, I asked a hypothetical question "If you won voucher for 4 days trip to one of the 300 destinations back in time, would you go?"
Solution
Determine motives and expectations to go on a trip back in time
Understand the fears and obstacles which would be a barrier to take a trip back in time
Find out what a general perception of time traveling is.
Methodologies
Individual Interviews
Participants
4
Methodologies
People like authenticity, simplicity and the nostalgia of being able to see how things were/worked before. They are more interested in how things worked than in events that happened that time.
In general, people like the idea of being able to travel back in time, although they wouldn't be the first ones who try it out.
Their biggest concern was that they won't be able to come back to the reality and their ability to "fit in" the time where they decide to travel.
Feature definition
Based on the needs and goals of the persona and the company, I put together a set of features which could be presented on the website. I divided them according to the page where they would be presented on and included a clarification why the given feature is important.
sketches and sitemap
Having the features and user needs mapped out, I started sketching how the content could be organized on the website. I tried to use different colors to distinguish between primary and secondary buttons which, later on, would help me to keep in mind the primary goal of the site.
As the client had quite a broad sortiment of services, I decided to use a card sorting technique to define how the particular trips should be grouped together.
Task flow to purchase a tour
Defining a task flow, helped with design decisions how and which content to place on certain pages.
Wirerframes of homepage and tour detail page
I translated the already existing sketches into wireframes with higher fidelity. At this stage, I focused on homepage and the detail page.
Homepage
Tour detail page
Detail page (price pop-up)
branding
Homepage
Typography
Colors
UI design
Homepage
Tour overview page
Tour Detail page
User testing
The Objectives
Identify if people understand what Zeit does
See how people browse the tours
Examine what their booking journeys are
Monitor what kind of information they might be missing when deciding to book
Observe which obstacles they are facing when making the decision to buy and make a booking
Methodologies
Prototype in Maze In person and online interviews Written feedback
Participants
7
Methodologies
Overall, people understood what kind of service Zeit was selling. The user testing showed that each testee had a different way how to search for a particular tour which resulted in not being to clearly identify what the most common journey to book a tour is.
One of the most positive outcomes of the test was, that all the users felt satisfied with the quality of the information the site provided to actually book the trip.
There were some comments regarding functionalities related to search and and saving the tour for later.
Based on the data gathered in interviews and Maze, I created list of suggestions to implement into the design. Here are final designs after iterations.
final designs
Homepage
Tour overview page
Tour Detail page
reflection on the project
The hours limitation of the project is going to influence the extend of what’s possible to design and test. Set the realistic design goals!
It’s essential to realistically estimate what’s possible to get done within a given time frame and decide either on spirits or on what could be done now and what could be done in other phase.
Define what you are going to test as early as possible.
I didn’t do it and I did encounter a dilemma when I started building the prototype as I found out I was missing plenty of pages which were essential for the test.
Affinity mapping and it’s power
Working on this project, I didn’t fully used affinity mapping to gather the insights and evaluate the data. 6 months later, I can see how the project could have benefited from it.
