✅
A well-organized reference library that makes it easy to add, manage, and brainstorm or jot down notes and ideas
✅
Seamless in-text citation and footnote integration, allowing users to edit references without leaving the writing workspace
✅
Flexible switching between citation styles while automatically maintaining proper formatting and guidelines
✅
Guided, style-specific formatting options that simplify the often-confusing process of following citation guidelines
Establishing the foundation
After reviewing research and analyzing user requests, I decided to focus on the three most used citation styles — APA, MLA, and Chicago. From there, I documented the formatting guidelines for each style and explored existing citation managers (e.g., Zotero, Mendeley, EndNote) for two main reasons:
Establish a baseline for how citation information and styles are typically organized
Evaluate the practicality of integrating an existing citation manager into our app (for this part I worked closely with the development team)
user research
It was important to gather direct insights from our Essay user base. This allowed me to build a persona to help guide the design process and have a clear idea of what wants and needs needed to be addressed in the designs.
The key takeaways were:
Automate the format changes between citation styles to minimize the friction/thinking needed to format
Users want to have a seamless way of adding in-text citations or footnotes without disrupting their writing flow
Reduce the managerial thinking needed to keep track of references and in-text citations
A look at the brainstorming process. Figuring out the new user flows if we incorporate the referencing tools.
I decided to integrate the primary actions for referencing into the right toolbar and in-line menus, as those are the hotspot areas for users while in the Essay workspace. I brainstormed and created user flows using existing writing & research writing platforms as a basis for existing patterns.
Implemented three distinct tabs to help users stay organized while writing.
Added contextual action buttons on hover for common tasks identified through user research, including adding citations, navigating between citations, creating notes, and viewing resources externally.
Enabled users to expand references for a more detailed view of each resource to obtain more context and optimize workflow efficiency.
Enabled users to seamlessly add in-text citations or footnotes directly from the editor.
Designed a modal that allowed users to easily discover and browse articles within the context of their essay.
Created a separate reference library to help users stay organized.
Ensured that adding a resource to the library followed existing workspace patterns for a consistent experience.
Designed an extensive, structured export screen that guided users in completing the information required for their chosen citation style.
I incorporated an A/B test inside of a Usability test at this point to gauge a few things:
How is the overall user experience with the new reference features?
What do users expect when clicking on a reference block?
Where do users expect to find their reference list or bibliography?
Findings
Overall the learnability of the referencing feature was quite high.
Users expected to find the expanded version of the reference when clicking on the block
Users commonly looked to the right toolbar to find the reference list
Improvements
✅
Clarified confusing copy and improved button interactions to enhance overall usability
✅
Designed interactions to increase user engagement and intentionality when switching citation styles, reducing the risk of accidental changes
✅
Enhanced the browsing and editing experience by adding a navigation bar to quickly jump between in-text citations.
✅
Emphasizing the key actions in the footnote preview and section, including editing and navigating between in-text citations and footnotes
