Jump to content
Jump to navigation
Things tagged ‘UX’
May 14th, 2009
Posted by Ian
Visit Website
The Brief
The MLA Handbook is the fourth project we have completed with Semantico, a specialist technical company based in Brighton. They were handling the overall design and build, and commissioned us to supply visual design for the site.
The printed book weighs in at nearly 400 pages of extremely detailed and exhaustively cross-referenced materials – migrating the product on to the web presented a clear opportunity to enhance functionality, increase the user-base and create a vital service.
MLA had a clear vision of who their users were and what they would want to do on the site, so we were not asked to carry out any discovery work.
Instead, we were given a set of wireframes which detailed all the page elements we needed to include in the screen designs. The designs needed to reflect their core values: authoritative, definitive, practical and detailed.
72 dots were a pleasure to work with. They produced beautifully crafted designs, through their careful attention to detail, through remembering all aspects of the user experience and through their ability to adapt to an evolving brief.
Andrew Grimes, Project Manager, Semantico
Design process
Working closely with Colin Caveney, Semantico’s project manager, we devised a design-requirements capture form to help us steer the design process. Naturally, we researched competitor sites to help position them in the marketplace as well. We drew up initial designs based on this research.
After receiving further feedback, we prepared a design workshop for the client in downtown New York. During the workshop, we presented a second iteration of designs and were able to work up design variations in situ for the MLA team to see. As it turned out, we’d pitched the designs very closely to what the client wanted – the design-requirements capture process had been instrumental here – so we came away from that meeting with just a small set of changes. The meeting wasn’t just about presenting the designs and meeting the client, it helped us to understand what was really important to MLA and gave us an insight into their expectations.
We love working with clients such as MLA – their whole business is about attention to detail and we share those values. It’s really refreshing to discuss the finer points of layout and typography with a knowledgeable and concerned client – it makes our job that much easier.
Production process
Once the designs were signed off, standards-compliant XHTML templates and CSS files were created and then tested in IE6, 7, Firefox 2 & 3, Safari, Google Chrome and Opera.
We also added in additional markup to improve accessibility – adding in access-key shortcuts, skip navigation links and short cuts to common functions such as search.
Following testing, the templates were handed to Semantico to integrate into their publishing system.
The site is now live, explaining the benefits of the Handbook to prospective purchasers and giving those who own it a new, searchable digital version of the book.
May 14th, 2009
Posted by Ian
Hors d’oeuvres
72 dots were at the centre of Jamie Oliver’s campaign to improve the nation’s school dinners.
In 2005, the TV series ‘Jamie’s School Dinners’ was commissioned by Channel 4 and we were asked to design the supporting website. The programmes, which followed Jamie as he started his campaign in the London Borough of Greenwich sparked a massive debate.
The brief was to create a site to enable, educate and inspire adults, parents and teachers to improve the standard of school dinners in the UK. The website provides a wealth of information which allows viewers to assess the standard of food being served in their school and then learn what steps to follow in order to action change.
Main course
The team members – Caroline Sutton (Producer), Julia Bard (Editor), Elizabeth Martyn (Writer) and 72 dots (Design) worked together to define the strategy, information architecture and features of the site. To increase the campaign’s penetration, we decided to create downloadable assets that could be used away from the computer. We created assets that viewers could print out and stick on their fridge doors. For example, the Do Something! action pack was aimed at parents and guardians who may wish to start campaigning at their own children’s schools or just improve their child’s diet at home.
From a design perspective, the challenge was to not only to convey a lot of information but do so in easily-digestabe chunks. We were aware that the primary audience were busy people and that the proportion of our audience who would benefit most from the information may also have literacy issues. In response to this we sought to add lots of level headings and provide clear navigational paths to content. For example, we used numbering in the Do Something section to signpost the order of events.
We also wanted to offer some cool stuff to our secondary audience, the kidz! We recognised that they probably wouldn’t want to read all the healthy stuff so we sought to tell the story in a completely different way. Food Most Fowl (designed in conjunction with motion graphic partner Keith Robinson) is a cartoon horror spoof on junk food and has been praised by users of the site and several schools have shown it in their school assemblies.
The dessert
The success of the website and the campaign was phenomenal to say the least. The forum on the site was one of the first places viewers visited to discuss their thoughts on the issue, making it one of Channel 4’s busiest ever.
Jamie has also held two webchats on the site after the broadcast of his shows. The first one was so popular, he agreed to do another the week after, even though he was on a ski-ing trip. He also gave an exclusive interview for the site, alongside his dinner lady sidekick Nora Sands.
In March 2005, not long after the series began, the Government announced a £280 million investment of cash to improve school meals.
May 14th, 2009
Posted by Ian
Some History
Reggae unlimited is the place to find and buy rare vinyl imported from Jamaica. It is owned and run by one of the UK’s best known and respected men in reggae music &ndash Gladdy Wax aka Mr Vinyl Fingers. He has over thirty years in the industry as a recording artist, producer and is also the owner of the infamous Gladdy Wax Sound System – a cornerstone of the Notting Hill Carnival every year.
The proof’s in the pudding – we’re selling music throughout the world and our customers keep coming back for more. They worked really hard to make it all happen.
Gladdy Wax, Owner, Reggae Unlimited
72 dots have been working with Gladdy and crew since 2000, having built a previous website for his destination record shop Wax Unlimited which was based in Stoke Newington, London.
Building a community
The website is not just about selling music, it’s also about building a reggae community and a place where you can find out more about the music and people involved in making it. The site features regularly updated news, events and in-depth features. There’s a healthy bunch of newsletter subscribers and the shop sells right round the world. The reggae community is a truly a global niché – the shop regularly ships to Japan, Scandinavia, Italy, New Zealand, Brazil and France.
Design branding
In 2006, we digitised the music catalogue to enable us to launch the e-commerce site – about 5,000 items. Working with Gladdy, we decided upon a new name for the site which would build upon the already established reputation and also make it clearer what the website was all about – Reggae Unlimited does what it says on the tin!
When designing the new site, we wanted to differentiate the site from the competition and give the site a strong non-derivative look and feel. We wanted to convey the vivacity and dynamism of the music culture, but strayed away from the ubiquitous colours of Rastafarianism – red, gold and green. As much as we admire the highly crafted found-object styling by Intro for Blood and Fire records, we wanted to give the site a more clean and professional look – it’s also a look that’s difficult to translate into an on-going online environment as it’s so design-intensive.
Site development
We don’t belive in re-inventing the wheel, so we built the site using Cubecart, a robust standards-compliant e-commerce application which is reasonably easy to extend and customise.
We extended the functionality of the software to allow us to add features, news items and crucially for a music shop, a simple mechanism to play sound clips. We also hooked up videos pulled in from Youtube to add further richness to the site. Similar mash-ups are in development with Flickr where we’ll allow the reggae community to be included at a deeper level.
Working on Reggae Unlimited and witnessing its popularity grow over the years has been a joy – things can only get better
May 14th, 2009
Posted by Ian
The brief
We were approached by The Royal Botanical Gardens at Kew to design a website to accompany the largest outdoor exhibition of Henry Moore sculptures staged in London. The aims of the website were to: reflect the beauty of the exhibition to bring people to Kew; to enable visitors who were unable to attend the website to be involved; to facilitate visitors to Kew to share their opinions and photographs of the work; to expand the awareness of Henry Moore’s techniques and understanding.
72 dots have created a fantastic design for Kew´s Henry Moore website. It manages to both communicate the beauty of the exhibition and and at the same time provide lots of content for our audiences. It is a joy to use.
Mike Saunders, Director of Digital Media, Royal Botanic Gardens, Kew
The lifecycle of the website was also central to the brief. The site could only go live once the sculptures had arrived (their installation is recorded on the website) and the Kew photographers had chance to capture the source material which would show the work to best effect.
Another stage in the website’s lifecycle was awaiting the user-generated content. Photo competitions (fed in from Flickr) were run and visitors were encouraged to submit their comments about the work to the website. To date, there have been over 1,500 submissions!
Design approach
First and foremost, the design had to be maximise the impact of the sculptures. We knew we were going to get some great images – amazing work in a spectacular setting taken by Kew’s photographers – it couldn’t fail. However, as we knew were going to attract a very broad range of people to the site, we could not compromise on simplicity or ease of use. We chose to apply a ‘T-shape’ navigation to avoid use of drop downs and ensure all the content was ‘out there’ for the sake of clarity. To encourage movement between sections, we use promotional boxes to highlight closely related content. We made use of slideshow technology to allow us to show a lot of imagery and quotes without having to create very long pages. With the addition of the user-generated content, the website contains an ever-growing wealth of interesting thoughts, ideas and images about the work of Henry Moore which constantly surprise.
Webby award
In April 2008, the Webby Awards, the leading international honor for the Web, recognised Moore at Kew as an Official Honoree, a distinction that recognises work exhibiting remarkable achievement. The website has been selected as an Official Honoree for the Art category.
You can read more about the award in the blog .
April 3rd, 2009
Posted by Chris
How do academic writers refer to posts in an online forum? We had no idea (and admittedly, hadn’t given it any thought) until late last year when we started designing the Modern Languages Association’s Handbook for Writers of Research Papers.
The MLA Handbook is the gold-standard reference for academic researchers in the US, but it lacked an online version. For the Seventh edition, our partners Semantico were commissioned to build one, and we designed the interface. The site has just gone live.
The book is a surprisingly interesting read, covering not just citation rules but style guidance, case studies and research technique. Strunk and White fans should check it out. The rest of you may be interested to read our short case study (forgive style errors).
