Zeit

    E-commerce Responsive Web Design

    My Role: UX/UI Designer: UX Research, Information Architecture, Interaction Design, Visual Design, Usability Testing

    Client: Zeit*

    Team: Self-directed (with expert mentor support and group crit feedbacks)

    Prototype: Watch prototype in Invison

    Time Period: March - May 2019

    *Zeit is a fictional company

    About the project

    Background

    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 with Zeit. A total of 289 destinations all over the world, up from prehistoric times through today, have been approved and finalized to receive people any moment. Zeit wanted to make the selling of the tickets as easy as possible.

    Project Objectives & Goals

    • Design a responsive e-commerce website that is easy to use and that allows customers to browse through all different trip categories and details, filtering via interests and classifications
    • Design a logo for the company that can be modern and historical at the same time

    Process

    01.Research

    Goal: To research the current travel market and audience of online travel booking websites

    Process: Market Research, Competitive Analysis, User Interviews

    Market Research

    I conducted a market research to get a better picture of the tourism field and consumers. Since Zeit is the very first time travel website, I couldn't gather already existing information of the time travel industry, which was very challenging. However, by focusing on the ordinary travel industry, I gathered valuable market and demographics findings that are rooted in data and statistics. I could collect the common trends and pain points of online travel booking websites as well. This secondary research method allowed me to gain an understanding of potential needs of travelers.

    Competitive Analysis

    By analyzing direct (Exodus Travels, Secret Compass, Wild Frontiers) and indirect competitors (Kayak,Travelocity), I understood how other travel booking websites design for their users and how they solve problems for similar user needs. I identified a few direct and indirect competitors and pointed out their strengths and weaknesses in order to be able to position Zeit in the market.

    User Interviews

    To gather qualitative information and empathize with users, I conducted user interviews as my primary research method. I interviewed 7 frequent travelers and asked mostly open-ended questions about their travel and booking experiences. I could highlight common and very similar needs, desires and frustrations among the participants' answer, which helped me understand user habits, behaviour and feelings better.

    View Interview Script

    Interview Participants

    • Number of interviewees: 7
    • Gender breakdown: 5 females, 2 males
    • Travel frequency: 6 of the participants travel minimum 3-4 times/year
    • Age: 20-63

    02.Define

    Goal: Synthesize research to define the target audience - and their needs, frustrations, goals

    Process: Empathy Map, Persona

    Empathy Map

    To synthesize my findings, I created an empathy map to help me understand my observations from the 1:1 user interviews and to identify patterns that were common across most participants' answers. I grouped the observations into different categories: doing, thinking&feeling, seeing, hearing, gains & pains - for each individual person then common patterns were further categorized into different groups, which is how I developed key insights. Finally, based on these insights, I could identify the user needs.

    Insights ● Needs

    Insights

    • Participants seek different activities to do during their trip
    • Participants desperately want to stay within their budget
    • Participants love going whenever and wherever they want to go
    • Participants have the most concerns about their safety
    • Participants prefer traveling accomponied with others
    • Participants desperately want to stay within their budget

    Needs

    • Participants need to be able to choose experiences based on different interests
    • Participants need to know that they spend the best out of their budget
    • Participants need the ability to be in control of their trip
    • Participants need to be reassured about their safety
    • Participants need the ability to make memories with their loved ones

    User Persona

    Based on the empathy map findings, I created a fictional user persona, "Luna", who represents the key audience of Zeit. My user persona helped me find the answer to one of the most important questions: “Who am I designing for?”. By creating "Luna", who has the needs, goals, and observed behavior patterns of Zeit's target audience incorporated into her, I was able to strategize and make smarter design decisions.

    03.Ideate

    Goal: To generate ideas about the information architecture of the website and map user flows

    Process: Card Sorting, Sitemap, Task Flow, User Flow

    Card Sorting

    I conducted an open card sorting technique with 5 participants to see how potential users organize content naturally and to uncover new perspectives. I asked the participants to group 30 cards in any way they wanted to. Then I analyzed the results and was looking for strong card pairings and potential groupings using the similarity matrix and dendrograms (best merge method). I was able to understand how users organize information so I could create a successful information architecture for Zeit.

    Findings:

    • Most participants grouped cards based on location (continents), time period (eras) and culture
    • Most participants grouped cards generally on the era as well. For example, all participants labeled one group of cards as “Ancient Times / Civilization”, “Modern Era”, “Renaissance Era” etc. Some participants got more specific and they titled the groups by a specific time period “14-15th century”, “Early 20th Century”, “Modern 20th Century” , “ Early Modern Europe” etc
    • 3 participants created a category specifically titled as US History / Events
    • Most participants grouped the same cards under the category of Culture / Arts. Specifically they were separated by US and European culture and arts

    Similarity Matrix

    Dendogram

    Site map

    Based on the card sorting results and common e-commerce design patterns, I created a sitemap, which is a hierarchical diagram visualizing the structure of Zeit and the relationship between the content. By creating the sitemap, I was able to ensure that the content is in places where users would expect to find it.

    User Task

    Next, I created a task flow to visualize the complete path that a user follows during a single task. Zeit's main goal is to make the browsing and purchasing process as easy as possible so I outlined the key steps and pages to complete the main task of finding the ideal trip and purchasing it after landing on the homepage. By creating the task flow, I was able to outline the main screens that were necessary to be designed.

    User Flow

    To have a deeper understanding of how users would interact with the website, I built a user flow, which emphasizes how different users with different scenarios could perform different tasks or travel in different paths to achieve their goals. I mapped out the paths of how a new visitor would explore the About page and how a frequent visitor would navigate the website to browse the trips, to choose the most ideal one and how she would purchase it. I also kept in mind that users can enter the website on different entry points, which results in a new path.

    04.Design

    Goal: To design the user interface and branding

    Process: Low-fidelity Sketches, Mid-fidelity wireframes, Brand style tile

    Low-fidelity Sketches

    As the first step of designing the interface of Zeit, I created a few different low-fidelity sketches of the Homepage to go through some ideations regarding mainly the navigation, content and layout of the website based on my insights. By sketching my ideas out on paper first before going digital, it allowed me to brainstorm multiple visual directions quickly and efficiently before sticking to one.

    Mid-fidelity wireframes

    Next, I digitized the wireframes in Figma and had them as visual guides that represents the skeletal framework of the pages of a Zeit. The Homepage, Deals page and Trip Details pages were wireframed first as these pages are necessary for the trip browsing and choosing experience. The wireframes are responsive, which means that Zeit is optimal for viewing on a wide range of devices & web browsers (mobile, tablet, desktop).

    Brand Style tile

    I started building Zeit's visual identity by identifying the main brand adjectives that would represent the company: Modern, Historical, Bright, Friendly, Innovative, Fresh. I browsed on Pinterest for some inspiration and created a mood board to have a collection of different kinds of inspiration for the look and feel of my website. The brand style tile was helping me to keep consistency in my design and to showcase the color, typography, image and logo choices for Zeit's brand.


    As for the logo and the entire logo creation process, I started brainstorming based on the brand adjectives and I incorporated elements of the ancient pillar,clock/time and old ancient paper into it to have it historical but modern at the same time.

    05.Prototype

    Goal: To build an interactive prototype that can be tested by users

    Process: High-fidelity wireframes, Prototype in InVision

    High-fidelity Wireframes - Main Pages

    I used my existing wireframes and based on my brand style title, I designed the UI for each screens in Figma and created the high-fidelity wireframes of the main pages.

    Prototype

    Next, I uploaded my high-fidelity wireframes of each pages into InVision to build a low-cost interactive prototype by using hotspots and I designed additional pages that were necessary for an efficient user flow. The prototype was built to investigate the problem solutions that I generated. After brushing up on my prototype, which had a limited funcionality, I prepared it for usability testing.

    Prototype in Invision

    06.Usability Testing + Iteration

    Goal: To test how well the prototype solve the problems

    Process: Usability Test, Affinity Map, Priority Revisions

    Usability Test

    I conducted an in-person usability testing with 5 participants to see how users interact with the product and to find out how well it solves the problems. I needed a test plan to guide me before I conducted the test so I identified the test objectives, the subject, chose the test methdology, defined paticipants and two different scenarios with a few tasks to complete.

    Test Objectives

    • Determine whether participants are able to complete certain tasks or not
    • Identify any usability problems
    • Collect qualitative data
    • Observe the performance of participants and evaluate how satisfied they are with the product
    • Identify possible changes that might improve user performance and satisfaction (if needed)
    • Identify the way participants navigates through the website to achieve their goals

    User Tasks

    • Look for deals on the website and possibly try to find the cheapest deal then check the details of that trip
    • After some time of browsing the deals, you decided to travel back into the Ancient Times. Compare to each other 3 trips (that belong to the Ancient Times) to help you decide which one matches your taste more
    • Try to find this specific trip that you have in mind by using the search bar on the homepage and check the details of this offer! (Opening Day of Disneyland, 1955)

    Results

    After reviewing the videos that I recorded of the participants while completing the given tasks, I put together a document of how the participants completed each tasks, what I observed and what they said or recommended regarding the prototype.
    View Test Findings

    Affinity Map

    Next, I created an affinity map where I gathered the findings from the usability testing and sorted the feedbacks into different categories. Based on the insights and recommendations, I was able to create a guideline to the priority revisions on my prototype. The affinity map helped me find out what could I could improve on the website for a better user experience.

    Iteration

    After having prioritized the recommendations in the affinity map, I updated the website design and prototype. I implemented changes to the "sort by" function on the Deals page and also added a filter function as well. On the homepage I removed the carousel in the Best Deals section and added a new CTA button, which navigates users to the actual Deals page. The previous and revised versions of the Deals page and Homepage are shown below. Interact with the Prototype here

    Handoff - UI Kit + Zeplin

    I put together a UI document to share UI elements and patterns with other designers or develpers on the team. I designed all of the associated states of certain comps, how certain elements behave when they are active, inactive or hovered over. Then with the help of Zeplin, I prepared handoff delieverables

    to make my design work as clear and understandable for a developer as possible.

    Reflection

    What I would do different if I could work on this project all over again in the exact given time frame is to get back to the prototype and testing phase to extend it with a new task related to the booking process. I should have tested in the first round of usability testing whether the users are able to get through the 5-step checkout system or not. I have planned to do it when I put together my UI requirement document since I was building an e-commerce website so the booking system plays an important role, however I didn't have time to build the pages to it. Except that, I am satisfied with the overall test results as I was focusing on how the users of Zeit can easily find the best trips/deals of their preference that would result in 100% customer satisfaction regarding the trip experience, which was an important goal for both my persona and the company itself. Next time, I will definitely prioritize features/my tasks better and will test the most important ones if my time is cut short!

    Research is key to a successful user experience. It is easy to make assumptions when we are designing a product but if we can't validate our hypotheses and back up our design decisions with data then most likely our product won't solve the right problems for the users and it won't be as valuable to them. My long hours of researching ensured that the potential users of Zeit stay at the center of my entire design process, and I could give purpose to everything from Zeit's design to its usability.

    Overall, I gained a great understanding of how important it is to empathize with potential users on a deeper level in order to design a successful product. I also gained valuable knowledge about designing an e-commerce website. Since Zeit is a time travel website, this project was quite challenging as I had to find my way to create a product that has never existed before. I do believe that this project helped me prepare a bit for how to identify and solve problems in any innovative environment.

    Next Steps

    • Build more pages and update prototype.
    • Build responsive pages to the new desktpop ones designed.
    • Maintain the UI kit and update with additional components.
    • Conduct more rounds of usability testings.
    • Keep making improvements on the design based on user feedbacks for a better user experience.
    • Prepare all deliverables for handoff.

Copyright © 2019 szanilee.com.
Website Design & Development by Szani Lee.