Animation and coding #9
As my final product for the second half of the project, I created a website. However, since I had trouble uploading the website due to the size of the file I could not submit it as a website but as a demo video.
The video doesn’t come with annotations so I will be explaining what I have designed using HTML & CSS as well as javascript, jQuery and P5. The interface I have chosen to use is an iPhone X as it has the feature of 3D touch (the downside is that any other iPhone which does not have this feature cannot use the App but if I was to continue I would make it responsive for other devices as well). As you open the website, an iPhone X appears with automatically updated time and date below is a notification introducing the app (this is only to explain the demo) after reading the notification the user clicks on the flashing clicking icon which directs them to the home screen. The swipe icon then appears on the App icon, where the user has to click on to it. The loading screen of the App Mello appears and changes to the log in screen where the user clicks onto to the Sign Up (where the flashing clicking icon is). The user clicks onto name, email and phone number (and sees this already filled in however if there was an actual form the user would input their own information) and they click onto create account(where the flashing clicking icon is). Unfortunately, the top right icons move which I was not aware of before sending the submission but would be situated in the top right on the screen but on this video it doesn’t show this. Afterwards the user confirms and the screen switches to show that a confirmation email has been sent and the user clicks onto log in (where the flashing clicking icon is). The user clicks onto ok (where the flashing clicking icon is) of the permission notification to accept notification which directs them to the screen to select a song. Since I was not able to add Spotify’s web API the search tool does not work where message below pops up if someone clicks onto the toolbar telling the user to select one of the recommendations below. Once the user has selected the song a confirmation screen saying that the user has selected the song appears and the user selects onto the button (where the flashing clicking icon is) to choose a location. The location screen shows up with a map and the user selects where the flashing clicking icon is but a message saying the toolbar is not working but to go to the location specified. If I was to continue with this app I would have a preset design of an interactive map using google maps API with a skin designed. The user then selects the screen and a confirmation screen of location shows the flashing clicking icon above selecting a contact button. The following screen asks for permission to access your contacts and the user selects ok (where the flashing clicking icon is). For demo purposes contacts are already there where the flashing clicking icon is the user clicks. The contact is then selected which is highlighted by the change of the colour of the name and line below and once clicked again the last screen saying finished appears. Once this screen shows up the user clicks onto the link where they will be redirected to the screen as if they were the user (the link is shown for demo purposes to differentiate between the sender and receiver).
In explaining the receivers virtual iPhone experience I will be using the scenario of a friend sending a song another friend who is about to have an exam in the university. The user sees a notification saying that they have received a Mello and clicks onto the swipe screen to be redirected to the home screen. The user then clicks on the App icon which displays a notification as it would do with the 3D touch feature. The user (friend receiving the song) has the choice whether or not to accept the trip and clicks accept (where the flashing clicking icon is). Once clicked on Google maps screen of the location would show them where the location is (for demo purposes it is an image of the location but if I was to continue with this project the user would not be redirected to google maps but maps on the App). As the user (the friend) approaches the destination (university) a screen from the appears saying that the music will start playing soon and the song plays (this only works if the user is actually in that location) otherwise if they’re in another location which is shown by the change in code of the location no music would play. Also, since it’s a website google asks for permission to get the users current location.