App Prototyping Process with Keynote and the About Me Playground

I have been teaching app prototyping to students for more years than I can recall and though the process gets adapted based on the user group the fundamentals remain the same and are heavily supported by a lot of the Apple guides. I have completed this activity with all age groups the youngest being just 6-8 and each time been interested in the engagement and resulting ideas from social media apps for unicorns to apps that can help with mindfulness, food waste, language learning and more.

Stage 1: Brainstorming

To start we look at Brainstorming. This is where those beginner discussions start. Initially I would let students to pick any idea but over time I learned it was better to give some guiding topics. The ones I now use and seem to work every time are Community, Inclusion, Environment, Creativity. A student can pick one or more of these to get started. I usually give these themes alongside the question 'How will your app help?'. Students then need to think and come up with a plan. It is important not to rush this stage and it is also ok if the student changes their mind between this and the next stage.

This stage is also support by either the Everyone Can Code Design Journal and/or the Develop in Swift App Design Workbook. My decision on which one to use is based on the group. A lot of times this ends up being the Journal.

Stage 2: Planning

Throughout this phase we plan our app. Again we use either the Everyone Can Code Design Journal and/or the Develop in Swift App Design Workbook. At this stage we talk about features we might like from other apps, colour schemes, buttons, navigation etc. In addition to the journals we also closely reference the Inclusive App Design Activity from The Learning Centre. For me this it is essential that our students consider inclusion at an early stage and plan an app that everyone can use. We also explore some accessibility features here including voice over, text to speech and more.

Stage 3: Prototyping

I won't lie this might be my favourite stage. This is where those ideas come to life. Unfortunately it is also where some ideas die but it is a great learning activity. Again we use the design journal or workbook here but depending on progression I did change my workflow slightly late last year. Below are a couple of options followed by an advanced option I now like to use.

Option 1: Complete a Keynote Prototype.

Using the journal or workbook sketch your prototype. Follow up with Keynote and Keynote shapes. This option might be familiar to a lot of people but for anyone looking to get started you can see this process in my video here. video here.

This usually takes about 1.5 - 2 hours of class time but varies with different groups.

Option 2: Complete a Keynote Prototype and progress to develop it in Swift Playgrounds on iPad.

The above option is good, sufficient in most cases and gets the prototyping job done but I always had students saying how much they would like to actually create the app and thanks to an update to Swift Playgrounds late last year now we can. With this in mind I adjusted my prototyping stage in line with the About Me Playground which is featured in the Celebrating You Educator Guide and can be downloaded within Playgrounds app on iPad.

Having played around with this new playground a bit I thought it was the perfect progression without diving too deep into development and also allowing for the fact we may be using cross curricular subject time and not a specific code class.

For this process follow the below steps. This has taken about 4 hours of class time and includes the creation of the Keynote template and Playground.

Keynote process overview.

Download my Keynote template which you will find as an attached file below. I created this deck with the About Me playground in mind specifically focusing on SF Symbols and Colours. This is a simple 6 slide deck that can be edited as needed.

Slide 1 = This slide shows the dynamic colours available in Swift Playgrounds. I find this helpful when students are planning.

Slide 2 = Landing Screen - this is the screen that individuals using the app will see for the first time. It corresponds with HomeView in the About Me Playgrounds Template.

Slides 3 - 6 = Additional screens corresponding with ContentView, FavoritesView, FunFactsview and StoryView in Playgrounds.

Keynote - Homescreen Page.

This page should have a background color, navigation such as a play button or multiple shapes as navigation options. Shapes can be added in Keynote by clicking on the +.

See below for the Keynote Prototype on the left versus the Playgrounds Preview on the right. The idea behind this app was originally an app welcoming visitors to the area but this was adjusted as a welcome app for new students from Ukraine.

Playgrounds process overview.

For this process open up Playgrounds and download the About Me playground. This is a guided Playground which means that there is some content in there + by clicking on the book symbol on the right hand side students will be guided through making some changes. As with all code bugs and errors will happen but it is a good environment for introducing code and great progression from the Keynote prototype.

In Keynote navigation is added by clicking on a shape and choosing insert link> then linking to the slide number. In Playground navigation is determined by labels for example Label ("Food", systemImage: "cart.circle") Because these symbols do exist already in the About me Playground these can easily be edited by students once they make a match between what they wasn't to change which in this case would be the symbols and where this is in the code.

A student can then progress through this About me Playground using their Keynote Prototype and build a more advanced prototype and in turn be introduced to some basic code. They can also select their app icons and other customisations under App Settings.

By spending time in Keynote initially it makes the design process easier when working in the Playground.

Evaluate.

Whether you do the Keynote prototype and stop there or progress into Playgrounds it is really important to evaluate the app. What works, what doesn't, why not? Would this make a good app and would it be worth more time and learning to make this happen?

In my classes every time we do this we usually end up with some apps that just won't happen. It might be that the student is not interested, it might be that the idea isn't original or there might be some issues with privacy or copyright. However, in every class there are at least 2-3 guaranteed ideas that are worth exploring further. We would then invest more time in developing these prototypes.

Next steps.

This is just the start. A keynote prototype or even an About Me prototype is not an app it is the start of the process and designed to get students introduced to code and exited that they too can become app developers.

As a teacher I would then start teaching the fundamentals of code, loops, functions, conditionals and more and we would explore more of the Playgrounds in the App Gallery providing students with more skills and code to extend their apps. Below is a list of the above mentioned resources as well links to additional materials you will find useful as and teacher and ones that can help you and your students start this journey.

Resources and References.

1. Everyone Can Code Design Journal
2. Swift App Design Workbook
3. Celebrating You Educator Guide
4. Inclusive App Design Activity
5. Link to everything you need to know about getting started with code, developing apps and setting up coding clubs.

Attachments

App Prototype template.key

Download  (386.7 KB)