KPISS.FM RELAUNCH
Bold, maximalist design for desktop and mobile
KPISS is an online free-form radio station
The station’s identity springs from its DIY ethos and maximalist aesthetic. Think 1980s MTV, the heyday of pirate radio and the audacity of early punk rock.
With the launch of a KPISS iPhone app, the station website was in need of a redesign. As the lead UX designer, I created a fun and vivid new look for desktop and mobile.
Community Radio
KPISS is near and dear to my heart. I hosted a dance music show called Extra Anchovies on the station for over a year before starting this design project. While I knew the station’s aesthetic and programming choices, I stuck by the UX mantra that I am not the user. Instead, I turned to the KPISS community for enlightenment and inspiration via five user interviews with other show hosts, including long-time and new additions to the roster. We discussed their experiences with Kpiss, both as listeners and show hosts. Questions included:
What are the first words that come up when you think about KPISS?
What images or colors pop up when you think about KPISS?
How do you feel while doing your show?
How would you describe the station to someone who hasn’t heard of it before?
Drawing on this data, I indexed words and descriptive phrases from the interviews.
Using this list, I created a word cloud to highlight common themes and some particularly evocative words like chaos, cozy, amateurs and wackos.
I returned to these throughout the project whenever I was stumped or struggling with the design.
How it started
This was the homepage of the site before the re-design.
I carried over a number of the original design elements, including the tiles for displaying radio shows and the static navigation bar. However, I removed the newsletter banner that popped up on every page and annoyed users.
A New Skin
On the old KPISS site, the audio player was only available on the homepage. It was an unsatisfying user experience that visitors complained about so my first design task was creating a clean, bold header with an embedded audio player displayed on each page.
To reduce clutter and make important information stand out, like the Patreon CTA, I chose simple icons along with contrasting pink and black text. I wanted the header to be unobtrusive when users were focused on other information throughout the site, so I created elements without outlines or drop shadows.
“The Hot Pink Has to Stay”
KPISS founder and stationmaster Sheri Barclay was adamant that the new site maintain the vibrant yellow background color and bold pink accents that fans associated with the station.
This posed a significant challenge to creating a user-friendly color contrast. The site also hosts thousands of bespoke images as DJs upload a new one for each episode of their show, creating additional visual chaos.
With these constraints in mind, I focused on simplifying design elements to soften the visual experience, maintain coherence throughout the site and help the episode images standout.
Rounded corners, a slightly creamy background for text boxes and the minimalist, round Roboto font create an approachable and easy-on-the-eyes experience.
These elements also echo the vintage TV Guide magazines Sheri cited as a design influence, particularly the new programming schedule page which incorporates bespoke imagery designed by Brett Burton.
Retro Aesthetic
While poring over 1970s & 80s TV Guide issues, I was particularly inspired by the illustration of stacked cassette tapes shown here. I was also influenced by the bold, rounded borders used throughout the magazine.
I experimented with a four-color gradient until realizing the number of shows airing per day was not always divisible by four. Instead, we went with an alternating pink and yellow color scheme that still felt very retro.
A limited color palette, one font choice and simple design elements provide order and continuity for a website exploding with sound and imagery.
Sensory Underload
Alternate version of the homepage. Ultimately, we went with a full bleed hero image and removed the pink border, along with the TikTok feed.
Creativity through Constraint
KPISS was five years old when we redesigned the website. Throughout that time DJs had been uploading a 1280X720 image for their show page and each episode.
Rather than change things up and risk an image cropping nightmare, I kept the full bleed image at the top of each show page and the four-tile gallery for episode images, softening the appearance through rounded borders.
For the episode page, I brought all the information above the fold. In the old version of the site, a full bleed image ran across the top of the page with a scrolling overlay displaying the episode description and track list. The overlay had a black background and it wasn’t always obvious you could scroll to see more information.
For the new version, we made a trade off: some image cropping for ease of readability. I changed the background for text boxes to the off-white used throughout the site and added a dedicated column to display the track lists.
I tried to keep the design as simple as possible so the episode images popped on the page.
One of my favorite additions to the site is the About page. I suggested an image gallery showing the DJs and show hosts. The client loved the idea, so I designed a two-column page with the gallery, station history, video and a curated set of press links. We linked the gallery to a Wordpress page so it was easy for DJs to upload photos of themselves, taking maintenance work off the client’s plate.
I implemented a dedicated press page that linked to Wordpress, making it easy to update as new articles and features were published without needing a developer’s help. I also suggested the site have a privacy policy. After creating a dedicated policy page, I added a link to the final version of the About Us section.
Highlighting Community
Since the website launch, DJs and hosts have been taking screenshots of the site to promote their latest episodes. Here’s a sampling of feedback from Instagram. Apparently the schedule page is a big hit!
Feedback
Final Thoughts
I was so honored to work on a project for my own radio station! I grew tremendously as a visual designer while gaining valuable insight into my limitations. Since the site launched, I have been studying responsive design and best practices for developer hand-off. I have also been brushing up on CSS and HTML.
One of the struggles with this project was communication. The key stakeholders were located in different time zones and countries. While the head designer was also in New York City with me, the client was in western Canada and the developer is based in China. This sometimes led to un-finalized designs being implemented by the developer overnight, before it was ready for hand-off as I had shared my Figma files. I learned to be more clear in communicating what was awaiting sign-off from the stakeholders and what was ready to be coded.
Another challenge was the fact I was brought on mid-project, after some of the development and design work had already been done. Since we were on a deadline, we didn’t have a lot of time to make changes. Image cropping across screen sizes was our trickiest issue and highlighted another area I need to focus on improving in my future design projects.
Considering these constraints, I think we did a good job. That said, If I had the opportunity I would revamp the homepage to make it more striking and fix the asymmetry of images in the final product.