Context
Dinx is a gamified financial education app for children, focused on the family experience. The app came to market with a robust design developed by an internal team, and needed a developer capable of transforming that design into a website and landing page with absolute fidelity, without losing any detail along the way.
The project involved two distinct deliverables: the complete institutional website, with a manageable blog and structure prepared for growth, and the landing page, developed separately with a focus on conversion and product presentation.
The Problem
Working with a design created by an external team always brings specific challenges. This project was no different:
- Design with a high level of visual complexity, including floating elements and overlaps that demand absolute precision in development
- Design decisions that increased technical complexity unnecessarily, requiring constant alignment with the designer to simplify without compromising identity
- Need to adapt the patterns and decisions of an external team to the development workflow, maintaining full fidelity to the Figma file
- Two parallel deliverables with different dynamics: institutional website and landing page
Solution
Development was conducted with a pixel-perfect focus from the very first element. Every Figma component was reproduced with millimetric precision on the site, including the floating elements that are typically a friction point in projects with designs of this complexity. Opening the developed site side by side with the design file reveals no perceptible difference in positioning or proportion.
Alongside development, there was active technical collaboration with the designer. Decisions that made the project unnecessarily complex were discussed and simplified, always preserving the visual identity. This kind of technical intervention in the design process is what separates a competent delivery from an excellent one.
Technical Decisions
- Pixel-perfect reproduction of all Figma elements, including positioning of floating items and complex overlaps
- Technical design review in collaboration with the designer, reducing unnecessary complexity without compromising visual identity
- Blog structured in CMS with custom fields, allowing autonomous content management by Dinx’s internal development team
- Landing page developed separately, with structure optimized for conversion and product presentation
- Complete technical handoff at the end of the project, with documentation and tutorials so the internal team can maintain and evolve the site autonomously
- Performance best practices, technical SEO and semantic structure applied across all project layers
Infrastructure
- CMS with custom fields for autonomous management of blog and dynamic content
- Architecture designed for an internal technical team, with organized and documented code
- Landing page in a separate structure, optimized for fast loading and conversion focus
- Technical SEO applied from the ground up: heading hierarchy, meta tags and loading speed
Results
As a product in its launch phase, commercial results are still being built. The project results were:
- Absolute fidelity to the original design, with no concessions in positioning or proportion
- Reduction of unnecessary technical complexity, with gains in performance and maintainability
- Dinx’s internal team with full autonomy to manage site content
- Website and landing page ready to support the product’s growth in the market
Developed at Proemi Studio, where I served as the technical lead on the project.