Objective - Redesign an Annotation Feature
One of our clients wanted an annotation feature where students can write notes directly on textbook pages. The note would sit on top of text and be draggable across the page. Product management, developers, and 2 designers decided to revisit the current version of sticky notes and make improvements.
Outcome - A Versatile, Flexible Note with Accessibility-Based Colour and Text Size Options
Redesigned note is a leap towards improved accessibility:
Has multiple background colours for visual accessibility (ie. dark mode, sepia mode)
Distinct read/edit modes for visibility of system status
Dimensional constraints for ease of use
Select limited text formatting tools for user customization and flexibility
Organizational Outcome: design work was planned for a future sprint release
Usability Outcome: improved visual and functional accessibility, conformity with new design direction of ActiveTextbook’s UI refresh
First Iteration: Collaboration-Oriented Features
I built upon the ground work by adding features such as
Lock - prevents the note from being dragged and deleted. Helpful for documents meant for collaboration.
Minimize - shows the top toolbar of the note without its contents. Helpful for visually decluttering pages with a large quantity of notes.
In an earlier UX Interview, a customer stated that they would use blank sticky notes to cover parts of the page to practice memorization. The user can toggle the minimize function to track remaining content to memorize, or answers to reveal.
Second Iteration: Accessibility, State Clarity, and Choice
Due to development constraints, the team pivoted away from the collaboration tools and focused on improving what was already in the groundwork
Integrated dark mode and sepia mode for visual accessibility, with a total of 5 colour options besides white
One clear CTA to go in and out of editing state
WCAG contrast compliance was checked using the Figma plugin Able and the website WebAim's contrast checking tool.
Speculative Future Ideas
Font style selection, including OpenDyslexic, an open-source font supported for dyslexia-based learning needs.
Refined note deletion and restoration - a system function for restoring a deleted note within a timeframe of 6 seconds of deleting a note increases the ease of undo.
