Gateway Cities are mid-sized urban centers that anchor regional economies around the state. For generations, these communities have been home to industry that historically offered residents, many of them recent immigrants, good jobs and a “gateway” to the American Dream. We built a digital version of a one-time publication to tell those cities’ stories and showcase the rebirth and innovation happening there.
Why Viv
The Gateways Magazine team worked with us on two previous projects: the MassINC website and Commonwealth Magazine. They chose Viv again because of our proven delivery of lean, budget-friendly websites for nonprofits. We were also able to work with them on a condensed timeline, building the new website in under one month.
The Results
This website, while done on a lean budget and short timeline, provides an evergreen and immersive environment that sets the digital edition of Gateways Magazine apart from the print publication.
Adapting from print to the web
We started with the question: what are the challenges inherent in moving a publication from print to web? Gateways Magazine is a celebration of the successes and thriving economies of our state’s Gateway Cities. It is a very image-rich publication. We wanted to invoke the same sense of celebration and momentum on the web.
A lot of major design decisions happened on the homepage. We included a mobile menu button (hamburger menu) in the top right corner, which calls out the magazine’s index. Users can hover over this menu and jump into the content they want, or they can choose to browse the magazine from start to finish.
The look and feel of the website relies on interpretations from the print version, with some font changes and other adaptations to optimize usability in a digital context.
The digital environment also allowed us to put some prominent calls to action across the whole site, in addition to calling out sponsors on the footer of every page.
An immersive experience
An online environment creates different opportunities from print, such as immersive images and videos. The Gateways Magazine team built custom-videos for the site, plus we used even more images than in the print version and a lot of call-out boxes.
This immersiveness seeks to make you feel like you are visiting the Gateway Cities in person.
To make the stories more immersive, we put the captions on hover, which is only possible on the web. We created the same experience on mobile, which is critical as 46% of visitors are on mobile and tablet and are looking for the same optimized and intuitive browsing experience.
Discovery and Delight
We recreated the magazine’s index in the website’s menu. An index of a magazine invites discovery and delight, and we wanted to recreate that experience. We like to think it’s all the better in a digital environment because all it takes is one click instead of having to thumb your way to the page.
Scrolling Beyond the Fold
The “above the fold,” myth is long dead. Today, scrolling is second nature. User Experience research shows that users will scroll to the bottom of a webpage without any cues 91% of the time. We can create an immersive experience with each section of the page taking the user’s full attention and making an emotional impact. Thanks to cell phones, users are now used to scrolling ever more, which creates more space for prime content.
Multiple Ways to Browse Content
A website needs to address all different types of users and their ways of navigating. We enhanced the seamless experience of browsing online through our “next biggest article” navigation. Some people just like to read a magazine from front to back. This element gives users another way to discover content.
We also presented the content via multiple sections and categories, so readers can dive in wherever they want.
An Evergreen Environment
Gateways Magazine was only printed once and, like the print version, its online edition will ensure a lasting legacy. We know how strongly today’s audience reacts to content being fresh and built the site with this in mind, minimizing the dates on articles and deemphasizing the age of specific content.
An Ongoing Relationship
We created a manual for the site that has allowed them to continue to edit the site through staff changes. In addition to that, we host and maintain the site to help keep it performant, updated and optimized. We are also on retainer to make any additional small changes that inevitably come up with an innovative organization, which launches new programs and initiatives regularly.
