Tri-Hermes Reimagined :
How We Transform It From Static Archive to Dynamic Knowledge Hub
Before
My Role
User Research&Analysis
Interaction Design
User Testing
Timeline
Jan. 2025 - Mar. 2025
Tools
Figma
Story page
Contribution page
Home page
Story page
After
Pop-up error ticket
Contribution Page
Pop-up error ticket
Tri-Hermes
Tri-Hermes was originally developed as a static repository for textual data related to the Fate/Grand Order (FGO) series, serving as an archive for scripts, interviews, research documents, and other related materials. The platform was created to preserve and centralize valuable information, making it easily accessible to FGO enthusiasts, researchers, and fans who seek deeper insights into the game’s lore, development, and creative process.
Problems
...BUT Tri-Hermes was not designed to support the continuous expansion and refinement of its vast repository of Fate/Grand Order (FGO) scripts, interviews, and research materials. As new information emerged, users struggled to contribute insights, and reporting errors.
The original contribution page was hard to locate, and the process of submitting new content or revising existing material was unintuitive, discouraging user participation. Users had no clear way to track modifications or ensure their corrections were properly addressed. The lack of an accessible revision system made it difficult to verify content accuracy, leading to outdated or incorrect information persisting on the platform.
Goal
To address these issues, we aimed to make Tri-Hermes a dynamic, structured, and user-friendly knowledge hub. By enhancing content organization, improving contribution visibility and streamlining error reporting we have made it easier for users to explore, contribute, and refine information in a seamless and intuitive way. This transformation ensures that Tri-Hermes remains accurate, up-to-date, and truly community-driven.
User
Research
To ensure that the redesign of Tri-Hermes effectively addresses user pain points and enhances usability, we conducted comprehensive user research, gathering insights from stakeholders who frequently engage with the platform. Our research focused on understanding how users interact with the site, the challenges they face, and what improvements would make the platform more accessible and efficient.
​
​
​​
​
​
​Personas
UX Flow
​​With these user insights in mind, we focused on redesigning the user experience (UX) flow to create a more intuitive, structured, and seamless interaction for Tri-Hermes users. Our goal was to reduce friction in navigation, enhance content discovery, and simplify the contribution process, ensuring that users can efficiently access, engage with, and contribute to the platform.
​
​
​​
​
​
UI Sketches
We moved into the UI sketching phase to visually translate these improvements into an intuitive interface.
Lo-Fi
Prototype
Our low-fidelity prototype focuses on the contributor experience, specifically addressing the process of submitting error tickets for mistakes found in stories on the wiki. Previously, users faced friction in reporting errors, as they had to remember where the mistake occurred and navigate to a separate page to submit a ticket. This process was cumbersome and discouraged engagement.
To streamline this, our proposed solution integrates on-page pop-ups that guide users on how to quickly submit an error ticket. While the contribution tab will still host ticket submissions, we introduced a new tool directly on each story page, allowing for faster, more intuitive access to error reporting.
In exploring the best placement for this feature, we tested two locations for the pop-up:
-
Bottom right corner of the screen
-
Bottom left corner of the left-hand panel
The pop-up provides clear instructions on how users can report errors. It informs them that by highlighting the erroneous text, they can trigger a ticket submission overlay, where they can input details about the issue. The ticket form requires users to provide their name, email address, and a description of the error, which will be sent to the backend team for resolution.
User
Testing
Next step, to ensure our redesign effectively addressed key usability challenges, we conducted user testing with two primary participants:
-
The Site Developer, our first professional stakeholder at Tri-Hermes, provided insights on the platform’s technical needs and expectations for improvements in functionality and design.
-
A Technical User, a frequent visitor to the site, highlighted concerns regarding navigation difficulties and mobile usability, offering valuable feedback on how the site performed across different devices.
​
We identified key takeaways that informed our design improvements:
1. Enhancing Contribution & Error Submission Accessibility
-
Users valued the ability to directly submit ticket forms on the page, reducing the need to navigate to a separate contributions page.
-
A major barrier to contributions was the indirect submission process, which added cognitive load and discouraged participation.
-
The newly implemented in-page submission tool from the lo-fi prototype effectively streamlined error reporting and encouraged user engagement.​
2. Addressing Unintentional Pop-Ups & User Errors
-
A usability issue arose where highlighting text unintentionally triggered the pop-up, leading to frustration and accidental submissions.
-
To resolve this, an additional confirmation step will be implemented to ensure users are highlighting text specifically for ticket submission.
HI-FI
Prototype
With the insights gained from user testing and feedback, we refined our low-fidelity prototypes into a polished, high-fidelity prototype that directly addresses the challenges contributors faced when submitting error tickets. The goal was to create a seamless, efficient, and intuitive experience that encourages user participation while minimizing friction in the submission process.
By carefully analyzing usability concerns, cognitive load, and interaction patterns, we made several key design improvements:
-
Replaced disruptive page redirects with an on-page error submission system to maintain user focus.
-
Implemented a right-click interaction to ensure error reporting was intentional and not triggered accidentally.
-
Relocated the error submission form to a right-side panel, preventing pop-ups from obstructing text visibility.
-
Incorporated a dark mode version, responding to stakeholder requests for improved readability.
These refinements were guided by a user-centered approach, ensuring that Tri-Hermes' high-fidelity prototype effectively enhances accessibility, usability, and overall engagement in the contribution process.
We redesigned the UX and UI to create a smoother, more intuitive experience. The final high-fidelity prototype reflects these refinements, ensuring that Tri-Hermes is no longer just an archive, but an interactive knowledge hub that actively engages and empowers its users.
​
Looking ahead, we will continue iterating on design enhancements, monitoring user engagement, and refining functionalities to ensure that Tri-Hermes remains an evolving, community-driven resource for FGO enthusiasts and contributors alike.