Pearson BTEC Level 3 Extended Certificate in Computing
Unit 17: Mobile Apps Development
Learning Aim B/C:
C.P7 Review the extent to which the mobile app meets
the identified requirements.
BC.D2 Evaluate the design and optimised mobile app
against client requirements.
BC.D3 Demonstrate individual responsibility, creativity
and effective self-management in the design,
development and review of a mobile app.
, 2
C.P7/BC.D2 App Review
Introduction
In this document, I will be evaluating the proposed app design and the optimised app; whilst
reviewing to which extent the final app meets the identified requirements. Throughout, I will be
looking to the requirements - and how they were met - any issues that arose, alternative solutions if
the project was done again and, how decisions and methodologies impacted the effectiveness of the
app.
Initial Design
When I began designing the app, there were several requirements that I needed to consider to
ensure the app would meet the users’ needs and provide a high-quality user experience. The three
main requirements were based around: accessibility, navigation and content.
Accessibility
The first requirement was to have text that was bold and large enough to be
read across several mobile devices. This meant during the design process I
tried multiple fonts to find the one that would be most suited for a small,
smartphone screen. I decided to go with the ‘Calibri (Body)’ font, as this is
the default on Microsoft Word and is designed with ‘rounded stems and
corners’; making it understandable to a wide audience. Following this, I
planned what size text I would use for each section on the app -- one
requirement was to have different sizes to easily differentiate the content. In
my final designs I decided to use size 20 for all headings, size 16 for the
subheadings and page header text (data-role="header"), size 14 for the
footer text and size 10 for all content. By having a range of text sizes, I was
able to clearly display the different sections of the app, making the user
interface more navigable.
Avoiding light, pastel colours for the background was a key requirement, as this ensured that the
content placed on top could be read against the background. During the planning and designing
phases, I tested several shades of yellow and blue against black and white text to choose which
combination offered the best user experience. My final design included the #3a78ac shade of blue
and the #fee569 shade of yellow -- these were chosen as they closely matched the colours used in
the Python logo and allowed the black and white text to be easily read against the background. I also
decided to change the buttons from white (#FFFFFF) to grey (#808080) during the design process, as
the feedback I received suggested this would improve the user interface.
Overall, these decisions met the client requirements, as the made sure the content on the app was
appropriately sizes for a smartphone screen and the content was placed on backgrounds that
wouldn’t hinder the user’s ability to read the text.
Navigation
Another major requirement was to have easy navigation throughout the whole app - this meant
users should be able to find pages on the app, without needing any major help or hints. During the
design process I decided to include buttons - that link to all pages on the app - on the homepage, as
Unit 17: Mobile Apps Development
, 3
this would be the first page all users would be taken to when the app was
opened. This meant users would have access to all pages, without having to
navigate through numerous menus to get to each unit page. I also
considered how users would return to previous pages and/or the
homepage; this navigation requirement was met by my design including a
‘return’ button in the top left corner of the header bar on each unit page. A
‘next’ button was included on all unit pages, as this provided a way for users
to navigate to the next unit - without needing to go back to the homepage.
Overall, this aspect of the design meets the requirement of easy navigation
as the homepage menu is a central point that provides access to all pages
through buttons, whilst the ‘back’ and ‘forward’ buttons enable users to
change page, without needed to go back to the homepage menu. This
approach removes any unnecessary time that would otherwise be wasted
trying to find the correct page.
Content and Quizzes
The final set of requirements from the client were based around the type of
Python content that would be included on the app, whether it would be
educational and that the quizzes on the app should be multiple choice. To
ensure there was a variety in the app’s content, I looked at current apps and
websites content; combining that information into 10 units. Organising the
content in this way would ensure the young children will have the
opportunity to learn about different aspects of Python -- something that
makes the app very educational as there are many areas of coding (e.g. data
types and functions) to learn within the 10 topics. Another element that was
implemented into the visual designs were multiple choice questions. These
were placed on every unit page and would provide the user the chance to
answer questions about the content they have read. Each set of questions
ranged in difficulty and this added to the educational value of the app, as it
challenged the children develop their skills as much as possible by reaching
the harder questions.
Overall, this aspect of the design meets the requirement of having a range of topics, as the app will
categorise Python coding skills into 10 categories - something that will broaden the young people’s
knowledge in these areas. Also, including multiple choice questions meets the user requirements, as
the app can test the students’ knowledge with questions set at a variety of difficulties. Having
multiple choice questions allows the app to tell the users what they got wrong and what they need
to improve upon.
Conclusion
To conclude, my visual designs and wireframes meet the requirements, as the navigation and easily
read content make the app accessible to people of all abilities, whilst the range of topics covered
makes the app educational as students can straightforwardly learn new skills by reading and
completing questions within the app.
Unit 17: Mobile Apps Development
, 4
Optimised App
When I began coding the final app, I had to incorporate the layout and features from the visual
designs and wireframes, whilst maintaining a high level of detail to ensure all aspects of the user
requirements were met.
Accessibility
During the development of the app, I continuously checked the live preview
of the app to ensure the text was bold and large enough so it could be read
on all screen sizes. This meant I went through several iterations before
finding the optimal fonts and sizes. In the final app I chose the following
sizes and fonts:
• Page Titles: (h1. ui-title) 16px Sans-serif (White)
• Headings: (h1) 32px Sans-serif (Black)
• Subheadings: (h3) 18.75 Sans-serif (Black)
• Content: (p) 16px Sans-serif (Black)
• Footer Text: (h4. ui-title) 16px Sans-serif (White)
These font types and sizes met the requirement of making the text readable across all sizes of
smartphones, as they make the text bold, whatever the dimensions of the screen. Additionally, this
design meets the requirement, as the different styling for each section will make it easy for the users
to differentiate between the headers, subheadings and content. On the original design, I planned to
use ‘Calibri (Body), however, when tested this wasn’t sufficient in meeting the brief of making it
readable on all devices.
On the optimised app, I decided to continue with the colour scheme from the visual designs, as
when tested on a variety of mobile devices the blue and yellow made content easy to read when
placed against the background -- meeting the requirement fully. However, in my alternative designs I
planned to use grey buttons on the home screen -- as user feedback suggested I should do so. But
when it came to designing and testing the design, I decided to go back to white (with black text)
buttons as this appeared better on smaller screens; therefore meeting the requirement of making
content easy to read on all screen sizes.
Overall, the final app practically meets all the requirements of accessibility as the font is
appropriately sized and easy to read against the blue and yellow background. Making the text in the
header buttons larger would have resulted in a higher mark. 4/5
Navigation
Being able to effortlessly find and navigate through pages on the app was a key requirement that
was met in the final design. Firstly, the homepage contained buttons that linked to all the pages on
the app - this meant the user experience was free flowing as the young people were provided with a
focal point to get to each page; simplifying the navigation process. Secondly, on each unit page I
included a back and forward button in the header, as these provided a quick way for users to get
back to the previous page. Meanwhile, the homepage contained a settings button in the header
which provided access to the settings sidebar. Finally, in the footers of each unit page I included
jQuery’s four-part navbar. This allowed me to link the homepage, key words page, sources page and
settings sidebar to these pages; allowing for even effortless navigation.
Unit 17: Mobile Apps Development
Unit 17: Mobile Apps Development
Learning Aim B/C:
C.P7 Review the extent to which the mobile app meets
the identified requirements.
BC.D2 Evaluate the design and optimised mobile app
against client requirements.
BC.D3 Demonstrate individual responsibility, creativity
and effective self-management in the design,
development and review of a mobile app.
, 2
C.P7/BC.D2 App Review
Introduction
In this document, I will be evaluating the proposed app design and the optimised app; whilst
reviewing to which extent the final app meets the identified requirements. Throughout, I will be
looking to the requirements - and how they were met - any issues that arose, alternative solutions if
the project was done again and, how decisions and methodologies impacted the effectiveness of the
app.
Initial Design
When I began designing the app, there were several requirements that I needed to consider to
ensure the app would meet the users’ needs and provide a high-quality user experience. The three
main requirements were based around: accessibility, navigation and content.
Accessibility
The first requirement was to have text that was bold and large enough to be
read across several mobile devices. This meant during the design process I
tried multiple fonts to find the one that would be most suited for a small,
smartphone screen. I decided to go with the ‘Calibri (Body)’ font, as this is
the default on Microsoft Word and is designed with ‘rounded stems and
corners’; making it understandable to a wide audience. Following this, I
planned what size text I would use for each section on the app -- one
requirement was to have different sizes to easily differentiate the content. In
my final designs I decided to use size 20 for all headings, size 16 for the
subheadings and page header text (data-role="header"), size 14 for the
footer text and size 10 for all content. By having a range of text sizes, I was
able to clearly display the different sections of the app, making the user
interface more navigable.
Avoiding light, pastel colours for the background was a key requirement, as this ensured that the
content placed on top could be read against the background. During the planning and designing
phases, I tested several shades of yellow and blue against black and white text to choose which
combination offered the best user experience. My final design included the #3a78ac shade of blue
and the #fee569 shade of yellow -- these were chosen as they closely matched the colours used in
the Python logo and allowed the black and white text to be easily read against the background. I also
decided to change the buttons from white (#FFFFFF) to grey (#808080) during the design process, as
the feedback I received suggested this would improve the user interface.
Overall, these decisions met the client requirements, as the made sure the content on the app was
appropriately sizes for a smartphone screen and the content was placed on backgrounds that
wouldn’t hinder the user’s ability to read the text.
Navigation
Another major requirement was to have easy navigation throughout the whole app - this meant
users should be able to find pages on the app, without needing any major help or hints. During the
design process I decided to include buttons - that link to all pages on the app - on the homepage, as
Unit 17: Mobile Apps Development
, 3
this would be the first page all users would be taken to when the app was
opened. This meant users would have access to all pages, without having to
navigate through numerous menus to get to each unit page. I also
considered how users would return to previous pages and/or the
homepage; this navigation requirement was met by my design including a
‘return’ button in the top left corner of the header bar on each unit page. A
‘next’ button was included on all unit pages, as this provided a way for users
to navigate to the next unit - without needing to go back to the homepage.
Overall, this aspect of the design meets the requirement of easy navigation
as the homepage menu is a central point that provides access to all pages
through buttons, whilst the ‘back’ and ‘forward’ buttons enable users to
change page, without needed to go back to the homepage menu. This
approach removes any unnecessary time that would otherwise be wasted
trying to find the correct page.
Content and Quizzes
The final set of requirements from the client were based around the type of
Python content that would be included on the app, whether it would be
educational and that the quizzes on the app should be multiple choice. To
ensure there was a variety in the app’s content, I looked at current apps and
websites content; combining that information into 10 units. Organising the
content in this way would ensure the young children will have the
opportunity to learn about different aspects of Python -- something that
makes the app very educational as there are many areas of coding (e.g. data
types and functions) to learn within the 10 topics. Another element that was
implemented into the visual designs were multiple choice questions. These
were placed on every unit page and would provide the user the chance to
answer questions about the content they have read. Each set of questions
ranged in difficulty and this added to the educational value of the app, as it
challenged the children develop their skills as much as possible by reaching
the harder questions.
Overall, this aspect of the design meets the requirement of having a range of topics, as the app will
categorise Python coding skills into 10 categories - something that will broaden the young people’s
knowledge in these areas. Also, including multiple choice questions meets the user requirements, as
the app can test the students’ knowledge with questions set at a variety of difficulties. Having
multiple choice questions allows the app to tell the users what they got wrong and what they need
to improve upon.
Conclusion
To conclude, my visual designs and wireframes meet the requirements, as the navigation and easily
read content make the app accessible to people of all abilities, whilst the range of topics covered
makes the app educational as students can straightforwardly learn new skills by reading and
completing questions within the app.
Unit 17: Mobile Apps Development
, 4
Optimised App
When I began coding the final app, I had to incorporate the layout and features from the visual
designs and wireframes, whilst maintaining a high level of detail to ensure all aspects of the user
requirements were met.
Accessibility
During the development of the app, I continuously checked the live preview
of the app to ensure the text was bold and large enough so it could be read
on all screen sizes. This meant I went through several iterations before
finding the optimal fonts and sizes. In the final app I chose the following
sizes and fonts:
• Page Titles: (h1. ui-title) 16px Sans-serif (White)
• Headings: (h1) 32px Sans-serif (Black)
• Subheadings: (h3) 18.75 Sans-serif (Black)
• Content: (p) 16px Sans-serif (Black)
• Footer Text: (h4. ui-title) 16px Sans-serif (White)
These font types and sizes met the requirement of making the text readable across all sizes of
smartphones, as they make the text bold, whatever the dimensions of the screen. Additionally, this
design meets the requirement, as the different styling for each section will make it easy for the users
to differentiate between the headers, subheadings and content. On the original design, I planned to
use ‘Calibri (Body), however, when tested this wasn’t sufficient in meeting the brief of making it
readable on all devices.
On the optimised app, I decided to continue with the colour scheme from the visual designs, as
when tested on a variety of mobile devices the blue and yellow made content easy to read when
placed against the background -- meeting the requirement fully. However, in my alternative designs I
planned to use grey buttons on the home screen -- as user feedback suggested I should do so. But
when it came to designing and testing the design, I decided to go back to white (with black text)
buttons as this appeared better on smaller screens; therefore meeting the requirement of making
content easy to read on all screen sizes.
Overall, the final app practically meets all the requirements of accessibility as the font is
appropriately sized and easy to read against the blue and yellow background. Making the text in the
header buttons larger would have resulted in a higher mark. 4/5
Navigation
Being able to effortlessly find and navigate through pages on the app was a key requirement that
was met in the final design. Firstly, the homepage contained buttons that linked to all the pages on
the app - this meant the user experience was free flowing as the young people were provided with a
focal point to get to each page; simplifying the navigation process. Secondly, on each unit page I
included a back and forward button in the header, as these provided a quick way for users to get
back to the previous page. Meanwhile, the homepage contained a settings button in the header
which provided access to the settings sidebar. Finally, in the footers of each unit page I included
jQuery’s four-part navbar. This allowed me to link the homepage, key words page, sources page and
settings sidebar to these pages; allowing for even effortless navigation.
Unit 17: Mobile Apps Development
