
Drawing Notes on Science Journal
2018 - 2019
Google Ink is an API that enables drawing capability within an app. Integrating Ink with Science Journal would take the form of two primary new features: first, the ability to take free-form drawing notes, and second, the ability to annotate photos and graphs with drawing overlays.
These features are important additions to the Science Journal toolkit since they can be used on any device and further Science Journal's goal of becoming a digital science notebook. I've been working on this feature with several rounds design explorations and iterations.
Role
Project UX design lead
UI/Visual design
Motion design
Interaction design
Tech & Tool
Sketch, Invision Studio, AE
Overview
Google Ink is an API that enables drawing capability within an app. Integrating Ink with Science Journal would take the form of two primary new features: first, the ability to take free-form drawing notes, and second, the ability to annotate photos and graphs with drawing overlays.
The drawing features are important additions to the Science Journal toolkit since they can be used on any device and further Science Journal's goal of becoming a digital science notebook. Drawing notes are similar to text notes or photo notes in that the user specifies a new piece of data to insert into an experiment's observation list.
Our future directions would include integrating machine learning capabilities to recognize drawings and aid in the creation of hand-drawn graphs and charts.
Goals

Creation
Enable users to create free-form drawing notes using a new note type in the toolbar
Annotation
Enable users to annotate their photos and graphs with drawing overlays
Share & Exploration
Allow users to export their sketches to be viewed outside of Science Journal
Elements Explorations

The drawing note interface is similar to Ink integrations in other products, such as Google Keep. The bulk of the interface consists of a canvas for drawing, and the canvas is accompanied by a collection of buttons for adjusting various parameters.
These buttons include options for adjusting properties, such as pen size, type, and color, as well as additional tools for selecting and erasing elements and determining the background type (blank, dot grid, line grid, etc.).

The interface also includes an 'undo' and a 'redo' button next to each other, which are greyed out by default and only become selectable once relevant actions have been taken on the canvas.

Finally, the interface contains a primary action button in the bottom bar for posting the drawing to the experiment's observation feed.
Keep In Mind

Our drawing notes are completed using either a finger or a stylus on the device. The primary scenario would be the user creating a drawing piece with a single finger over a limited size mobile screen. The design need to consider the usability and reachability issues carefully. Plus, since we were not proposing a professional, fancy feature for creating masterpiece illustrations. The design should keep the simplicity and efficiency in mind.
Design Explorations & Testing
Toolbar Format
Toolbar Freeform vs. Contextual Icon
Freeform Toolbar
This option is using more of a “palette” feeling with the tools at the bottom as tappable graphics rather than like “buttons” and “icons”
Note that the color and the stroke size are pulled out and to the left side of the palette

Pros
Similar to many drawing apps currently in the market, graphics help the user understand what type of stroke the tool makes.
Also it takes up less vertical space overall
Cons
Other options are hidden away, users may not understand why first tool is graphical and 2nd are icons (felt this was more clear for second set of actions -- ie photo insert, shapes, etc)
Contextual Options Emerge
Based on the feedback from the first review, we have included an option that is more similar to the action area, using button-like actions.
Note that there would be an addition of a secondary toolbar -- users should still be able to select between drawing options but also have quick access to the eraser and insert options

Pros
Similar feel to the other tools since the action area is visually similar. Users may just default to using the pen tool and not need pen/pencil/marker/etc to be primary actions.
Cons
Secondary toolbar takes up a lot of vertical space, users tend to have a harder time understanding what the icons mean (vs the graphics).
Variation Picker Logic
Global vs. Individual
Global Variation Picker
This option has a secondary bar that appears for things like color picker and stroke width selection

Pros
The color and stroke width selection are applied to all drawing tools once they've been adjusted, this would be efficient when doing some speed annotations.
Cons
The concern here is that this takes up a lot of screen space, on landscape the toolbar is also quite small to make room for the app bar.
Individual Picker
This option keeps the toolbar at the bottom, the stroke width and color picker will animate the options in, and when the user begins to draw, the previous toolbar will appear

Pros
This allows for users to have different colors on different items (ie highlighter could be yellow, while pen is black).
Also the stroke width picker shows multiple example options rather than a slider (could be implemented with either option).
Cons
This option would require more taps to access the primary actions. Also requires more animation.
Synthesis
Syncs & Discussions & Critiques
We've been explored rounds of designs to identify what would this feature look like on Science Journal and how could we make it work better. Each design tweak happens, we synced up the the Eng team, Ink team and Material team, to gather more feedbacks and observe more possibilities.
We synthesized through our design review findings and pushed the design into phase 3 with mid-fidelity prototypes. The review and critique session helped us iterate our designs and create high-fidelity prototypes.
Ink tech research & UX feed back trackers. *Intended blur on confidential materials.
Wires
Phase 1 Flow: Basic Drawing Actions

Phase 2 Flow: Further Drawing Options

Phase 3 Flow: Annotating Images

Polishment



*Intended simplify on screens with confidential materials.
