Strange Matters Magazine
A lit mag co-op emphasizing ethical business, slow content, and purposeful investigationsSubscription Website with a metered paywall and store (strangematters.coop)
This page concerns UXR and UXD for Mobile and Web. For Branding and Print Design please head over here.
Background
Strange Matters Magazine was born from a desire to cultivate meaningful public intellectualism by modeling solutions to the structural problems which exist in publishing and digital media.
It is structured as a worker co-op, with competitive writer pay, and it releases slow content; it publishes ±200 page issues bi-annually, and online essays on a continual basis.
Given that the viability of the magazine would not depend on scale and virality (which has driven many outlets into the ground) but rather on a relatively small and committed subscriber base, the design and experience of the magazine is equally important to the quality of the essays published as it depends upon their loyalty.
As Product Designer and UX Lead for this crowdfunded subscription magazine, I researched, strategized, and completed all digital and print design across the magazine’s operations as our small team lifted it off the ground. The print design is covered elsewhere on this website.
Early Goals:
The central goals at the outset were :- to establish a solid base of crowd funder supporters, and
- to convert as many of those supporters into auto-renewing subscribers as possible, growing the subscriber base from there.
We wanted readers to incorporate the magazine’s website and physical magazine into their lives on a daily or weekly basis as subscribers.
Therefore,
- the UX of the print and web needed to be deeply appealing,
- the website needed to be easy to manage a subscription from,
- the print and web had to be easy to navigate and calm and pleasurable to stare at for hours, and
- it needed to signal to our audience that this would be their calming and invigorating respite from an alienating media landscape,
- the reader had to perceive our magazine as delightful, “different,” and unlike other magazines on the market,
- The website’s architecture had to communicate the structure of the magazine and the elements that make it unique.
Discovery
User and Stakeholder Interviews
Early goals of discovery included- establishing a target market,
- understanding the needs of our users, and
- clarifying a sense of the desires and pain points of this audience.
Getting a clear sense of the “secret sauce” or the deep desires of this target audience would enable us to set ourselves apart from other magazines very quickly.
Prominent stakeholders who were interviewed included Benjamin Kunkel, founder and editor of a competitor magazine named N +1, and Jon Baskin, founder and ex-editor-at-large of The Point Magazine. Users (readers) who were interviewed were identified though personal association and through expressed affinities over social media.
The interviews were semi-structured verbal interviews, and covered at least the following points:
- reading habits,
- preferences and opinions about existing magazines,
- number of subscriptions users already paid for and what they believe a reasonably priced literary magazine costs,
- whether they were satisfied with existing magazines and what their reservations or praises were,
- how regularly they expected a literary magazine to be shipped each year,
- whether they enjoyed reading online, what the most important elements of reading websites were, and what elements they found delight in.
Competitor Analysis
In parallel with user and stakeholder interviews, I conducted a competitor analysis of the products which were on offer by established literary magazines, and of successful crowd funders. This would give a sense of the baseline of deliverables necessary in the user experience and interfaces for us to seek to out-do.The analysis addressed two primary questions:
- What elements made past crowd funders successful?
- What were the print, digital, and tonal elements in common across user experiences of 3-4 competitors (i.e., what were the expectations of our readers, which we should meet and improve upon)?
The crowd funder of Commune Magazine was studied. It shaped the number of perks, the social media, the graphics, and merch which were implemented during the fund raiser.
Major insights gathered from competitor analysis related to the categorization and navigation structures of competitor magazines. These were essential in how users understood each magazine through their website. Visual hierarchy was utilized in several ways by these magazines to give readers a sense for their priorities, commitments, editorial outlooks, and heritage.
Major insights are summarized below:
Revenue Drivers
The subscription, donation, shop, and other revenue drivers were emphasized in the UI. They were all generally visible without scrolling on the landing page.Furthermore, USPs like the latest print issue, a particularly good article, or brand new content, were generally visible without scrolling, and were treated with graphical emphasis.
Color and Impact
Different magazines used color and impactful graphics differently. The London Review of Books for example, had a subdued pallet with relatively little visual hierarchy among articles on the homepage aside from images. Articles were clustered into topics with lightly colored pastel backgrounds, reminiscent of the Financial Times pink. The overall impact of this subdued and quiet approach is the impression of a confident and established review newspaper that is not sensationalist, or trying hard to vie for the reader’s attention. Furthermore, the calm environment is soothing and gentle on the eyes, and is easy to read for long stretches of time.By contrast, N+1 is populated by stark colorful containers and graphics. The impact of this is perhaps that N+1 might seem less stuffy and more bold. It is ultimately quite overwhelming, at least on the landing page. The articles, by comparison, are calm and easy to read.
Navigation
Navigation was very different across each website. Even though all magazines used some form of tagging and categorization, the central location of these navigation tools was not always easy to find. Some essential categories included issue numbers, author, year, and topic.Landing Page Articles
By far, the greatest variation and individual character arose in how magazines displayed and highlighted articles on their homepages. Some outlets featured large numbers of articles, while others featured almost half the number of articles. Subjectively, the experience of websites that used white space, and fewer articles was more pleasant.
Information Architecture
Based on the competitor analysis I created an essential architecture for the website with its primary functions. Other magazine websites reflected several elements in common which were emphasized and down-played.
Wireframes, Prototyping, & Testing
Design Methodology
The magazine’s design system had to provide a sense of continuity between print and digital.The print design - its grids and characteristic elements - were given significant attention as the print issue is the single biggest means of marketing the magazine and appealing to our bookish users. The design of the print issue is covered elsewhere.
The user interface extended and emphasized characteristic elements of the print issue, and identifying characteristics of the magazine in general.
Wireframes were created for the website, which were discussed with a small number of users.
Mobile-first High Fidelity Mockup and User Testing
High Fidelity Mockup
A high fidelity mockup was created in Wordpress and kept behind a “Coming Soon” landing page to prevent readers from seeing the page prior to its launch.Several friends of the magazine were asked to look through the website and share their experience of the interface. These friends were bookish, enthusiastic readers whose affinity for literary magazines was clearly understood.
The participants navigated the website with me present. I asked them questions about their experience as they navigated and they shared their concerns when navigation was not perfectly clear, and their impression of the imagery and appearance of the user interface.
One clear outcome of these sessions was that three main navigation areas were introduced in mobile and web; the navbar, the slide-in menu, and a comprehensive menu in the footer. The items in the navbar were expanded and selected to represent the structure of the magazine and the most essential functions. The slide-in menu and the footer were expanded to contain a comprehensive list of navigation end points.
Design System
The design system for mobile and desktop contains the most important design assets.
In due course it will be expanded to encompass a myriad of other elements.
Figma based development was not initially necessary in the development and refinement of this website. Instead it proved more efficient to sketch by hand, design elements in Adobe Indesign, and prototype the wesbite using a theme builder in Wordpress.
After operating for over a year, Figma has now been incorporated into the project as the magazine begins to budget for the development of a non-wordpress website and app.