When making my Accessible storybook prototype app, I wanted to find the best stories for 6-years olds to gather some vital information. First what words were used, second what each paragraph looks like and lastly how detailed the characters and background looks like. I used the Elmer books are shown below as my reference for research on this project as I remember how simple yet effective their stories were at the time.
I then started making work on my app flow design. I at first started creating physical drawings to try and plan out what each page would display and tell the user. This as shown below included what choices the player could do as well as what characters would appear (formal and background). Then I also listed what challenges the player/reader would encounter and what they might learn from the storybook as well.
character and item creation page for cosmic storybook
prototype app plan with layout for pages and accessibility element choices
Plan for storybook prototype with details of learning elements and reader power
in progress and base layout of app story and puzzles
I used my past experience with Adobe XD to create the storybook app design and I had started to make an options page, home page and display pages. I also created new icons for moving backwards to a previous page and a home icon to go straight back to the beginning. The tiny house simulates the home button and the tiny rocket ship has a backwards arrow point to the left for the "go back icon". I then made some basic story pages for each pathway the player chose and then an item page where the pathways began.
final flow of story
app background elements
The final flow of the story allows the player/reader to choose what story they want to make, what item their heroes pursue and what villains they encounter. Several realistic and non-realistic icons and drawings appear, the planet encourage the reader to learn about the solar system. With the flow above you can also see that many of the pages have been copied and pasted but do not worry, there are minute details on each that change often. The clock hands change their displayed time and the dialogue in the story changes too.
Next to it is also my foreground page which shows off some of the background elements I may need to use in different pictures. There are also copies here and different styles of them for different occasions.
app pages 1-4
app pages 5-8
These two images show off the first 8 pages of my accessible storybook, the first 4 are mostly more of options the at the reader can go through before they start the story. The player can choose if they want to go to options, change their background theme or create a new story. The themes page has realistic and a scientific space page. One shows a cosmic dragon map and the other has the usual milky way planets.
The other 5-8 pages are mainly pre-story options also, the reader has an option to skip the story entirely if they do not like to read as of yet. There is a heroes and villains page to showcase their appearances later on. And lastly there is a page for the rewards gallery, here the reader is able to choose what item they wish to make the heroes pursue in the story and what collectable they get at the end. There only 3 main pathways at the moment and only 3 rewards that are clickable to pick from. Each has its own unique name. "Chromostone = Colour stone".
app pages 9-12 path 1
app pages 9-12 path 2
The next app pages actually start the story sequence, the Heroes Cubu and Cubora come across special items that lead them down a pathway of trouble and puzzles. This is also where the main villain appears "King Kaput" who seeks whatever item the reader holds.
app pages 9-12 path 3
app pages 13-17 path 1
The next and last couple of pages show off the different pathways and rewards the player has chosen. The app pages 13-17 are more of the puzzles that were expected from this prototype. The reader/player must select a planet of their choice and then tell the app what it is called to test their knowledge.
app pages 13-17 path 2
They are then shown a villain that comes from the planet they chose, and the reader must defeat it with a simple button click. Then King Kaput captures you and the reader/player has to look at the clock on the king's chest and tell the time by tapping another choice of times shown. The right time will lead the user to the right ending and end the story as a whole. As there are different pathways, the player can encounter a change in the time puzzle.
Accessible storybook app link
Here above is my playable prototype app in this blog post.