A More Attractive Vision Correction Procedure
The Visian ICL (Implantable Collamer® Lens) is a removable lens implant that works with your natural eye to correct your vision without having to worry about glasses or contacts. It’s one of the latest advancements in vision correction technology and provides a less intrusive procedure when compared to competitors like Lasik. Visian tasked Basic to help realign their brand system with shifts in their technology and business strategy. Additionally they asked us to help raise awareness and refresh their approach to product education on a new digital platform. Through brand strategy, design direction, and content creation, we re-imagined their digital platform. One that connects with consumers through relatable stories and the everyday benefits the Visian ICL procedure offers.
Considering Brand in Medical
It was interesting to dig into the medical field and discover how so many companies failed to deliver a strong sense of their brand. Almost every medical website we came across is filled with too much information, generic stock imagery, and an overall experience that provides sensory overload.
The challenge with any healthcare procedure, is that there’s a lot of information to convey to the consumer. A lot of times there’s an overwhelming need to sweat the details of the surgical process, core benefits, costs and key considerations. To avoid pushing an uncomfortable amount of mundane information to the user, we focused our overall strategy on breaking down all of this content into easily digestible bits of key information.
Here are a few of our key objectives:
- Be welcoming, not intimidating
- Engage, as well as inform
- Simplify everything
- Encourage discovery
- Brand comes first
Connecting With the User
As we learned about the brand, it became clear that this was a procedure millennials could find a lot of value in. We found that the core millennial consumer who might be considering this procedure had a bunch of different pain points we needed to identify, within our digital experience.
Because this is a global offering, the team at Visian provided us with consumer research from each major market and tasked us with leveraging common insights and truths that should be leveraged moving forward.
Here are some key takeaways from Millennials:
- Generally open to new procedures only if they fully align with the brand and understand the risks and benefits
- Looks to digest information quickly and visually without the need to constantly search for answers to questions that may arise
- Typically cost-conscious consumers that look for validation through quality and social proof to justify spending extra for a product or service
- Benefits shouldn’t be listed but conveyed through compelling content and relatable stories that humanize the brand
Offering a New Approach to Digital Healthcare
With Visian, we considered taking a brand approach to the medical industry, by paying close attention to the details of our core audience behaviors. Millennials and GenX consumers expect relatable content that captures their attention. Leveraging branded content and engaging illustrations to both educate and inspire were key considerations for our team.
In order to push this brand approach to digital healthcare, we opened up our office space to the Visian team. We established a collaborative environment through workshops and design sprints, so that we could quickly align with their team and leverage their insights. We were able to quickly create a vision for content creation, design direction and set new brand guidelines. This would allow us to help differentiate Visian from its competitors and build a brand approach to digital that was unlike any other experience in the healthcare industry.
A Story-Driven Web Experience for a Millennial Audience
Our approach to the new Visian ICL website was simple. We really wanted to create a digital experience that would take Visian ICL from a newfound surgery to a household brand name and common procedure in the consumer’s mind.
To better understand our core audience, we focused our goals on four primary tiers - awareness, education, brand persona, and connected experiences. Across these four primary tiers we also had to consider two consumer mindsets - people who came to the site to consider a vision correction procedure and those who were there to compare ICL to other surgeries. While the end product may seem incredibly intuitive at a glance, we made strategic design decisions that helped bring this to life.
Providing Multiple User Journey's through a Streamlined Content Strategy
By understanding the two consumer mindsets identified in our strategy session, we were able to structure the site IA into two separate user journeys. Each user journey served it’s specific purpose to help convey the information and content to the consumer using two different approaches.
Secondary Navigation and User Flow - Contextual Experience
The secondary navigation acts as an index that provides important information which encourages deeper learning. All of this information is easily organized within a menu lightbox that encourages users to quickly dive in and out of specific touch-points. This IA caters to the user might be looking for but doesn’t have the time or desire to read through each full page of the website.
Primary Navigation and User Flow - Story Driven Experience
We designed the primary navigation and user flow to establish an informative narrative users could read through like a story. Part of the flow strategy was to essentially mirror the questions and answers a person would typically be looking for when considering the procedure. This IA works great for consumers who are interested in learning about the brand and the procedure before making an informed decision.
Educate Without Intimidating through an Empathetic Design Approach
With a sound structure to the website and two unique user flows, we focused our efforts on bringing an empathetic design language and content strategy to healthcare. As we began to build out the website, we had to understand that the site would function as a utility portal to encourage potential consumers to connect with a Visian physician. With this in mind, we knew we needed to re-engineer the education process and make information easier and more appealing to the consumer.
We also knew we needed to create a digital environment that was comfortable and considerate of our core millennial audience - something that eased the anxieties consumers have with researching new surgical procedures. The overall design aesthetic focused on creating an open, light, and inviting environment with the use of positive imagery and social proof for our millennial audience.
Interactive Modules to Provide Deeper Context to the Story
We began to quickly understand that as users read more information about the procedure, many more questions would emerge into their mind. We decided to embrace this mindset as a consumer and provide the answers to questions ahead of time. As users explore each page, we utilized questioned-based formatting to help guide them into the next bit of information and drive them into the most relevant content.
Our overall approach to the visual design was applied within the digital platform by adding in motion graphics, animated page breaks and SVG’s (looping illustrations) to help visualize the information without intimidating the user.
We used subtle cues in our content, design language, and animations to keep things inviting and engaging. All of the messaging was crafted to simplify things as much as possible without losing sight of SEO and key terminology. We led a “globally minded” photoshoot focused on diversity to drive content globally for Visian and we also crafted a new overview video that leverages vector art and animation to articulate the procedure and benefits at a high-level. Our design and development teams worked hand-in-hand throughout the entire project to create an elevated experience with motion and subtle cues that resemble clarity and things coming into focus - subtle fades, zooms, and hover states to help create a feeling of ease while eliminating harsh, overly technical aspects of the procedure. This development process was key for us to maintain visual consistency throughout the entire website.
As we curated the visual design system, we also created a new series of brand guidelines that would set the standard for both Visian ICL and their parent company, Staar Surgical.
Bringing Real Stories to Life Through a Focused Content Strategy
Bringing Real Stories to Life Through a Focused Content Strategy With Visian, we wanted to bring light to the idea that having better vision is about more than just seeing things clearly, it’s about experiencing life in an entirely new way. As part of our brand communication strategy, we captured the essence of a better life experience using vivid imagery and smiling faces.
We even created an entire ‘Life With Visian’ page that was filled with interesting stories from Visian’s brand ambassadors to help create conversations around the real experiences that make Visian ICL such a remarkable option.
Driving Users to Find a Doctor
Outside of all of the design nuances and improved UX/UI we had an end goal for our consumer - get in contact with a doctor near you. Visian had been working with a generic Find a Doctor (FAD) search engine that presented some minimal contact information. We asked ourselves how we could create more utility out of this FAD tool without changing too much of it’s core functionality.
We knew we could create a more robust search tool with improved clarity, hierarchy and functionality for users. We accomplished this by creating new tools within the portal to make contact a doctor more convenient with the ability to set up a quick Skype call or send in desired appointment times. The end result was a reimagined FAD tool that benefits Visian by simplifying the way they push leads to doctors, and providing users with relevant information necessary to choose a doctor of their liking.
Site Features & Key Takeaways
Interactive Modules and Animated SVG's
Aside from all of the interactive illustrations and sliders, we created animated SVG’s that are used to help draw interest to some of the important information about Visian ICL. This allowed us to stray away from uncomfortable real life procedural videos and give users a more delightful learning experience with animated illustrations that visually express the key features and benefits of Visian ICL.
Surfacing Content at a Glance
The site index was created to satisfy the needs of users who wanted information as quickly as possible. We designed this site index as a secondary navigation dropdown that allowed users to easily navigate between sections of the site, while also learning more about everything related to Visian ICL.
Find a Doctor Utility
We made it easier to get in touch with a doctor at the click of a button. Tucked within one full page experience, users are able to search for a doctor based on their location. We also created new tools within this portal to make contact a doctor more convenient with ability to set up a quick Skype call or send in desired appointment times.
Utilizing SEO Best Practices and Richrelevence
Working with Visian’s existing strategy, we created SEO pages with unique URL’s that grab users browsing the web for related topics. As users are pushed to the site, they’ll land on a templated landing page that contains the information they’re looking for. This approach allowed us to maintain a storytelling approach with a solid technical strategy to drive continued awareness for the brantd.