As part of our ongoing work with Maxxium UK, we have been working with their wonderful Mixxit team to redesign and develop a new website.
Mixxit is the brainchild of celebrity mixologist Wayne Collins. Along with his colleagues Andy Gemmell and Patsy Christie they set-up Mixxit initially as a training and education programme, with the aim of inspiring bartenders to make quality mixed drinks and cocktails. But they are so passionate that every drink can be perfectly made whether you are in the bar and or at home with friends, they wanted to spread their knowledge.
Mixxit is unique in that every drink can be perfectly made in 5 easy steps. So how could we give people access to over 300 delicious cocktail recipes as well as offering guidance from three of the most prominent drinks experts in industry?
Welcome to the Interactive Cocktail Mixer; you can search by spirit, occasion, glass, mixer or even colour in your quest to find the perfect drink. The cocktail mixer is built in Flash but utilises the site’s search functionality to find the right cocktail. Happy mixxing!
Open Learn exists to provide free access to Open University learning materials. It is effectively an interesting, useful and “gentle” introduction to the world of Open University.
This periodic table content was developed to coincide with the International Year Of Chemistry. As with all Open Learn content the brief was to be interesting and informative and not to assume too much prior knowledge on the part of the target user.
Rather than develop a single interactive environment our approach was to break the learning objectives down into a series of single topic applications. These include an introductory video piece about the history and importance of the periodic table, “elements that changed the course of history”, “elements of the world”, and “body chemistry”.
To the extent that it was possible we wanted to recreate the immersive experience of the best science shows, where learning is achieved through interaction with single-topic experiments and displays.
We used rich imagery and illustrations to bring the periodic table to life and capture the imagination of the user. The navigation and hierarchy were both kept very simple and intuitive to allow easy access to the different applications. This simple approach allows the user to lightly browse topics or, if they prefer, delve deeper into the hard facts and data of the periodic table.
The following technologies were used to develop the apps…
HTML5 Video – By using the HTML5 <video> tag we made sure that the multimedia content in the application would be 100% compatible with the iPad and other mobile devices.
CSS3 – CSS3 was used to create interactive elements on the pages like the buttons – allowing us to reduce the number of assets (images) on the page. It was also used to create new animations and transitions supported on modern browsers
jQuery – jQuery was used through the site to allow users to interact with the data on the pages, and provide support for older browsers that don’t support CSS3 animations. Plugins such as jQueryUI and jQuery Reflections were used to add these effects. jQuery Scrollpane was used to support iPad style page scrolling.
It was a joy to work with the OU team on this project. The teaching staff should definitely write a book on this stuff if they haven’t already. Most of the really interesting content and periodic table facts that “make” these apps came from them.
When our pals at The Leith Agency decided to create their own Leith beer brand we jumped at the chance to wade in and lend our support. The result of months of late nights and extra hours is the Maid of Leith – a beer brand based around the soon-to-be famous daughter of Leith. She’s a feisty little minx that stands for everything known and loved about Leith – she’s tough, she’s irresistible and she’s got mare charm than you can shake a Water of Leith fish at.
Designed by Charlie and built by Paul, we created a website that concentrates on the beautiful label design – a large bottle that you scroll down to view, caressing every inch of the Maid in all her glory. Using some nice CSS styling touches along the way to bring her to life. We also set up a Twitter and Facebook pages for the Maid’s fans.
So, next time you’re out and about in the Leith locals grab yourself a bottle of our delicious ‘Maid in Leith’ brew and get yourself acquainted to the Maid’s treasure chest for yourself. You’ll be seeing it popping up in numerous reputable drinking establishments including The King’s Wark, The Shore, Fishers,Sofi’s, Beets and Valvona & Crolla.
This digital lark can be deceptively simple. For instance…
The new IRN-BRU ad is based on those olde seaside cut-out boards. Holiday makers would stick their heads through the cut out holes and have a (sometimes saucy) souvenir snap taken.
In the ad, once the live action protagonists put their heads through the holes, they become embroiled in an animated battle for possession of a can of IRN-BRU.
It’s a simple idea through which IRN-BRU can hopefully claim more than its fair share of summery goodwill.
And the idea for digital amplification of the campaign is equally simple.
You, yes you and a pal, can stick your own faces in the cut-out holes and star in your own version of the ad.
“Simple but not entirely original” I hear you cry.
And, yes, it does sound a bit like the kind of thing that Evian et al have done before.
But we took things a bit further than crudely pasting a still image into a moving picture film.
“Star In The Ad” isn’t just about being in the ad, it’s about performing in the ad.
Only we do the performing for you.
You, or you and friend/partner/lover, upload your photos and our application does the rest in terms of making you “act” in the film.
And here’s the science bit. (Art and science bit actually).
More to the point, here’s why this particular digital lark is deceptively simple.
How do you add a range of credible expressions to a still facial image and smoothly animate between them?
First up we tried to replicate the effect of the “liquify” filter in Photoshop. This filter effectively turns an image into liquid paint and allows you to fluidly manipulate it.
In Flash we do this with a DisplacementMapFilter. This takes the colour of one image and uses it to displace the pixels in another image.
Allow us to demonstrate with the help of our handsome model Charlie.
Charlie volunteered to have his face mangled (we mean displaced) and, given that he was already sporting a Movember ‘tache and a beanie hat, we figured we couldn’t make him look much worse…
On the face of it (geddit?) DisplacementMapFilters looked like a promising approach. We could raise an eyebrow or create a passable grin. But there were some problems challenges.
Setting up the colour maps was incredibly time consuming, not to mention very easy to mess up. And the maps were monstrously difficult to tweak.
BitmapFill is a relatively recent addition to Flash and it’s the basis for most of the 3D stuff you see in Flash at the moment – Papervision uses it heavily for instance.
Instead of attempting to directly manipulate an uploaded image, the new approach involved the creation of a 3D model (or to be more precise a “flat” 3D – i.e. 2D – mesh) and the use of Flash rendering to map the uploaded facial image (now treated as a texture) to said model.
We created a plain, expressionless mesh onto which the original uploaded face images would be mapped. And we then created a series of distorted meshes corresponding to the variety of expressions required for each character to “act” in the ad.
Once the original face image had been mapped to the expressionless mesh we used good old Flash “tweening” to animate the image from there to the alternative mesh expressions, rendering the face at each frame en route.
At first we tried a simplistic approach to determining the mesh points, using ASCII (plain text) data to track the displacement of each vertex within the mesh. Unfortunately this didn’t give us the requisite degree of accuracy.
So we moved to the full 3D model approach (2D plane saved as a 3D model) and used the COLLADA 1.4 format to export from Blender (3D modelling tool) and import into Flash.
(Aside : we originally used C4D for the mesh manipulation, it being our 3D application of choice, but found that the COLLADA extension didn’t behave correctly in Flash and so we moved onto Blender, having tried and tested its COLLADA support on other Papervision projects.)
Whilst we created the first version of all the expressions in Blender, we actually built our own helper tool to make tweaking and fine-tuning quicker and easier. In fact for quicker and easier read amend in real time. Within the helper tool you could tweak an expression, press a button, assess the change and , if happy, save the updated mesh out to the main Flash application.
Grab from the homemade helper app.
The helper tool proved to be invaluable in terms of allowing us to create rapid iterations of the various expressions as we moved through the rigorous quality control process leading up to launch.
Which brings us onto the issue of eyes (the windows to the soul and the source of a great deal of soul searching and heartache for this project).
No amount of tweaking of meshes or uploaded images would give us realistic looking eye movements, and so we ended up having to cut holes in the mesh and place separate, animated eyes behind it (as hinted at in the helper tool image above).
That’s the somewhat geeky story of the back end of this campaign.
But the back end could only work its magic if we got the front end user experience right.
Given that all expressions would be the result of mapping between various meshes, and that all said meshes are based on an “anchor” expressionless mesh onto which the original face images are mapped, the quality of the end result is hugely dependent on the “quality” of the uploaded images. Basically, the closer the uploaded face images are to a full frontal, expressionless image the better.
So designing the front end user experience wasn’t just about reducing friction to maximise participation and minimise mid-process drop-out rates, it was about “gently” encouraging users to upload the right kind of images, be that via webcam, from file, or from Facebook.
At the time of writing it’s a little too early to say definitively how well this is all working, but early signs are encouraging. Watch this space.
(Clever coding and design stuff done by Fraser McCormick, David Hartmann and Charlie Bell.)
Blonde is delighted to announce the launch of our latest creation – a great new website for Mint Hotel. We earned the opportunity to work with Mint Hotel (formally City Inns) across their extended digital strategy after a competitive pitch at the beginning of the year and have been beavering away creating the best possible boutique hotel website possible. Phase 1 went live yesterday with more nice functionality and content to follow soon. We’re really proud of the site – check it out at www.minthotel.com
The new brand is borne out of conversations with the firm’s clients, intermediaries and staff to find the values that define the brand.
Philip Rodney, chairman of Burness LLP, said: “We have listened carefully to our clients and intermediaries in positioning our business as we continue through challenging economic times. We have an ambitious and clear vision of who we are and where we want to be. We just need to turn up the volume. Our new brand identity will be important in helping us do this. Our new brand is much more than a logo; it is the foundation of all our relationships. It is a belief in how we do business and the effectiveness of the work that we produce. Our promise is to cut through the noise and clutter and be committed to achieving what success looks like for our clients.”
The launch day of the website saw 1,998 visits (almost 8 times the normal visits) and the average time on the site was almost double.
Congratulations and thanks go to Burness for being a great client with a strong vision and confidence to embrace a new identity and website.
Harrison Parrott (“HP” to their friends) are one of the world’s leading classical music artist and project management agencies. As we have discovered they are also a highly principled, ultra-professional, appreciative and engagingly eclectic group of people.
The new site is the product of a rigorous development process that included Scenario Planning, persona creation and brand definition.
Scenario Planning is a proprietary tool that uses a combination of stakeholder workshops and spreadsheet number crunching to directly relate user goals to business objectives. This allows us to objectively prioritise functionality and content via a process that is jointly owned by all of the key decision makers.
The planning for this project included primary research amongst various audiences including orchestra promoters, record labels, journalists and musicians. These audiences presented us with a sometimes contradictory set of insights around attitudes to all things social, technology usage, and the role of agency websites in their professional lives.
The process of reconciling these insights has resulted in a site that is finely tuned (no pun intended) to be fit for commercial purpose whilst offering a clean, efficient and intuitive user experience.
It has also resulted in simple but innovative features such as a notebook facility that allows users to create a personalised list of artists as they browse the site. These lists can be saved, printed or shared by email via a unique link. The notebook is already proving to be a popular feature both within and outwith the agency.
So there you have it. We clearly enjoyed the project and working with the HP team. This is what they had to say about us.
“Impressed by their work for Sadler’s Wells, Edinburgh International Festival and Dilettante Music, we found Blonde to be an energetic and responsive agency. Their proposal for the redevelopment of our website was fresh and creative, but clearly focused on what we were trying to achieve. Asking the right questions to ensure they understood our business and our culture, they delivered – on schedule – a clean and striking site which is easy to use and features innovations that work for us and our users. We’re looking forward to continuing to develop our digital marketing strategy with this highly professional outfit.”
Creative Scotland (if you didn’t already know) will be a new organisation with creative practitioners at its heart: an organisation designed to listen to the needs of professional practitioners and use that intelligence in its role as advocate, champion, investor and broker.
It’s your chance to share your views on the opportunities as well as the obstacles for the creative community, for the individual, for the public and for Creative Scotland itself.
Over the next three months, they’ll be listening to your perspective on Creative Scotland’s four priorities: creative practitioners, accessibility, participation and international activity.
Creative Scotland has commissioned essays from the international creative community as a starting point to stimulate discussion. The first of these, the creative practitioner, was launched yesterday morning by visual artist Hans Abbing.
You can read his thoughts and submit your response on the site.
EdTwinge is a Twitter-based, crowdsourced, realtime Edinburgh Fringe rating application.
It monitors tweets that mention any of the acts at the 2009 Fringe Festival and/or the most commonly used Fringe hashtags. It then matches the content of these tweets against an extensive database of positive and negative words and phrases.
The site publishes two scores for each act at the Fringe. The first is “Noise”. This is simply the number of tweets that have mentioned the act in an Edinburgh/Fringe context. The second, and more important, measure is what we call “Karma”.
A full, geek-friendly explanation of how Karma is calculated can be found on the Edtwinge site. But basically it is a measure of the net positive sentiment about each act, which is based on a robust statistical analysis. This statistical analysis ensures that the Karma score is as reliable as possible. For instance an act mentioned in, say, five tweets, all of which are positive will have a significantly lower karma score than an act mentioned positively in 60 tweets out of 70. Phrases are prioritised over words, so “shit-hot” would be correctly identified as a positive statement for instance.
The top ten tables for the Fringe as a whole, and for each genre of show, are primarily derived from Karma. Noise only comes into play if two shows have the same Karma rating. In this instance the act with the higher noise score would rank above the other.
The site also allows the user to search and view karma and noise scores for any act, and to view in chronological order the verbatim tweets that underpin these.
EdTwinge is also the result of a garage-band style collaboration with some very talented, sparky and creative people.
Mike Coulter – social media exponent at Digital Agency (the original idea was his).
Andrew Burnett – another social media exponent and expert traffic driver.
Jim Wolff – digital misfit (his words not mine) who joined Leith part way through the project.
There is no paying client behind EdTwinge. It’s been a fun and fruitful diversion from the day job for those of us lucky enough to be involved. And what we’ve learned about tag-team style collaboration, baton-passing Twitter account shifts, and fleet-of-foot digital seeding and amplification has been as valuable as the technical, under the bonnet of Twitter stuff.
Early days yet (3 and a half days into the Fringe at the time of writing), but there has already been a significant amount of positive commentary and the site appears to be performing well. A big thank you to our friends at Stripe for securing some really excellent profile for the project.
I’ll post a more in-depth analysis of results and learning in a couple of weeks but average time on site is currently running at over 4 minutes on the back of an average of 5.22 pages viewed per visit according to Google Analytics.
Follow us (EdTwinge) on Twitter for regular updates. And/or embed your own EdTwinge Top 10 widget, like this one that we prepared earlier…
We’ve been working with Edinburgh International Festival over the last few months on a new site ‘Following the Diaspora: Chinese Lives in Scotland’. The site gives an intimate insight into the lives of Chinese people who have chosen to make Scotland their home, exploring memory and homecoming, as well as celebrating the lives of the Chinese Scottish Diaspora.
The website is made of work by the Scottish/Chinese artist, Pamela So. The project has taken Pamela from her home in North Ayrshire, Scotland, to her ancestral home in Shunde, Guangzhou, China, and back to the most northerly shores of Scotland in Caithness and Sutherland. The result is an interactive portrait of several individuals of Chinese descent who share their thoughts and experiences through text and multimedia, giving a sense of what it is like to live within two cultures.
Blonde is delighted to announce the launch of our latest creation – a great new website for 
