RJ Villaflor
  • Portfolio
  • Resume
  • About me
  • Contact me
Picture

Process Overview
How might we serve the people of Funchal: tourists and locals?

This project serves Horarios do Funchal, the Funchal city bus company. This project originally spanned 3 weeks in March 2017 but also includes follow-up work in the months following.  I worked in a team of three members for this project, where my responsibilities included UX & Product Design and User Experience Research.
Click to jump to process section:
  1. Context
  2. Research & Inspiration
  3. Critique & Iteration
  4. Ideation Iterations
  5. Validating the Concept
  6. Creating a Display
  7. Motion Design for Display
  8. Pivot & Iteration
  9. Researching for an App
  10. Ideating & Visualizing an App 
 

( part 1/10 )
Context
What's Funchal?

​Funchal is the biggest city on the Portuguese island of Madeira and a popular tourist destination for many Europeans. As a result, many forms of transportation are available but the city buses are not the most popular.
Picture
Horarios do Funchal, the city's bus company, challenged us to popularize bus-use for the tourists in Funchal while not diminishing the locals' ability to use the same buses.
 

( part 2/10 )
Research & Inspiration
How do other European cities do it?

Answer: by hand-holding. We deployed multiple forms of research including guerilla research on tourists in the city center of Funchal and Funchal locals as well as auto-ethnography on bus experience in Funchal. But, the most notable research came from Paris when I studied my own use of the Parisian city trains to see the Eiffel Tower.
Picture
The most effective transit designs "hand-held" their riders by visually directing them.
 

( part 3/10 )
Critique & Iteration
But it was a train!

Trains seemed more popular among tourists than buses. I, like many others, was very reluctant to try using the buses in Paris but open to using the trains. The tourists in Funchal were reluctant to use Funchal's buses as well.

But, that didn't mean we couldn't still use the idea. So, the challenge for us became...
 

( part 4/10 )
Ideation & Iteration
How can we make Funchal's buses more like Paris' trains?

I used my nifty sketching skills to storyboard in order to brainstorm ideas to replicate the spatial awareness and direction of the Parisian train experience that directed me towards the Eiffel Tower.
Picture
Picture
Finally, in this last storyboard, we use a simple computer-monitor-sized LCD on the bus to dynamically show the upcoming stop. This would allow the bus routes to be displayed in the bus without being a permanent installation. Additionally, it would provide tourists and idea of what stop to get off.

​This was the concept we pursued.
Picture
 

( part 5/10 )
Validating the Concept
"Handholding" Riders with a Display

We proposed this concept to our project advisor, our classmates, tourists, and locals of Funchal. The concept seemed to help in some aspects. Specifically, it largely helped communicate what stop bus riders would need to get off for all riders, not just tourists. However, there would still need to be a better indication for how tourists would reach their desired destinations. We tried to pursue a solution for this in the wireframes.
 

( part 6/10 )
Creating a Display
Ideating and Visualizing Display

Iteration #1
Picture
Picture
I tried a few different designs and tested them. These first two wireframes did not communicate effectively what stops had passed, which stops were coming up, which stop was up next, or generally where the bus riders were.

Additionally, the text for the stop's feature (in this case, the casino) was likely not large enough for the typically older tourists on the island to see.

​Finally, the testers also wanted to know if they were arriving at their stop in time.
Iteration #2
Picture
I tried this wireframe and it appeared to be effective on our testers. It showed the stops as tiles with previous stop on the left, the next stop on the right, and the upcoming stop in the center. The testers reported that this provided them the best spatial awareness for where they were and what stop they would need to get off. However, the text for the tourist attraction was still too small.
Iteration #3
Picture
To supplement the text for the tourist attraction, I also added an image of the tourist attraction as the background for the tile. This tested well: testers reported that they were aware what stop to get off for a particular tourist attraction. Additionally, during testing, some users reported that they sometimes determine their stops by timing. As a result, we also included a clock in the upper right of the display.
Colors & Typography
Picture
Mock-Up
Picture
 

( part 7/10 )
Motion Design for Display
Communicating Vovement & Variation

In-Bus Display Model Video from RJ Villaflor on Vimeo.

 

( part 8/10 )
Pivot & Iteration
"Handholding" Riders with an App

We revealed that this could actually provide a better pre-bus experience for traveling to destinations. Our previous design with the display did not include what happens before getting on the bus.
 

( part 9/10 )
Researching ​for
​an App

Analyzing Competing and Comparable Apps

We studied the current city bus app, the regional bus app, other bus apps (both local and foreign), and the people who used them to find what works and what people are familiar with.
Picture
 

( part 10/10 )
Ideating & Visualizing an App
Expediting the UX Process to Design an App

Sketching
Picture
Picture
Paper-Prototyping & Concept Validation
Picture
Picture
Wireframing
Picture
Picture
Finalizing the Visual Design
Picture
Picture
 
Return to Portfolio
Copyright © 2025
  • Portfolio
  • Resume
  • About me
  • Contact me