Promo Video
This is the Viz Hero announcement promo video, showcasing the application's purpose, primary functions, ease of use, and creative potential. Created with Adobe Illustrator + After Effects. Objective: Explain to all music creators why they NEED this application!
Interface Showcase

Assets Screen: Viz Hero allows users to assemble an assortment of assets from a personalized database to easily and effectively create visualizations. This is the user’s Assets Screen, where they store and edit the assets they’ve assembled.

Hero Tip Screen: Viz Hero is designed to guide users through the visualization creation process by lending them design expertise through the interface and with various tips. This screen shows Viz Hero explaining the importance of brand consistency to the user, before he or she selects a vibe.

Vibe Selection Screen: On this screen, the user is encouraged to select a vibe that fits with his/her desired aesthetic. This allows Viz Hero to curate the user's browsing options to only show the assets that will help him/her create a consistent brand.

Categories Screen: After selecting a vibe, the user is taken to the categories screen. Viz Hero's asset bank is separated into categories to prevent the user from being overwhelmed when searching for assets.

Browse Backgrounds Screen: Viz Hero curates its available assets to show only those that match the user’s unique style. This is the Browse Screen for backgrounds, inspired by Google Images, where users can filter, sort, and search for certain types of imagery to add to their Assets Screen.

Asset Edit Screen: After assembling assets, users can navigate back to their Assets Screen and click on one of their assets to access the Asset Edit Screen. Here, users can edit the size, placement, and effects of their assets. Users can select which track stem* to sync their asset with, after which the effects of that asset will automatically react dynamically with the corresponding audio track. 

*track stem: An individuated track of a multi track recording; a drums stem, a bassline stem, a melody stem, and a vocal stem for example.

The Viz Hero Story
A.K.A. Process Work
Creating personas was one of the first steps in the entire process. Jake Hill is an actual YouTube rapper that I used as a sort of case study while designing Viz Hero. He is a prime example of someone who could benefit from the application, as he outsources his visualizations with mediocre results.
Objective: Learn more about life from the perspective of several different music channels. (What are their priorities? What are their frustrations?)
After creating personas, it was time to create a couple journey maps to get a sense of how Jake Hill would feel if he had to make a visualization without any prior design experience.
Objective: Identify key pain points in the current visualization creation process in order to find opportunities for improvement via Viz Hero. 
Key Findings: 

• Jake needs a more affordable resource than After Effects.
• YouTube tutorials are long and often boring. Make the interface intuitive so there’s no need for tutorials.
• Available templates for visualizations don’t allow for much creative expression.
• People get nervous when using images that they aren’t sure are royalty-free.

The second journey map shows Jake Hill’s experience making a visualization without any prior design experience, but with the help of Viz Hero’s guidance and database of assets. He seems a lot happier.

Objective: Improve Jake’s experience by eliminating the pain points identified in the previous journey map. Help Jake maintain his enthusiasm throughout the entire process.

Now that I knew my user base, it was time to figure out how to form a relationship with them through a brand identity. How should it look and feel? Visualization was the core purpose of the planned application, so I assembled a moodboard of visualizations I found on YouTube to inform my later decisions. They all kinda look the same, huh?

Objective: Get a feel for the current visualization market. Learn the craft. (What are the conventions? What components make up the visualizations? How do they work together?)

It needed a name. I boiled down the essence of the application to three words: visualization, helpful, and fast. Then word vomit commenced and “Viz Hero” was born. 

Objective: Create a catchy name that gives an initial sense of the nature of the application, while also expressing a sense of guidance and power.

It had a name, now it needed a logo. I wanted the logo to resemble one of those central bouncing “circle logos” found in 99% of visualizations on YouTube, as that seemed to something iconic about the culture. It also needed to reference sound and heroism. 

Objective: Create a logo and logotype that give an initial sense of the nature of the application, while also expressing a sense of guidance and power.

Now that the brand was flushed out, I needed to figure out how the thing would actually work. Here are the precious wireframes that would eventually lead music creators to salvation. *don’t touch*

Objective: Design an interface that will allow users to gather an assortment of assets from a curated database to easily and effectively create a visualization. (Imagine Build-A-Bear-Workshop but with thousands of bear outfits.)

It was time to bring the wireframes to life with a lofi prototype. This prototype took users through the process of adding an asset from the database into their library.

Objective: Convert the static wireframes into a working prototype that takes users through one core function of the application, assembling assets. See how people respond to Viz Hero’s verbal guidance.

These are the user testing results. I tested 2 individuals, one with design experience and one without, in order to get feedback from a potential user and someone similar to myself with an outside perspective. 

After recieving feedback on the prototype, I started designing branded, high fidelity mockups of the interface. Things were pretty colorful back then, reminds me of the ‘70’s.

Objective: Design an updated interface that incorporates the Viz Hero brand. Take prototype feedback into account and make adjustments accordingly.

Here’s some feedback I received from peers and professors, and by that I mean here’s what my mind could jot down while trying to listen and write at the same time. Some of it’s pretty funny if taken out of context.

And there you have it folks, the final user interface. I made things a little smaller to optimize for larger screens and to make room for other things I added, like filters. I also made a lot of things grey to put more hierarchy on the visualization preview.

Objective: Make adjustments to the interface based on previous feedback. Focus on making this thing look like a real application.

The research was done. The brand was done. The interface was done. It was marketing time. I decided I should make a brief promo video to explain how the app works for those that haven’t been reading an in-depth replay of my process.

Objective: It’s pretty much listed on the piece of paper!

Now I needed to figure out how I was gonna show all that stuff I wanted to show. I drew up some storyboards to make sure everything seemed cohesive and doable.

Objective: Flush out the vision. Make a tangible step-by-step plan for the video to reference when creating the needed assets.

I also wrote myself a script so that I wasn’t performing improv when recording narration in my closet.

Objective: Speak as if you were speaking directly to the target audience, music creators. Appeal to your demographic with careful use of language, tone, etc. Sell the concept. Don’t perform improv in the closet.

Look at all this stuff!

Back to Top