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.
Project design lead
Tech & Tool
Sketch, Invision Studio, AE
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.
Make note taking easier and more intuitive for users. Anyone should be able to quickly understand the interface in the experiment view.
Bring the app's design standard up to date.First-party app reviewers should be able to recognize and approve the design patterns used.
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.
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.
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.
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.
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.
Easily complete the project
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.
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
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
Allows for drawer states ideal to the tool being selected (can launch camera intent, etc.)
minimal changes needed to support sensor recording as well as text/photo in conjunction
Design A Cons
Tabs limit discoverability as number of note types grows
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
Allows for varying note types that may need more than one screen to create a new observation
More compact experiment detail page view
Design B Cons
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
More descriptive than tab/drawer input options
Could expand to be more clear for third party sensors
+/- lends itself to be a more guided experience
Design C Cons
Needs further exploration to allow for sensor recording + text/photo note
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
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.
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.
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.
Regarding the product theming and our unique features, a minimal GM theming is applied this round.
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!
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.
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.