ZEIT | RESPONSIVE WEBSITE DESIGN
Project Scope: 4 weeks / 80 hours
Role: Strategy, Research, UX Design, UI Design
Tools: Sketch, Invision, Zeplin, pencil
INTRODUCTION
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 of us. Over 100 destinations all around the world, from pre-historic times to today. People will travel to controlled and extremely protected places that most closely resemble what we know of today as resorts, but including organized (and secured) trips to nearby cities and attractions, where interaction with locals will be limited. However, Zeit travelers will be able to look at and do things typical of the time, such as workshop activities or attending shows.
GOAL
Design a responsive e-commerce website that is easy to use and allows customers to browse through all the different trip categories and details, filtering depending on interests and classifications you feel are relevant.
PROCESS
01. RESEARCH
Zeit is a unique product with no direct competition in the market. However, the end use of the product is most similar to other travel booking websites. Behavioral patterns of users are expected to be most similar to the ones we have today. For this reason, I planned the research around understanding current travel booking market and its travelers.
COMPETITIVE ANALYSIS
Identified and analyzed other travel booking websites in the market in order to identify strengths and weaknesses of comparable products. This was an essential step to identify must-have features of the websites and areas of opportunity. Then created provisional personas to empathize with the user and understand pain points & expectations.
USER PERSONA
Establishing a connection with the user and building empathy is essential to create effective solutions. I created below user persona based on my research findings. The goal of this exercise was to gain insight into the user’s behavioral patterns and build empathy to better understand their goals & frustrations.
USER INTERVIEWS
In order to gain further insight into the user, I recruited users based on the provisional personas. Three participants, aged 30-55, were interviewed in person and over the phone. Here are the key takeaways:
Powerful search options should be included in Zeit to accommodate the flexible traveler. (eg. travel sometime in the next 6 months, under x amount of budget)
Users should get travel recommendations and inspiration.
In order to have a more personalized feed, there should be an option to create an account. This content should be more personalized based on their behavioral patterns when users are logged in.
Travel packages and experiences should have customer reviews for visibility.
Experiences should be clearly highlighted under itineraries. Users should be able to browse experiences and get directed to destination packages, as experiences alone can be a factor to book trips.
There should be visibility to fees, policies and terms&conditions on pages leading up to a purchase.
In Zeit, there should be an interactive map.
The platform should not be cluttered with irrelevant information and ads.
SITE MAP
Based on the findings coming out of the card sorting exercise, I created below sitemap.
03. INTERACTION DESIGN
In previous phases, I explored user needs, researched the market and mapped out the site based on user feedback. In this phase, the content and the flow of the website is further explored.
USER FLOW
I created a user flow to show how the user can navigate through the site. I explored three different scenarios with three different users and mapped out their potential journeys on Zeit’s website.
RESPONSIVE WIREFRAMES
High-fidelity responsive wireframes were created for the home page using Sketch.
04. USER INTERFACE DESIGN
This phase focuses on branding, setting up design language and polishing up our design.
BRAND STYLE TILE
Brand style tile reflects the modern yet retro aesthetic of the brand. For this reason, I used a combination of a neutral colors along with a striking pop color that is in line with Virgin’s color scheme.
RESPONSIVE UI DESIGN
After having alinged on branding in this phase, I moved on to creating high-fidelity responsive wireframes.
05. ITERATION & IMPLEMENTATION
Last phase of the project was focused on validating our designs with users.
USABILITY TESTING
Here’s the prototype created in Invision.
Usability tests were conducted with three different participants. Here’s a summary of my findings:
All users were able to navigate the site and complete tasks without problems.
Users complimented on the home page and thought it was intriguing and inspiring. On the home page, users’ first reaction was to click on photos and expected to be directed to destinations.
There was one comment about a potential UI improvement regarding the cards design.
There were a few minor UX improvement suggestions.
One user recommended making the search bar hidden and represented by search icon only, which can expand when tapped on.
All users responded positively to the visual elements on the site and the overall ‘modern’ aesthetic.
AFFINITY MAP
I created an affinity map to summarize and visualize my findings:
NEXT STEPS
Having completed usability tests, I identified areas of improvement and made necessary revisions to my designs.