FIT3178 Assignment 1 Mobile App Design Specification Table of Content Table of Content 2 Application concept 3 Introduction 3 Overview of the application 3 Function 3 Target audience 4 Competition and Innovation 5 Two similar applications 5 Innovation of my application 9 Feasibility and Technology 10 Main Functions 10 Optional Functions 10 Interface Design and Storyboard Mock-ups 10 Pokedex Section 11 News Section 14 Chatting Section 17 Setting Section 18 Scope and Limitations 19 All the functions: 19 Minimum Viable Product (MVP) 19 Optional Function: 19 Estimated Project Timeline 20 Reference 21 Application concept Introduction The application ‘poke pokedex’ is an application that integrates all the Pokémon information from all generations, so that users can easily query the relevant information of the Pokémon they want. Overview of the application The application has 4 section, the homepage is the ‘pokedex’ section, this section is a list that contains all the Pokémon, including the information of the Pokémon. The second section is the ‘news’ section. It is a page that shows the latest news of Pokémon. The third section is the ‘chatting’ section, this section is a chat room that users can chat with each other. And the last section is the ‘setting’ section, this section would include something like ‘contact us’, ‘about the app’. Function There are three main functions in this application. As you can see, the name of the app is ‘poke pokedex’, it’s a pokedex which store all the Pokémon information. So in the app there is a Pokémon library, users can search for the Pokémon they want, and in each information page of a Pokémon would display the Pokémon’s appearance, its name, the order number, the type, its attack, defense, speed and so on. And there is a search bar that the users can query Pokémon by their names. The second main function is that the application would have a page that shows the latest news about the Pokémon, like the new article, new events, all kind of news. So users can know all the latest news of Pokémon in this application. Within this section, user can switch between the ‘news’ pages and the ‘video’ page, users can watch the video of Pokémon on the video page. The third main function is a chatting section, users can chat anonymously in real time with other users. Target audience The target audience of this application is players who play the Pokémon series games and games derived from Pokémon, also the people who like or interested in Pokémon. Competition and Innovation Two similar applications There is an application name ‘pokeInfoDex’ which also is a pokedex app. Below is its page. This app shows a list of Pokémon, the list can order by name, order by number and type, in the info page of the Pokémon, it shows the capture, ability and details. However, it seems do not update for a long time, the storyboard is not fit with the iPhoneX screen. And this app is only have one function which is the pokedex, and its info page is a little bit messy and unsightly. the Pokémon list page of ‘pokeInfoDex’ the Pokémon list page of ‘pokeInfoDex’ the Pokémon information page of ‘pokeInfoDex’ There is another app names ‘Pokémon Guide’, its pages are shown below. Its function is also shows the Pokémon information, and it has a setting which can change the app language. The disadvantage for this app is that the navigation of the Pokémon list is so bad, it divides the Pokémon list by type, and cannot be change, it’s hard for users to find the Pokémon they want from the list, they can only find what they want using the searching function. the Pokémon list page of ‘Pokémon Guide’, pokemon are divided into type, user can browse Pokémon list by swiping right the setting function of ‘Pokémon Guide’ the Pokémon information page. Innovation of my application The two applications above are the same type as my application, we all aim to be a pokedex to show users the Pokémon information. But there is something more than just a pokedex inside my application. For the innovation, my application not only have a pokedex, but also have some network or social function. There are three main functions inside my application. 1. One function is the pokedex, which shows all the Pokémon information 2. The second function is the news section, in this page the application would show the latest news of pokemon for users. 3. The third function is the chatting section, users can communicate with each other in the chatting room. So with the news section, user not only can find the information using the pokedex, but also can get to know the latest news of Pokémon. Also users can communicate with each other in the chatting section, so that they can share their game experience, talk about all kind of stuff. And here are some functions that my application may have: 1. A video section that about the Pokémon (which can be inside the news function) 2. A social section where user can post their opinion on(which can be insde the chatting section) Feasibility and Technology In this application, I will use the Model-View-Controller architecture. Main Functions Pokedex function For the pokedex, the Pokémon list function, I will use the JSON of the Pokémon information (such as the name, the weight, the height) and fetch them into the Pokémon list. News function And for the news section, I think maybe I will use the wkWebView or the URLsession methods to achieve the function, to get the news list, to get the news articles. Chatting function And for the chatting section, I think I will use the firebase and the open source ‘MessageKit’ to achieve that real-time chatting function. Optional Functions Video Function In order to achieve the media playback function, like users can watch video about pokemon in the application, I will use the AVKit to achieve. Interface Design and Storyboard Mock-ups I decided that the main colors of my app will be red and white, because these are the most basic colors matching of Pokémon Ball, so these two colors are the best match for pokedex. And because of the design principles of the HIG, for the consistency, this app would only have these two colors, will not have other color to the theme. Pokedex Section For the homepage of this application, it is the pokedex section, this section would show the list of all the Pokémon. I have designed two different layouts for it. The first one is the Pokémon list would show as the collection cells, each cell contain the big photo of the Pokémon. Users will browse pokedex based on the appearance of Pokémon. The second one is that the Pokémon list would show as a table view, each row contains a thumbnail for a Pokémon. Users will browse the pokedex based on the name of the Pokémon. And there is a search bar in both storyboards, users can use the search bar to query the Pokémon they want. And the tab bar below is for the user to switch between different sections, if the users want to go to the ‘chatting’ section, then tap the chat tab would achieve that. These two layouts follows the rule of the HIG, they are all clarity, the text is legible at every size, icons are precise and lucid are subtle and appropriate. I would choose one as the final design layout. when I click on one Pokémon, the app would go to the information page of the Pokémon. The photo below is the layout. It would show the Pokémon’s name as the title. And a big photo of the Pokémon would show in the center, the information of the Pokémon would show below the photo. The information would be (type, HP, Attack, Defense, SP. Attack, SP. Defense and the spee
d) Process of browse a pokemon News Section Then would be the news section. This page would show all the latest news from the website, each box will display the title and summary of this news. Users can click into each news to see the complete news content. Users can also slide down to show more news. And a video page is within the ‘news section’, its UI is similar with the news page. The process switch between news and videos, when users click the ‘Video’ tab, the page will switch to the video page, on the contrary, when users click the ‘news’ tab, the page will switch to the news page. Chatting Section For the layout of the chatting section, it’s similar to the UI of the iPhone Message, the design is simple and comfortable, users can chat with each other in the chatting section. Setting Section The setting section has a few box, like ‘About’ box for the user to know more about this application, a ‘Contact Us’ box for the user to connect to the developer, to give some feedback. To follow the rule of HIG, the Design Principles, I will keep the application consistency by using the same standard text style, use the well-known icon on the navigation bar. And the main colors of this application would be red and white. Scope and Limitations The Minimum Viable Product (MVP) of this application should contain the three main functions, which is the pokedex function, the news section and the chatting function, these would be the minimum functionality that would be necessary to release the app to the public in a useful state. All the functions: – a pokedex function: shows a Pokémon list, and user can browse each pokemon information – a news function: shows the latest news of Pokémon to users – a chatting function: a section that users can chatting with each other – a video function: it could be a section inside the news section, users can watch the video in the application Minimum Viable Product (MVP) – the pokedex function – the news function – the chatting function Optional Function: – the video function – a social function that the users can post stuff in the application. Estimated Project Timeline Task Details Time Storyboard Build the UI for the pokedex section (include the Pokémon list, the Pokémon information page) Week 6 Data integration & storyboard Fetch the pokedex data and use these data to operate with the pokedex section And build the UI for the news section Week 7, 8 Data & storyboard Enable data to interact well with the news section And build the UI for the chatting section Week 9 Prototype 1 Prototype 1 should be deliverable with the complete pokedex function Week 10 firebase connection App should be connected to the firebase, enable to achieve the chatting function Week 11 Testing & Prototype 2 Prototype 2 should be deliverable with the complete three main functions Week 12 Fixing & improving Fix all the bugs and improve the user experience Week 13,14 Reference Apple development document, AVKit https://developer.apple.com/documentation/avkit Apple Human Interface Guildline https://developer.apple.com/design/human-interface-guidelines/ Apple Development Document, URLsession https://developer.apple.com/documentation/foundation/urlsession Ryan Ackermann, 2018, ‘Firebase Tutorial: Real-time Chat’ https://www.raywenderlich.com/5359-firebase-tutorial-real-time-chat Apple Development Document, WKWebView https://developer.apple.com/documentation/webkit/wkwebview Apple Development Document, UICollectionViewCell https://developer.apple.com/documentation/uikit/uicollectionviewcell Apple Development Document, UITableView https://developer.apple.com/documentation/uikit/uitableview
