http://excel.fit.vutbr.cz

Server for Reviewing Work and Travel ProgramsBc. David Bambusek*

AbstractThis paper serves as a presentation of a web oriented startup called GapPacker, which is a webapplication and a business model around it, created for reviewing different opportunities for studentsand young people to go work or study abroad. It’s main purpose is to bring people one true sourceof all possibilities there exist, objectively rated by real participants. This paper will bring you shortoverview of main cores that create this project and how it is expected to work in real environment. Alltogether I bring complete and working solution that is going live before summer 2016. Expectationsand goals are that the site is going to rank first in the Czech republic whenever someone will searchfor a keywords as summer job, gap year program or volunteering abroad.

Keywords: Startup — User Interface — Web Application

Supplementary Material: GapPacker CZ website*:xbambu02@stud.fit.vutbr.cz, Faculty of Information Technology, Brno University of Technology

1. Introduction

Since today’s world offers infinite number of opportu-nities, it is no surprise that many people want to makethe best of them and go explore all the new lands, peo-ple and cultures waiting for them all over the globe.These opportunities are opened to everyone, but thereis one particular group of people, that has relatively lotof free time and their age destines them to be adven-turous. We are talking about students, who are latelylooking for options how to spend their free time duringsummer break abroad, eventually those who do notwant to go straight into work after their studies anddecide to take a year off. This phenomena led to abig growth of companies, that serve as agencies, thatarrange all the necessary paperwork, visa and otherthings so participant can focus only on his experienceof going abroad.

The problem is that for many people it is hard tocompare and chose between these companies, sincetheir service often varies only in small details. Ex-

ample of such a desperate search for the best agencyproviding work in the USA was at the birth of thisproject. Whatever you want to do, if it is eating out,booking a hotel room or buying a computer is nowvery easy thanks to user/customer reviews which areaggregated on sites as Tripadvisor, Booking.com orpresent in all e-shops, but there is no such a solutionfor going abroad.

Each company has it’s own website, some of themeven have reviews there, but it is no surprise that thesereviews often look prefabricated and it is no wonderthat we will be usually presented only with the bestreviews, rather than bad ones. The only solution isto create a neutral website, out of influence of anycompany, that would be honest, opened to everyoneand any opinion, with possibility to react to reviews onboth, participant’s and company’s, sides. And exactlythat is what GapPacker is bringing.

GapPacker is a website that aggregates detailsabout programs for going abroad, which will be rated

by users, details about companies they are providedby and other useful information in form of articles andguides. GapPacker also offers interface to communi-cate between companies and their participants in formof review answers, questions and events.

This platform is opened to anyone, no matter thenumber of participants the company has, no matterthe number of programs they have. It is very easyfor both companies to join in and for users to add areview. It is not possible to pay for better ranking andplatform will be always company neutral, with onlyfocus - providing the best for participants.

To make this project working and sustainable, itwas necessary to carefully divide it into sections, thatbuild on each other and make the project what it is andable to survive in the wild and fast online world. Firstof all it was necessary to create and validate startup’sbusiness model. After we knew that it makes sense tocreate such a site and that it can make money we movedinto first and most important part of it’s implementa-tion, creating the user interface. We had to understandbehavior of people we are building the site for andcreate user interface that will present them what theywant in an easily consumable way. After having theidea how the UI should work a designer came into theproject creating actual design of templates and brand-ing, which is assembled from language used on site,colors, UI elements and outside presentation of theproject. Next step was to actually code up the site andput it online. Final part was to create strategy for cre-ating content, that will make the project what it is andoptimizing it to be visible to search engines and peoplewith help of SEO strategies and other techniques. Eachone of next few sections will cover one of these stepsclosely.

2. Business modelIn order to make this project sustainable, it was neces-sary to find out if there are customers, who would beinterested in such a web application. Therefore largenumber of work and travel participants was asked, ifthey would welcome all the information about differentprograms on one place, if they would like to read otherparticipants reviews and be willing to write their own.Their ultimate answer was yes. Companies providingthese programs were also asked about their opinionand each of them welcomed such an idea, since theythink there are never enough places to promote theirprograms. Thanks to these answers we knew there is amarket for our service and we could move to planninghow to actually make money on it.

To create a valid business plan that will give all the

necessary details to business people, possible investorsor simply people who would like to know about theeconomics behind the service, I created an exhaustingbusiness plan, mainly according to [1]

GapPacker is intended to have four revenue streams.First one and the most important one will be paid re-ferral traffic, meaning companies will pay for trafficgoing to their site/applications from our site. Whichwill work on same principle as for example ads onFacebook. Having done a research on how much aclick through for a keywords such as “work abroad”costs, which is around 4 USD, we decided to start with0.5 USD per click. Though we will not start with thisrevenue stream until the site is up for a while and wehave certain steady traffic on site, which is expected tocome in a year or more, this should be the main site’sincome.

Second revenue stream is based on providing com-panies extra features as statistics about visits of theirprograms, custom styling, embedded ratings for theirwebsites and others.

Third way of making money would be sponsoredlinks, where companies could pay for promoting theirprograms on certain places, which would however nothave any effect on their rating and rank between otherprograms.

Final stream of revenue will be traditional affiliatemarketing and sales of plane tickets, hotel bookingsand other services connected to the topic we cover.

3. User InterfaceGreatest and most important part of this project wasdeveloping the user interface which is together withcontent the key factor deciding success or failure ofthe project, since these factors are what will decide ifusers will or will not visit and use the site. Process ofcreating user interface has several steps[2], that needto be done properly and in correct order since theybuilt on each other. You just can not built an excellentwebsite if the foundations are not strong, proof andvalid.

The process of designing user interface is aboutgetting to know your users, analyzing their needs inmeans of visiting your website and their behavior pat-terns. With this information and only with this infor-mation you are able to design UI, that will enable usersto do what they want and are supposed to do on thewebsite. We will now shortly visit each of the steps.

3.1 User Behavior ModelsFirst of all you need to know, who your users are andin what relationship they are to your website. Since we

know who our customers are – students and young peo-ple on and agencies and companies on other side, wecan easily, with help of questionnaires, conversationsor based on our own experience, create behavioralmodels. Since I have long term experience in Workand Travel industry with many connections to it, it wasnot a problem to get users from both sides and analyzewhat their relationship to GapPacker is or could be andthe result is 10 different behavioral models specify-ing different kinds of GapPacker users. Let’s just listthem for completeness: Passer by, Seeker, Acquaintedseeker, Customer, Reviewer, Advice seeker, Blogger,Worried mum, Curious friend and Travel companyowner. Some of the model names might not be selfexplaining, but we see that they cover every possibleinteraction that there could be to our website and itsfeatures.

3.2 PersonasNext step is to materialize these behavioral patternsinto real people, so called personas. These personasserve as an example of real people that will use oursite, they describe their basic features as age and occu-pation, their life story and their relationship towardsGapPacker. Each of these personas can take one ormore behavior models on themselves. It is importantto have these personas, because with their help youcan use and talk about “real” people in next steps ofprocess rather than just virtual ones. It greatly helpsfurther in the process when you can speak of Johnrather then some general student and makes one ofthe next steps, writing user scenarios, much easier. Ihave created total number of 5 personas for this project.Where all together they are able to cover all 10 behav-ioral models.

3.3 Information designOne side of every website are users and the other iscontent and data it serves them. GapPacker is heavilycontent centered website and therefore it was cruciallyimportant to define what data it will provide it’s usersand how are they going to be connected. This step iskind of pre-phase of one of the implementation steps,where we create entity relationship diagram and setupa database. Only here we describe entities in morehuman and general way.

GapPacker’s main content are company and pro-gram pages, with different information about them,then we have articles with numerous possible topicscreated by users, travel guides created by GapPackerstaff, events connected to Work and Travel businessand of course program reviews with addition of ques-tions, and their answers, that can be asked about them.

Figure 1. Information about program

3.4 UI PrototypesSince we already know who our users are and whattheir role towards GapPacker is, we can start design-ing UI prototypes to serve their needs. In this step Ihave created prototypes of all templates, that will be re-sponsible for mediating information between user andwebsite. There are quite a few of them: Homepage,Program, Company, Article, Event, Profile Adminis-tration, Company Dashboard and create/edit templatesfor each of the information entity site offers.

Even though prototypes do not yet care about de-sign, colors and particular look of UI elements. It isalready in this stage where we design where thingswill be on the page and how they will interact.

Before trying to create something new, it is alwaysgood idea to look around, how other people solved sim-ilar problems and maybe try to use and improve themif they are really good. There is really no point in rein-venting the wheel. There is only one site that is closeto the purpose of GapPacker and that is goabroad.com,but I also had a look at sites such as Tripadvisor, Book-ing.com and Airbnb to absorb some ideas and althoughthese sites review different product, they do not differthat much in means of serving its content and gettingthe reviews. Since these pages serve millions of pageviews daily, we can be pretty sure they invested a lotin their UI and elements they use are based on solidusability testing. I have tried to take the best fromall of them such as search modules, fixed navigation,sliding panels and others.

3.5 User Scenarios and TestingOnce we have prototypes ready it is time to test ifthey really serve their purpose and users can easilyuse them, achieving what they want to do on the site

Figure 2. Example of wireframe - Create review page

without any problems. To make the process real again,as with personas, I have created user stories, that basi-cally retell a situation of using GapPacker by differentpersonas in different situations to cover everything thatcan be done on the site. In case of GapPacker therehave been 7 stories created that cover every possiblefunctionality.

To validate design of our templates, it is necessaryto put these stories under a test by real people. Tomake this happen, I have created set of 8 tasks, thatsimilarly to user stories cover complete functionalityof the website and put them into test. Each of the tasksdescribes what is being tested and what is user told todo followed by a short list of steps for the test specula-tor to check in or mark where a problem occurred. Ihave tested these tasks on 10 people where 7 of themfall into student/young person category and 3 of theminto company owner one. After each task, there was ashort conversation about what the user just have gottenthrough with focus on what he would improve fromthe user experience side and if he subjectively likes thesite.

There were many interesting proposals, whichsome of them were already applied to the design andsome of them are waiting to be tested on other users inA/B testing in next test iterations.

As the site proved to be working as expected andthe user experience is well established. It was possibleto move to a next phase which was implementation.

Figure 3. Example of review

4. Implementation

At this stage we were sure that the designed prototypeswork and we are ready to create actual website fromthem. GapPacker is developed in Ruby on Rails frame-work, which is very powerful tool for creating web ap-plications. It follows modern Model-View-Controllerarchitecture, that separates data from it’s presentationand system logic. It comes with many useful featuressupporting both easy front and back end development,these features work as plugins and are called gems. Onthe back end it is for example abstract layer over thedatabase that lets you easily manipulate its objects andinterconnects all its data and on the front end for exam-ple powerful pre- and post-processing of all cascadingstyle sheets, JavaScript and images.

GapPacker is deployed on a SSD cloud server,which allows for any customization and is completelyfree of any restrictions and opened for upgrades andimprovements.

5. Branding

Visual identity is very important and it certainly matershow people like the page subjectively, even though theuser experience is what really is the pillar of any webapplication. People do not want to use ugly things andtherefore I also focused on communicating the visualpart in the ideas and spirit of GapPacker and its focuson young people.

Figure 4. Logo with base color. Secondary, hover andother colors.

GapPacker is independent server for young people,therefore I have selected calm, thought vivid blue coloras a base color, complemented by outstanding yellowused for the most important elements on page as arebook/action buttons and others. There are also fewother colors in use for other elements, which werechosen to be smooth and not too bright in order tonot disturb the coalition of the two main colors. All

the information about color theory and designing UIelements was taken from [3].

Not only by the look should GapPacker expressits identity, but the language with which it speaks toits users is also important. To be close to young usersand make them feel that we are here to help them andwe know who they are and what they want, I havedecided to use informal language that intends to playwith words and be funny. Users are greeted as “mates”,every info/warning message uses implements funnysaying or idioms and so on.

6. ContentTo close this article about GapPacker, we only need tomention one last section, that is no less important thanothers – content. Content is what users will seek onthe website and what we must really do the best to getto the top of search engines and attract traffic. Exceptfrom the program and company pages, crated by com-panies, there will be random travel content generatedby users in form of articles and professionally cratedcontent about traveling in form of guides.

To ensure GapPacker really ranks high in search en-gines I have implemented best search engine optimiza-tion principles including for example new HTML5tags that enrich web semantics or microdata schemesthat help present information in form of rich snippetsin Google’s search results and others.

7. ConclusionThis paper was intended to introduce project calledGapPacker which serves as a web application for re-viewing Work and Travel programs and other opportu-nities for young people to go abroad.

Site is in a test phase at the moment, being filledwith information from 9 Czech travel agencies withmore than 30 programs. Main flow of reviews is ex-pected to come after summer by the end of September,when majority of young travelers come back homefrom their summer adventure. That will be also thetime, when GapPacker will be heavily promoted insocial media and by other streams.

If the concept proves its expectations and drawsenough traffic to become important in Work and Travelsector, the paid version will be started and the servicewill expand to UK and middle European markets asSlovakia, Poland and Hungary.

Even though a profit is expected to come from thisproject, it is really the fact that I want to bring newand positive value into Work and Travel industry andprovide people with a great and useful service, that led

to creation of GapPacker and I hope I will fulfill whatI built it for.

References[1] Alexander Osterwalder. Business model genera-

tion : a handbook for visionaries, game changers,and challengers. Wiley, Hoboken, NJ, 2010.

[2] Jan Rezac. Web ostryy jako britva : navrh fun-gujıcıho webu pro webdesignery a zadavatele pro-jektu. Baroque Partners, Jihlava, 2014.

[3] David Kadavy. Design for hackers reverse-engineering beauty. John Wiley & Sons Ltd, WestSussex, UK, 2011.