The process consisted of three main phases:

Translating the Design Vision into Figma

The client provided a general design vision—rough visuals and ideas mostly in Builder.io or images. My first step was to recreate and refine these ideas in Figma, applying web design best practices such as clear visual hierarchy, responsive layout, and consistency across devices. During this phase, I suggested design improvements and alternatives focused on enhancing user experience, especially on mobile. Feedback was gathered from the client, and the designs were iterated accordingly.

Preparing the Design for Builder.io

Once the Figma designs were finalized, I structured them carefully to enable a smooth import into Builder.io, the platform used to build and publish the site. This included

Applying auto layout consistently to ensure structural clarity and smoother translation
Implementing overlapping elements using negative margins / gaps
Testing and making manual adjustments directly in Builder.io after import, as certain elements didn’t translate perfectly and needed fine-tuning to function as intended

Implementation and Technical Integration

After importing the designs into Builder.io, I handled additional technical integrations to enrich the pages:

Embedded background videos via Wistia using custom code blocks for smooth playback without affecting site performance.
Integrated a social media feed through Curator, ensuring it was responsive and visually consistent with the rest of the site.

Throughout the project, close collaboration with the client helped refine design and functionality, resulting in pages that effectively reflected their vision while improving usability and performance.

Projects