Teaching.com Design Test submission
- Figma - The working file for this task. Feel free to poke around. I've kept a lot of my process artifacts in there.
- Google Sheets - Typing Rewards Map - Overview of the milestones, levels, characters, accessories, badges, etc.
- CogLode - Cookie Clicker - Interesting article referenced in the video.
- Post-Reward Reset Phenomenon - Phenomenon referenced in the article/video.
Modern Design Upgrade
After a quick assessment of the current typography, I determined that the Museo Sans was handling the balance between young and adult learners fairly well (with some room for improvement). However, it was feeling a bit dated. After experimenting, I landed on Circular, a geometric sans serif. A plain geometric sans would be too stale in this context, but Circular’s subtle, humanistic quirkiness gives it a nice warmth and friendliness.
I maintained the rounded corners from the current design, as I felt those fit nicely in the context of the website. The current design and the wireframe had some misalignment issues which caused a distracting, visually jarring effect. I remedied this by creating a vertical and horizontal grid. This is most noticeable in the content bucket section.
Refining Content Navigation
My design takes a lot of the great design choices made in the wireframe and amplifies the usability through the visual design. For the top navigation, I emphasized the user dropdown by reducing the visual weight of the rest of the navigation elements. A lot of the secondary information is now a much lighter grey to reduce hierarchy while still maintaining legibility. This focuses attention on the elements that really matter - the character, the stats dashboard, the current and complete lessons, along with their calls to action. As you can see, the future lessons are all much less visually dominating in my design, and this enhances the content navigation for the user by clarifying their options.
I removed the labels in the stats dashboard to emphasize the stats. The stats each have their own unit of measurement included which makes each module fairly self explanatory, however, I also added colored icons to aid in additional clarity.
The standardized color schemes help define meaning. The yellow is used in the top bar in the stats and xp progress, whereas the green progress in the content bucket is used to define lesson progress, which corresponds to the green, completed lesson.
The buttons are all consistent width and type size to prevent any confusion and just help tie the design together visually.
Balancing Appeal for a Diverse Audience
I began with an assessment of the current palette. I determined that the color choices worked well together for the most part, but could benefit from some very small adjustments to cater to a more mature audience.
- I desaturated and darkened the main color very slightly.
- I exaggerated the tint and shades by adjusting the brightness/darkness and saturation.
- I also removed the 1-2% blue tint that was used on the lesson cards previously
- Similar treatment to the green
- Slight desaturation and some darkening of the main color.
- For the secondary colors, I actually saturated the shade a little to balance the desaturation in the main color and tint.
- I darkened the main color and slightly adjusted the hue to bring in a little more orange to allow for some more harmony with the new shade.
- I replaced the banana brown shade with a warm fire orange, and created a light tint which could be used for highlights.
- I adjusted the main black from #000 to #ccc to maintain warmth and harmony.
The icon illustrations are refined and simple so that they are functional at a small size and to make sure that they appeal to a wide audience. The bright colors and subtle details add interest and make the illustrations more fun.
I expanded these elements to the character. In order to appeal to the diverse audience, I styled the character with geometric, flat shapes and just enough detail to add interest. I created 3 unique expressive states for the character that are used to communicate guidance, motivation, and celebratory dialogue. Each of these help tell a story, and engage the user, regardless of age, through visceral experience.
Mapping out the Experience
I mapped out the various levels, rewards, and milestones here to get a good understanding of how these could work in a UI, and also shake out any flawed logic before I started designing. I've included the levels and their appropriate milestones as well as the upgradable accessory options that customize the character, (such as the bowtie in the mockup , a pair of shades, or a crown, etc.) as discussed in your video. As you can see, I've also added a number of additional layers outside the scope of just levels, accessories and XP milestones which I cover in more detail below.
A user can gain badges by reaching stat specific milestones. They can gain XP by completing lessons, gaining stars, and most importantly, for meeting threshold milestones of minutes spent typing (in addition to the time badges). These specific goals not only help motivate the user to hone their specific skills, but they also encourage the user to spend more time typing. Due to the post-reward reset phenomenon, the user's motivation crashes after accomplishing a particular goal. To counterbalance this, I have introduced these additional small, medium, goals to ensure a continuous positive feedback loop, which in turn supports engagement and retainment.
As I mentioned above, the user unlocks various characters as they gain new levels. They can also use badges to unlock special characters and special accessories. These special unlockables correspond to the badge that they are unlocked the reward with. For example: the 120 WPM Badge would unlock the cheetah. The mystery of locked characters motivates the user to continue building skills and coming back for more. I created a spectrum of ability for characters which further builds on that curiosity, as it establishes a pattern and entices the user to participate in guessing which the next character will be.
Project inspired by: