Vai Rolar case study

Introduction:

Vai Rolar is a startup based in Rio de Janeiro Brazil which provides program information regarding various social events in the city. The information is provided via a free magazine distributed around the city as well as the web site. There were already 3 well established web sites providing similar information as well as two web sites offering ticket sales to movies, concerts, and theater events. It was a crowded market space. However, none of the web sites had a magazine counterpart and the individuals behind Vai Rolar believed that with the magazine, the web site and their vision they had a formula for overtaking the market. The magazine was based on a similar magazine in Budapest Hungary which had the overwhelming market share there. Although experienced in the magazine side of the operation the individuals behind Vai Rolar had limited experience in web design and information architecture and turned to Cafe Silencio for the web site portion of their startup project.

Observations:

While the other web sites in Brazil offering similar event information were well established there was noticeable room for improvement. The main pages of the web sites seemed to offer a lot of introductory information and promotions but the searching mechanism left a lot to be desired and often provided no search results with no suggestions for refining the search or otherwise finding what was been searched for. Another noticeable shortcoming was inconvenient method of obtaining and viewing the data available on the site. While there were a lot of flash advertisements on the pages, the pages themselves were for the most part static html pages and every click required navigating to another page and waiting for it to load with most of the same content as the previous page.

Proposed areas of improvement:

It was decided that the main features that would be focused on for creating a web site that was an improvement over the competition were:

  • More powerful searching that was easier to use and provided the search results sought by the public.
  • A more modern user interface that used Adobe® Flex® components to display dynamic data so that less page loads would be needed.
  • An improvement in the display of movie theaters and times since it was decided that this was a major feature to be used by web site visitors and an efficient method for displaying cinema information would give Vai Rolar a real competitive advantage.
  • Design results:

    Improved Search:
    The other web sites’ search feature amounted to essentially a user interface to query their database based on the event fields in their database. This often resulted in 0 search results being returned and a frustrating experience for the user. Cafe Silencio took a very different approach to the searching feature for Vai Rolar. The goal of creating a search feature that never returned 0 results was established. In order to accomplish this it was decided to use the restaurant experience as a metaphor in the searching experience. A restaurant knows what meals it prepares and it knows it’s customers want to eat. Therefore instead of patrons having to ask the waiter if they have this or that the patrons are provided with a menu to choose from a list of dishes that are available. The Vai Rolar web site is in a similar position, it knows what events it has in it’s database and it knows that the visitors want this information. So rather than users blindly searching for what they want they are presented with the available options. In effect searching is eliminated and replaced with a filtering mechanism that feels organic to the user.

    The filtering process starts on the first page. The menu at the top of the page allows the user to go to a page showing various types of events such as:

  • cinema listings/movie times
  • live music/night club events
  • theater events
  • etc.
  • By clicking on one of the menu headers, the filtering process has begun. The page initially lists a selection of events of the given type and on the left side of the screen is an Adobe® Flex® component to do further searching/filtering of the events. If we take live music as an example, the component requires only 2 criteria for the user in order to filter the live music “menu”. For the time period the user only need specify he/she wants to see events ‘today’, ‘this week’ or ‘this month’. The other criteria needed to be specified is the neighborhood or the specific venue. In the list for neighborhoods the list does not display every neighborhood in Rio de Janeiro but rather only shows the neighborhoods in which the system has already determined it has events for. This ensures the user will get at least one result from their search. If there are neighborhoods in Rio that the system doesn’t have events for, those neighborhoods are not presented in the list. The venue list works the same way. If a venue doesn’t appear in the list, the system doesn’t have an event for that venue in the database. The result is the search options were pre-filtered to eliminate options the system knew it didn’t have. This searching/filtering method means the web site visitor will not ever receive 0 results in their searches.

    The criteria for searching were vastly simplified with this method and the experienced was enriched not only in the fact that the user would never receive 0 results in their searches but also because the searching was done using Adobe® Flex® components the page did not need to be refreshed each time a search was done.


    As the filtering results on the left are clicked the results display in the Adobe® Flex® component in the center without the page having to refresh.


    Cinema component:

    The same searching/filtering paradigm was used for the cinema page but taken a step further. There are a lot of variables when browsing movie and theater options. There are various approaches being used by web site users when searching for movie/theater data. Some people want to know what theaters are playing a specific movie, some people want to see the movies playing at a specific theater and some people want to see the movies playing at the theaters only in their area. Finding a way to design a method that would accommodate the various approaches users could take when searching for movie information without confining everyone to using one search method and making the process easy to use was quite a task.

    The search component on the left has only one searching option which is to narrow down the searching to a specific neighborhood. This was determined to be sufficient since, due to the traffic on Rio’s streets, most movie goers would be searching for movie information within their neighborhood or would at least know what neighborhood they’re willing to go to in order to see a movie. Also, given the data that the results component displayed it was unlikely further searching would be needed. The searching component displays a list of all the theaters in the specified neighborhood for which the system has movie information in the database. The web site visitor can then choose among the available theaters to see the movies that are playing. The results component, in the middle, created with Adobe® Flex® displays all of the movies playing at the theater that was clicked on. Only one movie result is shown in the illustration above. The component displays the movie title, a poster image,a movie description, and other information about the movie but it goes a step further. The component also shows the other theaters that are playing that same movie, the neighborhoods the theaters are located in, their addresses, and the movie times for each theater.

    This kind of display takes care of all of the different approaches a user might take in searching for movie information. Even if the user wants to search for a specific movie they are certainly going to have a preferred theater in their neighborhood. Searching by neighborhood first gives all of the options needed by the user in order to find the information they’re looking for without further searching. With all of the options displayed in the same place in an organized manner the (sometimes daunting) task of getting movie information becomes quick and efficient.

    Conclusion:

    In this project the Adobe® Flex® components provided a means to significantly improve the user experience by providing ease of use as well as a more engaging experience. The powerful potential of the Adobe® Flex® framework combined with the skills and experience of Cafe Silencio paved the way for a web site that has the usability and scalability to overtake it’s competition.

    While at this writing it’s too early to state that Vai Rolar has met it’s goals to be the de facto source of social event information in Rio de Janeiro. Vai Rolar is confident that the web site developed by Cafe Silencio will be a significant step in meeting that goal.