73 “Podcasts” — Magazine Adaptation Project

Simon Angelo Attang
6 min readDec 2, 2020

--

Capstone Project Case Study.

Designed by: Simon A.

Year: 2020

Link to the Figma prototype for Desktop and Mobile.

ABOUT THE PROJECT

73 Magazine (also known as 73 Amateur Radio Today) was an amateur radio magazine that was published from 1960 to 2003. It was known for its strong emphasis on technical articles and for the lengthy editorials in each issue by its founder and publisher, Wayne Green. The magazine title, 73, means “best regards” in amateur radio lingo.

This project was an effort to give the magazine an online presence, and translate it to the modern day. The solution was to transform magazine articles and columns into podcast shows congregated under one network/website.

Rather than make it into a simple blog website I thought it would be more interesting to take to a different medium, perhaps enagaging more with a younger audience whose consumption of podcast and audio content has been growing in recent years.

A collection of 73 Magazine covers spanning the 1960s.

I chose 73 because I liked the look of the covers, and they varied quite a bit. From very a minimal colour scheme to a detailed illustration, the covers from the 60s caught my eye before I even read what the magazine was. I guess those are some effective covers! I don’t know much about amatur radio, but I do like the idea of such a niche topic for a publication, and it was interesting to read some of the articles and learn a little about what HAM radio was like in the 60s and 70s, and how it developed all the way into the 2000s.

Planning

The question of whether this should be a native app or a website cropped up immediately. I decided that a website with a responsive layout adaptable for both desktop and mobile was the most appropriate. Seeing as the platform would host podcasts, there wouldn’t necesarily be a need for an app since podcasts can be accessed though other already established apps like Spotify or Stitcher. The wesbite would act as a hub for these shows, all under the same umbrella of 73.

Going into the user flow, what would the user see upon landing on the homepage, and what would they do next? Since the focus of 73 magazine was its lengthy, in-depth articles, the focus for 73 should be the podcasts themselves. You should be greeted with a show immediately — same way you would if you were to flick the magazine open to a random page — and maybe even have the latest episode of that show ready to play right there, native on the website.

Early sketches and notes on user flow and layout.

Going with this, the main call-to-action would be to play the latest episode of a show on the website. Further past this would be information on said episode and then the opportunity to stream it on another app should the user wish to do so.

I thought it best to restrict the site to a one-page layout, to allow continual play of the episode of the show. This would mean that any menu should either be included on that page, or slide in or overlay over the page by clicking on the option. In keeping with the idea of a responsive site made for desktop and mobile, a hamburger menu that slides in when clicked would allow for better consitency throughout platforms, wherever the site is accessed.

I looked at the layout of other podcast websites and they all had similar focuses on their podcasts and not much else on the pages; they were all fairly simple sites.

So on the main page the sections would be:

  • HERO/PLAYER
  • EPISODE INFORMATION
  • MORE EPISODES
  • OTHER SHOWS IN THE NETWORK

While the menu would have sections like:

  • ABOUT
  • SUBSCRIBE
  • SUPPORT

Design

The colour palette was derived from the covers of the magazines themselves, to help stay true to the original designs. Similarly, the fonts were chosen because they resemble the type in the magazines. I chose DM Sans, in Bold for the headings and Regular for body copy. It’s friendly, easily legible, and smart enough to fit the highly technical subject matter of building radios.

The colours were checked for accessibility and the contrast was fine. I also included a few of the illustrations and designs from the original covers in various parts of the site.

The style is very flat and minimal, to emulate the feel of it being on a physical page, including some elements having thin black borders and line separations like in the magazine.

On desktop, the player encompasses the entire hero area with the progress bar spanning the entire height. The user can drag the bar from the ‘time code’ handle and slide it across, making the image behind (which would bethe cover image for the episode, meaning it would change depending on the episode) turn to colour from black and white as the episode progresses. It’s best to only be able to control the bar with the handle to prevent accidental skips with misclicks. The “More Episodes” pop-up can be scrolled through by the user or hidden with the arrow.

While the desktop version has the player present in the hero section, however, the mobile version instead has a button that will open up a player as a sticky tab at the bottom that the user can open up into a full player. This is once again to allow the user to access the current show in all areas of the site.

The hamburger menu opens sliding in from the right; on desktop the player appears as part of the sticky nav at the top.
The user taps or wipes up from the sticky bar at the bottom to bring the player up, or they could simply pause and play from the bar. The mobile player functions similarly to the desktop player and also contains the episode information that is underneath the hero area.

Future Versions

This project was completed in a week, so with future versions and updates it would be good to design what the website would look like on a tablet. The idea would be that the tablet version would be more akin to the mobile version than the desktop, since the mobile version was designed with touch in mind.

I also think it would be interesting to design a social media presence for 73. I think these elements, colours, and the illustrations from the magazine could work really well together and fully build out the brand.

Link to the Figma prototype for Desktop and Mobile.

--

--

Simon Angelo Attang
Simon Angelo Attang

Written by Simon Angelo Attang

0 Followers

London-born Designer/Writer/Filmmaker/Photographer. Getting things done, or at least trying.

No responses yet