417 Magazine

A custom platform for regional lifestyle publisher

UX UI Research IA
417 device preview

A ground-up custom publishing platform serving up articles, events, and resources for hungry readers.

View Live Site

The regional lifestyle publication company—417— reached out to Mostly Serious as their contract with a dated, out-of-the box, came up for renewal, and they instead chose to find a custom solution to support the three publications: 417 Magazine, Biz 417, and 417 Home.

With hundreds of thousands of visitors each year, over a decade’s worth of articles, and a whole host of other lifestyle offerings and services, the ask was a huge undertaking, but one that would result in a platform that met their team’s need for flexibility plus design and features that were light years ahead of almost all of their peers nationwide.

Contributing Roles
  • Research: delivered site audit and peer research portions on research suite
  • Planning: planned features and recommended inclusions for project
  • User Experience Design: structural decisions, all siteflow and wireframe design
  • User Interface Design: look and feel, delivery of all UI screens
  • Agency: Mostly Serious
417 Isometric Mockup
417 Home Page
Biz Home page
Home Home Page
PATTERNS TO SUPPORT MULTIPLE PUBLICATIONS

The design needs for this project had an extra layer of complexity: the requirement to support not just 417’s flagship lifestyle publication, 417 Magazine—but also its sister publications 417 Home and Biz 417—each with its own unique brand, content, and varying user demographic. In approaching a solution, I looked for common organizational patterns that would be true for each publication’s needs and made the most minimal adjustments between them in order to simplify development needs as much as possible. All along the way, I made unopinionated distinctions, thinking of fonts and colors as “primary” and “secondary” that could be changed at a global setting level to support the variations needed.

MODULAR CONTENT PACKAGING FOR ARTICLES

417’s site editors had been limited by a single WYSIWYG and rich text editor on their old platform, only able to include basic text and images in a single container—or by injecting their own code overrides into the editor—a highly manual and needlessly complex process. I designed multiple content packaging modules that would more closely relate to how print articles were designed, and giving long articles multiple visual entry points for users to scroll and digest content more easily at-a-glance. Improved content packaging modules included multiple-column callouts, icon callout sets, pull quote styles, text lists, captioned photo sliders, before and after image reveals, galleries and more.

Screen Shot 2021 02 09 at 2 13 23 PM
MAKING RELEVANT CONNECTIONS

One of the biggest opportunities for the new site to connect users with relevant, engaging content was to facilitate the many conceptual connections in the real-life 417 ecosystems on the site. With a complex system of categorical assignments and tagging connections, I was able to automatically make connections and aggregate related object concepts on the site. This meant that an article about tacos could end with automated options for the reader to explore more food articles, sign up for a food-related newsletter, see only food-related advertisement banners on the page, visit the profile of a taco truck that was featured, or follow a link to taco recipes on the 417 Home sister site.

MORE DETAILS

To enable the process details for this project, visit the custom URL provided in your application.

Or Request Access Now