Timely an Educational app that teach kids to tell time.

Project info

  • Software:Adobe XD
  • Class:User Interface II

Educational Design

For this project students had to make a mobile or computer application to teach a skill. Over the semester we had studied each of Richard E. Mayer’s Principles of Multimedia Learning. This project shows that we can effectively apply those principle to our own designs.


I made a phone app to teach children how to read analog clocks. This writeup will detail my lesson plan and how I used certain concepts to benefit and promote learners. These concepts are all used with the Cognitive Theory of Multimedia Learning kept in mind. This theory states that learners’ approach new information with a knowledge construction view in order to build a mental representation to make sense out of their experiences.

I will mention the principle I used to promote learning as I go through each step. When I say, “promote learning” I am basically saying “Getting learners to use their Germane Cognitive Load.” This type of cognitive load is produced by the construction of schemas. Schemas are just how we structure and organize information in out memory.

The Lesson

So, to effectively promote learning a new concept, the lesson is broken up into five stages. These five stages are based on the principles of instruction.

  1. Problem-Centered
  2. Activation
  3. Demonstration
  4. Application
  5. Integration

The first stage, Problem-Centered is the most important and frames the direction you take the other four stages. The issue I am addressing is that people don’t know how to read analog clocks. This is a common issue and something everyone will come across eventually, which is good. Learning is promoted when learners are engaged in solving real-world problems.


The first step is to peak learners’ cognitive interest because students enjoy lessons that they can understand. So, in the Activation phase I reference prior knowledge that learners will already possess. In the case of the first lesson, how to read the hour hand. I ask learners to think about what time they wake up and when they eat lunch because they should already have a sense of when it happens even if they don’t know the exact time. Asking learners to recall, relate, describe, or apply previous experience to create a foundation for new knowledge promotes learning.

Four app screens for the activation stage.


The second stage promotes learning by providing appropriate learner guidance. In my case I provided a video that demonstrates the basics of reading the hour hand. Things like: the hour hand, its rotation, and the positions of each number. All of these aspects are presented with images demonstrating each one in action it is important to do this instead of just saying how each action occurs to promote learning.

An app screen for the demonstartion stage.

Across all stages but most importantly in the Demonstration stage its necessary to be clear and concise. So, make sure to exclude extraneous material (Coherence Principle). Do not bog down your demonstration with unnecessary information. For example, in each of my lessons I don’t ask learners to remember when I wake up or eat lunch. Even though its related to the topic it’s unnecessary information and doesn’t promote learning. There is also a potential trap you can fall into if you stray to far from this principle. Putting in seductive details just to make the lesson more interesting comes at the cost of creating irrelevant detail. While it may seem nice to have, it can create an extraneous cognitive load because users may dedicate some of their working memory to this useless information. This opens up the possibility that learners can forget important information.

When information is presented in a video, opposed to a something static like a book, a few more principles are applied. The first thing to keep in mind is that learning is promoted when a video is presented in user-paced segments rather than as a continuous unit (segmenting principle). In my video each piece of new knowledge is accompanied with a short animation displaying what’s being said. Then, a short pause will follow each segment to separate all the important points (Spatial & Temporal Contiguity Principle). Using these images and spoken dialogue is beneficial to learners (Multimedia Principle), but it’s also important to keep it this simple. I don’t need Images, spoken dialogue, and text all displaying the same thing in one video (Redundancy Principle). Showing the same information in multiple different formats can confuse learners and adds to their extraneous cognitive load.


The third stage we ask learners to apply the knowledge they’ve gathered from the previous phase. To promote learning in this section I require learns to use their new knowledge to solve problems in a two-part quiz. The reason there are two parts is because the first needs to provide some guidance to help users guess the answers. The first “How to Read the Hour Hand” quiz helps learners by having the hand point directly at the correct hour along with highlighting it. The second quiz will need diminished coaching to further promote learning. For my second quiz answers are no longer highlighted and the hand points a bit past the hour.


The final stage looks to cement the knowledge by integrating it into learner’s everyday life. For my learners I ask them to take a picture of an analog clock and upload it to the app. Then they’ll set a clock to the time shown in that clock. This is so they can relate what they have learned to the real world.

Over the entire app

So those were the five stages based on the principles of instruction and some of the additional principles that related to each stage. Though, I did use several other pieces of guiding knowledge to shape this lesson. These guidelines took place across the entire app as oppose to a single section.


ARCS model is a guide to generate motivation in users. These guidelines are questions to address when approaching designs for teaching. All the questions are broken up into four categories: Attention, Relevance, Confidence, and Satisfaction.

Attention is concerned with capturing and maintaining learner’s interest. I accomplish this mostly in the Activation phase by relating the topics of the lesson to prior knowledge. I tried to keep each lesson short in order to maintain users’ attention. Relevance goes hand in hand with the Coherence principle pretty well. It asks questions like “How can I best meet my learner’s needs?” Like I stated earlier, I exclude extraneous material and avoid bogging the lesson with unnecessary information. Next is Confidence where we look to build positive expectations for success. This will be built up in the quiz section where learners will succeed based on their efforts to pay attention in the demonstration phase. Finally, there’s Satisfaction which students we’ll get after completing the two quizzes. Reinforcing the new knowledge in the Integration phase is also key to ensure satisfaction.

Signaling Principle

So, taking a step back from specific informational principles. There are several design choices about the layout of information used to signal the organization of content. Highlighting the organization of essential material will promote learning.

The app layed out based on the four steps.

Though it doesn’t show up a lot in my design chunking and hierarchy are relevant. Hierarchy is necessary to show the importance or order of content and chunking is used to package related content together. Chunked sections are usually under a header and are followed by a visual break. This intuitively communicate the organization of content. You can see this in my navigation the best. Where users can see the organization of the app. Speaking of the navigation it is important to maintain a persistent navigation. We don’t need users getting lost. An app does have the same luxury of space that a computer monitor does, but it can make use of some common knowledge visual cues such as the hamburger-menu in the top right of the app


For my final project I made a phone app to teach children how to read an analog clock. These are all the principles I considered going into this app. Information Design is not easy. It is important to keep in mind the impact of all your choices because every aspect needs to work together to make a successful learning experience.

This app is a high-fidelity prototype made in Adobe XD

The LAyout of the entire App https://xd.adobe.com/view/57767ae2-32a6-4806-4c38-570bc09edced-2147/