BACK
Website Design • Webflow Development
Web Designer • Web Developer
2023
Carl Gordon
DESIGNER
Carl Gordon
DEVELOPER
Carl Gordon
ANIMATOR
Linus Nelson
PRODUCER
Maria Rose-Wen
DIRECTOR
With over 45 years of combined practice, 675+ 5 star google reviews and over 50,000 surgeries performed, Re:vision are New Zealand's most trusted providers of premium laser eye surgery, lens implants and more.
The team at Re:vision pride themselves on excellence of service and have a proven track record of helping to restore vision. We worked closely with their leadership team to produce a website that embodies the pride they have for their service.
To deliver a fast, responsive and beautiful website that captures the excellence of service provided by Re:vision.
We worked closely with the leadership team at Re:vision to discover what is at the core of their ethos and translate that into a beautiful and functional website. They came to us seeking a website that exceeds the expectation of their customers and stands out from the industry norm.
We worked closely with the leadership team at Re:vision to discover what is at the core of their ethos and translate that into a beautiful and functional website. They came to us seeking a website that exceeds the expectation of their customers and stands out from the industry norm.
For the homepage hero section I created a relaxing scroll based animation that plays on the concept of blurry vision. As the user scrolls down the page the hero section content lifts up and fades away, before revealing into the google reviews section.
For the navigation I created an interactive mega menu to optimise the accessibility to each category of services as well as some of the more hidden pages. There is also a clickable video modal from the drs & teams dropdown. The whole navigation system breaks down to a responsive layout for tablet and mobile.
For the our clinic page hero section I created a sophisticated scroll based animation that reveals and plays a video walkthrough of their clinic. This effect pauses the video when out of view and plays it when in view.
I created an advanced content hub to combine re:visions blog posts and video content. There is an advanced filter system using category, topic tags and type switches that can be used to adjust the displayed content also.
I created a dynamic layout for the Dr inner page that allows the Doctors to display content relevant to their achievements such as: services provided, training and qualifications as well as an interactive career milestone slider at the bottom.
On the service inner pages there is an interactive technology section allowing users to tab between the various technology systems and machines relevant to the procedure type. This pulls information dynamically from the Webflow CMS for ease of management.
Using Javascript, I custom coded a pricing calculator allowing the user to use range sliders to determine how much money they could save by the time they are 45 years old. This calculator takes into account their age as well as the cost of their glasses, contacts and sunglasses to determine their estimated savings.
On the homepage there is a scroll-based lottie animation that transforms an image on the left to match the relevant bullet point on the right. This image transforms from an eye-ball representing improved vision, to a clock representing convenience, to a $1 coin representing cost savings, to a shield representing safety and finally to a love heart representing improved self confidence.
My role on this project was both lead designer and developer.
As the designer of this project I began by creating a site architecture and wireframes to establish a skeleton for the content. I produced multiple iterations of wireframes and tweaked the content strategy until we were confident the website would capture their story exactly as they imagined. After that came the user interface design which involved modernising their existing brand presence and taking precedence from multiple award winning sites in their industry. Finally I moved into the development of the website and brought the designs to life in the form of the website you can see today. After the project was complete I also lead multiple training sessions to get their staff up to speed with how to manage the content site-wide.
