WEVO

Front-End SaaS Implementation

Skills Used

Pug | SCSS | Highcharts | Node.js | JavaScript | Adobe XD

I joined WEVO for a fast-paced 3-month contract to lead the front-end implementation of their new AI-driven marketing insights SaaS platform. Acting as the bridge between design and engineering, I translated static Adobe XD files into a living, responsive UI using Pug, SCSS, and Highcharts, freeing up the backend team to focus on the core Node.js architecture.

Translating static Adobe XD concepts into fully responsive browser experiences for the SaaS platform.

1. The Core Problem: The Handoff Gap

Even the best UX designs fall apart in the browser if they aren’t implemented with care. WEVO was building a complex AI-driven marketing insights platform, and their UX team was producing great conceptual work in Adobe XD. They needed someone who could translate those static files into living, pixel-perfect code on a tight deadline.

My mandate was to act as the execution arm. I needed to bridge the gap between the project manager, the designer, and the backend engineering team to get the UI built, tested, and shipped.

Pixel-perfect implementation of the onboarding and registration flows.

2. Execution: Templating & Data Visualization

Static designs almost always miss edge cases—hover states, transition timings, and the fluid in-between states of responsive breakpoints.

Instead of writing rigid, repetitive markup, I built out the UI using Pug templating and modular SCSS. This ensured the front-end codebase remained DRY (Don’t Repeat Yourself) and highly scalable.

A view of the core results dashboard, rendering complex layout structures seamlessly via Pug and SCSS.

A major piece of this platform involved rendering complex user and demographic information. I integrated the Highcharts API, utilizing JavaScript and jQuery to generate custom, interactive data visualizations that brought the AI marketing insights to life.

Integrating the Highcharts API to render custom, interactive data visualizations for demographic insights.

3. Navigating Constraints: The Express Environment

Working in collaboration with backend developers on a Node.js/Express framework meant I couldn’t just throw static HTML over the fence.

I structured my Pug templates and SCSS architecture so they seamlessly integrated with the backend routing and logic.

Structuring the underlying HTML architecture to play nicely with backend data binding.

Throughout the sprint, I maintained rigorous quality assurance and issue tracking using JIRA, and managed all code versioning through Git and Bitbucket to ensure my commits never blocked the core engineering team.

4. The Outcome

Stepping into a pure execution role was a great way to flex my technical muscles and prove the value of a designer who actually codes.

Executing polished UI components like the customer quotes slider to match the exact design specifications.

• Pixel-Perfect Delivery: Delivered the UI implementation on schedule, preserving the strict integrity of the original Adobe XD designs.
• Engineering Velocity: By taking total ownership of the front-end rendering and Highcharts integrations, I freed up the core engineering team to focus strictly on the backend Node.js architecture.
• The “Unicorn” Value: Proved that a designer who deeply understands templating, CSS architecture, and version control can drastically reduce friction in the product development lifecycle.