hastings student advisor - design documentation · final design ... the town, a checklist and also...

CI262: The Mobile Context

Hastings Student Advisor - Design documentation Date May 2016 URL http://itsuite.it.brighton.ac.uk/kj130/a2 Team Name Team 2 Team members Name Student Number Daniel Povey 14824979 Krisztián Jankó 13836910 Natasha Robertson 07825554 Maté Barna 13819685 Matt Morton 14827163


of 14

Table of Contents

Table of Contents .................................................................................................................... 2

1. Elevator pitch ................................................................................................................... 3

2. Competition and Inspiration ...................................................................................... 3

3. Target audience .............................................................................................................. 4

4. Personas ............................................................................................................................ 4

5. Scenarios ........................................................................................................................... 4

6. Wireframes ....................................................................................................................... 5

7. Final Design ...................................................................................................................... 8

8. Minimum viable product (MVP) ............................................................................. 10

9. Future features ............................................................................................................. 10

10. Discrepancies ............................................................................................................ 11

11. Walkthrough ............................................................................................................. 11

12. Work Log .................................................................................................................... 11

13. Media catalogue ....................................................................................................... 12

14. References ................................................................................................................. 14


of 14

1. Elevator pitch Our project is an application designed to be used by students in their first week at university. It will provide information for first year students arriving to our majestic Hastings campus. The site will include; events in the area, points of interests around the town, a checklist and also a quiz on the town. Our main focus is to integrate a QR scanner that the students can use to scan various QR codes around the university.

2. Competition and Inspiration https://www.mystudylife.com/ - A brief synopsis from the official website of the mystudylife app. “BACK IN 2010, OUR FOUNDER HAD JUST GRADUATED FROM SECONDARY SCHOOL AND STARTED STUDYING FOR HIS A-LEVELS. FRUSTRATED BY THE COMPLEXITY AND COMBINATION OF LEARNING PLATFORMS, INTRANETS AND PAPER PLANNERS, MY STUDY LIFE WAS BORN.” (MYSTUDYLIFE.COM , 2016) This app allows the user to set tasks, organise their time and also have a time-table of their day kept to enable students to keep track of their revision and also assignments. This inspired us to create something similar, however we were aiming for an app that allows student to find their way around the campus, we could have allowed them to keep track of their daily timetable and their own assignments in one way. https://www.thetrainline.com/mobile/app/ - #1 downloaded train app, join over 9.4 million people. The trainline app also inspired us for our app, we wanted to make our university induction week app similar to the set-up of the trainline app, this being to allow the user to input two locations and get directions between the both of them. We also wanted to enable QR functionality to our app, this being so the user can use a QR code or take a picture of the QR code and it automatically navigates to the related page.

https://www.mystudylife.com/

https://www.thetrainline.com/mobile/app/


of 14

3. Target audience

Target Audience – Well our target audience is most definitely new students to University of Brighton, it’s an app for those who are new and it’s their first week of university. We thought that our target audience would be both Male and Female Students anywhere from 18 to 30.

4. PersonasInclude at least two personas that exemplify your target audience. Keith Keitherson is from London, studying Internet Computing. Keith drinks, he is wanting to find the nearest pub to his location but cannot so he wants app to be able to find this pub. Also plays football. Cycles in to Uni. Works part-time in Sainsbury’s.

Natasha Small is from Hastings, she is in her first year of photography. Natasha is very keen to get involved in student life but doesn’t know her way around the university. She has a child and drives a car to university every day. She has a part time job as a nursery carer.

5. Scenarios

Keith Keitherson, is looking to find the nearest pub near his location, so he opens up our “Hasa” and navigates to the map section of our app, the current location should be tracked by his location services on his phone, the app will then show him all the pubs around him, he should be able to click or tap the pub and get directions to the pub of his choice.

Natasha Small opens up the “Hasa” and navigates to the QR scanner page, she scans one of the QR codes found around the university, and it automatically navigates her to the correct page on our app, detailing information on the room she is at.


of 14

6. WireframesBelow are the wireframes for our initial design for the mobile site.

Site Map

The site map shows the navigation between the pages. Users can navigate between all the pages seamlessly from wherever they are on the site.

The pages designed are; Home, Social events, Checklist and QR reader.

Homepage The homepage was designed to include information about events and their location, as well as any announcements that have been made by the university, similar to that of student central.


of 14

Social Events Although the day’s events are listed on the homepage, we designed a social events page which was to include information about all events scheduled and offer more details about them.

Checklist We decided to create a checklist as this site is meant for new students, this will give them a method of making sure they are ready to start their first week at university.


of 14

QR Reader This is one of the main parts of functionality for the site and will allow the users to scan QR codes and upload them to the website. The scanned codes will then display information about the rooms around the university.


of 14

7. Final DesignOur final design differs significantly to our previously designed wireframes. We wanted to make the site a lot more mobile friendly and in doing so we removed the multiple pages and instead used a single page with various buttons and functionality.

Below are screenshots of what our final website looks like.

Instead of multiple pages we decided to have a single page which held lots of content. This content would be hidden using the JQuery accordion which the user could then tap to expand. We felt that this was a better way to go about making the site because it is a lot easier to use on a mobile device.

This differs from the initial wireframe design because instead of focusing on the events of the students we decided to focus more on the functionality of the site and how they can use their phones with the site to create a more interesting experience.

This is what is shown when the welcome bar is clicked. It provides a short introduction to the app and also references our group.


of 14

This was most probably one of the hardest parts to implement during the creation of our site. The Place finder was created to allow students to select a destination which then opens up a dialog box and displays exactly where the destination is on google maps.

Initially our wireframes stated that the students would use this for social events and gatherings however we decided to focus more on getting the students to grips with their new location as they will be living and studying there for the next few years of their life.

On this page users can scan QR codes with their camera and upload them to the website, the website then processes it and opens a dialog box with information about the room the code is linked it.

We added some QR code examples for testing purposes. During testing we would take a picture of one of these codes on our mobile phones and it would be processed.


of 14

We also added a link to our documentation which can be will open a new tab and display it.

8. Minimum viable product (MVP)

The Application Must: 1. Implement QR Scanning of some sort – This meaning that there should be a

QR system of some sort that will relocate the user to the correct page or areaon the website.

2. The CSS/HTML should be elegant and tidy for the user – This meaning that thelayout of the CSS and HTML should be tidy and also follow a nice system ofcolour, along with a nice sleek usage of formatting.

3. There should be a map of some sorts implemented – This meaning thereshould be a map in the app/website, this can be taken from the google APIdocs.

4. The Users Location should be displayed – This meaning that in some way thereshould be a way to see the current location of the user, this can work incontribution with the map and allow them to get directions to a nearby place.

9. Future features

The application could: 1. Include a chat system, to enable students to communicate with each other. This

could be a chat system using php, or JavaScript or something similar like wedid for the web technologies unit we did.

2. We could implement a friend finder or buddy system. This would allow newusers to sign up to an account like Facebook and meet/make new friends withother new university welcome week students.


of 14

3. We could Implement a reward system or discount area in our app. This area willenable the new students to get special discounts and or a reward system thatgives rewards/discounts. This could be in the form of navigating around theuniversity and scanning different QRCode, these in turn give different amountsof points.

4. If we was to acquire an SSL certificate and our website was HTTPS we wouldbe able to retrieve the user’s location via google maps API. This is not possiblewithout a HTTPS connection because of googles newly introduced restrictionwhich has been enforced to protect people’s personal information (location).

10. DiscrepanciesThe maps feature works well however we were unable to retrieve the user’s location, this was because google have disabled the use of the API. This is a security issue and to be able to use the user location you have to obtain a SSL certificate which we did not have access to. Therefore we overcame this by setting the location value as the university seeing as the app is based on new students at the university. They can then enter a destination that they wish to go to which allows google maps to direct them to their destination. Which also have some buttons the pub etc. which when clicked will pop up a map and show you exactly where about it is.

11. WalkthroughWe have made it easy for you to be able to access the functions of our mobile app. The QR codes are readily available for you to be able to scan/upload so that you do not have to go and find them.

12. Work Log

Student Activity Period

Matthew Morton QR Scanner, HTML Report May 2016 Natasha Robertson Map Configuration/ QR

scanner May 2016

Krisztian Janko CSS/Photoshop/JQUERY May 2016 Mate Barna CSS/HTML/Map/QR Code May 2016 Dan Povey Wireframes/Map

Config/Report May 2016


of 14

13. Media catalogue

File name Mime type Size (Kb) Author Obtained from License

Bg.png Image/png 21.1kb Krisztian Janko

N/A N/A

Dialog1,2,3 Image/png 343 bytes each

QRstuff.com QRstuff.com N/A

Hd_bg & hd_bg_m Image/png 25.2kb, 18.7kb

Krisztian Janko

N/A N/A

Top_bg Image/png 17.5kb Krisztian Janko

N/A N/A

UoB_Leaf Images/png 6.95kb University of Brighton

Assignment Brief N/A

UoB_hasa Images/png 48.3kb Krisztian Janko (modified)


UoB_Logo_Hastings Images/png 665kb University of Brighton


UoB_H Images/png 21.3kb Krisztian Janko (modified)


UoB_Logo_Star Image/png 29.2kb University of Brighton


Hasa Image/png 41.5kb Krisztian Janko

N/A N/A


of 14

UoB_star Image/png 23.7kb Krisztian Janko (modified)



of 14

14. References

http://library.stanford.edu/blogs/digital-library-blog/2011/06/personas

http://stackoverflow.com/questions/29471641/load-location-in-google-map-on-href-click

https://github.com/LazarSoft/jsqrcode

https://developers.google.com/maps/documentation/javascript/examples/directions-simple

http://www.w3schools.com/googleapi/

http://library.stanford.edu/blogs/digital-library-blog/2011/06/personas

http://stackoverflow.com/questions/29471641/load-location-in-google-map-on-href-click

https://github.com/LazarSoft/jsqrcode



http://www.w3schools.com/googleapi/

hastings student advisor - design documentation · final design ... the town, a checklist and also...

Documents