© 2020 Hazel

Science Journal UX - Google Material 

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 leading the design of various concepts for several upcoming feature implements, during which I working closely with a team of interaction designer, engineers, and PMs.

Role

Project design lead

Interaction design

Visual design

Motion design

Tech & Tool

Sketch, Invision Studio, AE

A bit of background

Google Material (GM/MD2)

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 adapt GM? - "Endorsed Group"

Previous Science Journal Tool Drawer

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.

Minimum structural changes

Treat it as a whole

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

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!

Explorations

Sketch: Component Based Approach

Hundreds of Attempts

Solutions

Visual Refreshment

The other first-party apps have been evolving, our app looks increasingly out of date, a visual refreshment is necessary for the UI and in-app imagery to improve the overall consistency.

New Labels and Icons

Currently, some users don't realize that the tool drawer can be expanded or that they can toggle between different note types. On top of using the new material design icons, the note taking buttons should include the name of the note type underneath each icon to improve navigation.

New Note Taking Area

Instead of a drawer that opens into half and full modes, treat the note taking area as a toolbar for launching full-screen note taking experiences. Each of the icons in this toolbar should have text descriptions for better navigation.

Implement Google Material

The tool drawer is currently a custom implementation on both platforms, since its behavior is not in line with any standard Material Design components. This means that it has to be manually updated and adds additional work for implementing new note taking features. Google provides libraries on both iOS and Android for implementing Google Material. We should use the library-provided components as much as possible to make it easier to maintain these in the future.

Structure 

Open Search & Account Menu

Provide a search bar and a sorting mechanism for quickly finding experiments.

For the account menu, use an avatar circle within the top search bar to provide a consistent entry point to account-related actions. Users can recognize to which account they’re signed in to, add or remove accounts, reach My Google Account and access the Privacy Policy and Terms of Service.

Navigation Drawer

Use the top search bar to provide access to a navigation drawer. The direction from which the navigation drawer opens depends on the location of the menu button. In our case, the drawer expands from the left side of the screen. 

Action Pattern

Place the primary action accesses at the bottom of the screen (within reach of the hand’s typical position on a device). The consistent bottom action pattern makes it easy for users  to explore the product.

In the feed view, treat the note taking area as a toolbar for launching full-screen note taking experiences.

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.

Keylines

When aligning icons (such as ‘Up’ or ‘Search’) to either side of an action bar, give them a 16dp margin. This helps maintain visual balance as well as the hierarchy between actions and interface.

Primary Screen

Prioritize the user’s reading experience on the library screen, use a 8dp margin on library card layout. Vertically center the SJ name in the open search bar, use a SJ purple to maintain brand recognition through a product’s trademark color.

Secondary Screens

Left-align the title to allow longer titles while keeping the design legible. It also helps indicate the hierarchical relationship between a primary hero screen and a deeper view.

Bottom Navigation

As an endorsed product, use a FAB with an add content icon in SJ theming color instead of the Google FAB to show the distance from the Google brand. Use a tinted action area in secondary screens to emphasize the actions and improve the overall consistency.

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.

Typography

Google Sans + Roboto Treatment

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

In-App Typography Usage Example

Style & Imagery 

To help establish visual consistency across Science Journal, I created a brand style guide with the specs for color, typo, UI and imagery elements. This complete visual system differentiate Science Journal more from other Google products but keep the Google aesthetics in mind.

 

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.

Motion

Motion is a powerful tool to guide focus, hint at hierarchy, and add a dash of personality and delight.

I created the new motion spec to communicate the Science Journal brand while also reinforcing the relationship between elements during interaction and transition.

Screens

With An Eye Toward The Feature

New Feature Notes

Several fun new features are on the way, check some of the case study out below :)

Velocity Tracker.png
Drawing.png

New Graphing Pattern 

Based on our current build and research, we have several thoughts on graphing pattern and detail view:

  • Majority of activities do not ask to record more than 1 - 2 sensors at a time

  • Many users want to compare recordings of the same sensor/observation within an experiment

  • The feed view should be a summary of the graphs -- ie the ‘shape’ and notes compared to other recordings

  • Detail page -- ability to dive in to see values at certain points, possibly calculate rate of change in the future

  • Keep it fun! Make photos beautiful, graphics over icons when possible

We've been exploring some new UI patterns based on the observations above, syncing with the team, chatting about the Pros and Cons, feeling excited about next steps...

* Intended blur and simplified details on confidential materials

Design Sprint

September 2019, we spent 2 days as a team defining the vision for the next evolution of the Science Journal, trying to create a vision for a digital experience to help students collect and analyze data for scientific experiments.

More To Come

We have many exciting projects in the works.