Final prototype

Final prototype (click here)

This is the final iteration of the prototype, as it was presented on the 13th of november.

eMap - Travel with me

eMap - Travel with me

Final Prototype

The end product of this project is "eMap - Travel with me". It is a stationary infoscreen, that can be found in all the tourist hubs, like hotels, old town, tourist attractions,  but also at metro, bus and ferry stations. It helps the users to plan their route and provides the possibility to "take away" the planned route in form of a printed map or digitally on the phone, transmitted via bluetooth or NFC.

eMap: planning a route

For planning a route our product provides functionalities similiar to Google Maps or the SL App. These applications are usually used by Stockholmers themselves and are widely accepted. However, our user group the tourists do not use them, as these technologies require internet access, which can be very expensive for the foreign tourists. Especially older travelers for example are not used to phones and mobile applications. Therefore they prefer asking someone or using stationary maps at the stations or their own maps.
With eMap they now can plan their route easily without having to use the expensive roaming. They can print their route or take it with them on their phone as an image (via bluethooth or NFC). The interface is easy to use and very intuitive, so that even users, who are not that technology affine can use it without problems. 

Route send to phone via bluetooth or NFC

printed version of the map

Additionally to the standard functionality of planning a route, also additional functionalities specialized for our target group is available. eMap, for example, presents the user diffrent types of routes, such as the fastest, the cheapest or, what is most interesting for many tourists, the most scenic route, with most sightseeing on the way. Also can users filter the map to display tourist attractions, restaurants, malls, etc. to them on demand ( following the rule: overview first, zoom and filter, details on demand). 

eMap with tourist attractions displayed - detailed information on  Skansen

Information about the design process and the project can be found in this blog or in our final presentation as well (Find the final Presentation here!).

Final Prototype: Test the final prototype here!

Iterations of Prototyping (Teammeetings)

by Fredrik and Suhanyaa

First Iteration

In the first iteration of the prototyping first sketches of the design idea were made (Check out the first iteration here!). A heuristic evaluation of expert users was then performed based on the sketches. This was our first very low-fi-prototype. It was very easy and cheap to make, and easy to modify and therefore very flexible, which made it easy for us, to react on feedback and suggestions from fellow students during the heuristic evaluation.

Second Iteration 

After the meeting on the 28th of october, each teammember gathered design ideas and created individual sketches for our paper prototype (see individual design ideas and sketches here). We discussed the ideas from the paper-prototype sketches coupled with the feedback from the heuristic evaluation from exercise 4 and made second iteration of our prototype, an interactive low-fidelity prototype  prototype using Flinto. This iteration was fairly simple but was intended to be used for the think-aloud evaluation. (See Think-aloud data)

Flinto prototype (Check out our 1st Iteration Prototype here)

Third Iteration

On november 2nd of november we met up to discuss the think-aloud evaluation feedback and to make another iteration of the prototype, this time a more high-fidelity prototype. Some of the key points from the think-aloud feedback were the following:

• Some icons were confusing
• Unclear whether the map is interactive
• The colours of the routes on the map were confusing

We commenced to work on the second iteration thinking about these things and the result was something like this:

Check out the 2nd prototype here

We took in consideration the fact that some of our think-aloud evaluation participants wasn't initially sure whether the map was interactive or not so we made it span the whole screen to accentuate that fact. We also tried to make the icons clearer but unfortunately we didn't have the time to properly show what happens when you click all of them in this prototype. Lastly we changed the colours of the routes showing on the map, simply highlighting the one selected instead of having a colour-coding system.

Fourth Iteration

On the 8th and 9th of november our group met up to discuss the feedback we got from exercise number 5 were we presented the 2nd iteration. Here are the key-points from that feedback:

• Make the text window smaller/slimmer
• Refine tourist attraction information
• The theme of the design has a pre-dated look
• As it is meant for tourists, add more tourist relevant information

We took these things into consideration when we started to make the final iteration of the prototype.

Think-aload

This was a think-aload exercise conducted using the think-aload protocol from the book in order to evaluate the first prototype. I wanted the data to capture any problems,thoughts or ideas the user might encounter when seeing the prototype for the first time. As soon as the user got any thoughts related to the design, the user was asked to speak his thoughts loudly so I could get a more unfiltered reaction and thus a more accurate evaluation. 

"I see a lot of buttons", "The search box is easily found","Im a bit confused about what the map is there for","Can I stretch the map?","The icons on the map is a little confusing","The language button is good","The color of the line showing my direction on the map should maybe be a bit stronger.","More text could explain the flow better or using symbols who can move to indicate what they mean.".

Feedback On Paper Prototype

Feedback from a think aloud trial. The subject was not in our target group.

At first she as unsure of what the purpuse was and on where to click.
Then she discovered that if you hold down the button the areas where you can click are highlighted, and she tried the flag, the language option, that was clear what it meant.. She did not try to move the map, and she did not know what the stars or the flag was. She typed in H that was avaliable for the destination, and clicked on the highlighted one there. She was very unsure of what to do the entire time, and got confused about where to click to continue. When she got to the part where she was going to get the directions printed, the only icon she understood was the print option, she did not know what nfc or bluetooth was. She was unsure of what it would print, if it was just the map or the entire screen. The directions with the train and the walking was easy to understand.

Feedback on paper prototype

We performed think-aloud on several subjects. The subjects were acquaintances and friends and were not in our target group, and will most likely have an influence of western standard in interaction. Regardless, we believe this will give accurate data since we really only want to test the initial interactive flow of the application and look for major errors.

Initial screen.

The user were tasked to find a route to "Hornsgatan".

The first impression

• Many found the map too zoomed out - most users tried to zoom in and move the map around
• After exploring the map - the green flag was clicked, not dragged (though nothing happens in our prototype)
• After clicking the flag, the Points of Interest star was clicked.
• A few did not realize the purpose of the application, and found the map to be too zoomed in.
• A few instantly clicked the destination before even interacting with the map

Points of Interests screen.

General flow

• Spent time playing around with the Points of Interest (star), briefly forgetting their objective of Hornsgatan
• ... but when done exploring they clicked the destination above the POI list and quickly found a route
• The few whom did not play around with the Points of Interests found a route much faster 

Route screen
 
Overall

• Transport symbols/icons not clear.
• Colours on routes were confusing, connected the subway with the corresponding line colours - "the blue subway line does not go to Slussen, what?"
• Unclear what the transportation selection buttons do.
• The icons on the route screen were confusing, only the bluetooth icon was clear - but not its purpose ("Bluetooth? Why would I want to connect with the application?")
• When realizing the print-button printed a paper from the machine, they asked themselves "what does it print? The screen, the map, the directions...?"
• When suggesting the print-button would lead to a pop-up where they could choose what to print, they still looked confused as they interpreted the icons as the final step an not as something which brings up options. 
• "People are gonna troll this so hard and just print papers until it runs out"

•  "Why is the screen still zoomed out when I have my destination, why does it not auto-fit according the the route?"
• None noticed the POI-stars on the map
• None interacted with the header

Kommentarer till think aloud

• Otydliga bilder, behöver förklaras.

1. ex    
2. Destination/varifrån
3. Stjärnan
4. Pilen bland färdmedel

• Liten karta.
• Jobbigt funktion för att bestämma tiden.