New Forests - Virtual Tour application


Todd Moody
No items found.

The client is a global leader in providing sustainable forestry investment opportunities. Due to Covid-19 preventing on-site investor tours we were engaged to create a "Virtual Tour" web application.

The challenge The virtual tour needed to be as close to a real experience as possible in order to give investors a feel for the environment, location & ultimately the long-term viability of the investment opportunity. The concept was to achieve this primarily via a series of short form videos featuring hero investment locations with navigation aided by a Google Maps integration. 

From an investor perspective the UI/UX needed to be as clean & simple as possible, in particular because of the amount of information and functionality that needed to be displayed across the applications front-end (see key features). Additionally, most core content including the Virtual Tour required authentication. Admins on the client side have full content management capability incl. creating multiple tours, management of tour content (Videos, notifications, supporting content etc), inviting users and moderation of share functionality.

The solution We were a small development team on this project made up of myself on the front-end, and two full-stack developers primarily allocated to back-end tasks. We also worked with external design agency Head & Tail who created the xD wireframes, prototype and design through a very collaborative process with us on the development side.

We decided on Vue.js as the core front-end framework with the addition of Nuxt.js. Nuxt provides a number of very useful baked-in features and methods that compliment Vue really well. The primary feature that confirmed this was the correct approach for us was the Server Side Rendering (SSR) capability given the importance of SEO (albeit not an immediate requirement due to the lack of public facing content). The server-side of the application was developed in Laravel (integration to the Nova CMS) including exposing a number of RESTful endpoints to consumed by the font-end. From a front-end perspective, we needed to leverage the UI benefits of a modern JavaScript framework and Single Page Application but we also needed to deliver a highly SEO friendly solution over the longer-term.

Key features - Video.js integration in order to provide a highly customisable media player incl. timed video notifications (configurable in the CMS) & custom multilingual captions. - User insights based on Video.js events captured on the front-end. - Video completion modals which are configurable in the CMS (i.e. next video in...). - Google Maps JavaScript API integration (clustering coming soon). This enables client side admins to display the location(s) of tour stops within the tour. - Share functionality allowing the ability for users to "Invite" their contacts to a Virtual Tour. The share functionality is moderated - when a user based share is generated an admin on the client side is notified and has the ability to approve/decline the request. Share History is also included in the UI including options to resend and revoke invites. - Hyvor forum integration providing the ability for members to participate in group discussion.

The outcome This was a really rewarding project to work on and it has enabled our client to commence operations in locations where on-site tours are simply not an option due to the pandemic. Application traffic and metrics on video consumption are way above all expectations!  

Open the live project

Todd Moody

Full Stack Software Developer

View Profile
⭐️ Pro
10-20 hours per week
Available for hire

Join Unicorn Factory

Join our community of Kiwi based freelancers and work with amazing Kiwi businesses.

Apply Now