HCI - Individual Report for Metrolink App

29
11033545 - Darran Mottershead Individual Report Background & Motivation Justification of the new Application There is currently a Metrolink application on the App stores which provides very little useful functionality. On the iOS platform the application has more 1 star ratings than it does 5 star ratings. The functionality that is included on the current application has been executed poorly, any line status issues are enclosed in a block of text, making it difficult to see what issues may effect your specific journey. The application also allows you to plan your route and save anything route as a favourite, however there is no ticket purchasing method. I am creating the renewed Metrolink application to remove some of the less than useful functionality, and add additional functionality that users will actually appreciate, and use in their daily commute. The mass of people are quickly moving to the mobile platform, this includes the majority of businesses, and especially the general public, as mobile devices and usage is on a yearly rise. Other Applications Northern Rail There are a number of well designed application on the app store on the iOS platform, including the Northern Rail application, which I have taken some design cues from. The design is easy to understand, and some features are very well executed. All ticket prices are shown for any one journey (cheapest first), previous searches can be saved or removed, and a small green or amber line indicated whether a train is on time or delayed. thetrainline This application has very recently just implemented ‘mobile barcode tickets’ on the 19th November 2013. The features I like the most include live progress, which shows where the train you are looking for is at this moment in time (station and platform number). Live departures, much like Northern Rail, indicate whether a departure is set to be on-time or delayed, with minimal confusion. 29/10/2013 / 1 29

Transcript of HCI - Individual Report for Metrolink App

Page 1: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Individual Report!

Background & Motivation!

Justification of the new Application!There is currently a Metrolink application on the App stores which provides very little useful functionality. On the iOS platform the application has more 1 star ratings than it does 5 star ratings.!

The functionality that is included on the current application has been executed poorly, any line status issues are enclosed in a block of text, making it difficult to see what issues may effect your specific journey. The application also allows you to plan your route and save anything route as a favourite, however there is no ticket purchasing method.!

I am creating the renewed Metrolink application to remove some of the less than useful functionality, and add additional functionality that users will actually appreciate, and use in their daily commute.!

The mass of people are quickly moving to the mobile platform, this includes the majority of businesses, and especially the general public, as mobile devices and usage is on a yearly rise.!

Other Applications!• Northern Rail!

There are a number of well designed application on the app store on the iOS platform, including the Northern Rail application, which I have taken some design cues from. The design is easy to understand, and some features are very well executed. All ticket prices are shown for any one journey (cheapest first), previous searches can be saved or removed, and a small green or amber line indicated whether a train is on time or delayed.!

• thetrainline!

This application has very recently just implemented ‘mobile barcode tickets’ on the 19th November 2013. The features I like the most include live progress, which shows where the train you are looking for is at this moment in time (station and platform number). Live departures, much like Northern Rail, indicate whether a departure is set to be on-time or delayed, with minimal confusion.!

!

29/10/2013! � /� 1 29

Page 2: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

The Application I am Making!The application I intend to create will be built from the ground up, as I feel there are currently too many unnecessary, or poorly implemented features, to simply tweak the current application. However some elements will remain unchanged such as the logo and colour scheme.!

There is no valid reason to change either the logo or colour scheme, as these are both highly associated with Metrolink, and I wish to avoid as much confusion in the change as possible.!

The general application features will have similar features to many of the other travel/commuting application currently on the market, so users do not feel alienated by a barrage of differences. The navigation style will be simple, and conform to Apple’s standards (iOS platform). All standard gestures will be implemented, which is now the norm for touch-enabled devices.!

The application will however take advantage of some features that other applications have yet to use. The inclusion of Passbook on the iOS platform, where ticket QR codes can be stored, will be taken full advantage of. The application will also ask permission to access the devices clock, or microphone to provide alerts and alarms when a user approaches their destination. Location services will be used to provide users will real-time updates and closest stations available to them. These are additional features which are optional, but limitations will apply if a user does not allow the application access to these services.!

User Requirements!

Features!The application will be fully featured, and attempt to provide the user with a service which is easy to use, and can be used by as many people as possible. The application will:!

• Be a cheap (if not free) alternative to current application on the app stores.!

• Reduce the amount of time a user needs to spend on the application to complete tasks.!

• Show quick real-time updates on the home screen, via an interactive status bar.!

• Be up-to-date with great simplistic visuals !

• Allow a user to purchase multiple tickets for multiple people at any one time.!

• Incorporate a QR code system, to allow for quick display of tickets to inspectors.!

• Option to save a receipt of ticket purchases for business expenditure.!

• Allow for quick purchasing of a most recent ticket, or most travelled journey.!

• Use location services to provide information that is both relevant and up-to-date.!

• Have the option to set an alarm on arrival (or at a specific time) for a chosen destination.!

29/10/2013! � /� 2 29

Page 3: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Purpose of Features!All of the featured that I have listed above will be included to enhance the ease of use for any user. Their inclusion can easily be justified.!

• Price!

The price of an application can easily sway a user’s decision in their purchase. Many applications have a starting point of £0.69, with the inclusion of in-app purchases. As there are already applications on the market which claim to provide an easy Metrolink usage experience, people are more inclined to test out a free application, more than a paid one.!

The free price tag of the new Metrolink application, will increase the amount of daily users, and therefore increase ticket sales in the long run.!

• Time spent on the application!

If an application is cumbersome to use, or it takes too long to complete a specific task, which users expect to be simple, users will begin to search for alternative applications.!

By reducing the time a user has to spend on the Metrolink application, they will be more inclined to keep the application, as they know they can plan their daily or weekly journeys, very quickly and on the go.!

• Real-time updates!

It is especially important with travelling applications, that a user should be able to know at all times, their journeys progression. If their expected arrival time for a destination is delayed, or even on-time, a user should be able to find this out to tell family or friends, who may be waiting for them on arrival.!

This feature will also allow for a busy schedule, and give plenty of time for a user to make new arrangements if there are any delays.!

Visuals also help to quickly indicate the status of a journey, usually green for on-time and amber/red for delayed. This, with a specific number for time delay, is more helpful than a block of text explaining the current issue, as generally people do not care about the nature of their delay.!

• Multiple ticket purchasing!

If a user wishes to purchase numerous tickets (the same ticket, or different) there should be an option to do so. A feature I will name ‘recurring ticket purchases’ allows a user to purchase the same ticket for 5 (week) days, this is perfect for an employment situation, where destination and timing is consistent.!

Another feature called ‘week plan’ will allow a user to purchase 5 tickets (again, week days only), this would be more helpful for someone such as a student, where journey times differ on a daily basis.!

!

29/10/2013! � /� 3 29

Page 4: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

• QR codes!

With the inclusion of QR codes, users reduce the amount of items they need to carry with them. This feature eliminates the physical ticket, and the need to go to a ticket desk or machine and buy a ticket on the day of their commute. QR codes also allow the use of virtual wallets and other services such as Apple’s Passbook, the ticket can be saved for later, and cannot be lost or stolen. The virtual QR code is just a more simplistic and elegant form of payment.!

A QR code can also be shared via email or other service to another device at any time, once scanned the QR code could become invalid, reducing ticket forgeries or the reusing of physical tickets.!

• Receipts and business expenditure!

If a user of the application has bought a ticket as part of an agreed business expense, they will more than likely have to prove the cost of their purchases in order to be funded for their travels. Again this would usually require holding on to the physical ticket (which has the potential to be lost or misplaced). With receipts a user could save any ticket expenses as a receipt, which would be forwarded to the email address they provided. The receipt could then be used as evidence of payment, and shown to their employer.!

• Recent tickets and journeys!

There may be users who only perform a small variety of journeys, possibly to their place of work, home and some other occasional locations. It would be completely unnecessary if the user had too input all the information every time they wished to travel, if they are consistently making the same journeys.!

The inclusion of the most recently purchased ticket, most travelled journey, or the option to save a number of favourite journeys would make purchasing a ticket for a specific journey quick and efficient. This would eliminate the need to re-enter the same information for a journey multiple times.!

• Alarms on arrival!

On long journeys it is not uncommon for commuters to rest, or even fall asleep. There is always the risk of missing your destination if this happens, creating stressful and unnecessary journeys back to the destination you intended to get off at.!

Using location services, an alarm could be set for a specific destination, so that the user will be notified when they have reached their destination (asleep or not). Alternatively the user could set an alarm to go off 5 minutes before they reach their destination, or any amount of time prior to arrival, this again would use location services.!

!

29/10/2013! � /� 4 29

Page 5: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Features in Context of Personas!• Price!

Price is usually a factor of any purchase no matter what situation somebody is currently in. Making the Metrolink application free would appeal to the largest audience possible, especially to consumers who have a budget they abide by (£0.69 is not a lot, but is sometimes unjustifiable for some people). A credit/debit card does is not needed for this application, and therefore is more widely accessible.!

• Time spent on the application!

An average employee would prefer not to spend longer than necessary on a tedious task such as purchasing tickets for their commute, considering this is either a daily or weekly occurrence.!

The smoother the process is to purchase a ticket and use the application in general, the more likely the average employee will become fond of the application, use it more, and potentially recommend it to others.!

Students generally understand technology and wish to use the application for their needs as quickly as possible, they are likely to be more interested in listening to music, or browsing social media etc.!

OAP’s may not be fluent or tech savvy with such applications, however the quicker it is to complete a task, the simpler the application may appear. Simple navigation and clear instructions will help eliminate confusion, and prevent extended unnecessary usage of the application. !

• Real-time updates!

Having the ability to quickly check any updates on the fly would reduce the time spent within the application described above, or any additional searching on Metrolink’s website from a browser.!

The updates would allow the average employee plenty of time to contact work if their journey is delayed, this is also true for students and OAP’s. A student could know in good time if they will be on time for any lesson arrangements, and if not, how late for the lesson they would be. OAP’s may not have such a strict timetable, however they may still find it useful to know if they will arrive at their destination on time or not.!

The updates mainly allow for any prior arrangements to be altered if there are to be delays affecting the journey, this includes meetings, child pick-ups, and many other lesson or work related activities.!

• Multiple ticket purchasing!

The ability to buy more than one ticket at any time, is a feature included to enhance the user experience of all personas. It is a feature that is widely used amongst other travel applications.!

It would be tedious to expect the consumer to purchase tickets separately, especially if they already know their weekly timetable heard of purchasing their tickets. The feature allows the same ticket to be purchased a set number of times (average employee), where time/destination remains constant. Multiple differentiating tickets can also be purchased at the same time (student), where timetables change on a daily basis. !29/10/2013! � /� 5 29

Page 6: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

• QR codes!

Having downloadable QR codes will help all persona’s as it eliminates the need to obtain a physical ticket. The average employee may not have time to purchase a ticket, or would be late if he were to do so. QR codes are bound to an account, and therefore can be purchased ahead of time and accessed on the fly, the ticket holder does not even have to pick up the pre-paid ticket at an allocated ticket-machine.!

Likewise students may have too much literature or other items on their person to fumble around for a ticket. OAP’s may feel vulnerable about publicising the whereabouts of their purse or wallet, as this is likely where a ticket would be kept.!

• Receipts and business expenditure!

This feature is centred purely around the primary persona, business expenditure must be accounted and the average employee may have to provide evidence of their travel costs.!

The receipts can be emailed directly to the email address the user signed up to the Metrolink application with (this could be a business email). If the email address is personal, the receipt can be accessed at any time, and forwarded to the employee’s appropriate department at their place of employment.!

• Recent tickets and journeys!

The average employee’s journeys will vary ever so slightly, it is common that the same journey will be made monday through friday, unless their occupation demands otherwise. Therefore it would make sense for the user to have the ability to re-purchase a ticket for their most recently travelled journey, or most travelled journey. This will significantly reduce the tedious process of inputting ticket numbers, time of travel and arrival/departure destinations.!

Students and OAP’s are more likely to have more varying journeys in comparison to the average employee. However having the ability to re-purchase the tickets as described above is still more appealing than not having the option at all. !

Favourites will also be an included feature for a user to store data about a number of different journeys. It will work similarly to the recent ticket and journey purchases, however they will be dynamic, and changeable at any time.!

• Alarms on arrival!

Having the functionality to set an alarm, ensuring a destination is never missed, is a feature that will benefit every user of the application. Whether the average employee is engrossed in completing a spreadsheet or word document, the OAP is reading, or the student has taken a quick nap, they will always be alerted via location services that they are approaching their desired destination.!

Alarms can be played purely through headphones/earphones, to reduce intrusive and excessive noise to any other commuters, the alarm will also have a vibrate function.!

This feature is entirely optional, and the user will only benefit from turning this feature on if they deem it necessary, the feature will be off by default, and can be toggled at any time.

29/10/2013! � /� 6 29

Page 7: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Personas!As the Metrolink service is a widely accessible method of transportation, it would be unfair to to limit the applications use to any one persona, and ignoring another. However once all of the user requirements had been listed, I decided to commit to a primary and secondary persona. !

• Primary Persona: Average employee, who may or may not be a parent / guardian.!

Mark is a 31 year old parent to his 6 year old son Jack, he lives with his wife and son in Manchester. Mark personally uses the Metrolink service, 5 days a week, for multiple journeys. Marks’ schedule is very tight as he needs to take his son to school, and then quickly use the service again, to get another tram to his place of work. Mark relies heavily on the timing of the service, and needs to know whether there are any delays so that he can get to work on time, as well as pick his son up after work / school has finished.

• Secondary Persona(s): Student.!

Susan is a 21 year old Student, who balances her part-time job as a waitress around her University timetable. She regularly uses the Metrolink service when her boyfriend Andrew needs the car. This can happen at very short notice, and sometimes Susan will need to be able to check the tram times in a short period of time, to be on time for any class / work arrangements. Susan is technically-minded and prefers as much information about upcoming tram times, and journey delays as possible. Being able to book tickets online would save her a lot of time, instead of needing to queue to purchase tickets. Susan knows hew University and job timetables a week in advance, and would find it easier to purchase all the necessary tickets at the start of the week. It should be acknowledged that the user requirements of the primary persona, will not suffer due to any alternative user requirements of the secondary persona. Only if it is possible to enhance the user experience of the secondary persona, without hindering the primary persona’s experience, will additional features be implemented.

• Secondary Persona(s): Elderly person (OAP).!

Janette is a 63 year old pensioner from Bury, who regularly needs to use public transport to get to her check-up meetings, appointments and other family occasions. She does not have any transport of her own, and prefers not to use a taxi service. For her 63rd birthday, Janette received a used iPhone 4s from her daughter Penny, who thought Janette could use the smartphone to help with her travelling. She will usually use the Metrolink service twice a day, around 3 - 4 times a week, Janette is not technically gifted, and would prefer something very simple to help her with her journeys.

!

29/10/2013! � /� 7 29

Page 8: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Scenarios!• Primary Persona: Average employee, who may or may not be a parent / guardian.!

Mark would use the Metrolink application on his smartphone in the morning, turn recurring ticket purchases on, and fill out the Buy Ticket form with all the necessary information. The recurring ticket purchases feature effectively purchase the same ticket, 5 times over (Monday - Friday).!

After Mark has confirmed his purchase, checking all the information is correct, the ticket purchase would be successful. The QR codes for all 5 purchased tickets could be found within the QR Codes page within the Metrolink Application. Mark would also forward the email receipt to his employer, as proof of purchase for any business expenditures.!

Mark would not have to purchase any tickets again, or even use the application for the remainder of the week, unless he wanted to buy any additional tickets, or to show an inspector the QR codes.!

Mark could simply open the application at any time during the day to check the arrival times of the trams, and any possible delays in the service. This is done at a quick glance at the status bar on the bottom of the home screen.!

• Secondary Persona(s): Student.!

Susan could use the Metrolink application at any time during the day to quickly purchase a ticket if she is unable to use the car. Anytime she needs to purchase a ticket for business travels, Susan would simply save the QR code and receipt of her purchased ticket, as evidence of travel costs.!

Once Susan knows her timetable for the week, she would use the Week Plan feature, allowing the purchase of multiple differentiating tickets. Susan would purchase 5 tickets (Monday - Friday), with varying ticket times / destinations based on her requirements per day.!

Susan may have to be prepared to make her own travel arrangements to different locations, she would open the application and check the Tram Times page from the Home screen. Scheduled journeys and current journey’s can be checked by Susan, at a quick glance on the home screen of application, when she is in a rush or busy at university.!

• Secondary Persona(s): Elderly person (OAP).!

As Janette is not a huge smartphone user, she would prefer to spend as little time as possible, within the application to complete her ticket purchasing. Janette would check the ‘recurring ticket purchase’ option, to make multiple ticket purchases at one time. Janette would then be assured that her journeys are paid for.!

Janette could also edit the settings within the Metrolink application to get confirmation emails or text messages on ticket purchases. Notifications in her chosen format can also be set for journey disruptions, in case Janette has to arrive at a destination for a specific time.!

As Janette usually makes the same journeys each week, she could navigate to the Smart Journeys feature. From here Janette could purchase a ticket for her most recent journey, or most travelled journey, without the need to fill in the entire Buy Ticket form again, which would reduce the time she spends within the application.

29/10/2013! � /� 8 29

Page 9: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Storyboards!• Navigation Diagram!

Below is the navigation diagram of the Metrolink application, the navigation is subject to change if additional features are implemented, prior to the finalisation of the design.

29/10/2013! � /� 9 29

Home

Tram Times

Week Plan

Smart Journeys

Line Status

Buy Ticket

Contact Us

App Info

Settings

QR Codes

Confirm Details

Mon Tue Wed Thur Fri

Purchase Success

Favourite Most Recent

Most Travelled

Selected QR Code

The home screen has 9 buttons which link to the main features of the Metrolink application.!

For each screen that branches off from the home screen, there will be a button to go back. Likewise this can be found on every screen, to allow the user to return to a previous step.!

The lines show a direct link through the screens, lines with a small circle on it, mean the screens are options found within the previous screen (only one will be chosen).

Purchase Success

Page 10: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

• Screen Design Concepts!

Home

The home screen is the most versatile screen throughout the entire Metrolink application. The initial screen that a user is presented with can be seen above (indicated by the larger image). The main features of the application can be found on this screen at first glance. !

Tapping the orange square in the top right, allows additional functionality to slide in from the right hand side, this will include application settings, contact us and further information about the application.!

The lower section of the screen is a dynamic notification styled area. The user may swipe left and right on this area, to quickly see information about their current or schedules journeys. The information that will be displayed will include the line status, any delays, and arrival times.!

There may be some interface changes on the final prototype, such as a background image, or some colour scheme alterations.

29/10/2013! � /� 10 29

Page 11: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Buy Ticket

The above shows the direct path a user would take if they were to use the buy ticket feature. Firstly a user would enter all of the information about their ticket purchase, including destinations, passengers, time and return type.!

Once the necessary information has been provided, pressing next will take the user to a static confirmation screen, that will display the information the user entered. This allows the user to check their ticket, and make any changes if required.!

The user will then press purchase, this may display a pop-up box for the user to enter their credit/debit card security number, unless they have specified otherwise within the settings.!

After completing this final step, the purchase success screen will be displayed, allowing the user to get their ticket receipt via email (proof for business expenditure), and assuring the user the QR code for their ticket has been saved.

29/10/2013! � /� 11 29

Page 12: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Week Plan

Week plan is essentially 5 buy ticket screens, this feature currently works for the 5 working days within a week (monday - friday). This feature will allow users to select multiple differentiating journeys, for each day. Pressing the next button will move through the week days, until the details of 5 tickets have been completed.!

Similar to the buy ticket feature, the user may be prompted to enter their credit/debit card security code, based on the application settings they have chosen. QR codes, and the option to send the ticket receipt via email is also available.

29/10/2013! � /� 12 29

x5

Page 13: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Smart Journeys !!!!!!!!!!

Favourites is first of 3 options, the number on the right hand side shows how many times the user has purchased the journey. Pressing the add button will allow the user to add a new favourite journey to the list.!

The most recent and most travelled options are not editable by the user. These features automatically update based on trends of ticket purchasing performed by the user. Once the user purchases a new ticket, their most recent will change to accommodate this new purchase.!

The user may add any journeys that they find themselves frequently using, to the favourites list, for easier access. Most recent and most travelled show a detailed breakdown of the journey, all information concerning this specific ticket purchase can be seen on-screen.!

The purchase button allows quick access to a re-purchase of the specific ticket, confirmation will be required by the user. This is an incredible faster way to purchase a ticket, in comparison to entering all the details of the journey manually.

29/10/2013! � /� 13 29

Using the smart journeys feature from the home screen, will allow the user to choose from 3 options.!

Favourites can be edited at any time, they can be removed or new ones can be added.!

Most recent and most travelled automatically update, based on the users ticket purchasing.

Page 14: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Line Status

The line status screen is visually different from the majority of other screens found within the application, as it is more brightly coloured and easily recognisable. This is intentional, as the user can quickly identify individual lines by their colouring.!

There were multiple ways that the delayed status could be shown, however a small red or green indicator by the side of each line seemed the most simplistic and efficient way.!

On the final prototype, numbers may be included within these indicators. This will provide a more precise experience for the user, as they will know exactly how long their journey is delayed by.

29/10/2013! � /� 14 29

Page 15: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

QR Codes

The QR codes feature displays a wallet-styled interface, with individual QR codes and their journey information easily distinguishable. This may be redesigned in the final prototype to remove any ‘skeumorphic’ design elements (the mimicking of real world objects).!

The number next to the QR code simply shows how many tickets the QR code is valid for.!

Once the user has selected a QR code, the next screen to be presented simply shows an enlarged QR code in its entirety. This will allow the QR code to be scanned by an inspector. The journey information will be displayed, accompanied by legal information concerning the QR code.

29/10/2013! � /� 15 29

Page 16: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Contact Us

Application Information

!

29/10/2013! � /� 16 29

The contact us screen allows users to quickly view all of the information about Metrolink, if they wish to get in touch for any emergency issues, complaints, or improvement suggestions.!

Quick links to Facebook and Twitter allow for an alternate source of updates about Metrolink, and any line status issues.!

As many users may generally not be interested in contacting Metrolink, this screen will be located within the sub-menu on the home screen. The sub-menu slides in from the right hand side when the user taps the list icon.!

The application information screen is simply a tool a user might use, if they are unsure of how to complete a specific task within the application.!

The application has been designed to be very simplistic, yet highly efficient. It is unlikely that a user would even need to view this screen, however it has been included just in case.!

As many users may generally not be interested in the application information, this screen will be located within the sub-menu on the home screen. The sub-menu slides in from the right hand side when the user taps the list icon.!

Page 17: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Settings

From the settings screen a user will be able to log in with an existing Metrolink account, or sign up. The orange arrow shows that once an option has been chosen (in this case ‘I already have an account’), the appropriate login items will be displayed below.!

Once logged in a user will be able to manage their payment details, by entering their valid credit/debit card details. The security prompt feature requires the security code of the selected credit/debit card, before a payment can be made.!

Alerts on arrival work in conjunction with location services, and will automatically be disabled if location services is turned off. The alert will play a ringtone at full volume, when the user has arrived at their chosen journey’s destination.!

The home station allows a user to choose the station which is closest to their home location, this feature then may be used to determine the quickest route of travel, to take the user home.

29/10/2013! � /� 17 29

Page 18: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Final Prototype!I used Axure RP Pro 6.5 to produce the final prototype of the redesigned Metrolink application. I decided to use this wireframe program as it provides a closer feel to a live application on iOS, with touch gestures and variable saving. I felt that using a program such as Photoshop to produce static images, would not be dynamic, and would not show off the full potential of the application’s best features.!

Functionality of the Software!

Axure RP Pro 6.5 allows some functionality over simple photo editing software to produce prototype designs, as this is a Wireframe tool. Functionality elements are more realistic and can be tested more positively in a real-world environment, as swipe and tap gestures are supported.!

As shown below (left) ‘Cases’ perform a set of actions, which result in a fluid performance of how a designer may expect the application to operate. Below (right) shows the site map of the Prototype application, which is very similar to the navigation diagram designed in the storyboards section of this report.!

The site map provides a complete overview of every screen found within the application, and how they are connected (linear), such as the Week Plan. All screen are listed under the parent folder of ‘Home’, as this is the screen a user is presented with when they open the application.

29/10/2013! � /� 18 29

Page 19: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Home

29/10/2013! � /� 19 29

The Home screen allows quick access to all of the other features found within the application. Navigation buttons are centralised providing ease of use, the number of steps to access each feature is also extremely low (usually one).!

The interactive, dynamic notification field at the bottom of the screen allows users quick access to information about their current and schedules journeys.!

Instead of using the Line Status feature and finding their journey, the application pulls information about purchased tickets for the user. The user can then either swipe left or right, to show the delayed and on-time status of their journey, shown below.

Page 20: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Buy Ticket

29/10/2013! � /� 20 29

The Buy Ticket feature allows the user to quickly choose a number of variable, to which they wish to customise their journey for, including destinations, passengers and journey time.!

This information is visible by default, but only the necessary information is displayed. If the user wishes to purchase a Return ticket, they may use the checkbox, which then provides additional information, relevant to this element of the ticket purchase (shown below). Unchecking the Return checkbox will hide the irrelevant information, as the use does not wish to see content that does not concern them.

Page 21: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Confirm Ticket Purchase and Purchase Successful

29/10/2013! � /� 21 29

The Confirm Ticket Purchase screen represents all of the information the user entered, this provides some form of error prevention, as a user has another opportunity to recognise any mistakes they may have made.!

From this screen the user can then continue to purchase the ticket, or return to the previous screen, where they can edit their details.!

If the user continues with the purchase, they are presented with the Purchase Successful screen, this shows the ticket cost and a QR code unique to the ticket purchase.!

The QR code is saved automatically, this screen serves as an opportunity to allow the user to save a ticket receipt.!

As shown below, the checkbox will ensure a receipt of the ticket purchase is sent to the email address that the user provided, when they set up their account.

Page 22: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Tram Times

29/10/2013! � /� 22 29

The Tram Times screen allows the user to quickly find out the times for a specific journey, using the From and To drop-down fields.!

Using the Get Info button, a message is displayed showing the arrival time of the tram, for the specific journey the user searched for.!

As the user has already input some information about the journey they wish to undertake, they can buy a ticket from this screen.!

This saves the user from entering information multiple times, as the From and To information has already been supplied.

Page 23: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Week Plan

29/10/2013! � /� 23 29

Using the Week Plan feature takes the user to 5 similar screens (Monday through Friday). These screens contain the same content as the Buy Ticket screen, where users can buy tickets for an entire week.!

As shown, using the Week Plan feature provides a slight discount for the user, giving an incentive to use this feature. The consumer receives a discount, and the Metrolink service may see a rise in ticket purchases.!

Enhanced security features such as the user entering their bank card security code, provide further protection in case of theft.

Page 24: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Smart Journeys

29/10/2013! � /� 24 29

The Smart Journeys screen is quite dynamic, as the journeys it shows are relevant to the user’s ticket purchasing habits.!

The Most Recent journey will change whenever the user purchases a new ticket, as the user may wish to make this journey again.!

The Most Travelled journey will change depending on how often a user makes the same journey. This feature essentially shows the most popular journey travelled by the user.!

Below are the screens a user will be presented with once they view the details on either feature. !

Additional security features such as bank card security code, ensure the user cannot accidentally purchase a ticket. The security feature also aids the user if their smartphone is lost or stolen.

Page 25: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Line Status

29/10/2013! � /� 25 29

The Line Status is the most colour-centric screen, as users would only tend to use this feature if they intend to quickly found out information about their journey.!

Individual lines are colour coded for quick interpretation. Likewise, the key shows that a green icon stands for ‘On Time’, red for ‘Delayed’. The delayed icon also incorporated a number, displaying the approximate number of minutes a line is delayed by.

Page 26: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

QR Codes

29/10/2013! � /� 26 29

The QR Codes screen holds all of the QR codes for tickets purchased by the user. Out of date purchases are automatically removed, and the QR codes for any newly purchased tickets can be found within this screen.!

Each QR code provides some detail about the ticket purchase, such as the date it is valid for, the travel route and the number of tickets (passengers).!

Tapping an individual QR code will bring up a full screen QR code, that can easily be scanned by a ticket inspector

Page 27: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Contact Us

29/10/2013! � /� 27 29

The Contact Us screen provides quick links and information concerning contacting Metrolink.!

The Facebook and Twitter feeds provide an alternative method of status updates.!

The address, website, email and telephone allow multiple conventional methods of communication, which the vast majority of users will be able to use.!

Operation times for telephone lines are also listed, to ensure users of the Metrolink service are provided with great customer service.

Page 28: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

App Information

29/10/2013! � /� 28 29

The App Information screen simply provides some information on the terms used within the application, and how some features operate.!

A primary feature of the application is to purchase tickets on the move, which is described firstly.!

The functionality behind Smart Journeys and why the information they provide may change is also shown.!

User alterations that can be found in Settings, is also briefly displayed, however the full description of this feature is found within the Settings screen.

Page 29: HCI - Individual Report for Metrolink App

11033545 - Darran Mottershead

Settings

29/10/2013! � /� 29 29

The Settings screen allows the user some control over features that can either be turned on or off.!

Currently the only feature is Recurring Ticket Purchases. Using the checkbox a user can decide whether they prefer to use this feature or not, which purchases 5 tickets (Monday through Friday)!

The same ticket is purchased, which is convenient for office workers or consumers who make multiple journeys to the same destination at the same time.!

This feature excludes Saturday and Sunday, due to its intended use. Saving any changes will be reflected throughout the application.