Link to latest Prototype

Download link: https://www.dropbox.com/s/8e91mp3r64eaq1c/vidoV3.flinto?dl=0

Download Flinto, either on a desktop OS or on a phone OS, open the downloaded file with it.

Design Process Summary

 Design Process Summary

To help recap which HCI-techniques we have used, we will summarize the design process in this blog post.

Problem Analysis and Field Studies

At the beginning of our project we went out to observe our route. We wanted to gather ethnographic data i.e who were travelling, why, and when.  We followed a heuristic approach, given our short time to gather data. After conducting semi-structured interviews with people on the route we found out that one big group of people travelling were tourists. We chose this as our target group. After deciding target group we wanted to establish user requirements, which turned out to be quite difficult. Everyone liked the route, and had almost nothing (or irrelevant) things to complain about. However, a reccurring pattern was that everyone enjoyed the view, this was said in the majority of the interviews. We decided to capitalize on what they already enjoyed, instead of something they didn't like. We wanted to design something that incorporated the view.

Persona and Scenarios

Based on our interviews and the data recorded, we came up with two personas. An international tourist and a domestic tourist were created and their respective scenarios were based on the target group's requirements. The scenarios envisioned situations in which the persona would be placed in an everyday context and where the behaviour and possible motivation of our target group could be anticipated. To accommodate our persona and scenarios we made a list of pain points to identify opportunities for improvement and potential issues. 

Designing and Prototyping

We had a brainstorming session to come up with features to include in the application.

We then split into two groups and made two parallel design ideas using sketches. After that we compared the two designs, which were relatively similar, and combined the ideas we liked best from both designs and made a paper prototype. We decided to move buttons to the bottom of the screen, both to make them easier to click when holding the smart phone, and to make the image showing the view as large as possible. We went through several cycles of prototyping. We remade the sketches and used them in our low-fidelity prototype using PopApp.  For our high-fidelity prototype, we used Flinto. 
Here is the final prototype.

 Design Critique and Design Iteration

Our product is developed using an iterative design process. This means that we have kept modifying and refining our prototypes after testing and getting feedback. Our first idea, some kind of photo app with image recognition, came from our field studies where we figured we wanted to enhance what people liked about the boat. Unfortunately the expert evaluator we got didn’t give us much constructive feedback at first. Instead, we used the feedback we got from our teacher assistant to create our History mode, the thing that we think makes our product stand out. After the Evaluation we started building a Popapp surrounding our ideas. When designing we tried to follow Nielsens 10 Usability Heuristics to the best of our knowledge. When we developed our lo-fi prototype, we looked to our own preferences and what we thought was intuitive, but when we did our think-aloud tests we realized what was intuitive for us wasn't necessarily for others. For example, we thought that sliding between screen would be simple and easy to figure out, but it turned out it wasn't as obvious to others, e.g. our parents. Therefore we decided on descriptive buttons in our final design. The same reason lies behind the picture on the camera button, as one user didn't realize it was a camera at first. After getting some final feedback regarding design details during our last presentation,  we decided to change some colors and move the camera button higher to prevent miss clicking and increase functionality.

Very Serious Meeting

Alvaro2000

Camera Mode

• GPS, user coordinates and building coordinates.
• The GPS information will be saved and linked to the corresponding picture for easy later access.
• Photos will "capture the moment" for access later.
• NO image recognition.
• If there are several point of interests in a cluster, the info icon will show this, and when clicked, the options will be displayed according to distance. 

History Mode

• Basically replaces the reality with a 3D world.
• The 3D world will be rendered based on famous events in Stockholm's history.
• The user should experience famous events and at the same time be able to explore Stockholm at the time of the event.
• More or less information about buildings?

Overview List

• Search Mode
• Toggle list between "Visible Sites" and "All Sites".
• Compass would then show where to look to find the chosen site. 

Settings

• Languages
• ....

General

• Settings icon in every mode?
• NO offline mode toggle.
• Download a Minecraft world based on Stockholm to illustrate the history mode? 
• We will use Illustrator and Flinto for a high-fidelity prototype.We will perform our think-alouds later when we have made a better clickable prototype.

POP Prototype

We started working on our clickable prototype using the application POP as our SDK of choice.

POP Project

Extremely low-fi!

Feedback Reflection

Unfortunately the evaluation we got could not help us that much. They mentioned the difference between the online and offline mode, and also asked questions about our functions. One concrete thing we discussed was some sort of tutorial. They suggested a help icon which would be discrete and optional. There is a similar function in the app iMovie.

Evaluation from group 5 (unedited)

# Grupp 4
[Bloggen](https://www.mdia4.blogspot.com)

Skicka till:
Facebook eller mail: lokemolund@gmail.com
### Slide 1 Alvaro2000

Waxholmsrutten, båt

### Slide 2
Intervjuer:
 - Målgrupp och anv.krav
 - De flesta nöjda
 - Val av målg. __inhemska och utländska turist__
 - Målgrupp baserat på användarkrav


### Slide 3 State of the art
Brainstorm: Image recognition, AR (augmented reality), GPS, turistappar

Idé: Rikta kameran mot sevärdheter och få info om byggnader. GPS hjälper.

### Slide 4 Personas och scenarios
###### Leif GB Glasson:
Inget spec.
Scen: Han tar inte bilder men vill få info om vad han tittar på. Har har sina keds med sig och vill verka smart.
###### Elisabeth Swan:
Offline mode TILLSAMMANS med image recognition? Svar: Känna igen i efterhand.

###### Annat
Photograph mode?: ... ... ... Integrerad kameraapp, kopplad till bildbanken.
Finns SOTA om photographapp?: JA!

Scen: Engelsman som har tagit bilder under rutten. Hon vill kolla upp vad hon fotat.


### Slide 5 Design
 - Fortsatt konceptdesign
 - Parallell design

Blandad språk?: Nej, bild med flagga för olika språk.

### Slide 6 Final Design

Bild med fina små designbilder.
Cool ide!: Historiska bilder på gamla byggnader.

### Diskussion
Livefunktion för folk som inte vill använda mycket data?: Realistiskt så hoppas man på att waxholmsbåten köper appen och bidrar med en server/wifi på båten som tillhandahar infon. Appen ska ha skyssta funktioner utan internet.
Eftersom appen bara är för båtlinjen så kanske all info kan finnas nedladdad. Inte bara kamera i offline.

Hjälpfunktion?: Det får vi se under think aloud. Man vill få det intuitivt för för mycket info blir jobbigt. Vi gillar ikoner.

SOTA för imagerec?: ... ... ... Inte allt i huvudet. Ingen aning.

: Man ska kunna välja att få kort eller lång info. Kanske med en light-app?

Behövs tutorials: Kanske men inte om vi lyckas få funktionerna tillräckligt intuitiva.

Games?: Quiz eller nått. Acheivements som ger poäng till rabatter.
Varför slopade ni games?: Inte slopat än men inte säkra på om det behövs.

## Tankar
 - Vilka funktioner kan man använda offline?
 - Många intessanta funktioner men blir helhetsbilden tillräckligt tydlig?
 - Skall det finnas en tydlig knapp för att förhindra internetuppkoppling.
 - Kan en tutorial behövas?
 - Varför ska folk använda just denna imagerec och inte andras?

The slides we will be using for our presentation: