Audiogram

What is Audiogram?

Audiogram is a web application that helps audio content creators share their audio clips as videos so they can get more traction on social media. Existing data shows that video performs a lot higher than text or audio on popular social media platforms such as facebook or twitter. With Audiogram, you can upload any audio clip, make a selection and use the visual editor to create a social media-ready video in just a few minutes.

My role in this project

This is a project I worked on as a full time Product Designer in a small team doing a lot of UX/UI work and working with developers to implement designs. I also helped with the branding and visual identity.

Design Workshops

I organized a handful of design workshops while working with Audiogram. Because this was a small team, I had a chance to include everyone from the organization. This made it easy to learn more about the product idea. We mapped out the main inputs and outputs of this application.

Storyboarding the UX Flow

After each participatory workshop I organized the sketches into a readable storyboard document to make it very clear what each step entails. This document would list details about each step in the app.

After the storyboard was complete, the developers had started scoping the work for the backend.

Wireframing

After finalizing the storyboard, I started working on wireframes. The point here is to get the ideas quickly from paper sketches to a digital document.

The developers had started work on the backend while I was working on the wireframes.

Styleguide

I worked on the foundational Styleguide that informed future collateral. It included custom button states, icons and frequently used app components. Including main web app and marketing collateral such as illustrations and website.

Branding

I created the wordmark that is currently in use. The look had to be simple and approachable.

UI Design

After finalizing the styleguide, I implemented it into the wireframe files.

The latest design also included new learnings from user testing that we conducted using a dev build made with the wireframes.

Production Flow

The screen recording showcases the flow of the app and the interface design. This is a recording of a real app, not a mockup. You can also sign up for the app from this link.