Real-time error monitoring with Sentry. This app helps developers find & fix bugs instantly, ensuring a smoother and more dependable website experience.
Role as UI/UX Designer & Frontend Developer
Indonesia, Media Issue .2024
Industry
Information Technology
Project Type
Project Internship
Duration
8
weeks
Research // 1 weeks
Ideation & sketch // 5 days
Design Hi-Fi // 1 weeks
Testing // 3 days
Develop Apps Mobile // 4 weeks
Services
Tools Design
Miro, Figma
Tech Stack
Javascript, Vue.js, Laravel, TailwindCSS, HTML 5, PostgreSQL
To bridge the inefficient gap between Sentry and OpenProject, we developed a system that automates the issue lifecycle. It instantly converts errors detected in Sentry into managed tasks in OpenProject, unifying the workflow and boosting developer productivity and accuracy.
Want to create something like ?
Problem
A Lot of Annoying "Copy-and-Paste" Work: Whenever the system found a bug, a developer had to stop what they were doing and manually re-type all the details into the team's to-do list. This was a huge waste of time and a constant interruption.
It Was Very Easy to Make Mistakes: Because everything was copied by hand, it was common for typos to happen or for important details to be missed. This created a lot of confusion about what needed to be fixed.
The Team Wasn't Always on the Same Page: The two software tools didn't talk to each other, so the information in one could be old and out-of-date in the other. This meant managers were never sure if they were looking at the latest status of a problem.
Everything Just Moved Slower: All these little problems added up, slowing the entire team down and making it take much longer to fix important issues.
Approach
Started by Finding the Real Problem.
First, I carefully studied how the team was currently working. My goal was to pinpoint all the exact spots in their daily routine where they were getting stuck or wasting the most time.Designed a Simple and Clean Dashboard.
Based on what I learned, I designed a very straightforward screen for the team to use. The goal was to make everything so easy and obvious that it wouldn't need an instruction manual.Built the Automatic 'Bridge' Between the Two Systems.
The heart of the solution was building a tool that acts as an automatic bridge. I created the powerful "engine" that runs in the background and the simple dashboard for users to see. This new tool automatically "listens" to the bug-finding system and "tells" the to-do list system what to do, so no human has to.Made Sure the Whole Thing Was Rock-Solid.
To finish, I packaged the entire solution into a neat, self-contained "box." This makes the tool very reliable and easy for the company to install and run, ensuring it works perfectly without creating any new problems.
Here i do
My process began with observation and analysis to understand the human story at the center of this technical problem.
Setting Measurable Goals for the Solution
Before building, I needed to define what success would look like in quantifiable terms.Goal #1: To reduce the time spent on manual issue transfer by at least 95%. The average manual transfer was taking 3-5 minutes per issue.
Goal #2: To eliminate all data entry errors caused by manual copying.
Crafting User Personas
I developed two core personas to represent the users who were most impacted by this broken workflow:Devan, The Frustrated Developer: He spends hours monitoring Sentry. His primary goal is to write clean, effective code, but he's constantly pulled away from deep work by the "administrative overhead" of creating bug tickets.
Rina, The Overwhelmed Project Manager: She relies on OpenProject to manage team sprints and priorities. Her work is often disrupted by poorly written or duplicated bug reports from the manual transfer process.
Devan and Rina became my focus. Every design decision I made was to remove a point of friction from their day.
Whats Next ?
With a clear, measurable goal, I moved on to architecting the solution.
From User Pains to a Core Feature: The One-Click Bridge
The solution was clear: a single, reliable bridge between the two platforms. I used User Flow Diagrams to map out the new, simplified journey:Old Way: Notice error -> Open new tab -> Log in to OpenProject -> Click "Create Task" -> Copy title -> Paste title -> Copy details -> Paste details -> Assign task -> Save.
New Way: Notice error -> Click "Send to OpenProject" -> Done.
Designing for Clarity and Control
While the core feature was a simple button, the platform around it needed to give managers like Rina control and visibility. I designed a centralized web dashboard with:An at-a-glance view of all synced issues.
Intuitive filtering and sorting to manage projects.
A robust role-based access system to ensure only authorized admins could manage users and settings.
The Final Execution
As a Frontend Developer on the team, I was responsible for bringing the user interface to life.
I built the entire user-facing dashboard using Vue.js, creating a responsive, interactive, and fast experience for managing issues and projects.
I engineered a clean and intuitive UI that included data visualizations for issue statistics, making it easy for managers to track progress at a glance.
I worked closely with the backend team to integrate the Sentry and OpenProject APIs, ensuring data was fetched and sent reliably and in real-time.
Validation & Measurable Impact (The Final Results)
The true success of an internal tool is measured by its adoption and the time it saves. After thorough functional and integration testing, we deployed SyncFlow for the development team.
Methodology
I gathered feedback from the end-users (the developers and project managers) after two full weeks of use, collecting both quantitative and qualitative data.The Quantitative Results: A Mission Accomplished
The final results were even better than my initial goals:The time spent transferring a single issue was reduced from an average of 3 minutes to just 5 seconds—a 97% reduction in manual effort.
Manual data entry errors were completely eliminated, resulting in higher-quality bug reports and less confusion.
The Qualitative Feedback: Giving Developers Their Time Back
The team's feedback confirmed the impact:One developer stated, "This tool easily saves me an hour a week that I used to spend on pure admin. Now I can use that hour to actually code."
The project manager reported that "the quality of bug reports has gone way up, and I no longer have to chase people for details."
Efficiency Comes from Smarter Systems, Not Harder Work. My primary lesson was that the best way to boost productivity is to build smart, automated tools that completely eliminate the burden of repetitive administrative tasks.
I Transformed the Workflow from Manual to Automation. I successfully changed the team’s process from a slow, reactive "copy-paste" routine into a fully automated one. Now, a new bug report appears as a detailed task in the project management system in seconds, not minutes.
The System Delivered Clear, Measurable Results. This automation directly improved the team's entire workflow by:
Drastically reducing the risk of human error in bug reports.
Improving the accuracy of all project data.
Creating a real-time, trustworthy source of truth for all issues.
I Gave Our Most Valuable Resource Back to the Team. Ultimately, this project succeeded because it gave our developers their most important assets back: the time and mental energy to focus on what they do best—solving complex problems and innovating.
