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] bikram.thapa@student.tut.fi
Shukadev Dahal [245037] shukadev.dahal@student.tut.fi
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
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

USER INTERFACE DEVELOPMENT FOR TRAIN SERVICES - TAMPERE CITY

More Related Content

What's hot (6)

Similar to USER INTERFACE DEVELOPMENT FOR TRAIN SERVICES - TAMPERE CITY (20)

Recently uploaded (20)

USER INTERFACE DEVELOPMENT FOR TRAIN SERVICES - TAMPERE CITY