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.
Project design lead
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!
Sketch: Component Based Approach
Hundreds of Attempts
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.
Open Search & Account Menu
Provide a search bar and a sorting mechanism for quickly finding experiments.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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 :)
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
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.