Iconic WXPN, the public FM radio station licensed to University of Pennsylvania, sought to create a website that took their radio station and news platform and seamlessly tied together to create a hub for an expertly curated music discovery experience.
Starting from a marketing campaign that WXPN was running at the time, we conducted a short interview session with stakeholders get a sense of how we may evolve these marketing elements and ultimately align on a tonal direction of the new website. We then created three visual directions utilizing different type styles and visual elements to create a visual direction for the website.
The WXPN team ultimately decided on the New York Times direction, as they view themselves as an authority in the music space. Though, like in all projects, some elements from the other directions made their way into the final design.
From here, we created an identity and design system for WXPN that allows for integration between news and radio content. The site makes use of a side rail to promote radio content, while news content takes up the majority of the site’s body. We collaborated with the WXPN team to make sure that the design system provided easily scaled to properties that exist outside of the primary WXPN brands.
A little exploration goes a long way. Design exploration is a very short phase in the overall project process, but it saves a ton of time trying to gain alignment with the client early on, so that the team can focus on data modeling and dev planning once design moves past the conceptual phase. Plus it’s fun, and who doesn’t like fun.
Modals are weird. The team originally aligned on a modal approach to news stories, which afforded less load time between pages which allows the user to quickly navigate back to the parent page. Unfortunately, this solution did two things. One, it created a confusing pattern that took the user back to the parent page of the story. Great for the news page, bad for the home and (maybe) the search index pages. This solution also created additional work for the dev team, as stand alone article pages needed to be build for instances where a user is directly linked to the article. Is there a great solution in the end? Perhaps, but only with more dev time to work it out.