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 speed)




















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