UX/UI DESIGN • WEB DEVELOPMENT
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.
- Competitive Analysis
- User Research
- Information Architecture
- Wireframes & Prototype
- Usability Testing
- Logo Design
- Palette & Typography
- Front-end Development
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
- 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
- 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
- Embodies spirit of San Francisco
- Fun and Funky
- Strong press/recommendations
- Wild psychedelic screen experience
- Clear navigation/architecture
- Competitively priced
- 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
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.
- AGE: Early thirties
- Visiting from New York
- Recently married
- Husband works in tech
- Kristen is a grammar school teacher
- 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
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.
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.
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
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.
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).
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