Overview - Redesigning an Annotation Feature to Include Accessibility Options and Research-Based Learning Support
Sticky Notes is an e-reading annotation feature designed in a product sprint for Evident Point's flagship web-based textbook reader ActiveTextbook. This redesigned feature is one of many product improvement efforts to accommodate online learning in the unprecedented educational landscape shaped by COVID-19.
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 Annotation Feature 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
Users, Use Cases and Context
Users of this feature included staff and students in the K-12 education space in physical and digital learning environments. Specific use cases include:
Students adding notes to PDF textbook pages to supplement their understanding or write reminders
Instructors adding notes to PDF textbook pages to guide their teaching of the subject
Instructors using notes during interactive classroom quizzes while projecting textbook pages to cover answers.
To support use cases, this annotation feature needed minimum sizing constraints, customization in basic rich text formatting, different selections of font size and style, and enough visual customization options that the user can meet their needs for legibility but not so many that the user would be overloaded.
There was existing ground work done by my designer colleague including:
Paring down the ways to customize text so that only relevant and practical options are present
Some decisions on minimum sizing constraints
First Iteration: Collaboration-Oriented Features
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.
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.
Second Iteration: Accessibility, State Clarity, and Choice
Due to development constraints, the team pivoted away from the collaboration tools and focused on improving existing groundwork. Other design changes made include:
Integrated dark mode and sepia mode for visual accessibility, with a total of 5 colour options besides white
One clear CTA to go between Read and Edit modes
Rich text capabilities include the essential Bold, Italic, Underline, and font size selection features
Adjustments to colour contrast after using the Figma plugin Able and the website WebAim's contrast checking tool, resulting in contrast higher than the minimum of 4.5:1 WCAG AA contrast ratio
WCAG contrast compliance was checked using the Figma plugin Able and the website WebAim's contrast checking tool.
Reflections and Future Considerations
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.
AI capabilities were not available at the time of this project. If I had access to generative AI tools, I would have written a plan for A/B testing the new sticky note design against the old one. The plan could then be proposed with the design team and implemented through testing with internal and external stakeholders.
