Audiotease

Our collaboration with Audiotease has made this innovative tool a reality, empowering podcasters to capture wider attention and grow their listener base.

What we did

Branding UX/UI Design Website Design Product Management

Year completed

2022

Project

Where Podcasts Meet Virality

Audiotease offers a lifeline for podcasters struggling to stand out in a crowded market. Many start podcasting fueled by passion, aiming to connect with a global audience. Yet, they often find themselves voiceless in the vast sea of content. The pain point? "Boosting my audience seems impossible in the swarm of existing podcasts, especially without the initial buzz." Audiotease is the solution. This web application transforms podcast highlights into engaging videos, helping creators to amplify their reach.

Image of a woman with curly hair and glasses, sitting at a desk with a keyboard and mouse. She is wearing a black leather jacket and is speaking into a professional microphone mounted on a boom arm. The background is dark with neon lights creating a vibrant, modern studio atmosphere, highlighting the woman's focused expression as she engages with her podcast or streaming audience.

Challenge

Unlock the Power of Podcasts

In response to this booming industry, the Audiotease team has set its sights on simplifying the podcasting journey for creators. How? By enabling them to effortlessly enhance their podcast's presence on social media with visually engaging audiograms, Audiotease is paving the way for creators to tap into and capitalize on the podcasting boom. In creating Audiotease's web application, we embraced the challenge as an opportunity to innovate, solve problems, and contribute to the dynamic world of podcasting.

Bar chart titled 'Podcast Listeners Worldwide, 2019-2024' showing the growth in millions of podcast listeners, percentage change, and percentage of internet users. The chart features bars representing the number of podcast listeners in millions for each year from 2019 to 2024. 2019: 274.8 million listeners, 22.6% change, 14.4% of internet users 2020: 332.2 million listeners, 20.9% change, 16.5% of internet users 2021: 383.7 million listeners, 18.7% change, 15.5% of internet users 2022: 424.2 million listeners, 10.6% change, 20.3% of internet users 2023: 464.7 million listeners, 22.0% change, 9.6% of internet users 2024: 504.9 million listeners, 23.5% change, 8.6% of internet users The background is a dark gradient, and the source is cited as eMarketer, July 2021. A note below the title mentions that the data includes internet users of any age who listen to a podcast via digital stream or direct download on any device at least once per month, covering countries such as Argentina, Australia, Brazil, Canada, China, Denmark, Finland, France, Germany, Italy, Japan, Mexico, Norway, South Korea, Spain, Sweden, the UK, and the US.

Flowchart for a content creation process. The flowchart starts with 'Continue' and 'Back' options leading to 'Templates.' From 'Templates,' it branches into 'Choose a template' and 'Create new.' The 'Choose a template' path leads to 'Edit Content,' which further branches into 'Share on social media,' 'Download,' 'Save changes,' 'Transcript,' and 'Templates.' The 'Create new' path leads to 'Advanced Editor,' which branches into 'Save' and 'Edit audio.' The 'Save' option connects back to 'Templates,' which leads to 'Edit template' and 'Delete.' The background is a gradient with a blue and purple tone.

Text styles guide displaying different typographic styles, typefaces, variants, font sizes, and line heights. The styles include: Heading 1: Fellix TRIAL, Semibold, 40px font size, 40px line height Heading 2: Fellix TRIAL, Medium, 32px font size, 40px line height Heading 3: Fellix TRIAL, Medium, 28px font size, 28px line height Heading 4: Fellix TRIAL, Medium, 20px font size, 20px line height Heading 4.1: Fellix TRIAL, Regular, 20px font size, 20px line height Text md: Inter, Normal, 16px font size, 24px line height Text md (underlined): Inter, Normal Underlined, 16px font size, 24px line height The background has a blue gradient tone.

Solutions

Bold Colors, Elegant Fonts

Audiotease combines vibrant colors and elegant typography for a standout brand in podcasting. Purple for success, blue for communication, and pink for playfulness contrast with a minimalist black and white backdrop, embodying the brand's innovation. The use of sleek fonts establishes a clear hierarchy, making the brand's message compelling and easy to navigate. Audiotease's identity is dynamic and inviting, designed to empower podcasters to make their mark.

A color palette showcasing various colors used in the design. The colors are divided into categories: primary, secondary, and additional. The primary colors include white (#FFFFFF), black (#000000), blue (#84D5EE), pink (#D26EEE), and purple (700) (#84D5EE). The additional colors are shades of gray, ranging from gray 900 (#101828) to gray 25 (#FCFCFD), with each shade represented by a specific hex code.

A user interface design system displaying various elements including buttons, switches, a progress circle, form inputs, tabs, and sliders. The buttons have different styles such as primary, secondary, and dark modes. The form inputs show fields for name, email, and color. Toggle switches are shown in both on and off states. The progress circle is at 40%. There are also indicators for transcription uploads and error messages. Sliders for adjusting border colors are included, along with search and episode input fields.

A collage of user interface screens from the Audiotease app showcasing various features and functionalities. The screens include sections for managing podcast episodes, searching for podcasts, uploading audio, creating teaser videos, managing account settings, viewing subscription statistics, and upgrading plans. The design uses a dark theme with shades of blue and purple, featuring cards with information on episodes, user details, and podcast statistics.

Personalize Your Sound with the Brand Kit

We refined Audiotease with a focus on simplicity and user experience, introducing a brand kit feature for easy customization. Users can now personalize their audiograms with logos, fonts, colors, and more. Ideal for teams or creating custom templates, this feature ensures every audiogram showcases the creator’s unique brand identity.

“They really understand how to make a beautiful and effective UI/UX design.”

Julien de Bats

FOUNDER & CEO AT AUDIOTEASE

Choose Your View: Light and Dark Modes

Recognizing the significant impact of interface customization on user experience, we introduced a dark mode feature for several compelling reasons. First, it's more energy-efficient, reducing power consumption. Second, using dark mode can mitigate potential long-term effects linked to prolonged exposure to light screens. Lastly, dark mode offers improved accessibility for individuals with visual impairments, enhancing usability and comfort. This thoughtful addition underscores our commitment to user-centric design, offering a tailored experience that meets diverse needs and preferences.

Two screens from the Audiotease app showcasing podcast management. The left screen displays the 'History Extra Podcast' with a cover image of a classical statue and episode details, including titles and durations. The right screen shows the 'Select audio' interface, allowing users to choose a segment of their episode. It includes start and end point selectors, a waveform visualizer, and options to select the whole segment or reset the selection. Both screens feature a dark theme with blue and purple accents.

A split-screen interface showcasing the 'Select audio' feature of the Audiotease app. The left side of the screen has a dark theme, displaying audio waveform visualizations and playback controls. The right side of the screen has a light theme, featuring the same audio waveform visualizations and playback controls, along with options for selecting the entire clip or resetting the selection. Both sides show detailed time stamps and editing tools to refine the audio selection.

A New Digital Experience

We launched a marketing-boosting website that showcases the product's advantages through vivid screenshots. Our design prioritizes negative space for a clean, breathable layout, enhancing readability with well-placed, reassuring headers for a smooth reading flow. The dynamic, structured layout injects energy into the user experience. Additionally, we've incorporated light and dark mode options, allowing users to switch effortlessly for optimal viewing comfort.