Responsive Web App

Branding, product design & Implementation of Podcasting webapp

US based tech Startup VOKL offers a software solution that enables podcasters to record high quality episodes while also engaging with their audience during a live recording session.
Dinghy re-imagined the user experience of the studio interface, rebranded the product and programmed a complex web app that handles multiple video and audio streams from a wide range of devices.

Collage of Marketing images for podcasting brand

Challenge

Recording a professional podcast is complicated. It involves multiple tools and special hardware including audio post production to publish the recording. Inviting guests and fans requires a podcaster to help with their audio setup.

Solution

Dinghy planned and designed the podcasting studio experience. The web based interface allows users to manage a live video & audio recording, including guest and other content layers while interacting with a live audience.

The software automatically captures everyone's audio and video in high quality, in the browser. Additionally, it enables users to invite guests and fans to join their shows, customize how their screen looks, control audio and video settings, and send messages to their audience.

Roadmap

Dinghy supported the VOKL team in the platform's relaunch process from its early stages all the way to the introduction of the new and improved user experience. It began with initial user experience (UX) research and proceeded to a comprehensive rebranding effort, along with a complete rewrite of the responsive web application.

a timeline showing the stages of the project highlighted with colors

Information Architecture

To ensure that all the important features and contents are easy to find, dinghy organized and described all levels and options in the navigation system. When the the studio was re-designed, the team made sure that all these detailed and time-sensitive capabilities were readily available when needed while of planning and recording a show.

flow chart showing boxes that are connected through arrows to display the softwares navigation layers.

Show production timeline

A timeline of events and tasks that were documented to occur simultaneously for all stakeholders involved in the recording of a podcast. This served as a guide for arranging features and interactions of the recording studio interface, ensuring an efficient experience for hosts, guests and audience.

visualization of a sequence of events during the recording of a podcast show

User Flows

A detailed mapping of all user journeys and available actions was conducted to reveal repeating patterns and conditions that require guiding the attention of the user.

Recording Studio Interface

Main Features

  1. Stage – Record and Stream your show
  2. Layout Settings – select one of our adaptive Layouts
  3. Inputs – Control your own and your guests audio/video
  4. Assets – display preset contents on your stage
  5. Overlays – Throw up some infos on your screen
  6. User Management – invite and talk to your audience and your guests
  7. Guests – Invite and Manage your shows guests
  8. Branding – Match the look of your show to your brand
  9. Outline – interactive show planning
Ipad version of a interactive recording studio interface

Hosts

Use cases for creators

  1. Hosting live shows
  2. Recording high quality audio and video
  3. Live interaction with Fans during live shows
  4. Monetization of content
Woman recording a video with light ring on her smartphone

Audience

Features for Fans

  1. Watch live shows and recorded events
  2. Join the stage during a live show in the app
  3. Send tips to their favorite creators
  4. Subscribe to premium channels and gain access to member only shows and content
three woman watching a live event on a smartphone

Guests

Features for guests

  1. Joining a show in a special guest mode
  2. VIP interaction with the host in a private chat channel
  3. Interactive reaction and chat with fans during the show

Design System

The overall look and feel of the interface was inspired by the dark tones and lights of switches and dials of a recording studio. The UI components shared visual traits with physical controls for familiarity and recognition. The design system is flexible and can be expanded easily.

Collage of interface elements used to build the podcasting app

Design Transformation

The Interface was transformed from a video player like product into a professional yet playful studio with a complex set of additional features.

Podcasting Studio Webapp

Within a single web-based application, a VOKL user can plan, record, and broadcast an engaging podcast episode for their audience. Guests and Fans can join the show while the user keeps full control over video and audio of everyone.

Web based Interface to record video streams and audio conversations

Questions or anything else we can help with?