Owl

Owl is an educational app that uses Material Design components and Material Theming to create an energetic, motivational brand experience.


About Owl

Owl is an educational app that provides courses for people who want to explore and learn new skills in design, art, architecture, and fashion. The Owl brand uses bold color, shape, and typography to express its brand attributes: energy, daring, and fun.


Bold aesthetic

Owl’s design reflects the energy and excitement of learning a new skill, using a bold aesthetic that expresses exploration and growth. It’s UI contains unfilled...

Read More

Owl’s design reflects the energy and excitement of learning a new skill, using a bold aesthetic that expresses exploration and growth. It’s UI contains unfilled shapes that invite the user to populate them with new content and courses. It’s copywriting speaks with a inviting, can-do tone of voice.



Product architecture

Owl is divided into three sections, each with their own color theme and interaction model:

  1. Personalize (yellow)
  2. Browse (blue)
  3. Learn (magenta)

Scaled down to 50%

Hub and spoke structure

The information architecture of the app uses a hub and spoke structure.

The Browse section serves as a “hub,” where various “spokes,” or child nodes, are available to users in the form of instructional classes. After a class is chosen and the user enters the Learn section, the class becomes a hub, with each section of the class becoming a spoke.

This structure applies to the Browse and Learn sections of the app, while the Personalize section is an onboarding section.

Section 1: Personalize

The Personalize section is dedicated to selecting areas of interest. It’s characterized by a yellow theme. This section is a form of onboarding, where customized...

Read More

The Personalize section is dedicated to selecting areas of interest. It’s characterized by a yellow theme. This section is a form of onboarding, where customized chips represent selectable course subjects.

Navigation

Navigation can be accessed by tapping the floating action button, and settings can be accessed through the settings icon.

The Personalize section of Owl on mobile

Section 2: Browse

The Browse section is a hub for the user’s areas of interest. It’s characterized by a blue theme. This section contains three top-level navigation destinations:...

Read More

The Browse section is a hub for the user’s areas of interest. It’s characterized by a blue theme.

Navigation

This section contains three top-level navigation destinations:

  • My Courses
  • Featured
  • Search

On mobile, Owl uses a bottom navigation bar to access these sections.

Use the bottom navigation to visit the My Courses page on mobile

On mobile, use the bottom navigation to visit the Featured page.

On mobile, use the bottom navigation to access the Search page.

On tablet and desktop, rail navigation provides access the three destinations.

Owl’s rail navigation on desktop

Section 3: Learn

This section is a hub for course content. Each course has an overview screen that contains tutorial videos. To access the tutorial videos for a...

Read More

This section is a hub for course content. Each course has an overview screen that contains tutorial videos.

Navigation

To access the tutorial videos for a course, tap the curved shape in the bottom right of the screen. To navigate back to the Browse section, tap the back arrow (in the top left of the screen).

A course landing page on mobile

When the sheet is tapped, it expands full screen to show a list of tutorial videos.

When a tutorial video is tapped, it can be played full screen in landscape mode, or viewed with step-by-step content in portrait mode.

On desktop and tablets in landscape orientation, there is enough screen space to show both the course overview content and videos.

Scaled down to 50%

On smaller desktop views and tablets in portrait orientation, videos are hidden by default, but they can be revealed by accessing a side sheet.

Scaled down to 50%


Layout

Grid system

Basil uses a responsive grid system, which has flexible columns and padding that can resize depending on the screen width (such as mobile, tablet, or...

Read More

Basil uses a responsive grid system, which has flexible columns and padding that can resize depending on the screen width (such as mobile, tablet, or desktop).

This grid system informs where typography is placed, because Basil uses centered-align text on sections of its layout.

Owl’s grid system, scaled down to 50%


Color

Owl has three primary colors. Each color is used to create a distinct visual theme for each section.

Theme 1

For the Personalize section, yellow is the primary color, and blue is the secondary color.

Read More

For the Personalize section, yellow is the primary color, and blue is the secondary color.

Theme 2

For the Browse section, blue is the primary color, and yellow is the secondary color.

Read More

For the Browse section, blue is the primary color, and yellow is the secondary color.

Theme 3

For the Learn section, pink is the primary color.

Read More

For the Learn section, pink is the primary color.


Typography

Type scale

Owl’s type scale provides the typographic variety necessary for the app content. All items in the type scale use Rubik as the typeface, and makes...

Read More

Rubik

Owl uses the Rubik typeface. Rubik is sans serif, with slightly rounded corners, and many font weights to choose from.

Read More

Owl uses the Rubik typeface. Rubik is sans serif, with slightly rounded corners, and many font weights to choose from.

Rubik’s letterforms

Rubik compared to Roboto


Iconography

Owl’s iconography reflects the curved shape and style of it’s brand typeface Rubik.

1. Owl’s icons were designed using the same grid structure, 2. A collection of Owl’s icons


Components


Chips

Owl uses customized choice chips, allowing the user to personalize their browsing experience.

A choice chip that has not been customized

Owl choice chips use custom size, shape, typography, color, and elevation, with an image treatment to indicate selection.

Lists and dividers

Owl uses the list component in a variety of ways. This list returns search results, with custom typography, color, iconography, and imagery. Inset dividers separate...

Read More

Owl uses the list component in a variety of ways.

This list returns search results, with custom typography, color, iconography, and imagery. Inset dividers separate items.

This list has custom imagery, various typographic styles, and an action to play a tutorial video. The list items are separated by inset dividers.

The width of each list item is determined by copy length, with generous padding between each list item. Each includes in-line actions, multiple image types, and typographic styles.

Cards

Owl featured courses are presented using a card collection. They have custom shape, color, typography, and iconography, with center-aligned content. There is little padding between...

Read More

Owl featured courses are presented using a card collection. They have custom shape, color, typography, and iconography, with center-aligned content. There is little padding between cards, and the collection uses a masonry pattern (where cards have varying heights).

Owl’s customized card collection


(Scaled down to 50%)


Sheets

Owl uses sheets to presents course tutorial videos. On desktop and tablet, these videos can be found in a side sheet that’s been customized with...

Read More

Owl uses sheets to presents course tutorial videos. On desktop and tablet, these videos can be found in a side sheet that’s been customized with the Learn section’s primary color: pink.

Scaled down to 50%

On mobile, Owl uses a sheet to present course tutorial videos. Tapping the minimized sheet on the bottom right causes the sheet to expand full screen.

Bottom navigation

Owl’s bottom navigation component has custom color, typography, and iconography.

Read More

Owl’s bottom navigation component has custom color, typography, and iconography.



Motion

Launch screen

Owl’s launch screen displays a character animation (an animation that brings animated characters to life) to gives the app a playful quality. Motion can be...

Read More

Animated icons

Owl’s icon animations are inspired by both its logo and loading state animations. Motion can be customized to express a distinct style and personality. Related...

Read More

Navigation transitions

Navigational transitions are movements between states in an app, such as from a high-level view to a detailed view. Related Article arrow_downward Transition choreography is...

Read More

Top-level transitions

Owl’s bottom navigation transitions use stagger and overshoot motion to express an energetic style.

Parent-child transitions

The image on the card is a focal element that enhances continuity. Linear motion produces a simple movement, making the transition easy to follow.

Sheets transitions

Arc motion is used to transform the sheets fluidly into a list.

Oscillation

Selecting and scrolling chips display an oscillation effect, creating a quirky and playful vibe.

Read More

Selecting and scrolling chips display an oscillation effect, creating a quirky and playful vibe.

Loading

Loading is expressed using an pattern image treatment that is animated. The dotted pattern reflects the shape of the circular brand elements, such as the...

Read More

Loading is expressed using an pattern image treatment that is animated. The dotted pattern reflects the shape of the circular brand elements, such as the logo and icons.