☰
×

Podcast App

Overview

The Client Meagan McCall, a wine and coffee connoisseur, recently started a new podcast and video series centered around her experiences and knowledge tasting coffee and wine, The Cup & The Cork.

The Challenge Meagan wanted an appealing way to share her videos and podcasts with her A21+ female-skewed demographic. She needed a user-friendly app design that housed both podcasts and videos broken out by beverage, coffee vs wine, to help her users find the right content for their interests. She wanted to build her community with an app that was more tailored to her target demo, rather than only having her podcasts and videos available on standard podcast, video, and social platforms.

The Process As a starting point, I presented different personas for the average user that would be interested in expanding their knowledge about wine and coffee through an online or app platform. Once we agreed on Meagan's target demo, I conducted market research on competitors apps for both videos and podcasts to further investigate the current web and app offerings. From there, I took inspiration from particular features and generated the user flow chart and multiple wireframe options. Once collected and drawn, I presented the flow chart and different wireframes to my client and we agreed upon which components she'd like to see in her app design. I then utilized Adobe XD, Adobe Illustrator, Adobe Premiere Pro, Adobe Photoshop, Google Fonts, and Pantone Color Systems to generate mock ups of the different pages within the app. After the design was created in Adobe XD, I created a HTML, CSS & Javascript prototype of the app.

Outcome I collaborated with Meagan to design an aesthetically appealing app with a strong brand identity that fit her podcast and video needs. From the pantone color associations to coffee and wine icons, we built an app that would help bring tasting and beverage education to life from an online platform. I categorized her content in 4 easily digestible buckets: wine videos, wine podcasts, coffee videos, and coffee podcasts. I also generated a profile quiz to discover the preferences of her users to inform further content. I designed a player within the app that would allow the listener to easily navigate within each piece of content, switch videos to full screen mode, share across social platforms, cast to other nearby devices, and save to their favorites list.

Role UI/UX Designer

Programs Used

Adobe XD

Adobe XD

Photoshop

Photoshop

HTML5

HTML5

CSS3

CSS3

Javascript

Javascript

Persona
Flow Chart
Wireframes
Hi-FI WireFrames
Hi-Fi Prototype
Final Product
Design Prototype HTML Prototype

Home Screen
When a new or repeat user opens the app, the home screen will display a featured podcast and featured video at the top of the screen as suggestions, followed by categorical breakdowns for coffee (podcast vs video) and wine (podcast vs video). Below the category options, a user will see the most recently uploaded podcasts and videos to scroll through and select from. If they had already started a podcast or video, the play bar will remain at the bottom of the screen so that they can pick up where they last left off listening.

Favorites
The favorites page can be accessed by selecting the heart at the bottom center of the screen, and it houses a user's collection of both videos and podcasts that they have hearted to save for later, either to listen to when they have more time or to re-visit at a later date when they have the product (coffee or wine) available to taste along with The Cup & The Cork audio and visuals.

The page also includes a filter functionality in the upper right, where they can filter by coffee, wine, podcasts, or videos.

When a user selects the more info ellipsis next to a podcast or video, they can view the detailed description, favorite button, and share options.

Podcast Player
In the podcast player, a user has the option to do any of the following:

  • Cast to another device
  • Save to favorites
  • Play, pause, and skip forward and backward in 0:15 second intervals
  • Share to Message, Instagram, Instagram Stories, Facebook Messenger, Twitter, Facebook, and Email, or directly copy the link
  • View full podcast description

Video Player
In the video player, a user has the option to do any of the following:

  • Cast to another device
  • Watch the video in full screen mode
  • Save to favorites
  • Play, pause, and skip forward and backward in 0:15 second intervals
  • Share to Message, Instagram, Instagram Stories, Facebook Messenger, Twitter, Facebook, and Email, or directly copy the link
  • View full video description

Select Video
From the home page, you can select either Coffee Podcast Videos or Wine Podcast Videos. The select video pages house all of the live videos, which are displayed with the thumbnail image, title, brief description, wine glass or coffee cup logo, and more info drop down. The more info section includes listen, share, favorite, and the full podcast video description.

Profile
To further personalize the app, the user follows a flexible set of steps to capture the amount of data they feel comfortable sharing. To get started, the user has the option to either type in their name, email and password in the provided fields, or select the Sign In With Facebook option to automatically pull in their Facebook profile information. Following the sign in page, there is a profile quiz to discover the preferences of her users to inform further content.