Shandon Design & Type

Case Study
UI/UX Design

Hark App

This project was an open-ended assignment: create an app that you would like to see available and bring it to the prototype stage. It needed to be an original idea and have a nearly finalized design. I, of course, used the opportunity to indulge one of my nerdly tendencies. This time, it was my love for audio drama. What, you ask, is an audio drama? An audio drama is not like an audio book, narrated by one or two people. An audio drama has a script that resembles the screenplay of a movie. It has a full cast of actors playing each part. It has a professionally scored and performed soundtrack. I decided to clarify this by calling them "Movies for your Mind," which I later used as the tagline for the app brand.

The next couple of paragraphs are from my design brief:

The idea: a purchase, playback, and discovery service for professionally produced audio drama. There is a reasonably large repertoire of professionally produced dramas, but no single place to find and play them. Audible and iTunes contain a few dramas, but they’re nearly impossible to find. The curation of this storefront would be very strict; nonoe of those old-time-style radio dramas with cheesy sound effects, no audiobooks with just a little embellishment – none of these would be allowed. The philosophy guiding the quality of drama would be that they resemble a film experience in every way but the video itself – sound effects, full cast, soundtrack, screenplay, etc. The store would be curated, as well as allowing approved vendors to distribute content on their own. The service could explore both subscription and single-purchase models. Purchase could include extras, such as interviews, behind-the-scenes, and more. The app would also include a rating system, a news section, and dedicated info, publishing, and subscription screens for individual publishers.

The audience: Audiobooks and podcasts have become a huge thing in the past couple of years. This would appeal to a similar audience, with the advantage of carrying more interesting content overall than either. Audio drama enthusiasts are also a very present, though rather niche crowd; but a dedicated place to find drama would certainly increase the size of this audience. Children, teens, and young adults would be most likely to engage with audio dramas. This app would get a lot of exposure both from being unique (no competition) and highly desired in the dramaphile crowd.

The design style: Because of the young audience, very sleek and modern. References would be similar apps in the audio listening field, such as Audible, Spotify, and Pandora. Because of the film-like nature of audio drama, components and cues would be borrowed from streaming video service apps as well.

I began with the name and logo. I had originally called the app "Dramaphile," similar to audiophile or other fan terms. But I decided that it was too long, and sounded a bit too immoral at first glance. "Hark!" had been on my list of names, and I went back to it. It was short, it had an exclamation point, which is always fun, and sounded a bit old-fashioned, which related a bit of the nerdiness of this app.

After making a number of logotypes, I settled on the final version, a slightly angled wordmark playing on the emphaticness of the name. It was intended to look a bit shouted, but not overbearing.

hark-logo

After deciding on the logo, I then began to develop the layout of the app. This involved making a flowchart of screens and decision points, as well as sketching and resketching intial app organization. I had a couple of considerations that were on my mind. First was usability. I wanted the layout to be intuitive, and to cut as many steps as possible from navigation. I did this by dividing the app into three main sections, easily navigable from the bottom bar. Second, I wanted to make the app easy to operate, even with just one hand. Needing to use a hand to hold the phone and one to navigate can be frustrating, especially if all the user wants to do are the most basic functions. To aid with this, I attempted to keep as many of the functions and controls within the reach of the right thumb as possible. That is why I went with a navigation bar at the bottom rather than a hamburger menu in the top right. I also made sure that all the player controls were near the bottom of the screen.

With all these things in mind, and armed with a basic framework for the navigation, I began to sketch my designs. I overlaid them with vellum to make notes on function and movement. The process was tedious, but it allowed me to get some bad ideas on paper, where I could easily see how bad they were, before spending the time on prototyping. It also allowed me to develop some unfinished ideas, and perfect some ideas that I had already thought through.

You can see my scribbled notes here. They saved me a lot of time later when I animated spots of the app in AfterEffects.

The next thing to do was to take my sketches into Illustrator. This was by far the most time-consuming task, because I attempted to sketch out the app as fully as I was able to. This meant that I had a lot of work to do.

I drew icons, I searched all over the internet for audio drama albums to add to my collection, and I laid out screen after screen. Some screens required multiple revisions; others were fairly straight-forward.

stash

The first main section of my app was the place to access all purchased audio dramas. At first I called it "Library," but that didn't fit the old-fashioned, slightly medieval feel that I wanted to come through the branding. I finally hit upon "Stash," which had more of an old-world flair to it while still portraying what its function was.

The stash included a lot of different functions. The Now Playing screen was included in here, a list of dramas that could be sorted and categorized, and metadata for each drama. I had to rethink how the tracks were organized and some of the functions of the now playing screen, as audio dramas are listened to differently from regular music. I ended up combining some common audiobook features like a sleep timer and chapter lists with common music features. For organization of tracks, I called them "Scenes" and listed them by drama. I also added the capability for bonus features for each drama, a cast list, and a bookmarking system that allows users to jump to or save a specific book section.

market

The store screen I rebranded "Market." I had previously decided that not only would the store offer individual audiobooks for sale, it would allow for subscription plans. So I had to decide how to organize the market based on each listening scenario. I tried to make the store easily curatable while at the same time allowing the user to easily find or narrow down the type of dramas to purchase.

After creating these two main sections, I created a unified search section that would search both the Stash and the Market to find dramas, actors, or production companies. I also tried to make clear at first glance whether a drama was available in the Stash or Market.

From here I created the onboarding screens. This turned out to be slightly more complicated than I expected because of the many different things that had to be explained or decided before the user could start.

Finally, I created the settings area. This could be accessed from both the Market and Stash screens. It had to contain player and storage settings, subscription information, payment information, and account information. All these things had to be editable as well.

all-the-screens
There ended up being a total of 58 screens in all.

I was finally finished with all the screens. The final things to do were to import the screens into Adobe XD for prototyping and to create animations of some of the interactions in Adobe AfterEffects. You can play with the finished XD protype here if you'd like. The animations of some of the specialized micro-interactions were important, because I couldn't fake them in XD. It was important for usability and style that they turn out as I envisioned. You can see 6 of the microinteractions I created in the video below.

That's the entire project! I also created a presentation booklet highlighting the function of the app. Sadly, I've never had the opportunity to actually present the app for development. I'm holding out hope, however, that one day I'll be able to see this concept in use in real life in some form or other. And I had a lot of fun working on this project.

Top

Like this? It's not lightning in a bottle.

We can do this with you

Sounds like a plan