Squad Harmonix

Product Design Development Graphic Design Branding

Designed and built a website for a kids choir academy that increased awareness, auditions, and sign ups

Role

I was hired by LA-based kids choir and training academy Squad Harmonix to design/build their website and craft their brand to grow awareness and increase auditions/sign ups.

Challenge

Squad Harmonix was growing but in order to compete against other academies, they were in need of a brand and online presense that was unique, bold, and related well with not only kids, but their parents as well. LA was a difficult market, so we needed an onboarding and auditioning process that was so easy and intuitive, people wouldn't even think twice about signing up.

Process

I definied goals, KPI's, and hypothesis that paved way for learning of our users and potential clients. Then I came up with solutions for a clear website and auditioning flow through sketches, wireframes, and collaborative feedback with camp directors and users. After defining high fidelity designs, I built and tested the new website while crafting their new brand and printed works in parallel for launch.

Goals

User: Design and build a clear and engaging site that promotes the brand and draws potential clients into a seamless auditioning and sign up flow.

Business: Grow media consumption, video hits and shares, and auditions for new talent.

KPI's

Auditions: increased
Camp sign ups: increased
Videos watched: increased
Live performance attendance: increased

Timeline

July 2019 - September 2021

"Absolute fantastic guy to have work for you. His imagination has been perfect for our product and delivers in a super timely fashion. I have zero complaints about working with him and can only recommend him to anyone who wants professional, sleek, unique design work done."

Laura Saggers, Director, Squad Harmonix

Web
Brand

Website Design and Development

Skip to Outcome

Discovery

Conversations and Questions

Working closely with the Director, I wanted to understand where the business was at, what their goals are, and brainstorm. After compiling my notes, we met regularly to refine our vision.

Goals

Form Hypothesis

After compiling notes, I put together a clear hypothesis statement:

I believe more auditions and signings will occur by providing clear, educational steps up front through a mobile-first website.

Understand and Learn from Parents

Persona

I wanted to learn more about the users, so I met with business members and clients to ask questions. What I learned was that it wasn't the kids that were the focus for signing up, it was their parents. Using this, I went to work gathering feedback on what their role was and defined a persona:

Demographic

Working parent
Travels frequently
Mobile-first
Medium-high income

Needs

Creative opportunities for their child
Instructional training and focus practice
Peace of mind

Behaviors

Passionate about their child's talents
Local and community influenced
Looks for new opportunties

Come Up with Solutions

Key Aspects

From there, I drew context, content, and user aspects that also align with the business goal of gaining more auditions and brand recognition:

Have "Sign Up" and "Audition" links as prominent as possible
Auditions should provide simple instrcutions, downloadable materials, and a one-click scheduler
Display onboarding process for each camp/level clearly
Draw users in with fun, kid-friendly design elements and language

Ideas

Using these aspects, I came up with ideas on how to promote sign ups and engagement. These would become the building blocks of my design artifacts and information architecture:

"Sign Up" and "Audition" call-to-actions in the navigation and above the fold
Audition process as a one-click to schedule
Breakdown auditioning process into bullets or numbered steps
Emphasize video content
Display a calendar of events

Information architecture is great way to blueprint your site's views, hierarchy, content and navigation.

Sketch, Wireframe, and Iterate

Hand Sketches

With information architecture paving the way for the site's navigation and content, I started sketching some of these pages to life. Simple hand drawings make it much easier to iterate and exercise design ideas with business and users.

Refine Into Wireframes

Using prototyping tools Whimsical and Adobe XD, I refined some of the stronger sketches into wireframes. This helped us visualize the product easier before applying design language, brand, content, and imagery.

View Wireframe

Incorporate Feedback and Iterate

I then distributed the click-through wireframes to business members and users for feedback. After a few rounds of this, a stronger user-centered design took shape.

Version 2 higher fidelity wireframes.

Develop the Site

Approach

With a design settled on, I used framework Bootstrap 4 as a boilerplate to start developing the site. Some key areas I wanted to focus on:

Top-level navigation: always exposed and accessible
Content panels: engaging imagery coupled with informative bullets and content
Hero: Bold title, clear value proposition, and a single call-to-action

Language and Components

I then broke views down into clusters of components that became more complex:

Navigation and footer bars
Hero banner
Content panels
Data tables
Media columns

Putting it All Together

By approaching each views as just groups of components, it made development time much more efficient and consistent. Instead of large, custom CSS classes, everything was broken out and easily accessible on the component level, backed up by the power of helper and utility classes.

The Outcome

After several rounds of beta testing, the site was launched. Squad Harmonix reported that auditions were simple to access and more clients were signing up. Video viewership, performance attendance, and inquiries all increased as the academy and camps grew.

KPI's

Auditions: increased
Camp sign ups: increased
Videos watched: increased
Live performance attendance: increased

View Site

Brand, Graphic, and Print Design

Skip to Outcome

Inspiration

Initial Direction

I invisioned a brand that was fun, spunky, and kid-friendly. After bouncing a few ideas around, the "80's theme" became a constant. Bright, neon colors like green, pink, blue and purple would end up being the building blocks of the brand's design language.

Examples and Insight

I then put together an inspiration board with examples that conveyed this 80's genre and vibe. Anything from movie posters, album covers, and soda labels, to sports and fashion figures, I drew inspiration from. A few key desires were discussed as well:

Resonate with not only kids but their parents as well
Strive for "hip", "modern", and "cool"

Form Hypothesis

I then put together a clear hypothesis statement:

I believe strong brand recognition and engagement will be achieved by designing a unique, modern, and fun design language, logo, and mark.

Define Design Language

Theme

A brand's design should convey its meaning, feeling, and purpose. A good way to accomplish this is to list out thematic elements:

Fun and spunky, not too serious
Modern and unconventional
Bright, heavy contrast

Building Blocks

Using themes to drive design language decisions, I broke it down into building blocks:

Color palette: neon, complimentary
Shapes: Round and flat, asymmetrical
Typography: modern, sans-serif, condensed
Metaphors: impact and overlay

Define Logo and Mark

Ideas

With general branding direction established, I started on the logo. We wanted something that tied in with the actual "Squad Harmonix" and "X" letters. Ideas began to emerge:

Since we perform in various venues, a constant is the microphone; projecting "voice"
A mark that can be universally identified within the music community
Modern and relatable; bold and in-your-face, "loud"
Kids coming together to sing together

Sketches

I took to my grid paper and started drawing elements and objects that represented these ideas, focusing on the logo mark. Laura and I collaborated in this phase and came up with some solid options revolving around the "microphone" and "together" ideas.

Digitize and Refine

We gravitated towards the "X" shape form with the microphone objects and I translated them into Adobe Illustrator for refinement. After a few iterations, I designed the final logo and mark variations.

Final logo and mark variations.

The Outcome

We then brought all the inspiration, themes, and design language elements to life through web, graphic, and print design. From hoodies to flyers, we let the brand grow and shape into something unique and special for our audience.

Next Project