© 2020 Hazel

Science Journal UX - Case Study

Action Area: Rethink the drawer 

2018 - 2019

As a first party app, Science Journal needs to update its design framework to the latest Google Material standards. As a first step in this app-wide effort, the current 'note taking drawer' in the experiment feed will be reconceptualized as an 'action area' in which the different note-taking options are represented as buttons that launch their own interfaces. On top of being more intuitive for users, it will also be more usable due to the new icons and labeling guidelines, as well as the added screen real-estate gained from eliminating the half-drawer paradigm.

Role

Project design lead

Interaction design 

UI/Visual design

Motion design

Tech & Tool

Sketch, Invision Studio, AE

Overview

Science Journal needs to update its design framework to the latest GM standards. As a first step in this app-wide effort, the current 'note taking drawer' in the experiment feed will be reconceptualized as an 'action area' in which the different note-taking options are represented as buttons that launch their own interfaces.

 

On top of being more intuitive for users, it will also be more usable due to the new icons and labeling guidelines, as well as the added screen real-estate gained from eliminating the half-drawer paradigm.

Focus

Usability

Make note taking easier and more intuitive for users. Anyone should be able to quickly understand the interface in the experiment view.

Upgrade

Bring the app's design standard up to date.First-party app reviewers should be able to recognize and approve the design patterns used.

Problems

Dated Look and Feel

The app currently implements a Material Design framework that is no longer supported. This means that many of the components we use are no longer supported, and because the other first-party apps have been evolving, our app looks increasingly out of date.

Custom Components

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.

Confusing Icons

Many users do not know what the different icons in the tool drawer do, and some users don't realize that the tool drawer can be expanded or that they can toggle between different note types.

Problematic Half-Drawer

The half drawer view is not as useful as originally expected. For text notes, the keyboard takes up the majority of the writing space, for photos it's hard to get proper alignment, and for sensors you can't see the real-time graphs. Furthermore, supporting the half-drawer adds a lot of complexity to new features.

User Needs

Teachers 

-

 Capabilities of the app

If it's not immediately clear what the app can do, teachers are less likely to explore the interface due to their time constraints.

Students

-

 Easily complete the project

Our Team

-

 Add new features easily

If the interface isn't clear and easy to navigate, students will be less likely to want to use the app for their work.

Our team needs to be able to add new note taking features easily. If we use a custom interface that's frequently changing, we'll be slowed down in our ability to deliver value to users.

Explorations

Challenges

Thinking from our current drawer...

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

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

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

First 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

Prototypes For Test & Feedback

Users don't read

Drawer itself is confused

Descriptive cards need more clicks to complete a task, plus, longer description is not appreciated.

Users have trouble dragging between full, half and closed drawer...do we need a drawer?

Consistency & Contextual

Navigation model should be clear and familiar enough to operate. Users have trouble understanding different sensor context without enough guides. 

Take 2 : Based On Our Feedbacks

Solutions

Back to the whiteboard, re-think the user needs, re-explore the solutions.

Updated Icons & Labels

Make the note taking area up to date by using the provided GM components for each platform instead of using a custom implementations, the note taking buttons should include the name of the note type underneath each icon to improve navigation.

Contextual Buttons

Rather than having a different-looking action area for each note type, the action area should retain the same look at all times, but with different buttons depending on the current screen.

Full-Screen Notes

Have each button in the action area launch its own note taking experience, and get rid of the half-drawer paradigm. Closing a full-screen note interface takes the user back to the observation list.

Hybrid GM

Regarding the product theming and our unique features, a minimal GM theming is applied this round.

Plus

Get rid of the drawer, create a new Area for our note Actions

After having several discussions with the GM team and our Eng team, we came up with another new design goal: trying to find a proper treatment for this section that have visually difference with bottom navigation.

Instead of offering an additional high-level navigation options such as switching between space, our note type section should be able to both show the elevation relationship clearly and guide our users within the right pattern properly.

Yay Action Area!

Treatment Explorations

A New Area

We then explored hundreds of designs.

We've explored many chip based treatments. In execution, the condensed small chips with captions seemed to give the feed a lot more vertical space but the horizontal swiping mode hided some of our featured note types in the initial status, also it would be harder to explore if more note types are added in the future.

The large extended chip with elevation shadow made it difficult to balance with the hairline cards in the feed above.

And the 1dp hairline chip version made it visually lost in the space build from white.

The treatment with a hairline backdrop created a clean space for the note type icons, but it was too white to balance with the existing colored top app bar. Also it was hard to tell the hierarchy relationship between the buttons and the feed cards.

A New Dock

Dock exploration journey.

We were inspired by GM cards' elevation principles and IOS dock system. The action area dock would lay above the card flow and have a 95% opacity at the very initial status. When users scrolling the content feed, increasing the dock's transparency to 85% while adding drop shadow behind the dock bar. This treatment indicates the relationship between different layers within the feed page appropriately, also provides potential contextual space for other page view.

Wires

The buttons in the action area are contextual to the current view; for example, in the experiment feed, the buttons in the action area consist of the different note types, whereas in the sensor view, the action area consists of buttons for adding sensors and taking a snapshot. In some contexts, action areas have an additional Floating Action Button above the bottom toolbar.

Transition Motion Specs

Screens & Specs