Posts Tagged ‘design’

  • Suggest a space on Ready for Ten

    We’re very excited here at Made by Many to announce the second release of Ready for Ten. It’s got a new look and plenty of exciting new features!

    Ready for Ten, a parent-powered website for mums and dads of 6-9 year olds, was created in January 2010. It started as a blogging platform stacked with tips, conversation and support for parents. In the past few weeks we worked on growing the platform, developing new features and evolving the look.

    The Skillscape campaign is the most exciting feature of all. The aim of this campaign is to create a map of the UK’s best spaces for kids to play and practise their skills, from parks and playgrounds to sports clubs.

    Skillscape homepage

    This page gives users detailed information about the campaign. It shows how many places have already been submitted to the Skillscape and encourages users to suggest a new space.

    While designing this page I wanted to make it look friendly and inviting. It is important that users feel welcomed and that they immediately get the sense of what they can do there and what they can achieve by taking part.

    I’ll go through the design process here: Read full post

  • Designed by people that hate you. No, really

    Self-service checkout machines. Is there any other machine we interact with in the modern world that is quite so odious?
    As I stand in line to use one of these infernal devices, listening to the sighs of frustration from the customers ahead of me, I debate whether it’s worth. The extra minutes I’ll save from not queuing up for an old-school conveyor belt, or the agony of a vein exploding on my forehead from using one of the damn things…
    Cannot verify your bags
    Whilst I can’t condone shopping in socks and sandals, I try to be a good eco-boy by bringing my own bags to the supermarket each week. Somewhere in the Pacific there’s a baby albatross with one less plastic bag in their stomach who’s thanking me.
    Each week, I duly select ‘using my own bags’ and place my deluxe hessian bag in the bagging area. And each week I’m told my bag can’t be verified and that I’m to wait until an assistant arrives to help me. I’ve tried placing my bag down gently as if it were precious cargo, in the hope of getting the machine to acquiesce. I’ve also tried ramming it down, in the hope that announcing my bag’s presence with a punch will have better results. Neither works and each time an attendant has to be called over.
    What does it take for a bag to verified without calling the work experience boy over? Why not tell me so I can alter my behavior or bring a different bag? If this isn’t possible, then why not just say so? Want to use your own bags? Press here to call an attendant over.
    Transparency. Don’t lie for the sake of sounding technically competent, because God knows the machine is failing at that one.
    Unexpected item in the bagging area
    You’re merrily scanning and bagging, accompanied to the sound of beeps from the bar code reader. Until, unexpectedly, the machine interrupts:
    Unexpected item in the bagging area. Remove this item before continuing.
    WTF? I’ve just scanned that wedge of Parmigiano Reggiano. I live in Islington – buying expensive cheese should hardly be unexpected behavior.
    Hold on, did it scan? Was the scanning beep I heard a false memory? Or…
    Unexpected item in the bagging.
    Ah, the machine was just playing catch-up – it’s found the cheese after all. Thanks for scolding me just because you’re a bit shite.
    Please remove your card
    This being slow doesn’t just extend to playing catch-up, often the machine is downright one step behind. How many times have you been told to remove your card after removing your card from the chip and pin machine? It’s very dull being told to do something that you’ve already done.
    Trying to do too much
    A lot of these problems stem from having to be able to deal with the worse case: yes, items do get dropped into a shopping bag without them being scanned occasionally. Of course, the system needs to be able to deal with every eventuality. But many of these problems stem from the checkout machine trying to do too much.
    Interacting with one of these machines is a nightmare, with slots, swipes and scanners all over the place. Fiddle up here and remove whatever from down below – the interactions are all over the place. What would happen if the experience were concentrated down? If these machines are here for convenience, how about *just* focusing on credit/debit cards and get the shopping experience *right*? Do one thing really well rather than lots of things badly.
    What does this all mean?
    Rants aside, I do have a point to make.
    It baffles me that someone, somewhere has said “yep, this is it, this is good enough to have our name on it.” I know that systems, services and platforms are always a balance between what can be achieved within the time, money and expertise available. I’m also sure that these machines are a huge technical accomplishment: it’s a barcode reader, measuring scale, cash dispenser, payment and touch screen device in one. That’s unbelievable.
    However, that’s all wrapped up in a truly dreadful customer experience. Could some of the time (and money) spent integrating three different payment types into one device been better spent getting the shopping experience right?
    Of course, being able to accept notes, coins and cards was probably part of the brief so the manufacturer isn’t all to blame. However, how much better would it have been if someone had had the confidence to say “we can do it… of course we can do it… but it may not deliver the experience you’re looking for.”
    It would have been a bold move, possibly a courageous one. However, each time a customer uses one of these machines and is frustrated,
    I can’t help but wonder about all the money supermarkets spend each on branding, marketing and creating the perfect store environment. Millions of pounds a year and it comes down to this? My last thought as I walk out of the supermarket isn’t of quality or value for money, it’s of my last experience at the store.
    Unexpected item in the bagging area. Remove item before continuing.

    Self-service checkout machines. Is there any other machine we interact with in the modern world that is quite so odious?

    As I stand in line to use one of these infernal devices, listening to the sighs of frustration from the customers ahead of me, I debate whether it’s worth it. The extra minutes I’ll save from not queuing up for an old-school conveyor belt, or the agony of a vein exploding on my forehead from using one of the damn things…

    Cannot verify your bags

    Cannot verify your bag

    Whilst I can’t condone shopping in socks and sandals, I try to be a good eco-boy by bringing my own bags to the supermarket each week. (Somewhere in the Pacific there’s a baby albatross with one less plastic bag in their stomach who’s thanking me.)

    Read full post

  • SXSW countdown: one day!

    At long last… tomorrow morning we’re off to Austin!

    Stu and Antonica, Made by Many’s de facto cat herders, are limbering up even as we speak to corral the lot of us from Heathrow to Dallas Ft Worth on to Austin. Assuming no one offends Homeland Security on the way in (you know who you are…), we should all be ensconced in our Texan digs by tomorrow evening.

    Our departure is big news for our website, as it means our super-dynamic, sex-on-Twittter-toast* SXSW special homepage will be live. We’re kind of excited about this page. As well as all our latest tweets and links to our Twitter accounts, it shows off the latest Made by Many blog post and the most recent addition to our Flickr account. It offers a smooth user experience, too, as everything updates dynamically and in real time.

    The page will be live the whole time we’re away, which means you can keep (non-creepy, please) tabs on us and get a sense of what the SXSW experience is like. You’re also heartily invited to @ or DM us with suggestions, feedback, jokes etc while we’re gone — this is, after all, a conversation.

    For those who missed the earlier posts on this project, we took this page as an opportunity to open up our creative process and design in public. Here’s the first vision of the page. We followed this with a post on the idea’s evolution before whipping the curtain back for the big reveal.

    Thanks very much to everyone who offered feedback on this work — and of course, if you want to do so now, you are more than welcome.

    So on that note… have a great week and, um, watch this space!

    *not my words but damn do I love ‘em

  • SXSW countdown: one week

    And lo, ready to roll a full week before we take off for Texas, here it is — our Twitter-powered SXSW people-tracker:

    sxsw_d15

    For those who haven’t been following the posts and discussions around this project, here’s the story…

    Just about all of Made by Many is heading to Austin, Texas for SXSW interactive. Several weeks ago, we decided to build something onto our website to bring our SXSW experience to life for the people who aren’t going to be there with us. We thought this project would also be the perfect occasion to throw the doors open on our creative process and actually share the journey we go through as we work an idea through to a final execution.

    This series of posts started with shots of our original approach. We then showed how this idea was refined a few different ways. The third and final instalment in this design journey is above.

    The idea for the page is very simple: all of our most recent tweets on one page, updated in real time as it happens.

    The design started out as a series of coloured panels, one for each person, laid out on a very regimented grid. However, we all felt that this was a bit strict – it neither reflected our personality nor the event we’re going too.

    So we loosened the design up, taking the hand drawn style of our avatars as inspiration. The page is a series of speech bubbles, laid out in a seemingly random and slightly haphazard way. Connected by lines, doodles and graffiti, the speech bubbles change colour with time: the freshest tweets are dark, the stalest white. The page will be darkest when the conference sessions are going on and we’re tweeting non-stop, but completely white in the middle of the night when we’re all sleeping. Except for @malbonster’s bubble. He never stops.

    As well as pulling in our tweets, the page also pulls in the latest photo in our Flickr stream, our latest blog posts, even twitpics. You’ll be able to see more tweets from each person by clicking on their avatar or simply going through to their Twitter stream.

    The idea for the page is very simple: all of most recent tweets on one page, updated in real time as it happens.
    The design started out as a series of coloured panels, one for each person, laid out on a very regimented grid. However, we all felt that this was a bit strict – it neither reflected the personality of us or of the event we’re going too.
    So we loosened the design up, taking the hand drawn style of our avatars as inspiration. The page is a series of speech bubbles, laid out in a seemingly random and slightly haphazard way. Connected by lines, doodles and graffiti, the speech bubbles change colour with time: the freshest tweets are dark, the stalest white.
    We imagine that the page will be dark red whilst the conference sessions are going on and we’re tweeting virtually non-stop, but completely white in the middle of the night when we’re all sleeping. Except for @malbonster’s bubble. He never stops tweeting.
    As well as pulling in our tweets, the page also pulls in the latest photo in our Flickr stream, our latest blog post, even twitpics. You can see more tweets from each person by clicking their avatar or simply going through to their twitter stream.

    We like the sketchy style and the playful execution. We also think the design has some dynamism to it, that it tells a story and carries your eye through that story fairly easily. All in, we think this is really close to who we are.

    This whole ‘designing in public’ thing felt a little strange at points (sort of like being naked in front of a lot of people, I reckon) but we got some interesting feedback here and on other blogs, which was cool. And it’s practice for us to be more open in the future — something we are really committed to doing.

    Our SXSW special will be live on Made by Many as of Thursday 11 March.

  • Online > offline: we still love paper goods

    Last Tuesday night, I went to the preview for the Brit Insurance Designs of the Year exhibition (aka the Oscars of the design world) at the Design Museum in Shad Thames.

    The exhibition

    (Photo credit: Luke Hayes, from the Brit Insurance Designs of the Year blog)

    It was a fluorescent evening, buoyed up by free-flowing champagne and ebullient design types larging it in hats, big hairdo’s, bright lipstick and serious specs.

    The exhibition covers the gamut of design: architecture, furniture, product, graphics, interactive and fashion. One of my favourite pieces was a bit of folly with a serious message: ‘Panda Eyes‘ a crowd of WWF Panda collecting tins, wired up to a camera in the sky to detect human movement and shift in sync as you walk around them. Its intention is to raise awareness of pandas’ plight in the wild. I think.

    What I found interesting is that some of the graphic entries were really all about the relationship between online and print (and therefore arguably candidates for the interactive category). These three entries all had online generation in common: the articles, images, comment and opinion are all drawn from the crowd, using twitter, blogs and data to bring a concept to life.

    Newspaper Club (which for some reason has a bit of an ugly website, but produces beautiful papers) allows anyone to create and print their own newspaper, without the need to be a multi-millionaire media mogul.

    Here’s a particularly cool example that’s both useful and will please anyone who likes a bit of data visualisation loveliness. The Postcode Paper was an experiment from the Newspaper Club themselves that took information from data.gov.uk such as local services, crime stats and other useful stuff you need to know when you first move somewhere, like TFL transport links, and republished it in one handy, paper format.

    The Postcode Paper

    (Photo credit: Newspaper Club)

    It’s Nice That brings together the best of the creative industry in one place. As well as existing online, they also produce “a bi-annual printed publication, monthly talks and videocast, an online shop selling exclusive products as well as regular interviews and features with current practitioners.” I haven’t seen the print publication, but they feature some mighty nice stuff online.

    Tyler Askew's brand identity for Music HDTV channel RAVE

    And having recently received an extremely dull pre-conference magazine for SXSW, I can appreciate how something like The Incidental would be refreshingly interesting and bring the good stuff to your attention when wading through the programme at a conference. Essentially, it’s “a community-generated news pamphlet and website at international design events which offers debate, reviews, news updates and recommendations by tapping into what everyone is talking about.”

    This has given us some ideas for SXSW…

  • SXSW countdown: two weeks, one day

    We’re still keen to open up our creative process by sharing the evolution of our SXSW project.

    As mentioned last week, it’s a Twitter-powered execution that aims to give an as-it-happens update of what the Made by Many folk are up to, as we’re doing it. This week we’re sharing three snapshots to show how the design is coming together.

    Here’s where we were in the middle of last week:

    colours

    This was our first attempt in Photoshop. Each person gets a panel that shows their avatar and latest tweet. We’ve colour-coded the boxes to show recency, with the freshest content (hot colours) at the top, and the stale content (cold colours) at the bottom.

    However, we wanted the page to update in real time, which would mean people and their panels moving around the screen. We figured that was going to get far too busy and complicated… Onwards!

    Here’s the next stop on the journey:

    Flash

    Here we’ve brought in a bit of alpha-order to give everyone a spot on the page and keep them there. This solved the busy problem, but when the coloured panels are shown in a non-spectrum order, it looks confusing. We trimmed the colour back to what you see here but found that they meant less.

    Standing back a bit, we worried that this design was actually a bit boring and unemotional… just not MxM enough. Next!

    Finding the right conversational note:

    bubbles

    Here we’ve started to play around with something that’s a bit more conversational and has more personality. There’s still more work to go, but we think this could be fun. Now we’re moving in the right direction.

    We agreed this design and we’re taking it forward even as we speak.We’ll preview this project again next week, but in the meanwhile, feel free to tell us what you think.

  • Pictory – A beautiful example of online editorial design

    I’ve talked before about exploring different ways of navigating and consuming content online.

    I first came across Pictory a few weeks ago and absolutely loved it. But as it starts to fill with stories and topics I feel provides some beautiful and elegant ways to gorge yourself on content and is really forging a path into new areas of content layout and navigation online.

    Their line ‘Your best photo stories’ explains what it is nicely.

    Pictory screenshot

    Let’s look at the evidence.

    Lovely, big images. Navigation via a keyboard which allows me to skip from piece to piece simply by pressing the left/right arrow keys. A balanced mix of captioned images and short stories pulled together to create a rich textured viewing / reading experience. Real-life stories which often cause an emotional stir in the reader. And the designer in me loves the use of Typekit fonts.

    I think it’s an example of crowdsourcing at it’s absolute best. A nice tightly worded brief but open enough for interpretation by the viewer. (Aren’t all the best briefs like this?)

    Being ultra picky. A full-screen view would be nice.

    Anyway, I think it’s best if you go there now and lose the next hour of your day.

  • The DIYist

    If you want to understand ‘the social web’ and where it’s going, take a look at what the DIYists are up to.

    Readers Digest DIY manualFor years, DIY was the bastion of the weekend jobbing dad. Men would buy tool belts, low-quality hand drills and set about putting up shelves, bleeding radiators or hanging pictures. And their bible was the Reader’s Digest Complete Do-it-yourself Manual. The appeal of DIY is really the time when you’re NOT doing DIY and you look at the thing you did and think “I did that, all by myself”. There’s immense pride in DIY. And the pride can be totally disproportionate to the effort you put in. You can bang a nail into your bathroom wall with a shoe and still feel pretty pleased with yourself when you look up at that C. M. Coolidge every time you perform your ablutions.

    Read full post

  • Life after Verdana

    Typekit launched recently amid a tremendous buzz from designers and bloggers across the web.
    What typeset offers are ‘real’ fonts on the web. Don’t quite know what this means. Surely Arial, Verdana, Georgia, Tahoma et al are all ‘real’ fonts. I think what they mean is that there is now access to a huge library of extra fonts to employ in browser-based design.
    This sort of follows on from my previous post about Art Direction on the web. This wider choice of fonts should allow greater freedom for the designer to inject some personality into their designs and help achieve some differentiation. As, arguably, one of the nicest serif-fonts online Georgia is used all over the place for online publishing. The arrival of Typekit should help reduce the reliance on Georgia for this purpose.
    So how does Typekit work?  It’s actually very clever. You see, the problems with fonts online are the same as digital music publishing, namely DRM. As soon as I install a font on my web server and use it on my site then I need a license for the distribution of that font. And those licenses don’t exist. Ot they do but their prohibitively expensive.
    Typekit have got round this problem by allowing you to rent the font from their servers for use in your site CSS and HTML. You pay a monthly subscription (on a freemium model), the level set depending on how many fonts you want to use and how many sites you want to publish those fonts on. Once you’ve chose your fonts and enter the URL of the destination site and it spits out a couple of lines of javascript for you to place into the <head> of your HTML file. It looks a bit like this…
    <script type=”text/javascript” src=”http://use.typekit.com/etn1iee.js”></script>
    <script type=”text/javascript”>try{Typekit.load();}catch(e){}</script>
    This works in all major browsers (Firefox 3.5 and up, Safari 2.4 and up) and even IE (version 5 an up).
    It’s all quite ingenious really. And a very elegant solution to a problem that looked insurmountable a few years ago.
    However, I’m slightly wary of where this might lead. The old saying ‘just because you can, doesn’t mean to say you should’ needs to be plastered all over the Typekit site. The font catalogue may be extensive but there are some absolutely hideous examples of the typographers art on there. Allow the user to set them small onscreen any they’ll be completely illegible.
    This may also open up the floodgates for some crimes against typography. Remember when, in the early-mid 90s the PC became more and more pervasive. The world became filled with rainbow coloured, Times, Comic Sans and Brush Script-rendered signs in corner shops? The same people who used the <blink> tag and texture-mapped animated gifs. I fear we may be treading the same path again.
    Whatever, in the right hands this opens up a very exciting future for web-based editorial design and art direction. A future that may be even brighter when some of the larger foundries come onboard with the likes of Garamond, Franklin Gothic, Clarendon etc.
    For those that care about typographic nuances I found this useful tool for seeing exactly how the font will render in a browser, at different sizes, white out and at varying shades of grey.
    It’s probably worth pointing out that there are others doing similar things to Typekit. Some use a different method of linking back to the font file (@font-face) but the principles are the same. These include, Kernest, Fontdeck (coming soon) amongst others.

    Typekit launched recently amid a tremendous buzz from designers and bloggers across the web.

    What Typekit offers are ‘real’ fonts on the web. Don’t quite know what this means. Surely Arial, Verdana, Georgia, Tahoma et al are all ‘real’ fonts. I think what they mean is that there is now access to a huge library of extra fonts to employ in browser-based design beyond the standard set of ‘browser-safe’ fonts.

    Screen shot 2009-11-17 at 14.10.50

    This sort of follows on from my previous post about Art Direction on the web. This wider choice of fonts should allow greater freedom for the designer to inject some personality into their designs and help achieve some differentiation. As, arguably, the nicest browser-safe serif-font, Georgia, is used all over the place for online publishing. The arrival of Typekit should, if nothing else, help reduce the reliance on Georgia for this purpose.

    Read full post

Our latest tweets

Categories

Archives

Find us on the web