Designing a school tuckshop app

Learning hook

What was the world like before apps? Many of our students have grown up in a digital, connected environment. Sometimes it may be difficult for them to realise that someone else designed that environment and, as a result, shaped many of our behaviours.

Have students compare and contrast actions in today’s app-rich, mobile world with the pre-mobile-phone world by considering how to solve the following problems or accomplish tasks:

Great apps often start with problems. Designing a good app isn’t about knowing how to code; the app’s success really depends on understanding the needs of your users and designing an experience that meets those needs, while also providing surprise and delight.

Learning input

A retail app is designed for customers to browse and purchase products using their mobile phone. These apps can also offer personalised recommendations, loyalty programs and discounts.

In small groups, have students explore a few retail apps for small and large local businesses. Review the apps first to ensure they are appropriate for your class.

Students can then report back to the group about the following aspects of the apps:

• How does the app determine what products to show the customer?
• Does the app do anything that might encourage a customer to buy more than they intended?
• Does the app offer a ‘logged in’ or ‘personalised’ experience? Why do you think it does this?
• What main problem is the app trying to solve for the customer?
• What other problems does the app try to solve for the customer?
• What do you think has influenced the ‘look and feel’ of the app?

Learning construction

In order to create a great app that stands out from the competition, app designers use research, empathy and innovation to design an app that draws in the user and makes them want to use the app. The engineering design process is a helpful scaffold to work through this process, or you could also use an app design journal (see Resources).

Tell students they are going to work in small groups and use the engineering design process to design an app for the school tuckshop. The primary aim of the app from the school’s perspective will be to improve tuckshop sales, but there may be other, secondary aims as well, such as increasing sales of healthy foods, reducing the number of over-the-counter sales, or enabling parents to track their student’s spending.

Your main client is the school, but you will need to consider all stakeholders to develop an app that will be successfully taken up by the whole school community.

Step A: Conduct research. If your school already uses an app to manage tuckshop orders, students can begin by working out what’s working, what could be improved, and what might be missing from the app. They can conduct their own review of the app, and also seek direct feedback from stakeholders.

If your school doesn’t use an app, students will need to interview a range of stakeholders about what they require from an app for the school tuckshop. They should talk to the tuckshop convenor, students, teachers and parents to identify key features of the app.

Students should find out:

• who are the main customers
• what are their needs and pain points
• what are their preferences and habits for online ordering
• what problem you are trying to solve when your customers shop online
• if there are any other problems you could solve that would surprise and delight your customers.

Step B: Brainstorm a list of minimum viable product (MVP) functional features, meaning students should consider the minimum set of features required to make the app useful to key stakeholders. Students can use their responses to the questions above to determine some or all of the essential features of the app that they are designing.

(For a useful lesson on this topic, see iFeatures and Minimum Viable Products.)

Step C: Design the app. Start with sketches that show the overall look and feel of the app and progress to wireframes. Wireframes are more detailed outlines that:

• show the layout of the app’s elements, such as menus, buttons, images and content
• show how each of the app’s screens links to other screens
• explain the purpose of each of the app’s screens and of specific app features.

Step D: Test the app design. Have students share their wireframes with other students for feedback, and ideally with other key stakeholders too. Have students identify key themes in the feedback and select which ones they will action in their next iteration.

Step E: Refine the app design. Update the design to reflect the feedback from different stakeholders.

Step F: Communicate the final design. A great way to share an app design is to make a simple prototype. Students can use PowerPoint or Keynote to create an interactive prototype.