Enhancing viewer tools in Oxford Learner's Bookshelf

DELETE A MARK

Summary

As a product designer for Oxford Learner’s Bookshelf—a platform that allows students, teachers, and educational institutions worldwide to view and teach using Oxford University Press books—I encountered an issue with the pen tool feature. Oxford University Press, in partnership with iPortfolio, provided a wireframe to address the problem. However, I needed clear ‘Basis’ to support the proposed solution. Based on that basis, I was able to implement further improvements.

Responsibility

Revalidating Wireframes with Evidence

Given that this project involved significant changes in usability for the users, we already had wireframes in place, but I initiated a process to revalidate them. By revisiting research and reassessing the problem space during the improvement process, we were able to uncover key insights into the core of the interactions.

Proposing Better UI Solutions

As the lead designer for OLB, one of my key responsibilities was to assess whether the UI defined in the wireframes was truly optimal or if better alternatives existed. By proposing and advocating for UI solutions backed by clear evidence, I was able to achieve successful outcomes.

Impact

Revalidating Wireframes with Evidence

To ensure that users were not experiencing negative reactions to the usability changes and that the frequency of actions remained stable, we closely examined the frequency of behaviors such as drawing, highlighting, and erasing. It was important to track how often these behaviors occurred, as well as monitor the frequency of unintended actions, such as abnormal repetition of drawing and erasing, and any reported bugs or error rates.

+8%

Behavior Frequency

-0.6%

Error Rate

Problem Statement

In the viewer, deleting handwritten notes or highlighted marks takes too much time, and it’s inconvenient because they aren't erased completely.

In the OLB viewer, erasing tool was similar to the common experience of drawing and then erasing with an eraser on a sketchbook.

Wireframe from OUP

When a mark is drawn, it becomes ‘deletable.’

Delete a mark

Once a mark is drawn, the ‘delete a mark’ button is activated.
Pressing the button puts the drawn marks into a "selected" state.
From the selected marks, users can click or tap on the ones they want to delete.

Delete all marks

The ‘delete all marks’ button is only activated when there are multiple marks only.
Pressing the button triggers a pop-up that informs the user that all marks will be deleted.
In the pop-up, users can choose whether to delete all marks or keep them.

Discovery

1. Researching products that include drawing & erasing tools

iOS Notes & Photos app (mobile & tablet only)

Pixel Eraser

The user can erase marks as if using a physical eraser.

Object Eraser

Marks are instantly erased as soon as they are tapped.

Undo

Tapping this undoes marks in reverse order of creation. But, this is only possible during the drawing process.

Instagram app - Story

Eraser

The user can erase marks as if using a physical eraser.

Undo

Tapping this undoes marks in reverse order of creation. But, this is only possible during the drawing process.

2. The main target users are web and tablet app users

Based on server traffic data, web usage for OLB is significantly higher. But, considering user convenience, the target can be expanded to include tablet app users.

3. It's not ‘erasing,’ it's ‘deleting.’

The OLB viewer is not a tool for drawing or note-taking. For OLB users, the draw and highlight tools are intended for learning or reading purposes, making them not an act of drawing but a function that supports learning or reading. This distinction affects the act of removing marks. So, our users won’t be "erasing" marks but "deleting" the records they've made. we needed to shift away from the concept of "erasing.”

Solution

1. The core of "Delete"

When there are multiple deletable objects, there are two main ways to delete: "Delete all" or "Selective delete."

Delete a mark button = Selective delete
Delete all marks button = Delete all

Based on this, the "Delete all marks" button is activated as soon as any mark is drawn, regardless of whether there is one mark or multiple marks.

2. The "deletable state" needs to be visually clearer.

In the wireframes provided by OUP, the selected state of a mark during selective deletion was indicated by a blue box. However, if there are many marks, these blue boxes can overlap, potentially interfering with the user's ability to select the mark they want to delete. To resolve this, we improved the design by making the mark's outline itself represent the selected state.

Before

After

Feature

Lessons learned

Paying Attention to Details: No Problem is Too Small

Even small issues can become important if there’s a clear and thoughtful approach behind them

Understand the Core, Not Just the Problems

It’s important to solve practical issues like erasing quickly and clearly, but I focused more on the experience of taking notes while learning and the act of erasing itself.

Use Proven Examples When data access is Limited

OLB has limited access to data, so using proven examples can help solve problems more effectively and increase business impact. But, this approach needs solid basis.

The Importance of Icons

The eraser icon made users think of using a physical eraser, which could be confusing. I saw the need to change it to an icon that better represents "selective deletion." Small icons can have a big impact on usability.

Thanks for scrolling!Next Project →