Download our poster here:

Because our objectives include clear sub-concepts that build upon the previous sub-concept, our tutorial is always split into progressive stages. This one element remains constant throughout our prototypes. Using this element as a starting point, we iterated through multiple pixel-perfect mockups, adapting the layout and the content within simultaneously. We used our pixel-perfect mockups as a platform to test layouts and color schemes, readability, and ease of sub-concept progression. Reinforcement of our concepts through the layout of the site (our dark horse idea), and others. ultimately using elements of our dark horse layout. Sub-concepts were added and discarded as we ran user testing.

[Baseball, romance, numbers…] This sub-concept discusses the history behind our cultural choice to count in base 10 and to track time in base 60. While this sub-concept is not included as part of the “basic understanding” for bases, the interesting background is an important external motivator for users to choose our tutorial and to learn more about bases.

[60 and 10 as familiar bases] Bases are a way of representing numbers (base 10 AND 60)
This sub-concept identifies the bases already familiar in our users’ lives.
Visual: Animation of how the clock system and the number system counts the total seconds or 1’s
Interaction: Users can drag the hands of the clock/circle and see the corresponding numbers showing the units filling up and carrying over

[Counting in bases other than 10] There are other bases than 10
Interaction: Users pick a number from 3 to 9 to choose the base for the circles
Interaction: Users can interact with the circles to explore numbers in a base other than 10

[Converting between bases]
Interaction: Example with base three with fill in the blanks and an interactive clock allowing them to set a number and convert it themselves

[Base notation]
Interaction: Users pick a number from 3 to 9 to choose the base for the circles
Interaction: Users can interact with the circles to explore numbers represented in base notation.

Our target users are young individuals, including high school and college students, who are looking for a quick and easy introduction to bases. Students typically encounter bases in school when they are instructed to learn about the topic, or when they are learning another concept that requires a prior understanding of bases. These are individuals looking for a surface-level introduction to bases.

Our tutorial aims to shine a light on our users’ prior familiarity with bases (e.g. minutes and hours in base 60) and to leverage this existing knowledge to (1) give them an introduction to bases, and (2) introduce them to some of the other uses and future concepts in the field. Given our users’ limited time constraints, we want our user to google “bases”, click on the first link in the results (our interactive tutorial), and learn everything they need to know about bases through our tutorial. Our tutorial should provide enough information to assist our users in performing their work. Our tutorial should also provide enough additional information to pique their interest in learning more about bases, whether immediately or in the future.