E-Commerce Website

PROJECT

Design a responsive e-commerce website

ROLE

UX/UI Designer

DURATION

100+ hours

TOOLS

Figma, Google Doc, Google Sheets, Zoom, Whimsical

Background

Zeit is a conceptual time travel tourism company offering time travel to the past. Zeit has 289 destinations in the past that travelers can visit- ranging from the Jurassic period all the way to contemporary modern history. Travelers will be accompanied by expert guides and will visit controlled and extremely protected places. Zeit travelers will be able to experience and do things typical of the time, such as attending shows and workshops.

PROBLem

Zeit is the first of it’s kind to offer time travel experiences. Being the first company to do this, Zeit anticipates that users will be hesitant about time traveling. How might we attract travelers looking for a new, exciting experience to book with Zeit?

challenge

Design a logo that is modern and historical along with designing 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.

View prototype

EMPATHIZE

Competitive Analysis

Zeit is offering a new service so to better understand how Zeit might perform as a travel and tourism company, I dove into market research and competitive analysis of current travel and tourism sites.

KEY TAKEAWAYS

INFORMATION HIERARCHY: Information needs to be easy to find and search for.
SIMPLE IS BETTER: Clean UI and clear CTAs, too much going on can look cluttered.
PRICING: Transparency on pricing is very important, user should know price at all steps.
NAVIGATION: Pages can get long, lots of scrolling, having a sticky or side navigation is common.

USER INTERVIEWS

Both remote and in-person user interviews were conducted to gain insight onto the thoughts and personal experiences of booking travel experiences and general thoughts on time travel.

WANts and needs

An easy, streamlined way to plan and book travel
Large variety of locales to visit
Spontaneity in their travel plans, ability to book excursions and actvities to fit their schedule
Know that they are safe in all aspects - safe booking, experiences, transportations, accomodations

Pain points

Difficulty finding good deals
Not having all travel confirmations in one place - transportation, accommodations, activities - too many emails
Not having loyalty/member rewards in one place, having to have multiple for each company

The data from the research shows that users safety concerns and understanding how time travel works is the #1 concern. Most users would not spend more than their current travel budget to experience time traveling so pricing must be considered. Zeit must have an easy to use site that allows users to compare, plan, and book travel.

DEFINE

USER PERSONA

Who exactly are we designing for? Keeping the user in mind during the process helped me stay focused on the research objectives and user needs.

IDEATE

SITE MAP

Using Whimsical, I created a site map for Zeit. Referring to the competitive analysis, the website layout was broken down into sections to create a site map.

USER FLOW

Using the same tool, I created a user flow for all the actions a user could take on Zeit's site.

View site map & user flow

Sketches & Wireframes

I began my design process by doing a sprint of sketches to cycle out as many layouts as possible by hand. Picking favorite components from sketches, I created wireframes using Figma.

View wireframes

DESIGN

MOOD BOARD

Utilizing references for inspiration and motivation, a mood board was created to guide my design and give users and stakeholders agreement and validation. I used Pinterest to gather images and inspiration for text, color schemes, icons, and imagery.

STYLE GUIDE

Developing the visual branding a bit further, a style tile was created to include colors, typography, icons, and photography that I would utilize in the site.

High fidelity wireframes

Using all design components created from the style tile and UI kit, high fidelity wireframes were created. The pages essential to the completion of the user flow were first priority, shown here is the home page, explore page, product page, and final booking/ confirmation.

View prototype

TESTING

USABILITY TESTING

I recruited 5 participants and conducted usability testing for the product over Zoom for one hour per session. I had users share their screen via Zoom to observe how they completed the tasks. I followed up with questions relating to each page and documented the successes, failures, and comments the users had. I annotated screens where users had any comments or suggestions.

TASKS

Book a trip to the wild west
Search for trips using the search bar
Inital reactions on featured pages
Complete the booking form

FINDINGS

100% completion rate of prototype
All agreed the tasks were quick and simple.
4.5/5 score on easy navigation.
A few users noted confusion in the prototype since not fully fuctional.

Overall, participants were able to complete the assigned task and many particularly enjoyed viewing the website. Some of the users experienced confusion involving the prototype not being fully functional. With new insights and understanding how users interact with the product I can make adjustments accordingly.

AFFINITY MAP

Using the collected notes and data from testing, an affinity map was made to help discover additional patterns. Notes are categorized by similarity of answers or struggles to help pin point validations and struggles.

Priority revision matrix

Problem

Hero image is not as impactful as user’s expected
User expressed interest in a live chat option or easily accessible help page

Solution

Hero image is updated to draw the user in
A live chat pop up bubble is added to the home page, this is a sticky feature that will stay with the user as they scroll

Problem

Users wanted popular destinations and popular interests more of a priority
Users were not scrolling past traveler favorites because they had already seen this section on the home page

Solution

Moved popular destinations and popular interests to top of Explore page to aid in the browsing process
Traveler favorites section moved further down the page to encourage scrolling

Additional revisions included:

Added Share/Like/Save icons to each card in traveler favorites section to create more ease for the user
Updated titles of trips to provide clarity to the user
Updated trip descriptions in the search results page

CONCLUSION

TAKEAWAYS

I spent a significant amount of time working on my usability test and prototype. Doing so allowed me to really engage with the user and understand any hesistations that came up during the usability test. Additionally, spending time on user flows was very beneficial to allow me to brainstorm multiple ways a user might go to complete a given task.

This project was created with limited time and resources. There are a few things I would do differently and a few more revisions I would make if I had the time and resources:

Things i'd do differently:

Conduct usability testing with a larger sample of participants before and after I made the priority revisions
Design and prototype every user and task flow
Work with copy editors and marketing professionals to package up prodcuts/trip details

Additional revisions i'd make:

Develop the help page to allow users a clear stop for any questions, concerns, or hesitations they may have in regards to time travel.
Make revisions on the booking/checkout pages to greater optimize the “add-on’s”

View prototype