Ö÷²¥´óÐã

Vizii is a new tool aimed at kids and teens, allowing them to 'visualise' music and the spoken word and available on the platform (you can read more about mixital in ). Technologist Rosie Campbell shares insights into how the idea came about, the process behind getting backing for its development and the journey to launch.

“Don’t just pink it and shrink it”

I glanced at my teammates. We grinned. They’d done their homework. It was May 2014 at the Creative Studio briefing, where we were listening to the ​team set the challenge of creating a product to get teenagers, especially girls, interested in technology (as part of the Ö÷²¥´óÐã’s ​ campaign). All too often, as we were well aware, teenage girls are patronised with the ‘pink it and shrink it’ strategy of product design.

Instead, we heard how teenage girls are a digitally literate, sophisticated group who are attracted to gender-neutral, mature products with ‘edge’, that let them express themselves. Taking this approach would help us generate techy ideas that would appeal to lots of teenagers including, crucially, teenage girls.

As a team of five technical women who are outnumbered in our day jobs, we couldn’t help but get a little bit excited about the prospect of giving more girls the opportunity to fall in love with technology the way we had.

We had just eight hours to come up with a killer idea and pitch it, in the hope of getting invited back to a two day Build Studio to make our prototype. We had no time to lose. As a team, we discussed how we got into tech, what we enjoyed doing as teenagers and what, looking back, we wish we’d had to help us unlock our digital creativity. 

A common theme was the gratification of making a change and seeing it instantly reflected, whether editing HTML and refreshing a webpage, or tweaking parameters in image editing software and seeing the transformation. We wanted to capture that feeling of gradually understanding that you are in control, that you can make machines do whatever you want - if only you can learn to speak their language.

We also discussed the importance of self-expression, and how defining music can be for teenagers. That’s when we came up with the idea of a music visualisation tool, where customised graphics could be ‘programmed’ to react to audio input, creating a personalised music video which you could share. This idea would eventually become Vizii.

After an explosion of ideas and kick-ass ways to make this awesome, we then knuckled-down to refine our core idea into something we could get across in a two minute pitch. Before we knew it, the moment of truth arrived. The 40 or so teams assembled in nervous excitement to hear what each other had come up with. A few days later, we received an invitation to the Build Studio to build a prototype of our idea.

The prototype

Our team consisted of a designer (Jasmine, Ö÷²¥´óÐã R&D), two developers (Julia and Karen, Ö÷²¥´óÐã Digital) and two technologists (Me and Charlotte, Ö÷²¥´óÐã R&D). This was great when it came to the build as it meant we had pretty much all the skills we needed covered! At the Build Studio, the pressure was on - there were now only ten teams left in the running, each working hard towards a ten minute pitch the following afternoon, including (if possible) a working demo.

Jasmine set about mocking up the UI (User Interface) and the rest of us got to work on the code. We had a number of key principles for the tool:

• Easy to make something that looks good

Users should be able to create something stylish very quickly. This means keeping the UI simple and intuitive.

• Hard to make something that looks unintentionally bad 

There should be enough restrictions in place so that it is difficult to make something garish or amateur-looking. This could mean, for example, restricting the available colour palettes, fonts, or special effects.

• Modular

It should be possible to build up complexity with different preset graphics modules (equaliser bars, bitmap images, filters, lyrics, particle effects) which can each be configured or tweaked to give endless possibilities.

• Tapered

Users should be able to get started very quickly, but also dive deeper as they become more accomplished. We even toyed with the idea of encouraging advanced users to start writing their own graphics modules.

• Shareable

Users should be able to quickly and easily share their creations with their friends.

We used the Web Audio API to extract the frequency data for the audio, and then used HTML5 Canvas to render the graphics based on a variety of audio features. We also had some fun taking photos for our ‘photo’ graphics module...

Jasmine’s ​ helped demonstrate the user journey of discovery, creation, and sharing that we envisaged...

And our ​illustrated the modular nature of the tool, as well as how to make graphic elements react to web audio...

It was a fun but intense couple of days, a roller coaster of emotions from ‘we’ll never be finished in time!’ to ‘we just might pull this off...’ And sure enough, pitching time rolled around... and somehow we were ready!

Days passed as we anxiously waited for the judges decision. Eventually, we found out that we were one of two teams selected to progress forward to funding and commissioning.

The product

We were put in touch with Jon Howard, a key force behind the Make it Digital campaign, who teamed us up with project managers passionate about Vizii. Jon had already developed the  with (a tool which lets kids make and showcase t​h​e​i​r​ o​w​n​​ g​a​m​e​s​)​ and this framework seemed like a great starting point for Vizii. It gave us a consistent UI and workflow, as well as an existing set of features, but of course it also meant some compromises to fit in with the code base.

In the early build stages we held workshops with the developers ()​, contacts in radio and music, and web audio coders (at M​ozfest)​, in order to refine our priorities and user stories for Vizii. We also worked with a number of illustrators to create suitably weird and wonderful assets to illustrate the music.

Working on a collaborative project with other teams at the Ö÷²¥´óÐã and with external partners was a new experience for us, but it was great to be immersed in the whole process of bringing a Ö÷²¥´óÐã product to our audience. A particular highlight was getting an insight into Aardman’s software engineering process, where we also met Wallace and Gromit!

The Launch

After many sprints, reviews and iterations, we eventually had an MVP () of Vizii which we could start integrating with the other tools being created as part of the Make it Digital campaign (which all live on )​ and applying appropriate styles to fit with our finalised themes & partners. These were:

Ö÷²¥´óÐã Introducing: Introducing Vizii

​ features the latest undiscovered talent and now you can use Introducing Vizii to create music and lyrics videos to some of the best tracks.

Ten Pieces: Superconductor

​ aims to inspire creative responses to classical music. With Superconductor Vizii, you can explore, express, and share your own interpretation visually with sweeping elements from nature and classical music culture.

Ö÷²¥´óÐã Arts & Culture: Wordcraft

With ,​ Wordcraft Vizii lets you create visuals that respond to rhythm and verse with beautiful typography bringing spoken word and beat poetry to life.

This is just the first phase of Vizii - there were many features that we just couldn’t fit in this time around and we plan to keep improving it. But in the meantime, head over to  â€‹and get creative - we hope you’ll have fun making graphics dance to music!