Development/ Implementation: The Journey of our website+ app — Tripάρω — Part 2

The ADandPRLAB / Digital Creativity LAB (games, apps and coding) Panteion University.

Our journey as a team was exciting and full of new and interesting things to learn. In the beginning everything seemed so difficult, almost impossible, but we surprised ourselves once we started building our site and our app, and ‘Tripάρω’ eventually came to life. In order to make it happen we tried to put ourselves in the position of the user and tried to cover the most important needs that we thought a real user would have.

Describe how you have developed/ created your users’ journey and their Personas :

We actually created the virtual user Victoria, inspired by the daughter of Nena. We reasonably organized the pages based on the order in which we thought the virtual user would like to visit them. In particular, every traveler primarily closes transport, then stays etc. At this point we decided to require log-in from the user in order to access the other contents of the site. Our virtual user, Victoria is interested in quickly closing down tickets and staying for it and creating an easy step-by-step way of moving.
Analytically: Main page User introduces destination 2) Goes to Venice’s General Information page 3) Goes back to transport or front of residence 4) After seeing the accommodation possibilities he says he has to login to continue 5) After login can 6) see the reverse measurement 7) see the attractions 8) make the daily program 9) make the contents of his suitcase 10) receive notifications on his mobile.

How we developed the prototype :

The idea was there. So we had to create a web site and an app. We decided the main pages of our project with the information we provide. Each one of us took on some pages, we decided what the home page should include and we started working ! We were there for any question we had. The first page of our project is the home page. Home page contains a few words about us and what we provide, how the site works, what are the steps that visitors should follow and the possibilities of sing in, log in and select a destination. Next step is the transportation, which is based on the destination. Sites of air tickets, boat tickets, train tickets and car rides are available. Next step is accommodation. Booking.com and Airbnb.com are recommended for you to choose the best place to stay. Those are the steps that don’t require to be a logged in user. The next steps are available only for logged in user. Once a visitor creates an account or logs in, in his existing account, a table of the previous steps appears. After booking his transportation tickets they can put the day and the time of departure and then a countdown starts showing them how much time has left for their trip. Then, they have the possibility to see all the sights we recommend them to see, museums, and places for breakfast, lunch and dinner and there is the possibility to book theis ticket for any place they want by clicking the buttons we added. Based on their favorite places they can organize their daily schedule. Subsequently, important info of the town they would visit are available like country’s emergency number, tourist map, cultural events, travel documentations, travel cost calculator. At the end we give the user the possibility to check what they need to have with them in their suitcase and be organized by making a list for their suitcase on our web site and app. We created first the web site and then, based on it, we created the prototype app. Creating the app was challenging. Proto.io didn’t have the same possibilities that Tilda had when we created the site. But, we tried to simulate it as good as possible and in cases we put other contains in the attempt to resemble the functions of Tilda (ex. Countdown). App menu was putted from below in contrast to the site menu that was on top. App also have the possibility of sending notifications in contrast of web site that didn’t give this ability. Our goal is to help a traveller has their whole trip organized.

Booking.com: Η μεγαλύτερη συλλογή ξενοδοχείων, σπιτιών και παραθεριστικών κατοικιών

How we used UX Prodigy and Magy Kontou’s sessions on UX website design and heuristics and UX app design on proto.io :

We have to admit that the UX Prodigy and Magy Kontou’s sessions we attended were more than helpful for us. Those sessions provided us so many useful information and prepared us for the difficulties we did come across. First of all the UX Prodigy session made us understand what our web site and app should include and what we should add in order to make our project successful. For that reason we tried to follow by the book all of the ten (10) rules they taught us on the lab about the usability such as visibility, accessibility, engagement, availability, satisfaction etc. Some examples :

We used heuristic #2 “ Match between the system and the real world”

We are talking the user’s language with words, phrases and concepts familiar to the user!

We used heuristic #8 “ Aesthetic and minimalist design’’

Dialogues should not contain information, which is irrelevant or rarely needed.

We should not oberload an interface with features.

Thanks to them we knew what the most common and important mistakes are for a web site and an app and we tried to avoid them on our own project. On Magy Kontou’s session we learned how to make our app and she really helped us understand how the proto.io works. We had some trouble in making our app before the session and her advice truly showed us the way to make our app come to life, especially when she made an app from the scratch, to show us what we should use to make an app useful and also more appealing. She also suggested some web sites we could use to customize our app with colors and pictures

Coolors

Flaticon, the largest database of free vector icons

Without those two sessions we believe that we wouldn’t have made to bring our ideas to our web site and app and know we feel more confident and ready to keep on making web sites and apps.

Our tips for the future web developer

During this process, we’ve learnt a thing or two. Here is a list with tips for the aspiring web designer.

1. Don’t panic.Unless you are a programmer, the first time you undertake website designing will be overwhelming. Don’t give up though. Keep in mind that site builders are mainly intended for (advanced) users, not developers. Furthermore, based on our experience, spending only 40–50 hours using the builder are enough to get a hold of it.
2. Explore ready-to-use templates.Builders like Tilda and Wix, provide ready-made sites. Each template contains a number of pages and many blocks. Some pages will possibly fit your needs, without any significant changes. If your vision is different though, you can always extract certain blocks from the templates and integrate them to your project.
3. Plan your user’s journey.Be specific about what the user is going to see and organize the pages in a logical order. It is time to make other decisions as well: Should users be logged-in to browse your content? Should some functions be available only in in the application?
4. Be user-friendly.Chances are that your web visitors have been browsing internet for ages before they landed to your page. They are used to see certain buttons in specific places and expect your site to offer common functionalities. Take into account the principles of User Experience when designing your project. Try to include a “Help” or “How it works” section as well. If anything else fails, users should be able to contact your team directly.
5. Keep your application similar to the website.This can be a challenge sometimes. In mobile programming you are working with a fraction of the space and it is reasonable to alter the outlook of some screens. However, it is the same service that you offer both in the website and the app, so keep changes to a minimum.
6. Test, test, and then test again.OK, you are done, or so you think. Before you publish your project you must absolutely check profoundly every single link — twice. Make sure your user will not encounter any error messages.

Now you are done — Congratulations.

The challenges

Our journey wasn’t easy. Building a site/app is a load of work. Depending on the platform you use, you will come across some restrictions.

1. Limited FunctionalityTilda offers limited functionality, at least in free plan. For example, it was impossible to add a “favorites” button. Our idea required the user to be able to make his own schedule by clicking and adding his favorite attractions to his daily planner. We also wanted to send our users notifications regarding their trip. Tilda does not support notifications either, so this feature is provided exclusively to application users.
2. APIs are not intended for students.APIs stand for Application Programming Interfaces. Put simply, an API is a bridge between two software products, that allows the second one to use the interface and database of the first. When you see google maps in third-party sites, rest assured they are using a Google API. However, those bridges are designed for businesses or developers. They come at a cost and you are considered a business customer. We were reluctant to sign up with a professional account.
3. Direct contact with Tilda wasn’t possible.So, at some point we made a mistake. We upgraded to a “Tilda Personal Plan” that provided a two week free trial. As soon as the trial period was over, our account got blocked and we were required to buy the full package. We had contacted Tilda explaining the situation and asking for a downgrade, if possible. In response we got an automatically generated message that claimed Tilda usually answers within a day. No one has replied to our message to this day. We lost all our progress and started all over under a new account.

Home

Thank you ! Betty Tsakarestou Dr. Stavros Kaperonis

maria zioga Nena Nicolaou Rebecca Bacharnikou

Also check our previous post #1

The path to an idea: Tripάρω