Sylvia Baba
User Experience Design
TLT thumbnail.png

Telegraph Hill Tours

THT banner.png
 

Overview

The task was to design a mobile e-commerce website populated with 25 distinct items, geared toward a target customer from a different generation (I picked Generation X users).

Team and Duration

Solo project consisting of one 2-week sprint. I acted as product manager, UX researcher, interviewer, and product designer. 

Tools and Methods

Design strategy and concept design, user research, interviews, and surveys, rapid ideation and sketching, wireframing and prototyping, usability testing, card sorting


 
 

Problem

Users want to get the most value out of their vacation without compromising safety or flexibility

 

Solution

A mobile e-commerce website to view and book tours

 

Deliverables

Deliverables included low- to mid-fidelity wireframes and accompanying research and design artifacts

 
 
 

Research

My initial idea was a travel booking website where users would “let someone else do the heavy lifting” for them, basically an online travel agent. In order to collect data, I conducted one-on-one interviews as well as online surveys and market research to gain insight into users’ behavior with regards to booking vacations.

  • Users book everything separately
  • Users are not interested in booking all their travel on one website
  • Users feel that they can get a better deal by building their own itinerary
  • Users are skeptical of “packaged deal” type vacations
  • Users already have their favorite websites to book travel
  • Users don’t give online reviews much credence

Users want to be able to maintain a level of trust and flexibility when booking online

So how was I going to create a website where users could easily book something to do with travel and maintain a level of trust with users and also differentiate it from the many travel websites out there? After admitting to myself that I wouldn’t be beating Expedia at their own game, it was time to figure out what I was going to do. I landed on the idea of allowing users to book tours and experiences that were off the beaten path.

 

My research helped inform my user persona, Susan.

"It's all about trust when I'm shopping online"

-Susan, 42

  • compares sites to find the best value and books flight, hotel, etc separately
  • wants expectations set and met
  • wants to "get things squared away” so she can relax on vacation
  • dislikes wasting money and time
  • needs safety, trust, control, flexibility
 

Susan's Journey Map

 
Journey map.png
 
 

Designing the website

On the website, users needed to be able to

  • search and browse tours
  • filter and sort to narrow results
  • add to cart and checkout

In sketching my initial wireframes, I needed a simple way for users to search and browse for tours. Through card sorting exercises, users repeatedly categorized experiences by region: San Francisco, North Bay, East Bay, etc. (All my card sorters are familiar with the bay area, but had they not been, they may have categorized in some other way. Given more time, I would look into this).

 
 
 

User flow: "happy path"

 
User flow.png
 
 

Sitemap

 
Sitemap.png
 
 

Evolution of the Home Page

To allow for users unfamiliar with the area to search more broadly for tours, I pre-populated the search bar, prompting users to search for a location, activity, etc. Usability testing showed that users wanted a “splash screen” that would show them what the site was all about.

 
Artboard 5.png
 
 

Additionally, I added a filter and sort function, where users would be able to narrow down their search/browse results and organize them.

 
 
 

Refining Search Results

Artboard.png
 
 
 

Customizing Item Details

Once users had picked a tour to their liking, I had to figure out a way for them to pick a date and book it. My initial thought was a calendar, but the individual days proved too small to be usable, so I looked to the iOS calendars app, and hijacked the date picker function. I kept the calendar for visual purposes.

 
Artboard 3.png

Once users have picked a tour and customized it by date, location, and number of people, they are able to add their selection to their cart and checkout. 

 

Checking Out

Artboard 4.png
 

Reflections

Time constraints limited the amount of usability testing I was able to do. Additionally, I would want to build out the customer service aspect of this site. While this site generally solves the problem of trying to find a tour in San Francisco, the more intangible concerns of interviewees (trust being the main one) are hard to wireframe into a site, and really depend upon the business model of the company in question, which is beyond the scope of this project.

 

Mood Board

Telegraph Hill Tours' primary color is blue, which evokes trustworthiness and reliability. The other colors are vibrant and bold, representing family fun

 

Dependable | Family | Value | Community | Simplicity

 
moodboard.png