Every year, the College sends a magazine to our alumni base of 30,000+ Mountaineers. With the limitations on travel, gathering assets for stories and reduced resources due to COVID-19, we were tasked with turning the 2020 issue of the Chambers College Magazine digital.
The Build: I designed the wireframes, information architecture and high-fidelity mockups for mobile and desktop using Adobe XD, utilizing the component feature, Adobe Libraries to import our brand colors, fonts and master styles and a couple of plugins: Icons 4 Design and UI faces for faster prototyping.
We wanted the magazine site to focus on what mattered most, the stories, so we opted for a cleaner look – less noise, larger type, a lot of white space. To further this aesthetic, I focused on serif type and larger line-height to give the site an editorial feel.
We also added read times and a progress bar (center) so users knew how much of a time investment each article was. “Tweet-able” quotes (right) were added to various stories as well to get users to share articles.
With so many contributors, we wanted to give proper credit, so we created author profiles that linked from each story they wrote as well as photo credits on all hero images that could be input when publishing each article.
The navigation minimizes on scroll for less distracted reading. Subtle animations included link underlines and bookmarks added to the editorial feel (pictured above).
To scale for future issues, we designed a “Find an Article” filter and article tagging system that allowed users to narrow their search by issue year, department or feature stories.
The Ticker was another cool feature we added for small articles (profiles, college updates, etc.) any short-form news that didn't necessarily fill a whole page. Each article that feeds into this page is however published individually and given a unique url so it can be shared with other readers individually.
I wanted to create some flexibility with photography being more unpredictable this year, so we designed and developed different article types that allowed for portrait and landscape photography.
The feature stories included more immersive content, multiple layout options that could be customized during page creation and special font styles per story to distinguish it from the standard articles.
Marketing: With the new tactic, we wanted to track the effectiveness of our new digital issue. We set up custom campaign links in Google Analytics to track all traffic sources across our social media, print and digital efforts.
We wanted to create hype surrounding the launch on social media, so we created unique posts that directed users to individual stories rather than the entire website.
With a limited budget, we opted to still send out a physical postcard mailer for our alumni base with a QR code with a custom url to record the traffic source.
Outcome:
We had 3,676 users overall.
Peek Activity: 433 visits on our highest day
Top traffic sources included:
1. Direct
2. LinkedIn (referral)
3. Facebook (referral)
4. Email
5. QR Code from the postcard mailer
Since this was a new project, our goals were to get as many readers as possible. After reviewing the data, I would like to see an increase in overall users as well as an increase in the number of pages per visit as we improve the look, feel and functionality in the next issue.
