An introductory web app


This e-learning lesson aims to teach
basic typography concepts to those who
may have not had any formal design training.


Project type:
Educational technology
2.5 months
Prerna Pradeep
Methods used:
Cognitive Task Analysis, Think-Alouds, Sketch, InVision

The Approach

Typography is a field that is not always given enough thought by non-designers. Whether they are the content creators or the end-users, it is an important field to comprehend: it keeps the reader engaged in the content and helps highlight the message being conveyed. We came up with a web-based instructional unit in order to teach basic typography concepts. The goal is for users to be able to communicate with designers and make appropriate visual decisions.

Our process consisted of identifying goals (knowledge components), designing online assessments, testing them through a cognitive task analysis and designing our instructional unit.

Our Solution

You may interact with our prototype below:


Click here to view the project `e-learning`


Identifying Goals & Online Assessment Creation

We started by identifying the knowledge components (KCs) we would like to address in our unit:

  • 1.1: Identifying the (anatomical) parts of a character.
  • 1.2: Type Classification based on history/time period: Old-Style, Modern, Sans Serif
  • 2.1 Combining typefaces efficiently (based on classification)
  • 2.2 Avoiding common type errors
  • 2.3 Choosing type based on the message that they want to convey depending on the audience.

Based on these KCs, we designed four different online assessments:

Task 1: Identify which classification a typeface fits into

Task 2: Identify different parts of a character

Task 3: Given an image, fill in what crimes against typography are being committed

Task 4: Identify most efficient typeface depending on message and audience

Task 3 (Type crimes): students knew something was “wrong” but did not know how to verbalize it. The prompt made them identify crimes that were non-existent. This led us to include the answer option ‘No Crime’ in Task B.

Cognitive Task Analysis: Results Summary & Iterations

In order to test our assessments, we conducted a rational CTA with an expert and think-alouds with three identified novices. The novice users we selected for the CTA were all graduate students with minimal design background. Some of the results include:

Task 1 (Terminology): students felt like the type anatomy terms gave the answer away. Task 1 and 2 were combined into task “A”, since it was seen as a “pretraining” section.
For Task C, we showed a finished design and asked the user to describe the tone of the message. After that, we changed the typeface of the design progressively in order to change the tone of the design and ask the user to analyze based on the changes.


Initial Instructional Design

Our instructional approach is divided into three sections:

A:: Terminology (Type classification and anatomy) –  Pre-training for the following two sections. It also introduces them to the basic terms in typography, part of memory and fluency building.

B: Identifying and avoiding type crimes – Students are introduced to the faux-pas in design. By being able to identify the aspects of a design that make it less effective, students will be able to differentiate between poor and good design. We expect that students will use the terminology learned from Section A.

C: Designing/choosing typography based on tone, message and audience – The final section provides students with the practice necessary to choose typography based on certain parameters (tone, message desired, etc). We used modality and practice with feedback to instruct them the subtleties between each font family.

Implementation of Instruction

For our prototype, we focused on Section C: Designing/choosing typography based on tone, message and audience. [KC 1.1, 1.2, 2.3]

  • Choosing typeface – using audio, we convey the tone of the message that is displayed. Instruction explains how some type classifications evoke particular tones (e.g., serifs usually evoke a formal tone).
  • Changing a design’s message/tone based on typeface – by using practice with feedback, we show students step by step how much difference the appropriate (or inappropriate) typeface can have on a design. This process will be similar to going through an iterative design process.
Paper prototype testing

Screen Shot 2016-02-21 at 11.32.37 PM

We started our implementation by making paper prototypes. These consist of five different website screenshots. We removed all text from the examples and designed two variations for each text content using two different typefaces. We then cut out the content and let users place them on the blank website, just like a drag-and-drop activity. Users were able to choose the timing of the audio (which narrated the text in the intended tone), i.e, they could read the text first and then listen to the narration, or viceversa.

Screen Shot 2016-02-21 at 11.34.11 PM

Testing: summary of results
  • Placing of the audio made a difference – those who listened to the audio first found it helpful, those who heard it later did not.
  • Learners spent a lot of time mixing and matching the navigation bar with the content, which was not a part of our KCs.
  • Users felt being able to place the options onto the website helped them decide the most appropriate one, rather than choosing from the set of options.
  • When we asked users to explain their choices, most students didn’t know how to explain the reasoning behind their answer choices using the appropriate typography terminology. We plan to add a self-explanation prompt that includes a dropdown of answer options in our next iteration.