Lions Eye Institute

Industry: Healthcare |Agency: eNox Media

Web Design

Project Overview
Lions Eye Institute

The Lions Eye Institute needed a new website that provided information for their three main target audiences: donor families & recipients, doctors looking for transplant materials, and researchers. With this in mind I created a modern design with intuitive navigation in order to easily funnel the three target groups to the information they needed.

Launch Website
Project Details
Role

Lead UI/UX Designer; focusing on mobile-first design website design. I was the lead designer on this project, and I met with the client to hear their needs, set their goals and propose visual styles to properly alliterate their brand voice. I created a clean and minimal visual language, developed and maintained the design system, and led other designers to help with asset creation and page production.

Challenge

The Lions Eye Institute’s previous site struggled to present complex information in an easy to digest way, so clarity of content and organization of page elements was a must for this project. Another challenge was to create a single site that services the three target audiences in a cohesive way.

Process

Because of the complexity of content and information architecture, content was curated, outlined, and many renditions of wireframes were created for key pages before the design began. There was lots of communication between myself, the client and our team of content creators; however once we had the overall structure I developed a visual language based off of their already established brand, created a living design system, and created template-driven pages designed to accommodate a wide flexibility of content.

Results

The client was pleased with the process and results, as well as the care and insight I put into making sure the website’s overall structure and design served the target audience and created clear funnels to important information.

Lions Eye Home
Lions Eye Transplant
Lions Eye Research
Lions Eye Optigraft
Lions Eye Ways to Give
Design System
Design System

A design system is a living document that sets the parameters and structure of the design. For every project I roughly follow the principles of Atomic Design, starting with the smallest elements, atoms, and scaling up to more complex UI patterns such as organisms, templates and pages.

Lions Eye Design System Atoms
Lions Eye Design System - Organisms
Lions Eye Design System - Templates
Process
Wireframes
Lions Eye Wireframes 1
Lions Eye Wireframes 2
Lions Eye Wireframes 3