Final prototype

This post will describe in detail how our latest and final smartphone application works. To test out our  smartphone application click on this link. We have now working with a project for a long time and with the iterative process we have followed we have created our final design. We have created this prototype by using the prototype tool Flinto, where we used Adobe Photoshop to create our mockups and Flinto to link our mockups together. 

After the exercise 5 where we demonstrated our first prototype we got some design critiques about the first prototype that we created. After that demo we have change a lot regarding the design and some functionality of the application, you can read more about the changes in these blog posts, post 1  and post 2. In the first prototype we had just implemented HCI theories and methods that we came in contact with when reading the course literature and during the lectures. But then realized that we needed go more studiously through the course literature and follow the links that followed each chapter end. This wasn't adequate we also search on web for reachers regarding theories about icons, colors, interface, buttons, more indent on Fitts law etc. For more in depth information you can read about the theories that we used and how we applied them in these blog posts, post 1 , post 2 , post 3 , post 4.

We have also created a video clip where we have done a walkthrough that shows all the functions of the application, you can find that video clip in this blog post.

We will now illustrate the final design of our smartphone application and go through in detail how it works. When starting the application you will directly get ot the main menu, where the user can choose between different categories or search after a specific topic depending on what type of problem the user wants help with. The user can choose between the categories My Tickets, Food, Amusement, Transport or City Walks. Each category will help the user with solving their problem on that specific area.We have also highlighted the bottom menu in the application so that the user knows on which specific menu they are at.

Main menu

If the user wants help with finding restaurants/café allocated in Djurgården, then they can enter the subcategoty Food. A scrolling list of restaurants/café is shown where they are sorted in terms of the shortest distant to the users position. Under each restaurants/café, a short information is written to indicate type of restaurants, if it's a sport bar, café, fast food etc. When clicking on one of the restaurants more in depth information is shown. Ex. if the user clicks on the restaurant Blå porten, a short description of the restaurant is found and also the opening hours, the price rate etc. If the user want to visit that specific restaurant they can get navigation from their position to Blå porten by clicking on the Directions icon. The user can always go back to the previously page by clicking on the back arrow. The map also works offline due to the fact that one of the major requirement that we had set was that our app should work when users don’t have any internet connection.

Diffrent restaurants
near the user.

In depth information
about the restaurants.

Navigation to the restaurant.

If the user knows a specific adress or place that they have a difficulty to find, they can use the Transportation function to get navigation. The Transportation function works by the user must input his location by using the smartphones position or enter a adress/place, then the destination. The user can then choose between different transportation option too travel with. If the user wants to travel with public transportation and specifically the buss ex. the current location which is at Djurgårdsbrunn to the destination Djurgården Ferry. They will get detail information about the travel route. They can also purchase tickets in the application. If the user tries too enter one of the transportation icons that are grayed out then they will get indicated to first enter the From and To field before choosing the transportation.

Main menu of the Transportation category.

Enter the position and destination, the
user will get options that starts with the
same letters as the users input.

Choose the choice of transportation.

Buss is chosen, detail information about
the travel route is shown in a more human approach.

If the user wants guided tours when exploring Djurgården, they can use their smartphones camera to point at specific buildings and places. Our application uses Augmented Reality too provide information. Ex. if the user is at the ferry that travels from Slussen to Allmänna Gränd and wants to know what a specific buildings/places is, they just have too click on the camera button in the bottom menu and point it towards that building/place. To get more information the user can click on the information icon.

Camera function, provides information of specific buildings and different
places in Djurgården.

In the My Tickets category the user will find all their active tickets and previous tickets that they have bought.

Green tickets are the active ones
and the red ones are expired.

Illustrates the ticket for traveling with public transportation.

In the Walk category the user can plan different walks that have been created for the user too explore Djurgården. Every walk is specific in terms of exploring the different sides of Djurgården. A short informations is described below each Walk, where distance of the walk is shown as well as the amount of time is takes too walk this specific Walk. When clicking on a specific walk ex. the user clicks on the Nature Walk, then a more detail information is shown.

Different Walks to choose.

Information about the walks, too give the user a input on
what is waiting ahead them if they later choose this specific Walk.

The user can also change som settings in the application, the language is pre-determined as the language of the users smartphone.

The settings that the user can change or get a short tutorial of how this application work.

If the user know what type of "problem" they need help with then in the Search box, in the top menu. The user can input ex. Vasa museum where they gonna get information about the Vasa museum. They can also purchase tickets directly in the application.

The users input in the Search box.

Detail information about all the museums is
provided in the application.

The user can purchase tickets for the museums.