Mysterious Universe

Mysterious Universe is one of the most popular paranormal podcasts with over 10k subscribers on iTunes. I was tasked with redesigning their dated, mobile-unfriendly site to make it responsive, accompanied by a new, modern visual language. After the redesign, I began work on designing their members-only app called MU Vault.

December 2016 - December 2017
Branding 
Illustration, Logo Design, Copy Writing, Motion Graphics, Sonic Branding 

Product Design 
Web App Logic, UX/UI Design
Website Redesign
I reached out the Ben and Aaron after I heard them mention on one episode that they needed to get the Mysterious Universe (MU) WordPress-based website redesigned to function well on mobile devices. I wrote up a proposal, sent it off, and before I knew it, the project was a go. What followed was a redesign journey that evolved to include the foundations of a web app service for their paying subscribers called MU Vault. 

My role in the redesign of mysteriousuniverse.org was split between project management and design. Lot's of Slack communicating and lots of Adobe Illustrating. Thank goodness I switched to Figma since then. 

Note on live site
Since finishing this project back in late summer 2017, some new ad service code was added to the site that broke the design in a few places so keep that in mind when you visit the site.
Homepage
Not only does MU feature weekly podcasts, but they also post daily articles in a variety of categories. All new podcast posts and article posts appear on the homepage. 

Header
During the design of the homepage, I came up with MU's new header and footer color scheme. A bold gradient flowing from deep-dark purple to a hyperspace red. Additionally, I wanted the header to shorten as the user began to scroll to increase the viewing height of the main content area. It's critical for the user to be able to access all information as easily as possible.

Featured Posts Gallery
The top of the page is where the 'featured posts gallery' is located and it's where all the latest posts appear by default. Originally I wanted to give Ben and Aaron control on what post goes in what spot, but we were unable to fit that custom PHP script into the scope due to budget constraints.

No one likes dealing with ads, so I knew I needed to make their own ads' designs as pleasant to the eye as possible. For the responsive ads, I went with a dark purple gradient, custom icons, and green buttons. 

I also needed to be able to fit in Google Ads gracefully, so for those, I created responsive light-lavender containers with angled caps.

Note on the ads on the live site as of May 2019
A year or so after I'd completed the redesign project, a new ad service outbrain.com was added to the bottom of all post pages. This hurt the UX because the ads are way too huge and filled up the screen with pixelated graphics. I contacted Ben about this, but they have not had the time to deal with it yet. 
The Podcast Player
Originally I wanted the podcast player to be persistent, meaning that it would always stay visible and playing the podcast no matter where the user went on the site. The problem was that after some light user research, I realized that:
1. 
Most people listening to the MU podcast are doing so from an app like iTunes or Spotify.

2. 
The listening behavior of someone popping into the site typically shows them to stay on the same page. I mean, who really listens to a spoken podcast while searching through a site and reading posts? Not many.
So it was decided to keep the player at the top of all podcast post pages and the podcast category page. It was a big enough challenge getting the podcast player and all its UI elements to elegantly transition from desktop to mobile. In fact, that was the most challenging part of the entire project.
MU Plus+ & App
I was able to get a bit more creative when it came to MU's Plus+ and mobile app marketing pages by creating new custom icons and illustrations. Keeping in line with their name, I used a deep dark gradient as a backdrop for ghostly shining illustrative icons. 
Member Dashboard
The member dashboard is where members can access their subscription info, payment info, login info, discount codes, podcast feed links, and every podcast from the last few seasons.
Before & After Video
Below is the before and after comparison video to showcase on a deeper level the UX improvements we were able to make during this project.
MU Vault
After the website redesign project was completed, Ben told me about a service they wanted to have built that would offer their entire back catalog of podcasts to their paying members. Previously, members-only had access to the last few seasons of material. I asked him some core questions about what type of functionality this private web app would need and then brainstormed on top of that to see if anything else could be added to improve the UX. This was the beginning of MU Vault.
Logo Design
After we brainstormed the name for this new app, I had a nice conceptual foundation to begin designing the logo. Vault. A rather dull and dark image. I needed to infuse mystery and magic into it, so I started to play with star imagery. I also wanted to infuse the pre-existing MU logo multi-wheel pictograph.

I came up with a circular vault door infused with one ring of the original MU logo pictogram with a star escaping from within an enclosed circle. This symbolized the past catalog being freed for all members to now enjoy. I designed a custom typeface for the 'VAULT' letter mark and incorporated a shooting star into the 'A' which helped unify the pictograph and letter mark. 
Seasons Page
The seasons page is where a Plus+ member can access the entire back catalog of free shows, Plus+ shows, Extended Plus+ shows, Classics (pre-2009), and Mind Shots. Members can binge stream an entire season for free by hitting the Play button but, in order to download them, they'd have to purchase them hence the green "Buy' button. 

To make what would be a pretty standard list page a bit more interesting I designed the header container to have an angled bottom and the season item number container to have angled sides. I also incorporated the hi-res background images into the page headers to stay stylistically consistent with the main site. 
Season Page
The season page basically shows the list of episodes that a season is comprised of. Each episode item displays critical info regarding the episode like publish date, length, size, tags, etc. Like Spotify, it also shows a 'listened to' status icon in the shape of a circle. Whereas Spotify's is blue, I made Vault's one be white, like the moon. 
Season Highlights
Each season would have several highlights, which would be handpicked by Ben and Aaron based on popularity or preference. A user could tap the highlight's "Listen now" play button, and the persistent player would slide up from the bottom of the screen and begin playing the podcast at the moment that the highlight begins. This feature might have required some custom UI for Ben and Aaron to select the highlight time and length. 
Responsive Persistent Podcast Player
With MU Vault I was able to finally design a persistent audio player. I researched plenty of the top players on the market and took the best from each of them. Below you can see the UI changes as the device width narrows in size from desktop at top to smartphone at the very bottom.
Various UX flows for editing a playlist
There were many UX flows to think through and design. Below shows you a very macro view of all the UX flows related to editing a user's playlist like: 
 ​​​​​​​
•  Reordering a list of playlists
•  Renaming a playlist
•  Deleting an episode from a playlist
•  Deleting a playlist
•  Creating a playlist
•  Adding a podcast to a playlist

Conclusion
Ultimately MU Vault never saw the light of day. Hopefully, that will change in the future because it would add tremendous value to Plus+ members who want easy access to those old seasons and episodes. 

In regards to the original Mysterious Universe website mysteriousuniverse.org, It was a pleasure to work on the redesign because I was also able to get involved with branding for the plus, app, and info pages by creating various vector icons and illustrations. I am always grateful when I get to utilize more than one or two of my skills during a project. It keeps things more interesting.

You may also like

Back to Top