CONCEPT:
Zeit is a subsidiary of Richard Branson’s Virgin empire. After a long struggle with Elon Musk, Virgin has been able to make time travel tourism available to all. My design objective was to create their new brand, and set up a responsive ecommerce website that allows customers to browse through all all different trip categories and details, filtering via interests and classifications.
COMPETITIVE ANALYSIS
I did a review of other tourism websites to see what is and isn’t effective. I also looked at industry leaders for inspiration.
INTERVIEWS
Phone interviews were conducted with travelers to gain insight on travel decisions and motivations. 6 individuals were interviewed about their traveling habits
- 4 females, 2 males
- 4 ages 32-37, 2 ages 60+
- 4 travel often (5+ times a year)
- 2 travel occasionally (1-2 times a year)
- 5 have international travel experience (5+ countries outside of US)
PERSONA
I created user personas to realistically represent key audience segments. I didn't need to represent every possible audience member but ratheraddress the major needs of the most important user groups. Meet Susan, a retiree looking to relive her youth.
EMPATHY MAP
I created an empathy map to understand my users, organize my research, and to drive a human view rather than technical view of Zeit. Empathy maps are used to understand and communicate the problems and mindset of users in an easily digestible manner.
STORYBOARD
I created a storyboard to show users experiencing the problem space that I was interested in. Storyboards are a great tool to show users in context. They allowed me to show not only what Zeit's users are doing, but where they are when they're doing it. Different contexts can provide different opportunities or different pressures.
SITEMAP
A sitemap was created to show the relationship between the content on the site.
TASK FLOW
I identified the main flow that users will follow to complete the main task (booking a trip with Zeit). A path was created to the key screens that would become part of the site design, also known as the "happy path" of Zeit.
USER FLOW
A user flow was created to represent the different paths that a user would take through the site to complete each task.
HOMEPAGE WIREFRAME SKETCHES
Created low-fidelity sketches of the homepage to represent different ways important information could be laid out.
ANNOTATED WIREFRAMES
Wireframes were created to illustrate the overall layout of the product interface, define the rules for displaying information and define the behavior of its elements.
LOGO CREATION
I created a logo for Zeit, which means "time" in German, that represents an invisible timeline cutting through the name (symbolizing time being invisible). It also emphasizes the "i" so that it impacts the pronunciation of the name of the company, so that the user says it as "zite" rather than "zate" or "zeet" or other unwanted pronunciations.
STYLE TILE
A style tile was created consisting of fonts, colors and interface elements that communicate the essence of the visual brand for the Zeit website.
RESPONSIVE UI DESIGN
Next, I needed to design to accommodate different viewports - the layouts need to be able to fold and expand gracefully without disturbing the overall flow of the design.
UI KIT
Next, I created a UI kit. It included the user interface components which convey meaning and provide functionality to users.
PROTOTYPE CREATION
The testing phase is the greatest opportunity to improve products by studying how people respond and interact with ideas. I created a functional prototype with clickable buttons, simulated page transitions and animations that roughly matched my experiential concepts for usability testing.
USER TESTING
Next I took that prototype and put it in front of some people and see how well the design ideas played out.
INTRODUCTION:
Four users were tested. They were aged 23-62, both male and female. The task was to find Interactive Map via Destinations, find South Africa, locate trip to District Six, click Book, agree to Terms and Conditions, enter guest details, enter payment information, and complete booking. This test was done remotely via Skype. Introduction was done via video chat and then test was done using screenshare. The prototype itself was tested with a link from InVision. After each test, I asked them feedback about their experience, what their pain points were and how they would improve the interaction.
SUMMARY OF RESULTS:
- All users completed the task
- All users hesitated on timeline page
- 3 of 4 users did not read directions at all on timeline page, 1 didn’t read at first but then went back and read to understand
- 2 of 4 suggested they wanted a search bar or filter for trips
- 3 of 4 clicked on Destinations on nav bar rather than on homepage
- 3 of 4 users did not try to click on any other parts of website outside of task, 1 tried clicking on Explore More on homepage
AFFINITY MAP
I wanted to step back and see the big picture of my results so I created an affinity map. By labelling groups and sub-groups, I can visually see where the main issues are.
REVISED PROTOTYPE CREATION
I made revisions to my design work based on feedback from my evaluative research. I had to determine what were the biggest priorities to change. In this stage, I would continue to make revisions and complete usability tests until the design is a success without any usability issues.