140 William Street
CLIENT
Colliers
DURATION
2 Months
INVOLVEMENT
Creative Direction
UX/UI Design
Dev Handoff
CHALLENGE
Delivering an engaging, user-friendly digital experience for 140 William Street within a tight two-month timeframe, collaborating closely with a team of CGI artists and a developer to showcase the property’s features and available tenancies.
STRATEGY
Leveraged high-quality CGI videos and still images for immersive property walkthroughs, prioritizing visual fidelity over building from scratch in three.js. Introduced interactive animations to enhance engagement and used a Kanban workflow in Monday.com to efficiently coordinate tasks and deadlines with the team.
Existing website and opportunities
This project focused on transforming the client’s outdated and fragmented website into a cohesive, modern digital experience, enriched with new CGI videos and renders. By applying UX principles such as intuitive navigation, visual hierarchy, and user-focused flows, I reimagined the online presence of this iconic Melbourne commercial tower. The result is an immersive design that enhances how visitors perceive and engage with the property.
OLD WEBSITE
Establishing the flow of the site
As this was a landing page, I structured all content within a single homepage, dividing it into clear, distinct sections. I began by mapping the site flow in FigJam, followed by creating low fidelity wireframes. The design starts with a broad overview, highlighting the property’s location and neighbourhood, before narrowing down to details such as design and amenities, ensuring a seamless and intuitive user journey.
Applying existing branding
I decided to apply the provided branding to the wireframes early, building client confidence and aligning expectations from the start. This enabled us to present an early, cohesive branded experience before finalizing each section of the design.
Key challenges
The landing page design was straightforward overall, though a few sections required extra thoughtful planning.
Tenancy availability
The client sought a more immersive solution than a standard table to display tenancy availabilities. During my desktop research, I noticed some boutique real estate websites using three.js for interactive tenancy displays.
Approach
To achieve a similar yet cost-effective effect, I collaborated with the developer to create a solution using a static render of the tower, with individual floors highlighting on hover. The client was very satisfied with this approach.
INITIAL STANDARD TABLE LAYOUT
EXPLORING SOMETHING MORE VISUAL
FINAL DESIGN
Lobby design walkthrough
Initially, we considered using three.js for the site walkthrough, but cost and time constraints required an alternative.
Approach
I proposed leveraging our CGI team’s Unreal Engine test renders to create a first-person perspective walkthrough, highlighting key areas in sequence from the entrance. I then designed the interface to seamlessly integrate this solution, ensuring it was both visually engaging and cost-effective.
Loading screen
The site is graphic-heavy, with many high-resolution images and videos that take time to load.
Approach
As is common for commercial landing pages, I initially designed a Figma motion graphic to animate the logo on a loading page. However, due to time constraints, we opted for a simpler loading bar that fades into the logo—a solution the client was still happy with.
Retrospective
The project required balancing multiple elements, adapting to client requests, and relying on design instincts to deliver effective solutions. My front-end coding knowledge ensured feasible, time-efficient designs, and collaborating with the developer and CGI team was a rewarding process for exploring creative solutions.
NEXT PROJECT