Being the first college of pharmacy in the nation, University of the Sciences (established in 1821) has a lot to be proud of in its 200 years of educating leaders in science and healthcare. To celebrate this milestone, a series of events, lectures, fundraising campaigns, class reunions, and other festivities were planned for the 2020-2021 academic year. To help promote and communicate the Bicentennial and build excitement around the event it was determined a microsite would need to be built within our existing CMS allowing the university to promote the event and its storied past to the public.
The story of University of the Sciences is a complex one with multiple facets to present, highly dependent on images and visual materials pulled from the university archives. Presenting this material within our normal site templates was not an option, but creating a separate web presence was beyond the scope and timeline of what we needed to accomplish. A unique solution had to be designed and coded within our existing content management system, and one that would work well and load quickly for our majority mobile audience. After content was finalized it was decided that building a microsite would be the only way to achieve the inspirational tone and forward-thinking design the project required.
It was necessary that the design of the microsite incorporate some flexibility as the campaign would evolve throughout the 2021 and 2022 academic years and new content would need to be included, no matter the format. The microsite would additionally need to deliver an image-heavy presentation though be nimble enough to load quickly on a mobile phone. A balance between immersive visual design and clever coding would need to be established in order to deliver on spec and within the confines of our CMS. Finally, the essence of the microsite would need to visually communicate, not only the university’s past, but its growth, development, and exciting future ahead.
We went through many iterations of the two most prominent pages on the microsite: the main landing page and the historic timeline. We eventually landed on concepts that allow for easy reflowing of new distinct content (using horizontal container and repeatable regions that could be easily customized) and the inclusion of just enough visual flare that it would support the tone without overwhelming visitors or the web browser.
These savings were especially important for the timeline presentation, a chronological list of important events and moments during the university’s 200 year history, each illustrated with a set of images and a marker to delineate when it occurred. An XSL transformation was utilized to capture the information for each item and render it into a designed component on the timeline. This allowed for easy data entry and management for the content itself while foolproofing the way the element would appear within the context of the greater timeline’s design.
The timeline serves as both a snapshot of the university’s past as well as UScience’s maturation into a university and the bright future that lies ahead for the institution. The introductory banner graphic helps present the “spark” that ignited the presence of the university (a theme throughout our Bicentennial campaign marketing) and a background gradient is used to convey the passage of time: the original Philadelphia College of Pharmacy, represented by their blue varsity color, transitioning over the centuries to become the maroon-hued University of the Sciences we know today.
Visit USciences Bicentennial