Web

I Choose Orlando Health

Mikey Moraza | 05.11.2017

Site type: Sitecore | RESS | Single-page | Modular
Technologies: PHP | SASS | JavaScript | Sublime Text 3

Explore site: http://www.chooseorlandohealth.com/

Dev Team: Lightmaker

Client

Orlando Health is a private, not-for-profit healthcare organization based in Orlando, FL. Since 1918, they have created a community-based network of physicians, hospitals and other medical facilities who provide healthcare to almost two million residents in Central Florida each year. Some of the most notable are Orlando Regional Medical Center, Arnold Palmer Hospital for Children, Winnie Palmer Hospital for Women & Babies, and the UF Health Cancer Center.

Problem

Their digital platform was already quite robust, as it was being used to control five different hospital sites. However, it did not have the capabilities to create single-page microsites. They needed a site builder that would allow them to spin up campaigns for varying subject matter on the fly.

Solution

Since Orlando Health already had a strong platform running on Sitecore, we decided to piggyback on that implementation and work from there. Now, when they create a new campaign, they have the option of using 10 unique modules to display relevant information. Some of the offerings include combinations of text and imagery, YouTube video support, slider functionality, contact / inquiry forms, and several other calls to action… All of which are fully customizable and responsive.

Challenges / Key features

The main goals for this project were reusability & ease. Because of that we wanted to make sure any module we created would have color and component visibility options. This way they can each be manipulated distinctively per campaign. In the CMS, every module has its appropriate fields (image, text, etc.) as well as three color options to set; A primary text color, a secondary text color, and a module background color.

My favorite component to build on the site is not actually any of the customizable modules, it’s the header / navigation. Since all the information of a given campaign sits on a single page, the functionality of the header had to differ from the usual click & load navigation style.

Using a combination of hash-based anchor links and module id’s, the user can click on a nav item and be scrolled down the page to that section. Whichever module you are currently viewing will be highlighted in the navigation, even when scrolling through the page. Additionally, if the user’s viewport width is not large enough to display all of the menu items, a ‘More’ item will show to dropdown the hidden menu items on hover. On mobile, all menu items show and have the ability to scroll horizontally.

Takeaways

Being that this was a single page template created to be reused, development went rather smooth. I enjoyed the process of creating modules that would look unique every time they were used and learned a lot from that. Going into a build knowing you have to account for the fact that things will be highly editable forced me to rearrange my thought process and learn new ways to code inline styling coming from a CMS or alternative data source. I could say this was the foundation for creating the Branded Humans Platform.

Web « ATP World Tour
Web PLASTICS Industry Association »