Sylvia Baba
TLT thumbnail.png

Telegraph Hill Tours

THT banner.png


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



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



A mobile e-commerce website to view and book tours



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



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



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


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


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