Project Overview

Project Name: Heerie
Role: Lead Designer
Date: December 2022 - Present
As the lead designer for Heerie, an app startup available on both the Apple App Store and Google Play Store, I play a pivotal role in crafting a compelling brand identity and ensuring an exceptional user experience. This project showcases my knowledge in branding, design, and UX.

Heerie is continuously being worked on and improved so there are no "final" states but instead there are updates on where we are now.

What you'll find here:
  1. What is Heerie?
  2. Creating the Brand Identity
  3. Designing the App
  4. Current App State
  5. Heerie Informational Website
  6. App Store Graphics

What is Heerie?

The Start
Heerie is the home of Audio Shows. Audio shows, also known as audio dramas or fiction podcasts, are like a combination of audiobooks and tv shows, but in an audio-only format. Imagine being transported into a fully-realized fictional world, complete with a cast of talented voice actors bringing the characters to life and immersive sound design that makes you feel like part of the action.

The Heerie app provides a wide collection of audio shows and is available for free on the App Store and Google Play Store
Why the name?
The name "Heerie" was inspired by a deep affection for the horror audio drama, "The Magnus Archives," which served as the catalyst for the app's creation. "Heerie" cleverly combines the words "Hear" and "Eerie," encapsulating the essence of the project. It symbolizes the platform's dedication to providing a space for similar chilling and immersive audio experiences, where listeners can delight in eerie tales, just as the founders. Beyond the horror genre, "Heerie" offers a diverse selection of audio shows, making it a versatile platform for those who appreciate a wide range of captivating narratives across different genres.

Creating a Brand Identity

The brand "Vibe"
My journey into crafting the brand identity for the Heerie began with exploration into what audio dramas are. During my research I found that audio dramas were most popular in the 1940's when the radio was a main form of entertainment. This led me to draw inspiration from retro design elements reminiscent of those classic radio days. To add a touch of mystery and reference the "eerie" essence of the app's origin, I knew I wanted to incorporate some dark colors into the brand identity.

These two photos both really inspired the Heerie brand identity.
Mood board
The Logo
Ideation
I knew I wanted the logo to convey that Heerie was about sound or entertainment so I took some time to sketch out any ideas that I had.
Drafts in Illustrator
I took my favorite ideas from my sketches and started to see what they would look like once they were in illustrator.
Brand Identity
Initial Brand Identity
Below is the first brand identity I created for Heerie.
This was the brand identity for a few months and used for a Heerie newsletter about audio shows and Heerie's social media pages.
Current Brand Identity
After some time the founder of Heerie and I decided to make the logo a little more simple. Below is the logo I created after that decision and it is the logo that is currently being used.
I am going to jump ahead a little here and show Heerie's current branding. Though this part was not documented in this way until after the initial design and launch of the app.

Designing the App

The Start
Heerie was founded by a software developer and because of this, the app development began right away. The goal was to launch an MVP as soon as possible. So to start only the features and pages most critical to the app were created and implemented.
What the app needed to have:
  1. A place to see all shows
  2. Show details, including a description and all of the episodes
  3. Episode descriptions
  4. A player to listen to the shows
Below is the design created by the founder as he was first developing the app.
Home
Show Details
Episode Details
After my first redesign
Below are the screens from after my first redesign of the app. It was shortly after this point that the app launched on the Apple app store.

I want to call out that my idea for this app design was to not reinvent the wheel. We were working fast so I leveraged the design of some similar well known, used, and tested apps. The main goal was to make sure audio shows were front and center for the user and Heerie's brand was consistent throughout the app.
Home
Home - Scrolled
Show Details
Episode Details
Round Three
Round three of design changes included a more simplified version of the player as well as the addition of an expanded player and search page.
Home
Home - Scrolled
Show Details
Episode details
Expanded Player
Search

Current App State

The app went through a more thorough redesign because of all of the added features and the updated branding document.
At this point some of the pages and features that were added are:
  1. Log in and sign up
  2. Profile management
  3. Heerie premium - Heerie premium is a subscription for content that is only available on Heerie. For this there needed to be a sign up flow as well as an indicator for which shows are premium.
Home
Home - Scrolled
Show Details
Show Details - Premium
Episode details
Expanded Player
Search
Profile - No account
Log in and Sign up
Profile - Logged in - No premium
Premium
Profile - Logged in - Premium Member

Heerie Informational Website

For the App to be approved by the App Store there needed to be a website for Heerie. The website is purely informational. It is meant to give users and explanation of what Heerie is and links to download the app. I came up with a few ideas for the app in Figma.
Drafts
Final Design
Development
I made this design come to life using the website builder Webflow. Want to see the live page? Click here or visit Heerie.com

App Store Graphics

Apple App Store
App Icon
Images
See Heerie in the App Store
Google Play Store
Feature Graphic
Images
See Heerie in the Google Play Store

Important note: Heerie is continuously being worked on and improved