Responses by Fritz Klaetke, design director, Visual Dialogue.
Background: One of the most popular attractions in Boston for visitors and locals alike, the iconic Freedom Trail weaves its way through the city’s streets with locations that bring American history to life. Boston Globe columnist Scott Kirsner and historian Bob Krim envisioned a companion path of sorts—the Innovation Trail—to highlight visionary contributions in science, medicine and technology from Boston and Cambridge. These breakthroughs span the years from the first pain-free surgery at Mass General Hospital to Moderna’s development of the COVID-19 vaccine with the flexibility to add new stops and features to the Trail as they emerge. In addition to the branding we developed, a key step in bringing the Innovation Trail to life was creating a mobile-first website to guide users through the 2.2-mile path and provide engaging content at each stop.
Design core: A key feature of the website is the ability to use it as a personal guide, taking the user through the streets of downtown Boston and across the Charles River to Kendall Square in Cambridge. A customized Google map moves along with you as you scroll between locations on the Trail, responding to currently visible content. You can also begin your journey in either Boston or Cambridge, and the map and sequence will update to match your selection.
New lessons: The whole team at Visual Dialogue learned a lot about all the innovations that have sprung up in Boston and Cambridge.
Navigation structure: Because the most important use of the website is a navigational and informational tool as one walks the Trail, the mobile experience on your phone is primary. We thought of it almost like having a great tour guide: someone who leads you on the path; gives you a quick, engaging overview at each stop; provides more detailed information if interested; and poses questions to spark discussion—all in the palm of your hand. Side note: speaking of phones, the range from Alexander Graham Bell’s invention to the Android operating system for Google is represented on the Trail.
Technology: The site is built on the Kirby CMS platform, enabling the in-house staff to add events easily, edit locations and change almost any content on the site. Instead of relying on third-party CSS or JavaScript systems, we used some of the most modern HTML5 features—including CSS variables, CSS grid, responsive view-width units, sticky positioning and the intersection observer API—for our layout and key UI features, resulting in faster page loading times and a smoother experience.