Butterfly & Brien Holden Vision Institute

Please tell us about the difference-making experience generally and how it’s caused positive outcomes, and help us understand what makes this example noteworthy or exceptional.: 

This online tool was the first of its kind. No other online refractor previously existed anywhere in the world. For the uninitiated, it simulates an eye test!

A highly innovative web-based learning tool, the Virtual Refractor has been designed to simulate a complete distance refractive examination using a refractor head. Virtual patients, with numerous demographic profiles, respond to various test charts and questions regarding the effects of lens combinations introduced by the examiner. Using this world-class tool, optometry students are able to gain a strong working knowledge of how to perform refraction prior to practical clinical sessions. Originally a desktop application developed in 1992 using C++ programming, in 2013 it was time for the Virtual Refractor to undergo a redesign and take the technology online.

The Brien Holden Vision Institute believes in vision for everyone, everywhere. The Institute’s core business is creating new ways to improve vision outcomes for people whose sight is affected by refractive error. Collectively, the conditions of myopia, presbyopia, hyperopia and astigmatism (all regarded as ‘refractive errors’) impair the vision, in some cases causing blindness, of billions of people worldwide. The Institute are helping build the global capacity of optometry to provide equity in eye care access for all people.

Brien Holden Vision Institute and Butterfly worked closely together to scope the project and design a new user-friendly interface to simulate refraction with a patient. We then reverse engineered the programming in order to apply the mathematical logic of the refractor to the new design. The new design also brings a human element to the tool. The desktop application whilst simulating the refractor, involved a basic interface, with no “person” behind the refractor. The design also delivers increased design detail that is more realistic, creating a better user experience.

Taking the Virtual Refractor online has meant access to refraction training for students all over the world. They simply need an Internet connection. Greater access to training, in some cases where the large, heavy and expensive machinery is not readily available on a continuous basis, creates greater sustainability for the optometry profession. HTML 5 development also allows for the refractor to be accessible on iPads meaning greater access worldwide to students in more remote areas.

All of this makes a difference by giving greater access to optometry services to people throughout the world, improving their quality of life. The flow on effect of this is practically immeasurable. A user experience design challenge for the Butterfly team was developing an understanding of the highly technical requirements of the refractor, and then designing a user friendly interface to complement it without compromising the refractors functionality. The design and technology needed to simulate the refractor exactly. Ensuring that we correctly reverse engineered the code to work with the design was crucial.

Rollout of the virtual refractor is ongoing and is proving to be incredibly successful, with further development planned for 2014. 

What can others learn from the successes and failures of how you designed a digital experience to meet an important need?: 

Creating a successful digital experience requires a thorough understanding of the functionality of what you are building in order to be able to create the design. Developing this understanding involves asking the right questions. These questions include things like: what does it do; who is the target audience and; what does the functionality and design need to achieve? These questions form the basis of being able to delve into the finer details to fully scope the requirements of any experience we design and build. The key is then a collaborative team. The Virtual Refractor came together because of the thorough communication between the whole team both at Butterfly and on the client side at Brien Holden Vision Institute. This true collaboration enabled the delivery of an exceptionally high quality and successful product. And it’s only through such open communication and a willingness to work together, that truly amazing things, with the potential to make a real difference in the world, happen. Of course, despite meticulous planning and collaboration, the unforeseen can occur during a project, and it’s the ability to problem solve and be forward thinking that separates good experiences from great ones. During a project build, things can change. Ideas can grow. A project that evolves to require additional functionality is not always a failure. If anything, it implies that the experience you are designing has inspired ideas for further improvement. When designing a product or tool with the purpose of serving an important need, it’s no bad thing to refine and improve the design – and this is exactly what has happened with the Virtual Refractor. We have big plans for it’s future.

What are the key ways the design of the solution’s user experience influences its success?: 

Planning and wireframing are critical when building a great experience in the digital space. Before the design work commenced, our lead project developer and designer mapped out all the integral templates that users would interact with. This process of creating a detailed information architecture helps to reveal elements of the user experience and plays a large role in influencing the project’s design. Once the information architecture is agreed by the team, the design can commence, creating the look and feel that users will interact with to experience the digital solution. Design is arguably the first thing you see before you start any form of interaction and therefore heavily influences the overall success of a digital experience. For this particular project our objective was to integrate the Brien Holden Vision Institute colours to create an intuitive interface using a clean, minimalistic style. The interface design was somewhat restricted by the existing layout of a refractor tool however we still had creative control over visual appearances. When designing a digital experience, visual cues need to be simple so that users can easily identify things like buttons, menu’s and other interactive areas. It’s also important to achieve brand integrity through design and we achieve this in the way that brand colours and stylistic elements are applied. For example, one of the brand colours is blue, however if this was applied too heavily it would most definitely compromise the usability and generally hinder the user experience.

What user research did you use or perform in designing the solution, and what were the most interesting effects of that research in the solution’s design?: 

The tool that we created is designed for a niche target audience and so the initial user research was supplied to us by our client. Brien Holden Vision Institute are one of the only organisations that offer this tool and it’s primarily only available to optometry teachers and students. During the project planning phase, we consulted with those who had experience using the original tool, and documented their perceived flaws with it as well as suggestions for improvement. We learnt that users found the most repetitive tasks tedious, so we utilised hotkey shortcuts and made sure the most common action buttons were easily accessible. We also improved the user validation process, based on feedback that it was too strict and impeded the flow of the program and optimised the data on the results page, so that all information was clear and served a purpose, where it was previously cluttered. Like any design it’s important to research competitors and existing products so you can set benchmarks and establish ways that you can improve your creative concept. Part of our process was looking at the original tool that Brien Holden Vision Institute created roughly eight years ago and one other similar product that we found on the market. Interestingly this tool is not very common however what we did discover with one product on the market is that the design style favoured illustration and there was no patient in the design. Our approach was to simulate a real life eye test - to us and the client that meant using real photos of a refractor machine and a patient. The integration of patient responses as you move through the virtual eye examination created a realistic connection that we didn’t see across the other tools that were researched. Consulting with optometry experts and teachers and gaining their feedback through testing of the tool also helped us achieve our goal of a realistic refraction process.

How might your solution serve as the inspiration or starting point for future solutions to other individual, societal, or world needs?: 

The success of the refractor has led to the development of plans for it’s growth in the future. In 2014, we are embarking on a project to integrate the Virtual Refractor with an education platform that will allow universities to add lecturers and creat their own courses around the refractor. This will include tests and required levels of accuracy to pass with lecturers being able to further tailor the refractors features based on student level and course requirements. A self-managed multi lingual function will also be added to make the Virtual Refractor more globally accessible. Brien Holden Vision Institute will be able to add new languages including sound files for the automated refractor responses.

Please share any quantitative, qualitative, and/or anecdotal evidence of the effectiveness of the design of your solution’s user experience in solving a pressing need.: 

Clear quantitative data around the Virtual Refractor is not available at this time, but the anecdotal evidence of it’s success has lead to further investment in making it an experience that can reach more people and have more of an impact globally. In addition, the Brien Holden Vision Institute team are incredibly proud of what has been achieved, including an award for best digital experience website at the Sydney Design Awards. The Institute’s Director of Education, Luigi Bilotto commented: “The Virtual Refractor is a highly technical innovation we have made simple to operate. Taking the Virtual Refractor online will mean access to refraction training for students all over the world. They will simply need an internet connection. This is an important development and will assist optometry educators and students in developing countries.” Bilotto continued: “We are incredibly proud of our Online Team for producing this comprehensive product. The new design has allowed us to bring a human element to the tool. There has been an incredible amount of work that has gone into this, the level of design detail ensures that the Virtual Refractor is realistic, creating a better user experience and improved learning outcomes. This is a great result for the team and this award confirms the value of our product.”