OVERVIEW
COMPANY
ORANGE FLINT
YEAR
2025
ROLE
UX/UI Design
Framer Development
TOOL
Figma
Framer
HTML/CSS
JavaScript
Orange Flint is an exploration-focused travel collective offering curated expedition planning services. The project centered on transforming an existing Figma concept into a fully functional, production-ready website.
The goal was not only to implement the visual design, but to reinterpret it for real-world usability — ensuring clarity, responsiveness, and interaction logic across desktop, tablet, and mobile environments.
THE CHALLENGE
Although a visual direction had been established in Figma, many of the original layouts and interactions were not directly transferable to a live web environment. Static design decisions lacked clear behavioral logic, and responsiveness across breakpoints had not been fully resolved.
The challenge was to translate a visually compelling but static concept into a structured, responsive system that supported real user behavior. This required rethinking navigation states, interaction feedback, layout hierarchy, and performance constraints while preserving the original aesthetic intent.
MY ROLE
As the sole designer and developer for this project, I was responsible for converting the Figma design into a live, responsive website using Framer. My role combined UI/UX design, interaction design, and front-end implementation. I optimized and reworked interactions that were visually compelling in Figma but impractical or unclear in an actual website context. Approximately half of the design decisions were implemented directly within Framer’s visual tools, while the remaining interactions and behaviors were achieved through custom code overrides.
As the sole designer and developer for this project, I was responsible for converting the Figma design into a live, responsive website using Framer. My role combined UI/UX design, interaction design, and front-end implementation. I optimized and reworked interactions that were visually compelling in Figma but impractical or unclear in an actual website context. Approximately half of the design decisions were implemented directly within Framer’s visual tools, while the remaining interactions and behaviors were achieved through custom code overrides.
DESIGN SYSTEM
A significant portion of the project involved adapting the existing visual system to real-world constraints. I rebuilt layout structures for key pages — including navigation states and destination detail pages — to improve hierarchy, clarity, and usability.
Rather than scaling layouts down proportionally, responsive behavior was carefully redesigned for tablet and mobile breakpoints. Spacing logic, image ratios, and content stacking were reconstructed to maintain readability and interaction flow across devices.
VARIANTS & GUIDELINES
Many original hover states, navigation transitions, and page animations required refinement to function effectively in a live context. I redesigned these behaviors to align with established web conventions while preserving the brand’s immersive tone.
Rather than scaling layouts down proportionally, responsive behavior was carefully redesigned for tablet and mobile breakpoints. Spacing logic, image ratios, and content stacking were reconstructed to maintain readability and interaction flow across devices.
MAIN TAKEAWAYS
This project strengthened my ability to bridge the gap between static design and functional implementation. I developed a deeper understanding of responsive systems, interaction logic, and the practical limitations of translating conceptual UI into production-ready code.
Orange Flint reinforced my capacity to evaluate design intent critically and reinterpret it into a structured, scalable web experience that balances aesthetics with usability.
