Lightscape is a multidisciplinary studio creating experiences that combine light, technology and physical spaces. In 2023 I designed and developed a new Webflow site to better showcase their diverse portfolio, spanning projection mapping, interactive experiences and live visuals.

Year

2023

Sector

Services

Tools

Figma
Webflow

Workplace

Year

2023

Sector

Services

Tools

Figma
Webflow

Workplace

Sector

Desktop mockup of the lightscape homepage with a skull animation on the screen
Desktop mockup of the lightscape homepage with a skull animation on the screen

Challenges

I led discovery sessions with the Lightscape team to identify key challenges with the existing site. Projects were strictly categorised, limiting discovery across different types of work, while complex project page layouts made the site difficult to maintain and adapt. There was also an opportunity to develop a stronger UI and interaction system that better reflected the experimental nature of their work.

Screenshot of desktop contact us page
Landing section on homepage with projection project in the background
screenshot of gallery on project page
screenshot of main project infromation overlay with text describing the project in detail
Screenshot of desktop contact us page
Landing section on homepage with projection project in the background
screenshot of gallery on project page
screenshot of main project infromation overlay with text describing the project in detail
Screenshot of hover animation
screenshot of main video overlay when opened
Mobile detail screenshot of project page gallery
screenshot on FAQ section on about page, with a questions and answer accordion layout
Mobile detail screenshot of work section with links to project

Decisions made

Working within the performance constraints of a video-heavy portfolio, I focused on how to present a large and varied body of work without overwhelming users, while creating a CMS structure that could support the studio's growth.

I simplified project pages into structured galleries and information modals, introduced hover-to-play interactions for project previews, developed an adaptive filtering system, along with a tailored UI and animation system.

Screenshot of main work page filter, with a grid of project links
Screenshot of main work page filter, with a grid of project links, with a filter engaged to show filtering system
Full page design of a project page
Full page design of the about page, with a client logos section, a FAQs section and a ehtos introduction text
Mobile detail screenshot of contact us page on the lightscape site
Mobile detail screenshot of project page landing section
Mobile detail screenshot of our process text on the about us page

Outcomes

The resulting site made a large back catalogue easier to explore while giving Lightscape a more flexible foundation for future work. The project reinforced the importance of designing the content structure, CMS and visual system together, creating a framework that could evolve alongside the studio.

Testimonial

Working with Shane on the Lightscape website was a pleasure. He’s easy to work with, diligent, and has a great eye for detail and a real understanding of design. He translated our studio's work into a website that feels true to Lightscape and showcases our work beautifully.

The site is straightforward for us to manage, making it easy to upload new projects and keep our portfolio current. The project filtering also makes it simple for visitors to explore our work. He managed the whole process with care and attention, and he’s a lovely guy to work with. We’d happily recommend him.

Brian Kenny

Director | Lightsacpe

A trio of mockups for laptop, tablet and mobile of a lightscape project page