Jump to content
Jump to navigation
Things tagged ‘Design’
May 21st, 2009
Posted by Ian
Turn Browsers Into Customers
60% of online purchases are never completed* and most shop owners don’t even know they have a problem. Even though you can’t physically see your customers, they do leave a trail that can help you understand why they’re leaving.
* Source: MarketingSherpa, Ecommerce Benchmark Survey, January 2007
Ask yourself
- Do we know how many people are abandoning their shopping cart every week?
- Have we set up a purchasing ‘funnel’ so we know where our customers drop out?
- Are we providing too many opportunities for our customers to leave the purchasing process?
- Can we reduce registration details?
May 21st, 2009
Posted by Ian
One Step At A Time
Ambition is good, but that doesn’t mean your site has to do a hundred different things. After listing desired features, think about the minimum the site could do and still be a success.
Ask yourself
- In what ways will this site make a difference to people’s lives?
- Can I focus on one group of users first?
- What is the one thing that the site must do for them?
- Can I roll the site out in several stages?
- Are there any other funding opportunities or revenue streams I can develop to help pay for ongoing development?
May 21st, 2009
Posted by Ian
What Do You Want To Improve?
You want it to look better. It also needs to be more effective. If this is your second or third generation website, you’ll have a good idea of what’s needed, but to help you approach it…
Ask yourself
- What are my concerns or problems with the current site?
- Who is the site aimed at? Can you describe your target users?
- What key action do you want each site visitor to take?
- My audience wants everything, but what do they really need?
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 client
You may recognise Richard Shelton as Emmerdale’s evil Dr Adam Forsythe, but there is a great deal more to this versatile performer:”I’m an actor who sings, a singer who acts…’aint nothing like the thrill of a big-band but I love the challenge of acting too!”
Like many performers, Richard had a website, but it wasn’t doing him justice. It had nothing about his speaking appearances, business workshops or fundraising activities.
The site styled Richard as a old-school jazz crooner, and he wanted the site to show that he’d moved on.
“He didn’t want to leave that entirely behind,” said Ian Hallworth, Creative Director of 72 dots. “But he was feeling pigeonholed, and wanted to present a broader, fresher profile. For us that meant both richer content and an update to his visual brand.”
I love it! It’s fresh and modern and the streaming video allows my showreels to showcase both my acting and singing work.
Richard Shelton, actor and singer
The brief
Some clients are frustratingly unclear about why they want a website, but not Richard:
“Awareness and bookings! Everyone expects immediate access to information and being a performer is no different from any other business — you have to be able to show people what you offer as quickly and professionally as possible. A great site gives you the edge over the rest.”
This was very reassuring to us. “Websites for individuals can become vanity projects,” said Ian. “This can make the design process difficult. With Richard, we knew that he wanted to showcase his talents and reach new clients, and that set us a very clear brief.”
Design approach
The heart of a website is its content, and that’s where we always begin. So we asked Richard to gather photographs, testimonials, and any new information he wanted on the site. From this we created a navigation and site structure which showcased his talents to potential clients.
The branding brief was to update Richard’s look – “make it more modern” – without losing the cool, sophisticated feel. Ian started the brand revision by keeping the basic colours and exploring new typography.
The page layout took a more radical shift, focusing above the fold on on three elements: calls to action (‘Book Richard’), the star’s talents (‘Acting’, ‘Singing’ etc), and the performer’s showreel.
For Ian, the showreel was key: “Performers sell themselves with their showreel, and we wanted it front and centre on the site.” With Richard convinced, 72 dots brought in partners GraphicMotion to re-edit a range of showreels both for the website and for DVD.
It was time to Richard to review the design. “We were prepared for several rounds of design,” said Ian, “but he liked it straight away.”
Words and pictures
While the design was being coded, 72 dots was gathering assets and filling in gaps. “We wrote a fair bit of the content ourselves,” Ian said. “It’s something we’re used to, and we have plenty of experience in that area.”
Richard was very focused on his look, choosing photos carefully and supervising the production of the reel. These photos were being uploaded into the site’s content management system, which would allow Richard to edit and change the site at his convenience.
This flexibility means that Richard can update the site with news of his tours and events day by day. This gives several benefits, as Ian pointed out: “It’s not just about keeping fans updated – keeping a site fresh with content means that people keep visiting it and keep linking to it, which keeps you high on search engine results.”
Going live
With the showreels completed, the site went live. What was Richard’s reaction?
“I love it! It’s fresh and modern and the streaming video allows my showreels to showcase both my acting and singing work.”
And what about the reaction from those all-important potential clients?
“Very positive. I’m returning to the UK after a period away and am hoping for some big bookings!”
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 .
May 14th, 2009
Posted by Ian
Some History
72 dots worked on the Monarchy website from its inception in 2003. We were commissioned to do the initial design and production and have expanded it for the last four years. The fourth and final programme aired on Channel 4 television in December 2007 and we were again asked to integrate the latest content into the website.
Now featuring more than fifty biographies and numerous articles on significant documents, battles and events in English history, the website shows you the most relevant places to visit, websites to look at and books to read for further exploration. Specially commissioned maps were created by Nick Pearson and the content has been tightly edited and cross-referenced by Nancy Duin, an expert in the field. Consequently, it is easy to browse the site to find out who’s related to whom and understand their role within a wider context.
Interactive Timeline
At the heart of the website is an interactive timeline (created in Flash and driven by XML) which is the main navigational tool to drive viewers round the site. The timeline always centres itself on the current date focused on any given biography or other article. This allows the user to quickly see the wider context of the current item – which battles happened in this person’s reign or who preceded or succeeded them to the throne. For more focused exploration, the timeline can show a restricted set of data – just battles, for example, or a viewer can simply type in a date.
Notes on the Design
As the website was to accompany a major TV series and heavily promoted in the programme annos, it was fittng that the design should take its visual lead from the TV title sequence (made by Granada Bristol). Stills and artwork were derived from the broadcast sequence and further developed to create the header sections. Other elements were used across the pages to further enhance the visual appeal and denote page content.
May 13th, 2009
Posted by Ian
The brief
We were commissioned to re-design an existing site for Channel 4 which was made entirely in Flash. Part of the brief was also to look at the overall architecture of the site: make it easier to find things; group the content so it was in a more logical order and create clear user-journeys across pages.
The existing website was produced completely in Flash and so was not search engine friendly. A lot had changed at the channel (E4, More 4 and 4OD had come online) since the website was released, so Channel 4 commissioned some new content from Available light to bring the story up to date. Stylistically, it was all looking a little tired too.
We were also asked to port the new site into Channel 4’s content management system so it could be updated easily.
What 72 dots were among the first to notice is that great design is not a decorative add-on but essential to your content. They do the simple stuff brilliantly, and the brilliant stuff simply. Can’t recommend them highly enough.
Darren Pangbourne, Editor, New Media Factual (History), Channel 4
Design challenges
The brief specified that we had to re-use the existing flash games which had been extracted from the original site. This posed the crucial design challenge – how to marry the new site design (modern, reflecting current branding guidelines and ‘on-message’) with legacy content executed in a completely different style?
An aspect of having to use the channel’s CMS was that the templates come with a fixed-with vertical navigation area down the left-hand side. Many of the legacy flash games utilised the full width of the screen so we had to design the new site with this very much in mind. The answer to this question was to scale the flash movies down in the HTML rather than re-engineer them so that the navigation could fit too. A simple answer, but it resolved the issue. We also set the background colours of the flash games to be transparent so they would merge more sympathetically with the new design.
Other challenges lay in making the old-school site standards-compliant; we introduced a CSS-based layout (data tables were marked up properly for increased accessibility) and employed some DOM-scripting to recreate the rich functionality that was present in the flash version.
The Outcome
The new design is much more than a lick of paint. Channel 4’s brand identity is fully expressed and the uncluttured approach makes the content much more clearer.
By grouping content more logically and (crucially) renaming section titles so they are more explanatory makes content easier to find. Re-ordering navigation items to delineate the information hierarchy gives context and meaning to end-users. You can find things, you can see what there at a glance. In our opinion, the website is a much more enjoyable and rewarding experience for the viewer.
