© iPorfolio
Web, App (iOS, Android)
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
Impact
+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
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.
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.
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
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.
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.
