Interactive Graphical Abstracts — Molecular Vision @ Emory
Help viewers/editors/readers understand graphical abstracts more efficiently through interactive elements.
Our team partnered with Molecular Vision Journal (Emory University) to integrate interactive graphical abstracts (GAs) into the publishing workflow. We redesigned the journal homepage, submission portal, onboarding flow, and editor dashboard to support GAs, while building a scalable design system.
Timeline
Jan 2025 – May 2025
My Role
Lead UX Design, Design System, User Testing
The Team
2 Researchers, 1 Designer
OVERVIEW
Background
• Challenge
Molecular Vision (Mol Vis), a peer-reviewed journal, wanted to integrate graphical abstracts (GAs) into its publishing workflow. However, authors lacked clear guidelines, while editors and reviewers had no efficient way to evaluate GAs. This slowed down review and discouraged submissions.
• Opportunity
Design a system that enables authors to easily create and submit effective GAs, while helping editors and reviewers quickly evaluate them. The solution needed to balance accessibility, scientific rigor, and workflow integration.
Process
Final Design
• Homepage Redesign
Increased article visibility by featuring graphical abstracts directly on the journal homepage.
• Author Submission Portal
Streamlined the author workflow with GA upload, interactive elements live preview, and error recovery tools.
• Onboarding Flow
Provided first-time authors with step-by-step guidance on interactive GA requirements and submission.
• Author Resources
Offered examples, templates, and best practices to help authors create effective GAs.
• Reviewer & Editor Dashboard
Enabled quick side-by-side review of abstracts and interactive GAs, improving clarity and decision-making.
• Design System
Delivered a reusable, brand-aligned component library for consistency and scalable handoff.
Impact
Before: 49% rated “satisfied”
After: 97% rated “satisfied”
PROBLEM
Why does this matter to Molecular Vision?
Molecular Vision is a peer-reviewed journal where manuscripts go through a rigorous workflow.
The Workflow of a Complete Submission Process
• Key User Groups
The submission and review workflow at Molecular Vision involves two primary user groups. Authors initiate the process by submitting manuscripts, while reviewers and editors evaluate submissions and decide on acceptance. Our design focuses on improving the experience for both groups.
Author
Researchers who submit manuscripts and are responsible for providing a graphical abstract with their work.
Needs:
Need clear, low-cost ways to create GAs.
Often lack design expertise, leading to inconsistent or ineffective GAs.
Want their work to be understood quickly and reach a wider audience.
Reviewer & Editor
Experts who evaluate manuscripts — editors assign reviewers and make final accept/reject decisions, while reviewers provide feedback.
Needs:
Unpaid volunteers who must evaluate many manuscripts efficiently.
Without strong GAs, it’s harder to judge relevance to review.
A streamlined GA view can save time and improve decision-making.
Problem Statement
• For Reviewer & Editor
How might we improve the experience for editors and reviewers to quickly evaluate using graphical abstracts?
• For Author
How might we support authors to create effective graphical abstracts effortlessly without cost?
RESEARCH
Breaking Down Research Questions
What makes a good GA?
Guideline Analysis
Procedure
• 6 online articles and journal platforms
Key takeaways - factors to consider when creating a GA
• Journal platform requirements (e.g., file type, dimensions)
• Text density, avoiding jargon or data-heavy elements
• Representative graphic
• Layout with clear information flow: context, method, key outcomes
• Style consistency and accessibility
Where can GAs best fit into the submission workflow?
Process Breakdown
Procedure
• Mapped current process through screenshots and FigJam annotations
Key takeaways
• GAs may help reviewers make informed decisions before getting manuscript access
• Platform lacks an integrated graphics display
• No existing GA guidance or review protocols
How do existing tools and journals support GAs?
Comparative Analysis
Procedure
• 3 areas of comparison: GA Tools, Professional Service, Journal Platforms
Key takeaways
• Many choose to use common tools (e.g., PowerPoint, Illustrator, Canva) due to prior familiarity
• Tools specifically for GA have a few advantages
• Most journals provide author instructions.
• Low visibility on the search page.
How do authors, editors, and reviewers view GAs?
Semi-Structured Interview
Procedure
• Intro and background → Prior experiences → Review journal layout by Cell → Review 4+ GA
Key takeaways
• GA requirements should be clear to authors at the beginning
• The best way to incorporate GA into Mol Vis is to make it optional
• Authors rely mostly on PowerPoint and Illustrator but are aware of the new tools (e.g., BioRender)
• Providing templates might be hard since research varies too much
• Researchers feel less confident in their graphic skills and technology fluency
Translating Findings to Requirements
• Research Findings
• Design Requirements
Authors lack confidence in creating GA in various aspects |
DR1
Boost authors’ confidence in creating a GA
|
DR2
Increase motivation for authors to submit a GA
|
DR3
Make submitting GA optional
|
DR4
Provide a flexible starting point to accommodate different user needs
|
DR5
Provide clear GA requirements at the beginning
|
DR6
Make authors aware of good GA while respecting personal preferences
DESIGN
Ideation
• Co-design Workshop
We brought together a group of classmates during a class focus session to brainstorm solutions around graphical abstracts. Using a “walk the wall” method, participants reviewed research findings and early ideas in a FigJam board and added comments that were built on each other’s input.
We walked the wall together in the FigJam board
5 most voted idea
• Concept Testing Session
We tested the top five ideas from our co-design workshop with 5 participants. Each idea was introduced, then critiqued as a group.
Stakeholders
Users
Client
Participants of concept testing session
• Design Decision
Feedback guided us in prioritizing Interactive GA features and providing Incentives for GA submissions.
• GA Incentive
Visibility motivates author to create GAs
• Interactive GA
Helpful when authors have complete control
• GA Grammarly
Concern over incorrect suggestion
• GA Template
Limited use case due to lacking flexibility
• GA Community
“Increase work for everyone”
Findings of concept testing session (the first 2 was selected)
How are they helpful?
• GA Incentive
• Interactive GA
Initial Prototype
• Mid-Fi Prototypes
We created mid-fidelity prototypes to explore how graphical abstracts could be integrated into the Molecular Vision workflow. Below are the three core flows:
• GA Homepage Integration
Featured graphical abstracts directly on the homepage to increase article visibility and engagement.
• Reviewer & Editor Portal
Provided a side-by-side view of text abstracts and interactive GAs, which allows faster evaluation.
• Author Submission Portal
Allowed authors to upload, preview, and edit their interactive GAs during manuscript submission.
* These are just 1/5 of the prototypes, reduced for clarity.
Design System
ITERATIONS
Testing & Evaluation Methods
To identify usability issues and guide improvements
Heuristic Evaluation
Procedure
• 8 experts (MS-HCI students); NN heuristics
Key takeaways
• Missing “back” button for error recovery.
• Onboarding support unclear — “Help” label was confusing.
• “View interactive” button is unintuitive and poorly placed.
• Participants liked the side-by-side layout of GA and the abstract.
To validate prototype flows and interactions with real users
Usability Testing
Procedure
• 30-minute remote sessions with 5 participants
• Assigned 5 tasks across 4 flows
Key takeaways
• Users wanted an introduction to GA and examples up front.
• Wanted guidelines on how to design a good GA.
• Appreciated clear task flows but flagged unclear interactions in menus.
• Supported top–bottom view as an alternative to side-by-side.
Design Iterations
Our early prototypes went through multiple rounds of refinement, guided by heuristic evaluation reviews and usability testing findings. Below are the major changes that shaped our final design.
• Homepage Redesign
We aligned the homepage with the journal’s upcoming style guide from their ongoing redesign and introduced a Graphical Abstract carousel to make articles more engaging and discoverable. Research also showed that authors needed incentives to create GAs, so the carousel was designed to give articles submitted with a GA greater visibility on the homepage.
Outdated Visual Style
The old homepage relied on plain text links with minimal hierarchy.
Low GA Visibility
There is no dedicated section for GAs. Readers are not aware of it.
Clear Layout
Adopted a grid-based design from the new style direction for readability.
GA Carousel
Introduced a carousel to showcase GAs, increased visibility for articles.
• Author Submission Portal
During evaluation, authors struggled with unclear text and confusing interactions in the submission flow. To address this, we redesigned the portal with clearer labels, a menu feature, a remove & save button, and improved annotation tools.
• Before
• Before
• Added Onboarding Flow
Usability testing revealed that authors, especially first-time contributors, were unsure how to begin creating and submitting an interactive GA. To reduce this learning curve, we added a step-by-step onboarding flow that walks authors through the process of annotating, linking, and submitting their interactive GA.
Step-by-Step Walkthrough
Introduced progressive prompts explaining each part of the GA editor.
Contextual Instructions
Tooltips appear directly over relevant elements. This reduces confusion.
• Reviewer & Editor Dashboard
Usability testing showed that reviewers found the “View Interactive” button unclear and struggled with hover-only interactions that hid annotations. To address these issues, we redesigned the dashboard with a drop-down table menu that makes annotation content explicit and easier to access.
# of Elements Unclear
The button text is vague, and number of interactive elements is unclear.
Hover Only Interaction
Each person was grouped by month in one long list, making it tedious to read.
Drop-down Table Menu
Introduced a menu where reviewers could click to view one or all at once.
Preview of Content
The table menu clearly indicates annotation content and link to abstract.
• Added GA Guidelines Page
Usability testing showed that authors lacked confidence in creating effective GAs and often asked for concrete examples or GA rules. To address this, we introduced a Guidelines page that provides best practices, starting steps, and recommended tools all in one place. The information down here was synthesized from our research and validated by clients.
Step-by-Step Instructions
A “How to Start” section guides authors through condensing text, selecting graphics, & choosing layouts.
Tool Recommendations
Provided a curated list of common tools (e.g., Canva, BioRender) to lower the barrier to entry.
FINAL PROTOTYPE
Ready for Launch UI
After three rounds of iteration, we developed the final high-fidelity prototype that integrates all major changes and feedback. This version demonstrates how visitors can seamlessly plan, navigate, and explore the museum using both kiosk and mobile interfaces.
• Molecular Vision Homepage
• Author Submission Portal
• Onboarding Flow
• Author Resources Page
• Reviewer & Editor Dashboard
REFLECTIONS
What I learned
• Stakeholder Understanding
One of my key learnings was the importance of identifying all stakeholder groups early. While we focused on authors, reviewers, and editors, I realized that a more thorough stakeholder analysis could have uncovered additional needs and pain points, making our solutions more robust.
• User Motivation Challenges
Supporting user motivation turned out to be more difficult than I initially expected. Simply designing features wasn’t enough; we had to think about incentives, visibility, and emotional drivers to encourage authors to actually create and submit GAs. This reinforced the importance of considering motivation as a design challenge in itself.
• Adaptable Timeline
Recruiting participants and running meaningful design sessions required more time than we anticipated. This experience taught me to plan flexible timelines that account for recruitment, scheduling, and iteration cycles, ensuring that research and design decisions are backed by real user input.