PROJECT

SNUDLE Science Notebook

Visual Design Exercise

A presentation of three visual interface design options for the Snudle Science Notebook application.

Tools

Pencil + Paper | Sketch | Adobe CS

Timeline

1 week

Outline

OVERVIEW

The Snudle Science Notebook developed by CAST (Center for Applied Special Technology) is an educational platform aimed at making science concepts more accessible for 4th grade students with reading and writing challenges.

CAST tasked me with designing three versions of the Snudle interface geared toward 8th grade students. The interface designs needed to meet the following requirements:

  • Include all of the existing content elements and interactions
  • Demonstrate a wide range of visual styles and themes
  • Appeal to a middle school audience

I worked on one content-heavy, interactive page within the application that serves an an exemplar of the product and typifies the needs of the platform.

CAST's Snudle interface design for 4th grade students

BACKGROUND RESEARCH

To begin this project, I completed a survey of popular websites and games (with both educational and non-educational content) that have large audiences in the 13-14 year old age group.

Looking beyond apps like Snapchat, Instagram, and Twitter, which are incredibly popular but are predominantly accessed via mobile, I explored pc games with huge followings such as Destiny, Minecraft, and Halo as well as content-delivery and social media apps like Spotify and Tumblr.

Notably, my findings showed that teens are most commonly accessing platforms that are not designed specifically for their demographic, but appeal to a wide range of users. My overarching takeaway from this analysis was to aim for age and gender agnostic designs that do not skew too young. Rather than risking the alienation of teen users who gravitate toward more sophisticated design aesthetics, I endeavored to design for a more universal audience without a juvenile flavor.

Minecraft has approximately 4.6 million users under age 15

BRAINSTORMING THEMES

I listed out a few thematic directions to guide my initial sketches:

1 – Isometric retro-futuristic worlds (Minecraft, SimCity, Civilization)

Screenshot from Civilization

2 – Bold and bright gradients offset with chunky, clean text (Snapchat, Instagram)

Screenshot from Snapchat

3 – Otherworldly spacescapes with dark, metallic, and sleek controls (Halo, Destiny)

Screenshot from Destiny

4 – Sophisticated neutrals and monochromatic, muted colors (Etsy, Starbucks)

Screenshot from starbucks.com

WIREFRAMING

Keeping in mind all of the existing features that are required for the functionality of the application, I began to sketch wireframes for layout and composition possibilities:

HIGH FIDELITY MOCKUPS

Combining the themes that I brainstormed with my wireframed layouts, I created a series of high fidelity mockups of the visual interface in Sketch (with a little help from Adobe CS for editing background photos and vector graphics). Initially, I produced five designs:

Presentation Selections:

I sought out feedback from several prospective users to get reactions to the initial designs. With the aid of their feedback, I culled the designs to three selections for presentation to CAST:

Cosmos Theme

Inspired by popular video game motifs, this theme also connects to one of the Snudle Science Notebook unit topics: Predicting the Weather. The layout utilizes dashboard-style menu echoes the console controls featured in PC games.

Retro-Future Theme

Using the flat, isometric style of Minecraft as a blueprint, this design is uncluttered, boxy, and monochromatic, with a nod to retro-tech in the font and drop shadow choices.

Atomic Age Theme

This theme evokes the more mature design styles of inter-generational websites, while referencing the scientific theme with the atomic iconography.

DESIGN ITERATION

The Atomic Age Theme was chosen for further revision. Upon incorporating feedback from the design team, I refined the design to create a more streamlined composition that provides a clear starting point for the user.

Atomic Age Theme - Revised Design

Atomic Age Theme - Style Guide