Website Design & Development · Preserved Portfolio Version
I created this website for Hoopes Vision to bring its procedures, doctors, technology, and patient resources into a consistent experience. The goal was to help visitors find a starting point, explore their options, and understand how to take the next step.
This demo preserves the version I created for my portfolio. Hoopes Vision’s current website may differ. The consultation flow is a demonstration: no information is sent and no appointment is reserved.
Starting with patient questions
A vision correction website needs to serve people at different stages of a decision. Some visitors already know which procedure they want to explore. Others are trying to understand the options or find out where to begin.
The design challenge was to organize detailed information without making every visitor work through it at once. I organized the homepage around familiar goals, including reducing reliance on glasses, exploring cataract care, and finding specialty care. These entry points lead into procedure categories, so visitors can begin without first knowing every treatment name.
Giving detailed content room to work
Procedure pages use clear headings, chapter navigation, and expandable questions to break longer content into manageable sections. Doctor profiles, patient resources, and a searchable journal give visitors routes into further information.
A consistent blue palette, strong typography, photography, and generous spacing connect the pages visually. Shared layouts carry that approach across desktop and smaller screens, including navigation and consultation calls to action.
Helping visitors explore the practice
The homepage introduces the doctors, technology, facility, and patient experiences alongside the procedure information. Each section offers a route into more detail. A technology catalog and facility pages give those topics space of their own, while the homepage provides an overview.
My role and implementation
I designed and built the website, covering the information structure, page layouts, visual system, and front-end interactions. The work connected content organization with the details of how visitors navigate, read, and move between pages.
The implementation uses shared templates and structured content to generate static pages, with HTML, CSS, and JavaScript supporting the experience. An interactive design reference documents the colors, typography, components, and interaction patterns so the system can be carried into future pages.
Preserving the work
I kept this version available so the site can be explored as a connected experience, including its procedure pages, doctors, and supporting resources. The consultation preview demonstrates the path from choosing a sample time to reviewing details, without making a real booking.
