Unit 8 – Task 2

Level 2 Group B

James Saunders1543710

West Cheshire College

ContentsPurpose and User Requirements...........................................................................................................................2

Requirements for the mobile application..........................................................................................................2

Described what the purpose of the app, providing details of how it works......................................................2

What programming language it is written in?...................................................................................................2

What SDK will you develop it in?.......................................................................................................................2

Is the code written together or separated out e.g. html separate to c#?..........................................................2

What platform it works on?...............................................................................................................................2

Is the design user friendly?................................................................................................................................2

Does it have any accessibility features?............................................................................................................2

Tools..................................................................................................................................................................2

List of assets..........................................................................................................................................................3

Pre-defined code...................................................................................................................................................6

Test Plan................................................................................................................................................................7

Proposed Design..................................................................................................................................................13

Alternative design............................................................................................................................................20

Pseudo Code........................................................................................................................................................27

Constraints..........................................................................................................................................................34

Justification.........................................................................................................................................................35

Purpose and User Requirements

Requirements for the mobile applicationThe company EduTek have requested that I design and create a prototype mobile application for the mobile windows platform, the application I will be creating is to aid children with their learning of the alphabet, they have requested that I cover 6 letters within the application for children to learn from.

Described what the purpose of the app, providing details of how it works.The purpose of this task to produce an interactive mobile phone application on the windows phone platform for assisting children in learning the alphabet. This application requires a minimum of six letters for this application to be successful, as it has been requested for children I believe it would be best to make the application colourful and cartoony to appeal to the target audience.

I will be using the visual studios to develop the program and programming in XAML programing language

What programming language it is written in?XAML programming language using Visual C# for Windows Mobile platform

What SDK will you develop it in?I will be developing the application using Visual studios

Is the code written together or separated out e.g. html separate to c#?The mobile application will be coded in C# while the front end will be carried out in XAML.

What platform it works on?This will be designed to work on the windows phone platform

Is the design user friendly?Yes the design is user friendly as it gives a visual association as well as and audio association, is the application is for children I have designed it with catching their attention in mind as such the buttons are bright and the pictures are cartoon based designs.

Does it have any accessibility features?I think this application should include a voice over for images in the event the user is visually impaired or has never seen the picture of a certain item for example “A is for Apple” this will improve overall association. It will also contain a button that can be pressed for the audio to be replayed for the user.

ToolsI will be utilising multiple software applications for the design and creation of this mobile application.

Microsoft Word for the report document, Microsoft PowerPoint for the simple interface design, Chrome Web browser for the downloading of assets, Adobe Fireworks to edit and design assets, Microsoft Visual Studios to create the Mobile Application. My mobile phones voice recorder to create the audio assets.

List of assets

File Name Description SourceA.png This will be a basic

image of the letter A this image will be created in Fireworks

Created in Fireworks

A.mp3 This will be the letter A read as “A is for Apple”

Self-recorded

Apple.png This will be a basic image of an Apple for letter association this image will be found online and may be edited

https://pixabay.com/en/apple-ripe-red-healthy-food-fruit-307356/Edited in Fireworks

Aq.mp3 This will be an audio prompt “press the letter A for apple to continue”

Self-recorded

B.png This will be a basic image of the letter B this image will be created in Fireworks

Created in Fireworks

B.mp3 This will be the letter B read as “B is for Bee”

Self-recorded

Bee.png This will be a basic image of a Bee for letter association this image will be found online and may be edited

https://pixabay.com/en/bee-bi-cartoon-honey-insect-1296273/Edited in Fireworks

Bq.mp3 This will be an audio prompt “press the letter B for Bee to continue”

Self-recorded

C.png This will be a basic image of the letter C this image will be created in Fireworks

Created in Fireworks

C.mp3 This will be the letter C read as “C is for Cat”

Self-recorded

Cat.png This will be a basic image of a Cat for letter association this image will be found online and may be edited

http://maxpixel.freegreatpicture.com/Happy-Smiling-Cute-Cat-Feline-Cartoon-Character-278845Edited in Fireworks

Cq.mp3 This will be an audio prompt “press the letter C for Cat to continue”

Self-recorded

D.png This will be a basic image of the letter D this image will be created in Fireworks

Created in Fireworks

D.mp3 This will be the letter D read as “D is for Dog”

Self-recorded

Dog.png This will be a basic image of a Dog for letter association this image will be found online and may be edited

https://commons.wikimedia.org/wiki/File:Cartoon_Border_Collie.pngEdited in Fireworks

Dq.mp3 This will be an audio prompt “press the letter D for Dog to continue”

Self-recorded

E.png This will be a basic image of the letter E this image will be created in Fireworks

Created in Fireworks

E.mp3 This will be the letter E read as “E is for Elephant”

Self-recorded

Elephant.png This will be a basic image of an Elephant for letter association this image will be found online and may be edited

http://www.freestockphotos.biz/stockphoto/11454Edited in Fireworks

Eq.mp3 This will be an audio prompt “press the letter E for Elephant to continue”

Self-recorded

F.png This will be a basic image of the letter F this image will be created in Fireworks

Created in Fireworks

F.mp3 This will be the letter F read as “F is for Fish”

Self-recorded

Fish.png This will be a basic image of a Fish for letter association this image will be found online and may be edited

https://pixabay.com/en/fish-parrot-fish-cartoon-blue-good-1439214/Edited in Fireworks

Fq.mp3 This will be an audio prompt “press the letter F for Fish to continue”

Self-recorded

TryAgain.mp3 This will be audio played if an incorrect button is pressed saying “try Again”

Self-recorded

Button.png This will be the image used to represent a button

Created in Fireworks

Background.png This will be the image used for a background

Created in Fireworks

Welcome.png This will be the text on the welcome Screen

Created in Fireworks

WelcomeText.png This will be the text on the welcome Screen

Created in Fireworks

Speak.png This will be used on top of buttons to play the audio such as A.mp3, B.mp3 and is a symbol of a speaker

https://commons.wikimedia.org/wiki/File:Speaker_Icon.svgEdited in Fireworks

Next.png This will be the text on top of the Next button and have text saying “Next”

Created in Fireworks

Start.png This will be the text on top of the Start button and have text saying “Start”

Created in Fireworks

WellDone.mp3 This will audio as “Well Done”

Self-Recorded

Pre-defined codeThis is the pre-defined code that I am planning to use during the creation of my mobile application.

// example method loads list with file names for letter images and sounds

public void loadImagesSounds() { listColoursL1.Add("A"); listColoursL1.Add("B"); listColoursL1.Add("C"); }

//set the source code for the sound SoundClip.Source = new Uri("/Assets/" + soundFile + ".mp3", UriKind.Relative);

//example method to load letters when play button is pressed public void loadImages() { //set the variable with the first image uri1 = new Uri("/Assets/" + listLettersL1[0] + ".png", UriKind.Relative); img1.Source = new System.Windows.Media.Imaging.BitmapImage(uri1);

uri2 = new Uri("/Assets/" + listLettersL1[1] + ".png", UriKind.Relative); img2.Source = new System.Windows.Media.Imaging.BitmapImage(uri2);

uri3 = new Uri("/Assets/" + listLettersL1[2] + ".png", UriKind.Relative); img3.Source = new System.Windows.Media.Imaging.BitmapImage(uri3);

uri4 = new Uri("/Assets/" + listLettersL1[3] + ".png", UriKind.Relative); img4.Source = new System.Windows.Media.Imaging.BitmapImage(uri4);

Test PlanTest Test data Expected result Actual result ScreenshotScreen 1

1. btnStart User presses the “start” button

When button pressed app advances to next screen “2”

2. A.png n/a A.png is displayed

3. Apple.png n/a Apple.png is displayed

4. B.png n/a B.png is displayed

5. Bee.png n/a Bee.png is displayed

6. C.png n/a C.png is displayed

7. Cat.png n/a Cat.png is displayed8. D.png n/a D.png is displayed9. Dog.png n/a Dog.png is displayed10. E.png n/a E.png is displayed11. Elephant.png n/a Elephant.png is

displayed12. F.png n/a F.png is displayed13. Fish.png n/a Fish.png is displayed14. Start.png n/a Start.png is

displayedScreen 2

15. A.png n/a A.png is displayed after app has been instructed to start

16. Apple.png n/a Apple.png appears on screen with A.png

17. btnPlayA The user presses the “play” button

Audio A.mp3 plays when button is pressed

18. A.mp3 n/a A.mp3 is audible “A is for Apple”

19. btnNextA The user presses the “next” button

When button pressed app advances to next screen “3”

Screen 320. B.png n/a B.png is displayed21. Bee.png n/a Bee.png appears on

screen with B.png22. btnPlayB The user presses the “play”

buttonAudio b.mp3 plays when button is pressed

23. B.mp3 n/a B.mp3 is audible “B

is for Bee”24. btnNextB The user presses the “next”

buttonWhen button pressed app advances to next screen “4”

Screen 425. C.png n/a C.png is displayed26. Cat.png n/a Cat.png appears on

screen with C.png27. btnPlayC The user presses the “play”

buttonAudio C.mp3 plays when button is pressed

28. C.mp3 n/a C.mp3 is audible “C is for Cat”

29. btnNextC The user presses the “next” button

When button pressed app advances to next screen “5”

Screen 530. D.png n/a D.png is displayed31. Dog.png n/a Dog.png appears on

screen with D.png32. btnPlayD The user presses the “play”

buttonAudio D.mp3 plays when button is pressed

33 D.mp3 n/a D.mp3 is audible “D is for Dog”

34. btnNextD The user presses the “next” button

When button pressed app advances to next screen “6”

Screen 635. E.png n/a E.png is displayed36. Elephant.png n/a Elephant.png

appears on screen with E.png

37. btnPlayE The user presses the “play” button

Audio E.mp3 plays when button is pressed

38. E.mp3 n/a E.mp3 is audible “E is for Elephant”

39. btnNextE The user presses the “next” button

When button pressed app advances to next screen “7”

Screen 740. F.png n/a F.png is displayed “F

is for Fish”41. Fish.png n/a Fish.png appears on

screen with F.png42. btnPlayF The user presses the “play”

buttonAudio F.mp3 plays when button is pressed

43. F.mp3 n/a F.mp3 is audible

44. btnNextF The user presses the “next” button

When button is pressed screen clears and the Apple.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Aq.mp3 plays“advances to screen 8”

Screen 845. Aq.mp3 n/a Aq.mp3 is audible

“press A for Apple”46. btnA The user presses the “A”

buttonIf button is pressed screen will clear and the Bee.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Bq.mp3 plays“advances to screen 9”

47. btnB The user presses the “B” button

If button is pressed Tryagain.mp3 is played

48. btnC The user presses the “C” button

If button is pressed Tryagain.mp3 is played

49. btnD The user presses the “D” button

If button is pressed Tryagain.mp3 is played

50. btnE The user presses the “E” button

If button is pressed Tryagain.mp3 is played

51. btnF The user presses the “F” button

If button is pressed Tryagain.mp3 is played

52. btnSpeak The user presses the “Play” button

If button is pressed Aq.mp3 is played

Screen 953. Bq.mp3 n/a Bq.mp3 is audible

“press B for Bee”

54. btnA The user presses the “A” button

If button is pressed Tryagain.mp3 is played

55. btnB The user presses the “B” button

If button is pressed screen will clear and the Cat.png is displayed with A.png, B.png, C.png, D.png E.png and

F.png once all images are loaded Cq.mp3 plays“advances to screen 10”

btnC The user presses the “C” button

If button is pressed Tryagain.mp3 is played

btnD The user presses the “D” button

If button is pressed Tryagain.mp3 is played

btnE The user presses the “E” button

If button is pressed Tryagain.mp3 is played

btnF The user presses the “F” button

If button is pressed Tryagain.mp3 is played

btnSpeak The user presses the “Play” button

If button is pressed Bq.mp3 is played

Screen 10Cq.mp3 n/a Cq.mp3 is audible

“press C for Cat”

btnA The user presses the “A” button

If button is pressed Tryagain.mp3 is played

btnB The user presses the “B” button

If button is pressed Tryagain.mp3 is played

btnC The user presses the “C” button

If button is pressed screen will clear and the Dog.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Dq.mp3 plays“advances to screen 11”

btnD The user presses the “D” button

If button is pressed Tryagain.mp3 is played

btnE The user presses the “E” button

If button is pressed Tryagain.mp3 is played

btnF The user presses the “F” button

If button is pressed Tryagain.mp3 is played

btnSpeak The user presses the “play” button

If button is pressed Cq.mp3 is played

Screen 11Dq.mp3 n/a Dq.mp3 is audible

“press D for Dog”

btnA The user presses the “A” button

If button is pressed Tryagain.mp3 is played

btnB The user presses the “B” button

If button is pressed Tryagain.mp3 is played

btnC The user presses the “C” button

If button is pressed Tryagain.mp3 is played

btnD The user presses the “D” button

If button is pressed screen will clear and the Elephant.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Eq.mp3 plays “advances to screen 12”

btnE The user presses the “E” button

If button is pressed Tryagain.mp3 is played

btnF The user presses the “F” button

If button is pressed Tryagain.mp3 is played

btnSpeak The user presses the “play” button

If button is pressed Dq.mp3 is played

Screen 12Eq.mp3 n/a Eq.mp3 is audible

“press E for Elephant”

btnA The user presses the “A” button

If button is pressed Tryagain.mp3 is played

btnB The user presses the “B” button

If button is pressed Tryagain.mp3 is played

btnC The user presses the “C” button

If button is pressed Tryagain.mp3 is played

btnD The user presses the “D” button

If button is pressed Tryagain.mp3 is played

btnE The user presses the “E” button

If button is pressed screen will clear and the Fish.png is displayed with A.png, B.png, C.png, D.png E.png and F.png once all images are loaded Fq.mp3 plays“advances to screen 13”

btnF The user presses the “F” button

If button is pressed Tryagain.mp3 is played

btnSpeak The user presses the “play” button

If button is pressed Eq.mp3 is played

Screen 13Fq.mp3 n/a Eq.mp3 is audible

“press E for Elephant”

btnA The user presses the “A” button

If button is pressed Tryagain.mp3 is played

btnB The user presses the “B” button

If button is pressed Tryagain.mp3 is played

btnC The user presses the “C” button

If button is pressed Tryagain.mp3 is played

btnD The user presses the “D” button

If button is pressed Tryagain.mp3 is played

btnE The user presses the “E” button

If button is pressed Tryagain.mp3 is played

btnF The user presses the “F” button

If button is pressed WellDone.mp3 is played and application returns to Start page.“advances to screen 1”

btnSpeak The user presses the “play” button

If button is pressed Fq.mp3 is played

WellDone.mp3 n/a WellDone.mp3 is audible

Proposed Design

Alternative design

Pseudo Code

Start

Screen 1

Display screen1

If btnStart

Change to screen2

Else do not change

Screen 2

Display screen2

If btnPlayA

Play A.mp3

Else do not play A.mp3

If btnNextA

Change to screen3

Else do not change

Screen 3

Display screen3

If btnPlayB

Play B.mp3

Else do not play B.mp3

If btnNextB

Change to screen4

Else do not change

Screen 4

Display screen4

If btnPlayC

Play C.mp3

Else do not play C.mp3

If btnNextC

Change to screen5

Else do not change

Screen 5

Display screen5

If btnPlayD

Play D.mp3

Else do not play D.mp3

If btnNextD

Change to screen6

Else do not change

Screen 6

Display screen6

If btnPlayE

Play E.mp3

Else do not play E.mp3

If btnNextE

Change to screen7

Else do not change

Screen 7

Display screen7

If btnPlayF

Play F.mp3

Else do not play F.mp3

If btnNextF

Change to screen8

Else do not change

Screen 8

Display screen8

If btnSpeak

Play Aq.mp3

Else Do not play Aq.mp3

If btnA

Change to screen9

Else do not change

If btnB

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnC

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnD

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnE

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnF

Play tryAgain.mp3

Else do not play tryAgain.mp3

Screen 9

Display screen9

If btnSpeak

Play Bq.mp3

Else Do not play Bq.mp3

If btnA

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnB

Change to screen10

Else do not change

If btnC

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnD

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnE

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnF

Play tryAgain.mp3

Else do not play tryAgain.mp3

Screen 10

Display screen10

If btnSpeak

Play Cq.mp3

Else Do not play Cq.mp3

If btnA

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnB

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnC

Change to screen11

Else do not change

If btnD

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnE

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnF

Play tryAgain.mp3

Else do not play tryAgain.mp3

Screen 11

Display screen11

If btnSpeak

Play Dq.mp3

Else Do not play Dq.mp3

If btnA

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnB

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnC

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnD

Change to screen12

Else do not change

If btnE

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnF

Play tryAgain.mp3

Else do not play tryAgain.mp3

Screen 12

Display screen12

If btnSpeak

Play Eq.mp3

Else Do not play Eq.mp3

If btnA

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnB

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnC

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnD

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnE

Change to screen13

Else do not change

If btnF

Play tryAgain.mp3

Else do not play tryAgain.mp3

Screen 13

Display screen13

If btnSpeak

Play Fq.mp3

Else Do not play Fq.mp3

If btnA

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnB

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnC

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnD

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnE

Play tryAgain.mp3

Else do not play tryAgain.mp3

If btnF

Play wellDone.mp3 then Change to screen1

Else do not play wellDone.mp3 and change to screen1

End

Constraints During this assignment I have had a multitude of constraints, these constraints include, Time, Knowledge and Skills, Accessibility, ect.

Time – As this product is needed to be complete to a satisfactory standard within a set time frame this is one constraint I have been facing as I am unfamiliar with the design process of creating a mobile application. I have had to learn while creating my design and found better ways of creating content while creating my design.

Knowledge and Skill’s – As I have no prior knowledge of designing and creating a mobile application or even an application in general I am at a disadvantage as from the start I don’t have the relevant skill set to design and programme the requested application.

Accessibility – This is a particularly large constraint to overcome as the software that I need to create the mobile application and carry out the design process I have very limited access to as I am only able to utilise this software while in college and am unable to stay after lessons due to working commitments.

Copyright – As with the time constraint it is less time consuming to acquire my required application assets from an online source and edit them as needed, as I needed these to complete my design I had to make sure to find assets that can be used and modified as required.

Justification

EduTek have requested me to design and create a prototype mobile application for children to learn the alphabet as such I have created “Alpha”, as this application has been designed to be used by children I have designed the interface to be simple, the children will go through each letter individually where the letter will be displayed and a cartoon style picture relating to that letter for simple association. On the screen there will be two buttons displayed one will be “speak” this will play an audio message such as “A is for Apple” by sounding the letter and providing further association for that letter, the second will be next to move to the next letter. Once the child has progressed passed the learning stage of the letters in the mobile application, they will be presented with a screen displaying a picture to represent a single letter, underneath will be a “speak” button this will have an audio asset attached that will be a prompt for the user to progress to the next letter this audio will be “press A for Apple” underneath they will have six buttons representing each letter they previously learned if they pressed an incorrect button an audio message “Try Again” will sound if the selected the correct letter they will move to the next screen.

This design meets the requirements set out by EduTek as they requested an alphabet learning mobile application for children with at least six letters covered for the child to learn, I have kept it appropriate for children with age related content, I have used pictures that are in a cartoon style to keep the children engaged in the product.