Automated Digital Ad Report
Transforming a slow, static periodic report into an automated web app to drastically reduce production time and enable marketing analytics.
Frontend Prototyper
Information Architect
B2B Marketing
Process Automation
Interaction Design (HTML/CSS/JS)
Competitor Analysis
Process Automation
My Role & Responsibilities
Bridging data analysis and web development
I acted as the central link, ensuring close cooperation between the Analysis and Marketing Departments. Instead of just drawing up new mockups for a legacy process, I completely rethought the information architecture.
To prove the concept, I handled the interaction design by prototyping directly with HTML, CSS, and JS. This bypassed traditional static design phases and demonstrated how an automated web app could solve our core business problems.
-
Information Architecture
Restructured the core information architecture to make massive datasets digestible and systematic. -
Rapid Prototyping
Built functional interaction design prototypes using HTML, CSS, and JS to validate the automated rendering. -
Cross-team Collaboration
Facilitated deep cooperation between Analysis and Marketing to align technical feasibility with business goals. -
Market Research
Conducted thorough competitor analysis to ensure our new interactive format stood out in the market.
The Challenge
Breaking the bottleneck of cyclic reporting
The traditional process for creating this periodic report about online advertising was extremely slow and resource-heavy. It required constant back-and-forth between departments, taking up to a full month to ship a single edition.
Furthermore, the old static format made it impossible to measure if the report was actually achieving its marketing goals. We faced a substantial challenge: presenting massive datasets while simultaneously figuring out how to engage the recipient with our other products.
-
Production Bottlenecks
Figuring out how to speed up the creation of the next editions by removing repetitive, manual design tasks. -
Data Overload
Finding an elegant way to handle a large amount of data without overwhelming the client. -
Lack of Analytics
Transitioning from an unmeasurable static document to a format that allowed marketing to track engagement. -
Cross-Selling
Designing the delivery mechanism to naturally answer how to interest the recipient with other products.
Preview
Replacing static PDFs with dynamic code
The core breakthrough was separating the raw data from the presentation layer. By proposing a simple web app instead of a static layout, I changed the fundamental way the company delivered insights.,The Analysis department simply prepared the data they were already calculating. The app then automatically mapped these numbers into ready-made visual charts, completely skipping the tedious manual design and implementation phase.
Bypassing the design phase
Previously, every new edition required manual typesetting. By building a systematic web template, the final report was instantly ready for the client.
Iterations for data verification became significantly faster. Once the data structures were standardized, the entire rendering process became fully automatic, saving countless hours.
Tracking marketing success
A digital web app allowed us to integrate tracking analytics natively. We could finally see exactly how clients consumed the data and which sections held their attention.
This directly solved the problem of how to deliver the report to clients while smoothly embedding actionable hooks to cross-sell other products.
Impact and efficiency
From manual labor to an automated engine.
The transition to a one-page web app revolutionized how the company published data. It slashed delivery times, reduced cross-departmental friction, and finally provided the marketing team with actionable, measurable insights.
From a Month to Days
Slashed report creation time from an entire month down to just a few days. The only remaining wait time was for server data processing, eliminating manual layout tasks completely.
Streamlined Verification
Data verification iterations became drastically faster, stabilizing into an automatic process that required minimal human oversight.
Measurable ROI
Allowed the marketing team to track user engagement, transforming an untrackable document into a measurable marketing asset.
Cross-sell Opportunities
Created native UI spaces to actively interest the recipient with other products, directly supporting business growth.
Solving design problems with code
Sometimes the best UX solution isn't a better layout, but a fundamentally different technological approach.
By understanding both the analytical data workflow and the technical possibilities of frontend development, I was able to dismantle a massive organizational bottleneck.
This project reinforced my belief that designers who can prototype in code (HTML, CSS, JS) bring immense value, allowing teams to test legacy process changes quickly and confidently.