UX/UI DESIGN • WEB DEVELOPMENT

THE STORY

In 2015, Josh Armel and his wife, Virgine, were launching their new Volkswagon vintage bus tour company, and they employed me to build their website. 

This year, Josh reached out to me again. Their company had grown from one bus to a small fleet, and business was going well. Their first website served them well, but it was time for an upgrade to their brand and online presence. On top of this, they were excitedly brainstorming a new mobile app to take their business to the next level.

I was very happy to reconnect with these good people, and we set to work to tighten up their brand and get their site up to speed.

TOOLS

  • Figma
  • Photoshop
  • Illustrator
  • WordPress
  • Divi

UX

  • Competitive Analysis
  • User Research
  • Personas
  • Information Architecture
  • Wireframes & Prototype
  • Usability Testing

UI

  • Branding
  • Wireframes
  • Logo Design
  • Palette & Typography
  • Front-end Development

COMPETITIVE ANALYSIS

In taking a look at Painted Ladies’ competitors, 2 stood out, each representing a different extreme. The first page of Google for the search term San Francisco Bus Tour is greatly dominated by the big player in this game, aptly named Big Bus Tours. The second company I chose to focus on was one that seemed a little bit closer in size and style to Painted Ladies: The Magic Bus Experience.

BIG BUS SAN FRANCISCO

PROS:

  • A large, reputable company in multiple cities
  • Clear discount on homepage (and free for kids)
  • Clear packages, multiple tours
  • Open top buses – better for viewing and Covid
  • Chat support
  • Relatively navigable architecture
  • Affordable way to see SF

CONS:

  • IMO not an attractive color palette
  • Lot more people on each tour
  • Open top bus can get pretty cold in SF
  • Less personal

 

THE MAGIC BUS EXPERIENCE

 PROS:

  • Embodies spirit of San Francisco
  • Fun and Funky
  • Strong press/recommendations
  • Wild psychedelic screen experience
  • Clear navigation/architecture
  • Competitively priced

CONS:

  • Design is erratic and hard to look at – a bit of an overload of the hippy/psychedelic vibe
  • Have to pay for advanced features
  • Poor header font choice

 

LESSONS

Seeing these two extremes and in collaboration with the client, we strove for a middle way with a much cleaner design and palette, stepping towards the professional aspects of Big Bus while keeping some flavor of the San Francisco aesthetic. 

USER RESEARCH & PROTO-PERSONA

Interviewing Josh and Virgine about their clients, I got a good idea of their average customer and generated this proto-persona.

MEET KRISTEN

DEMOGRAPHICS

  • AGE: Early thirties
  • Visiting from New York
  • Recently married 
  • Husband works in tech
  • Kristen is a grammar school teacher

BEHAVIORS

  • Loves to travel and has had a long interest in traveling to California
  • Loves to try new experiences a little outside the norm
  • Planning a honeymoon trip

NEEDS & GOALS

  • To have an authentic “San Francisco Experience” that doesn’t fall into the usual tourist box
  • Wants to get a more personalized tour with some flexibility or the possibility of a custom itinerary 
  • Wants to visit Wine Country, too

INFORMATION ARCHITECTURE

The website didn’t call for a very complex architecture. There were some basic pages and an embedded shopping cart/booking functionality. We put more attention on bringing their mailing list opt-in forward to increase engagement and return users.

WIREFRAMES

In service of the cleaner aesthetic the client was seeking, we kept everything minimalistic, opting for white space and allowing the vibrancy of San Francisco photos (and the colorful buses) to provide the pop. I created basic wireframes within Figma.

USABILITY TESTING

After completing the wireframes and UI work, I set to creating the site in WordPress using the Divi theme. Once the prototype was complete, we tested the site with users, sending out a survey to determine usability and if any changes needed to be made. The simplicity of the site proved effective, and nearly all users commented on the ease of use.

branding

As mentioned, we were going for clean. The vibe was to be “modern vintage” with a bright yet slightly desaturated aesthetic with rich blues and oranges, using white space to keep the clear feeling. Stepping away from the funky vibe and more towards a simple and cleaner logo design, we sought to increase the professionalism of the brand while maintaining some vibrancy through the imagery. While their original logo was suitable for their beginnings, they wanted something a bit more light and polished to reflect their professionalism and trustability.  

LOGOS & ICONOGRAPHY

BEFORE

AFTER

PALETTE & TYPOGRAPHY

The palette emerged from their many photos through the years, where they were using a certain vintage filter that created a specific look. We picked their colors right out of their photos, establishing some primary colors and other options for further marketing purposes. For their fonts, we went with a script for their logo to create some movement and play off the word “Painted”, and we chose a nice clean, rounded font (Montserrat) for header and body text for its friendliness and legibility. 

PROTOTYPE

Building out the wireframes in the prototype, I employed an alternative vertical navigation with large text and obvious buttons. We added flair to the homepage with a great video showing their colorful fleet in some of San Francisco’s most recognizable locations. We put featured items and testimonials front and center to make for quick getting around and positive reviews from multiple popular sources (Google, TripAdvisor, Yelp). 

Click on image to view full screenshot

CONCLUSION

It was great to work with Josh and Virgine again, and I was especially happy to hear about the success they achieved with their first site. The new brand and site are now more aligned with the image they want to project going forward.

Next, I’m very excited that we are in discussion about the mobile application they are interested in developing to provide guided tours internationally.

David nailed it again, which is why we came back to him. He helped us with our first site, and now he’s helped us to reflect how we’ve grown as a company. We are very happy with our new look. 

Josh & Virgine, Owners