© 2020 Hazel

Science Journal by Google

2018 - 2019

Science Journal is a free digital science notebook product that transforms mobile device into a pocket-size science tool that encourages students to explore their world. As they conduct eye-opening experiments, they’ll record observations and make new, exciting discoveries.

I'm working as a UI/UX designer within Science Journal team where I'm responsible for redesigning

the product with new Google Material design system. Also I've been exploring and designing some early stage concepts for several upcoming feature implements, during which I working closely with a team of interaction designer, engineers, and PMs.

Role

UX design

UI/Visual design

Motion design

Interaction design

Tech & Tool

Sketch, Invision Studio, AE

Science Journal MD2 Implement

A bit of background

Material Design is a design language developed by Google

  • Launched in 2014

  • Original goal was to unite style, branding, interaction, and motion under a consistent set of principles.

But the wide adoption of Material Design has produced a noticeable side effect: All apps look identical. Not only users have a hard time distinguishing between products, companies feel like they have to give up their identity to adopt the design language.

Material 2 provides a solution by expanding the stylistic range to work efficiently for all brands. Google Material is the space we carve out in this new range of stylistic options to express Google’s Identity.

How will Science Journal adopt GM?

Principles

"Endorsed Group"

To benefit from the look and feel of the Google brand, endorsed products that are brand proximate have the option to follow the Google Material system for guidance on branded actions, open space, center alignment, Google colors, and the typographic palette of Google Sans, Product Sans, and Roboto.

Objectives

Minimum structural changes

Avoid adding scope to our fast growing project. Only apply changes to consolidate design patterns & guarantee consistency across app & platforms.

Treat it as a whole

Optimize Mobile & Tablet as a single effort, use components to avoid double work for Open Source version.

Avoid disruption with team priorities

We have a lot of fun new features in the works too!

Sketch: Component Based Approach

to this!

Going from this...

Overview

The Anatomy Of Components

Shape

Corner Radius

Increasing the corner radius across the board helps us soften our components and aligns with the friendlier, softer design language Google is adopting as a company. Nearly all rectangles will have rounded corners.

Elevation

Google Material’s elevation language takes a much more reductive approach to the baseline Material system. By consolidating elevation into three distinct levels, raised elements are more prominent while maintaining the story of an active, charged white surface.

Layout

Put The Focus On Content

The default margin size is 24dp, this gives the composition room to breathe and helps drives focus to the content. By contrast, grid-based layouts should have narrower spacing to give the content more room. Use a tighter 8dp margin and 8dp gutter as a starting point. The layout allowing the composition to confidently display tiled content. 

Use of white / product color tints

Lightening and consolidating the various greys within our products and defaulting more often to white will provide a holistic and immediate change especially within our default canvas views. Also leveraging our product colors more often as tints for selections, buttons and icons will help reinforce our brand’s identity as well as the Google identity.

Typography

Google Sans + Roboto

Support Google Sans + Roboto as they permeate every view of the app as well as most common components.

Style Guide & Stickersheets

To help establish visual consistency across Science Journal, I created a style guide as well as a sketch stickersheets. 

Imagery & Motion & Illustrations

I recreated our product's feature icons with Google Material palette and origami graphic metaphor to achieve a cohesive look. Also I created a set of illustrations can be used to explain the UI contexts or product functions.

Feature Sensor Icon

Sensor Illustrations

 In-app/Help Center Narration & Motion Design

Case Study: Drawer Solution

Challenges

The behavior of the current half state of the drawer is tricky as users have trouble dragging between full, half and closed.

Hypothesis

Full Drawer Solution

On small devices the drawer is difficult and in contrast on large devices the drawer can be unwieldy -- need to scope breakpoint designs

Not optimal for many note types

Having the drawer as a full screen would help many note types. For sensor recordings to see the data as well as ability to add more sensor cards.

For example, launching the camera intent on Android/iOS would allow users to take advantage of many more camera features.

Variety of screen sizes

Could improve note types

Design Attempts

Design A: Drawer Tabs From Below

Drawer originating from the bottom allows for tabs to have various drawer behaviors without feeling jarring.

Design A Pros

  1. Allows for drawer states ideal to the tool being selected (can launch camera intent, etc.)

  2. minimal changes needed to support sensor recording as well as text/photo in conjunction

Design A Cons

  1. Tabs limit discoverability as number of note types grows

  2. Need to test to see if usability is difficult: ie tapping camera, going to top to close to switch to new tab

Design B: Inline Observation Input

​Breaks away from the constrictions of the drawer allowing for consistent full screen note types.

Design B Pros

  1. Allows for varying note types that may need more than one screen to create a new observation

  2. More compact experiment detail page view

Design B Cons

  1. Needs further exploration to allow for sensor recording + text/photo note

Design C: Descriptive Observation Input

More descriptive approach to note taking and guides the user.

Design C Pros

  1. More descriptive than tab/drawer input options

  2. Could expand to be more clear for third party sensors

  3. +/- lends itself to be a more guided experience

Design C Cons

  1. Needs further exploration to allow for sensor recording + text/photo note

  2. Takes more clicks to get to note type

Proposed Implementations

Hybrids

After several rounds design review meetings, we decided to start from building a "hybrid mode" layout.

This layout got a minimal GM theming, avoid adding scope to our fast growing project. Only apply changes to consolidate design patterns & guarantee consistency across app & platforms. Also the design should flexible enough to handle our current functions AND be fully prepared for new features and further possible implementations.

  • Bring the new action area and full drawer mode to life on mobile devices

  • Bring a new set of system icons from GM iconography, keep the feature icons unchanged

  • Start the revamp of secondary UI elements such as buttons, feature icons, recording time stamp, etc…

  • Simplify the color palette while keep the current theming system. (Keep the current 900 color system instead if the GM 500 system, keep the colored app bar, etc.)

  • Create a more compact, 'clear and white' version of note cards

  • Descriptive cards for upcoming new sensors 

  • Implement GM motion when possible

* Blurred due to confidential materials.

* Simplified details/features due to confidential materials.

More to come

We have many exciting projects in the works.