Pearson BTEC Level 3 Extended Certificate in Computing
Unit 17: Mobile Apps Development
Learning Aim B:
B.P3 Produce designs for a mobile app to meet
identified requirements.
B.P4 Review the mobile app designs with others to
identify and inform refinements.
B.M2 Justify how decisions made during the design
process ensure the design for the app will meet
identified requirements.
, 2
B.P3 Designs For A Mobile App
In this document I will be producing designs for my mobile app and will be discussing the
requirements that have been identified, along with the user needs. Included will be the required
device capabilities, the input and outputs that are required and visual design documentation.
App Requirements
The app I will be designing will be a Python tutorial app and will be created for an education charity
called ‘TeachPythonUK’. Its main purpose will be to support young children in developing their
programming skills. Split up into different sections, the app will have quizzes with multiple choice
questions after each chapter; allowing them to test their knowledge after each stage.
Target platforms
So that the app is available to a large audience, I plan to design the app so that is can be used on the
major platforms: iOS, Android and Windows. This will require the app to be hybrid in design;
meaning it will use IPA, APK and XAP file formats.
Device capabilities:
Enabling the app to run and function properly will require certain features to be accessed and used.
The accelerometer would need to be accessed to allow the app to rotate and the content to change
direction depending on the orientation. Additionally, the app will need to display status icons as
these will allow the app to display information like the battery life icons, time, network status icons
and other icons at the top of the screen. Without this, the apps content would cover the whole
screen and not display the icons. Finally, the app will need to have permission to use the devices
internet connection - this will allow videos that are embedded into the app to play, whilst providing
the connection to download and run the app in the first place.
Inputs:
To allow users interact with the app, there will need to be a number of inputs. I plan to integrate
touch input to enable users to press buttons, open links and tick boxes. This will allow them to easily
navigate the app using finger gestures. Scrolling is also put into this input category, as it will allow
users to move up and down the pages. Some quizzes on the app will require the user to input text as
the answer, so text fields and the OS’s keyboard need to be integrated into the app to allow the
validation of answers to take place. To change the in-app volume, side-to-side swipe gestures from
the users need to be considered. Finally, on all the quizzes there needs to be a submit input; this
would take the form of an event-driven button that when pressed, submits and validates the data.
This feature would have to be coded into the JavaScript.
Outputs:
Complementing the inputs, outputs will be used on the app to react to the way users interact with
the app. Popups will be placed on all pages that contain quizzes to display a message that contains
the users score when they press the submit button. This would have to be coded using JavaScript
and have the ability to be run every time the button is pressed (will reset the score and calculate the
new score). Videos that are embedded into the app will have to output both audio and visuals, with
auto-play disabled so that users can read the content and press the video when they are ready
Unit 17: Mobile Apps Development
, 3
(preventing them from getting distracted). When changing between pages there will be a delayed
transition; this screen output makes the user experience better as the change in content is easier on
the eye. In the menu, there will be a volume scroll bar. When this is changed, the volume will need
to correspond, outputting the correct level of sound. Finally, users will have a tick box that will allow
them to turn on or off the ability to send notifications from the app - this would enable them to
choose what additional outputs they would want from the app.
User needs and requirements:
The final section that needs to be considered when designing the app is the needs and requirements
of the target audience. Firstly, all the text on the app will need to bold and large enough to view on a
range of different screen sizes - this ensures that the text is easy to read for the audience. Titles,
subheadings and content are required to have different font sizes and bold fonts, as these will easily
allow the user to differentiate between titles and content. Background colours will also need to be
considered, with the users requiring colours which make the content in front of them easy to
identify, read and understand. Bright, pastel colours should be avoided, as these can make the
content harder to see, however, changing the text colour would mitigate this issue.
Accessing the different pages is an easy to navigate way is a major requirement for users, as it
enables users too straightforwardly find content on the app. This can be achieved by having buttons
at the top and bottom of the screen. Links to external sites will be left as hyperlinks, as this will
clearly show the users that they are clickable.
As an educational app, the app is required to contain a range of different Python related topics; from
syntax and data types, to functions and loops. This will ensure it provides the young people with the
content they need to expand their knowledge in Python coding.
One of the major requirements is designing the app to be Hybrid. This would enable the app to be
downloaded and used on multiple platforms and would remove the need for multiple Native
applications. Meeting this requirement would require the use of cross-platform scripting across all
formats (IPA, APK and XAP) of the app.
Proposed Design
In this section of the design I will be looking at some proposed solutions that could be used to fulfil
the functions of the app. This includes looking at the following: Program tasks, target platforms,
screen layout, algorithms, control structures, data validation and integration of device capabilities.
Program tasks
When the user opens the app, the program will need to display the homepage and all the buttons
that will be located on there. Following this, the program must run some event-driven tasks that
would be triggered by users pressing a button; they will then be taken to the page they have
selected. There will also be buttons on all pages; these will allow the user to return to the previous
page.
Figure 1: Opening app tasks
Unit 17: Mobile Apps Development
, 4
Every ‘Unit’ page will have a quiz at the bottom that Pseudocode:
relates to the content on that page. This quiz will be
JavaScript based. The first task is displaying the multiple- BEGIN
choice questions and allowing the users to select their INPUT user answers
answer. The following task is triggered when the user
INPUT submit button pressed
presses the submit button -- this will see the program
calculate what the users final score is and output the final Calculate total score
score on a popup.
PRINT total score
Figure 2: Simple pseudocode for quizzes
END
Upon the opening of every page, all the text and images
will need to be displayed, meaning there should not be a delay whilst it loads. This means that within
the source folder, all the images should be included and when embedded into the app use the
correct location code. This is also applicable to videos, with the program needing to open the OS’s
video player and play the video through that.
Target platforms
So the app is available on multiple platforms I will design it to be hybrid, meaning it will be useable
on iOS, Android and Windows devices. This means the app will be built using web technologies and
coded using HTML, CSS and JavaScript. The source file will then be converted into the following
formats: IPA, APK and XAP.
Screen layout
Each page will be split into three sections, they are as follows: header, body and footer. The header
will contain the name of the page (e.g. Unit 1) and forward/back buttons to navigate between the
pages. The body will contain all the content for each page, with this including information on
different aspects of Python, pictures, images and quizzes. Finally, the footer will only include
copyright text (e.g. © Alfonso Greenbrook Copyright 2019).
The homepage’s layout will consist of buttons that will link to all the pages on the app and an
introduction to what is included on the app. There will also be icons in the header that will open up
the settings tab. This tab will open up from the left-hand side.
Other pages on the app will consist of a combination of titles, text, images/videos and quizzes. The
ordering of these elements will vary depending on the pages content.
Control Structures
Pseudocode: Within the coding of the app I will use the ‘if’ statement.
This will add a selection control structure to the quiz
… and will be used to determine which branch the code
IF answer = ‘b’: should go down. For each question, it will be split
depending on the user’s answers; with the correct
Score = score + 1
answer leading to a point being added and the wrong
ELSE: answers leading to no points being added to the final
score. At the end of the program, it will output the score
Score = score + 0
to the user in an on-screen popup.
Figure 3: Snapshot of quiz score calculations pseudocode
Unit 17: Mobile Apps Development
