The conceptual client SF Strolls (based on a real organization) has 80 distinct tours, 30+ years of experience, and 300+ volunteers. However, in spite of good press, reviews, and municipal support, their online engagement and tour attendance have been dwindling.
My team’s task was to redesign the organization’s online website to improve the experience of discovering and choosing tours on a mobile site. During this two-week sprint, we worked together on the Discovery and Defining stages, but we split the responsibilities toward the end; my responsibility during the Develop that phase was to transform our teammate's mid-fidelity wireframes into a high-fidelity prototype on Figma.
To better understand what may be contributing to the dwindling attendance, my team first performed a heuristic evaluation of the existing site. Tours could be filtered by date, but we discovered the following issues:
There were obstacles finding tour details, a necessary first step to choosing a tour to attend.
To test our findings from the heuristic evaluation, we conducted usability tests on the existing site as well. We instructed participants to find details for tours via two methods:
The participants’ feedback reinforced our heuristic evaluation. In spite of the 4 ways that users could find tours on the website (pictured above), the participants still had trouble finding tours, often expressing frustration at the lack of a search bar. One participant went to the list of all tours and used the browser's search function to search for "mural."
Even after they found relevant tours, participants also had trouble finding the meeting points and were not sure if they had to register or pay. Many were turned off by the wall of text and scrolled straight to the only affordance on the page, which was "View Calendar."
With a better understanding of the client's current website, we were ready to learn more about how our target users discover and select tours online. We understood that both residents and tourists attend walking tours in San Francisco, so we identified them as our two target user groups.
We surveyed 50 Bay Area residents who wanted to learn more about San Francisco, and the questions we asked narrowed in scope from general events to learning experiences to walking tours. The results informed us of the following:
To gain insight on tourists, we attended a weekday walking tour offered by the organization that our conceptual client was based upon. We talked to 4 tourists about how they discovered and chose that tour.
Like the residents we surveyed, these tourists discovered the tour company through internet searches. However, the convenience of time & place relative to their other plans was a major factor in selecting specific tours.
We also learned that these tourists had all been to San Francisco before, and had attended walking tours in other cities recently. One tourist mentioned that she had been on the Chinatown tour offered the previous day by the same organization and was pleased with the experience, thus deciding to take another tour with them.
During the interview, we also heard from 2 attendees who weren't able to find the meeting place online, and only made it to the tour because they saw a group of people gathered around; they were willing to skip the tour if they hadn't found the tour guide.
Residents attended tours for the learning experience while tourists attended tours based on the convenience of their other plans, but both target user groups relied on a clear & informative online experience to learn about the client and were willing to go on more tours.
Based on our research, we were able to craft our problem statement and hypothesis:
Because the SF Strolls website is difficult to navigate and glean information from, tourists and Bay Area residents are not attending walking tours they otherwise would enjoy.
By adding a search function to SF Strolls' website and reformatting the information presented, we are likely to see an increase in walking tour attendance from tourists and Bay Area residents.
A main issue that we ran into was the potential re-categorization of the 80 tours that SF Strolls offers. We considered conducting an open card sort to determine how users tended to categorize the topics. However, conducting this research would have cost a lot of time and resources, so we decided to de-prioritize re-categorization for our minimum viable product after much deliberation. After all, our users tended to look for tours based on convenience and specific interests. New categories would not be necessary for now.
We considered the rest of the features that we wanted to implement and plotted them on a matrix of impact vs. effort. We decided to prioritize the search bar, social sharing, and tour discovery.
Since some users had difficulty finding out whether a tour would match their schedule, we wanted to make sure they could easily find tours by date and see where the meeting locations were. We also wanted to make sure that other important information (such as reservations, entry fees, accessibility, etc.) was presented upfront.
We looked to SF Strolls’ own paper brochure for iconography that its website could use, for an improved and more consistent experience.
We also looked to competitor tour guides in San Francisco and comparators such as Google Travel for inspiration. City Segway Tours had a similar icon system that could visually and quickly inform users about the tours:
We also wanted to implement Google Travel's "day plan" feature for promoting discovery of additional locations:
With these ideas in mind, we created sketches, which in turn informed our mid-fidelity prototype. We made sure to reduce the copy and include clear iconography for quick information intake, and we created features that suggested tours based on time and location.
On the prototype, we conducted usability testing with the same scenarios we provided for our usability tests on the existing site. We gained insight into how we could improve the search by date & location functions and better display the desired information.
With some time left over, we also wanted to work on features we didn't initially prioritize, to increase walking tour attendance from people who have already attended SF Strolls' tours in the past.
Since marketing strategies were out of our scope, we decided to gamify the experience of attending tours, to encourage users to "collect" tours. Inspired by geocaching and social media location check-ins, we wanted to create a passport feature that would allow users to collect a stamp for each tour attended.
We created journey maps to illustrate how users currently discover tours to attend, compared to how we want them to on our proposed solution.
Below is the user’s journey map on the current site:
Below is the user’s journey on our proposed site:
While my teammates created high-fidelity pages for the passport feature, I created the rest of our high-fidelity prototype by implementing the findings from our mid-fidelity usability tests.
For the visual design, I wanted to visually emphasize SF Strolls’ authority and expertise in educating tour attendees while keeping the interface modern and inviting. I thus set the main colors to #143045, a dark blue for the institution, and #ED8A00, a bright orange reminiscent of both the Gold Rush and California poppies.
Our interactive prototype is embedded below:
As part of our next steps, we would reconsider card sorting, possibly via the Delphi method for efficiency. While a search function allows users to find specific things, browsing topics would allow for better discovery. This would also help the gamification, which we would also need to research further.
— Jan 2020