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
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
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.
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.
Learn and Understand 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
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.
