USER INTERFACE DEVELOPMENT FOR TRAIN SERVICES - TAMPERE CITY

User Interface Design

Tampere Railway Service version 1.1

Delivery: Piia Nurkka

Group members

Bikram Thapa [245066] [email protected]

Shukadev Dahal [245037] [email protected]

Group number: 13

Dokumentin tila: <työversio/valmis> Date modified: 19.12.2014

Tampere Railway Services User Interface Design Version 1.0

19.12.14 2/17

VERSION HISTORY

Version Date Authors Explanation

1.0 17.11.2014 Bikram Thapa,

Shukadev Dahal

Created New Mockup.

1.0 24.11.2014 Bikram Thapa Added Sign in as guest option

1.1 16.12.2014 Bikram Thapa

Shukadev Dahal

Added broken links in prototype.

Added help, language support etc

as per comments from other teams.

1.1 18.12.2014 Bikram Thapa

Shukadev Dahal

Compiled the final Prototypes.

Final modification and Report

changes


19.12.14 3/17

TABLE OF CONTENTS

1. INTRODUCTION ....................................................................................................................... 4

1.1 OVERVIEW ................................................................................................................................ 4

1.2 DEFINITIONS, TERMS AND ABBREVIATIONS ............................................................................... 4

2. USERS AND CONTEXT ........................................................................................................... 5

2.1 CONTEXT OF USE ...................................................................................................................... 5

2.2 TASKS ....................................................................................................................................... 6

2.3 USERS ....................................................................................................................................... 7

3. HARDWARE .............................................................................................................................. 8

4. CONTENT DIAGRAM AND NAVIGATION MODEL ......................................................... 9

4.1 CONTENT DIAGRAM .................................................................................................................. 9

4.2 NAVIGATION MODEL .............................................................................................................. 10

5. IMPRESSION DESIGN ........................................................................................................... 11

5.1 MOOD BOARD ......................................................................................................................... 11

5.2 COLOR DESIGN ....................................................................................................................... 11

5.3 ICON DESIGN ........................................................................................................................... 12

5.4 DESIGN PATTERNS ................................................................................................................... 12

6. SCREENSHOTS ....................................................................................................................... 13

7. PROTOTYPE ............................................................................................................................ 14

8. DESIGN DIARY ....................................................................................................................... 15

8.1 TIMELINE ................................................................................................................................ 15

REFERENCES ................................................................................................................................... 17


19.12.14 4/17

1. INTRODUCTION

Tampere Railway Service is mobile application that will help people

to find services available nearby Tampere station. This application is

designed for the Tampere University of Technology and the research

and prototype is based on principles learned from User interface

designs and activities. This application targets the portable electronic

devices that supports android or Ios operating system. Additionally the

application also help the travelers find the services like booking

tickets, search train, find the trains location on maps etc. and is

intended to serve users above 10 years or who people with skills to

use mobile devices.

1.1 Overview

As a support tool, mobile and Ipad users will benefit from the

application. This application can be accessed by anyone of age group

10+ years and best suited for those people who can pay via online

transactions. The users could be local or foreigners as it supports

multiple languages like Finnish, English etc. This application requires

sensors, internet, mobile operators etc. The main principles for

development is supporting people with railway services and nearby

available facilities like live help calls, book trains, search for trains,

live train updates, finding services, paying for services, virtual tour of

inside station etc.

1.2 Definitions, terms and abbreviations

1. Abbreviations

GPS Globa Positioning system

TRS Tampere Railway Service

SD card Secure Device card

IOS Iphone Operting System


19.12.14 5/17

2. USERS AND CONTEXT

The proposed application is for people who have basic knowledge

about using mobile phones, internet, applications etc. The application

is for touch screen portable phones and the user must have an ability

to touch or interact with the interfaces or should be able to use the

voice input shown in Mockup.

2.1 Context of Use

Temporal Context: This system might be used daily, weekly or monthly.

It might be used for few seconds to many minutes.

Physical Context:

System fits for services inside Finland. This application supports live

updates of trains over google map of Finland connecting different

train stations like Helsinki-Tampere.

Business Context:

Paying for tickets from home.

Pay for other services

Task Context

This application has multitasking capability and application can be

switched with other application during use.

Social Context

This application does not restricts using under social contexts. It can

be used everywhere and does not restrict any age, sex groups etc.

Technical Context:

Touch screens enabled portable devices.

GPS Enabled Devices for positioning.

Wifi or Data service enabled devices.


19.12.14 6/17

Service Context: Get help from customer’s service providers

Find live updates of trains

Find nearby services in train station.

2.2 Tasks

The system is for locating nearby services, remotely accessing railway

services etc. The user need to sign up with the application to gain the

full benefits of offered services. With sign up it’s easy to keep track of

your activities like viewing past purchase of records, track spend

financial costs, use automated form fillings etc. Guest users can use

the system without sign as well. Users need to install application on

their devices and some tasks supported by the application are:-

Booking services: The user has to prefill the information about self,

which is used during the booking of the tickets. The payment can be

done via available we interface.

Viewing the Tickets Purchased: User can check tickets he/she has

purchased. It also contain the tickets purchased in past with different

signs marked as black for old expired tickets and new with Green

color with the timer showing time left for next travel. In order to view

archives of tickets bought the user must be a logged in user so that the

system can keep track of users’ history. It cannot be accessed in Guest

view.

Tracing Tickets: The user inputs the train number and finds the

information about the train, the current location of the train etc. The

information is shown over the google map with users own position

and train’s position. The system is updated on every few seconds.

Virtual Station Tour: The user is able to search for train station and

view inside map and track with virtual View. Assuming that is

supports 360 image view with arrows showing way to destination.

Edit User’s own Profile: This option will help the user to edit profile

information and security codes.

Find nearby Services: This option will help the user to locate nearby

services like hotels, taxi service, shops etc. inside the station. The

services location can be filtered with options from the drop down box.

Contact Railway service support providers: This option will enable

the user to call the railway customer service providers. The user

chooses the customer service button which then opens mobile

application to call the service providers without being hassle to get

and search numbers.


19.12.14 7/17

Help and Documentation: Users can get information about how to

use the application from help menu.

2.3 Users

The users are temporary business or local travelers or tourists who

needs to travel frequently through trains or are new people travelling

in Finland. The system is beneficial for the users who have busy

schedules and want to spend less time on visiting the railway service

providers. The beneficiary users are people to read the contents and

interact with the system. This application can be used by any people

above 15 years old who know what he/she is using, maintain security

while accessing it and


19.12.14 8/17

3. HARDWARE

The technical requirements for this application are Mobile phones.

Mobile should be touch support, have minimum of 300Mb of

memory, Supports GPS, WIFI, or mobile operator services. For

software part it should be able to run applications that supports touch

interfaces etc. The software or firmware should be either Android,

windows, IOS etc. For memory efficient it is assumed that this

supports external SD Card as well.


19.12.14 9/17

4. CONTENT DIAGRAM AND NAVIGATION MODEL

4.1 Content Diagram


19.12.14 10/17

4.2 Navigation Model


19.12.14 11/17

5. IMPRESSION DESIGN

5.1 Mood Board

Although the design process did not use the actual moodbard design,

the application design follows the mood board design principles. The

team memebers have applied to stick the principles. Some of the

elements and their description can be listed below.

Font Times new Roman

Font size 15 Headings, 12 Normal Fonts

Font color Black, White depending upon

background colors

Design Structure Header-Breadcrumb-Main Area

Form Elements size 200px X 40px

Bakground color Blue and white

Icon size 64X64 Pixels

UI Elements Separation color Blue Backgrounds

5.2 Color Design

The application uses only three color combination as Black, Blue and

White. Blue color is used as background in most UI Elements and

white as foreground text. The concept is to reduce the use of too many

colors that might bring odd look and distractions. The color is based

on the principles and acceptance in different cultures. As blue color is

most adjustable to human eyes this color is picked for design purpose

and blue color has been proved scientifically to be more pleasant than

other colors. The font is size is normal and uses black color when

white backgrounds are used, the logo or icon uses the same color

principles. The headers or breadcrums uses the blue color as

background so that it emphasizes the user where he/she is. Although

on prototype we have not included the color combination. We have


19.12.14 12/17

added the color concept in design snapshots that we designed on

photoshop.

5.3 Icon design

The application contains the minimal use of Icons. Icons are only used

on the Main view page which will then let user to select different

tasks like booking, customer support call, Virtual map etc. The icons

are accepted in every culture and maps 64X64 pixel in size which is a

icon standard. The icons are black in color with sharper effect that

helps user recognize the functionality at glance and are download

from free internet sources.

5.4 Design Patterns

The application design started with collaborative discussion on the

topic (Tampere railway station navigation problem). We listed out our

solution and started viewing the current avalilable applications. The

design practice we applied on designing system was based on the

principles learned on the group work activities and learned from book.

The first phase included low level fidelity design like paper sketch,

correction etc and then we drew the same concept on computer based

prototyping tools like just in min, pencil etc.. During whole session

we tried making same layout standards, constant fonts, constant color

etc. Multiple changes were done on the design as per feedbacks from

other members and evaluaters.


19.12.14 13/17

6. SCREENSHOTS

Figure :- Main login Page, Main page, Top Drop Down Menu, Virtual Train Station View


19.12.14 14/17

7. PROTOTYPE

Fig. Sequenced different screens of book ticket and view ticket.

The detailed interactive prototype con be found on Balasmiq site created for students

of TUT. Group number 13. There were few problems with Balasmiq regarding

shapes that were not available. User is not allowed to create thier own shapes in mind

but have to use the availble shapes only.


19.12.14 15/17

8. DESIGN DIARY

With the collaborative work it was helpful to communicate with our

ideas and get feedbacks from each other. The main knowledge gained

was to design new system that could ease all people to use it from

user’s perspective. As a startup, we viewed the existing applications,

then we started sorting out the good and bad parts of the system. The

next phase, we started drawing sketches on paper. All sketches were

collected, evaluated and after discussion we agreed to draw final

figures with specified colors and tools that would maintain similarities

between designs. For the drawing purpose we used tools like pencils,

Justinmind, Photoshop etc. The icons used are from some websites

sharing free icons and for some icons to maintain similarities we drew

some icons by ourselves. The final approaches to work on right

direction came from group work like discussions, paper prototype,

Mood board etc. and later we came to learn about the most advanced

design frameworks like Balasmiq, QT etc that helped to learn the real

prototype, show navigation and make a feel of how real system would

look like.The overall outcome from the group work helped to know

the design process, tackle new design challenge, effective use of tools

to create creative designs etc.

8.1 Timeline

Date Group work Activities

10.11.2014 Formed Group

14.11.2014 Discussion on Topic with Group

15.11.2014 Created Mockup from own minset and merged

16.11.2014 Combined the first mockup and printed

17.11.2014 Submitted our first phase work

24.11.2014 Added Sign in as guest button and made changes on phase on

documents as pe suggestion from TA like users, tasks, navigation

etc.

28.11.2014 Created paper mockups and tested on class with other groups

30.11.2014 Finished Prototype

2.12.2014 Submitted our final Prototype

4.12.2014 Listed out new solution for comments from evaluation teams

6.12.2014 Division of work before exam

16.12.2014 Report work and Modification work continued after exam


19.12.14 16/17

17.12.2014 Merge of documents and final check for submitting

18.12.2014 Final report submission


19.12.14 17/17

9. REFERENCES

Virtual Tour Panoramas

http://www.mnh.si.edu/panoramas/

http://www.mnh.si.edu/vtp/2-mobile/001.html


VR Finland

https://www.vr.fi/cs/vr/en/frontpage

https://www.vr.fi/cs/vr/fi/ostohairiolomake

https://www.vr.fi/cs/vr/en/long-distance_timetables

https://itunes.apple.com/us/app/vr-

mobiili/id623736563?mt=8

http://www.mnh.si.edu/panoramas/


https://www.vr.fi/cs/vr/en/frontpage

https://www.vr.fi/cs/vr/fi/ostohairiolomake

https://www.vr.fi/cs/vr/en/long-distance_timetables

USER INTERFACE DEVELOPMENT FOR TRAIN SERVICES - TAMPERE CITY

Education

Transcript of USER INTERFACE DEVELOPMENT FOR TRAIN SERVICES - TAMPERE CITY