A digital home where architecture meets motion, and “Build Green” becomes a seamless user experience
(CHALLENGES) Although Hopen.Co had a strong identity offline, it lacked a website that could fully translate its values into a digital environment. The goal was to create a seamless platform that showcases the firm’s architectural brilliance and environmentally conscious ethos while respecting design formats like horizontally-rendered images. The main challenge was building an experience that felt intuitive yet powerful, letting each project speak while ensuring the user’s journey felt engaging, modern, and simple. The site had to carry the brand message effectively across project showcases, team intros, and service overviews.
• Web Analysis (Research, Empathize) • UX Design (Define, Ideate) • UI Design (Prototype, Testing)
Layơ Lab designed a clear, scroll-based user journey that mirrors architectural structure—unfolding content layer by layer to balance visual appeal and intuitive navigation.
(FUNCTION) We applied a 12-column grid and clear visual hierarchy to ensure consistent organization across all content. Users can explore the site easily through structured sections that guide them through projects, team profiles, and services. Project galleries combine vertical and horizontal scrolls to create a more intuitive browsing experience. Motion plays a key role in the experience, adding rhythm and depth to the layout. Pages transition smoothly from one to the next, with features like scroll-triggered panels and automatic return to top on the homepage. These interactions encourage exploration while maintaining clarity and flow.
• Consistent and clear visual hierarchy • Scroll-Based Navigation & Experience • Motion-Enhanced Transitions • Narrative Content Flow
A clean and intentional design that thoughtfully aligns with the studio’s vision. The balance between clarity and character is well-executed, demonstrating a strong understanding of both aesthetics and functionality. An impressive example of effective visual problem-solving.
The UI system uses a minimalist brutalist aesthetic, merging rigid structures with subtle motion and white space to support clear storytelling through architecture.
(DESIGN) The layout reflects the brand's strong identity with bold typography and a structured grid. White space accentuates the imagery, directing focus to the designs. Navigation and interaction points are understated yet intuitive. The vertical and horizontal scroll interplay lets users experience spatial movement visually. Black, white, and subtle greens reinforce the “Build Green” message. List-based layouts guide users through project info, services, and personnel with clear hierarchy. Graphic lines and motion transitions provide quiet moments between large visuals. The entire visual language stays consistent across desktop and mobile for a professional and engaging experience.
(Key features)
• Bold Typography & Structured Grid • Intuitive Scroll-Based Navigation • Minimalist Visual Language • Consistent Cross-Device Experience
