Tau Tau

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.

Audiogram

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.

Audiogram

Audiogram

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.

Audiogram

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.

Audiogram Audiogram Audiogram Audiogram Audiogram

Styleguide

After each participatory workshop, I organized the sketches into a readable storyboard document. To make it very clear I added comments to each screen. This document was helpful to get everyone on the same page.

The styleguide also informed the marketing collateral.

Audiogram Audiogram

Branding

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

Audiogram

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.

Audiogram Audiogram Audiogram Audiogram Audiogram Audiogram Audiogram Audiogram

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.

Did you like this project? Here are some similar projects to Audiogram relating to UX.