Author Archive

  • 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

  • Steve Jobs: How to live before you die

    Yesterday I listened to a very inspirational talk on TED by Steve Jobs ’How to live before you die. By telling 3 stories from his life Steve is urging people to pursue their dreams and trust their intuition.

    Connecting the dots

    Steve always followed his intuition. He never graduated from the university. He didn’t know what he wanted to do in his life and didn’t think that college would help him figure it out. He dropped out of Reed College just after 6 months. By dropping out he could stop taking the required classes that didn’t interest him and join the ones that looked interesting. For example he took calligraphy class to learn about typefaces, about what makes great typography great. 10 years later when designing the first Macintosh computer he used his knowledge and skills to design the first computer with beautiful typography. Much of what he stumbled into by following his curiosity and intuition turned out to be priceless later on. Key learning points:

    “You can’t connect the dots looking forward. You can only connect them looking backwards”

    “You have to trust in something, like your destiny, life, karma, etc. Believing that the dots will connect down the road will give you the confidence to follow your heart, even if it leads you off the well worn path, and that will make all the difference.”

    Love and loss

    He found what he loved early in life. He started Apple with a friend in his parents’ garage when he was 20. In 10 years Apple had grown from just the two of them into a $2 billion company with over 4000 employees. As Apple grew, his visions of the future of Apple began to diverge and he got fired by the Board of Directors. This was a devastating experience for him. What had been the focus of his entire life was gone.

    He felt rejected, but slowly he began to realize that he still was in love with the work he did. He decided to start over again:

    “The heaviness of being successful was replaced by the lightness of being a beginner again”

    Now he entered one of the most creative periods of his life. During the next 5 years he started a company named NeXT, and then Pixar, which turned out to be the most successful animation studio in the world, creating the world’s first computer animated feature film ‘Toy Story’.

    Ironically Apple bought NeXT, and that is how Steve returned to Apple. The technology they developed at NeXT is now ‘at the heart of Apple’s current renaissance’. Key learning points:

    “Sometimes life hits you in the head with a brick. Don’t lose faith.”

    “Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. You’ll know when you find it. Like any great relationship it gets better and better as the years roll on.”

    Death

    When he was 17, he read this quote: “If you live each day as if it was your last, someday you’ll most certainly be right.”

    Since then, he has looked in the mirror every morning and asked himself: “If today where the last day of my life, would I want to do what I’m about to do today?” Whenever the answer has been “No” for too many days in a row, he knew that something needed to change. Key learning point:

    “Almost everything, all expectations, pride, all fear of embarrassment or failure, these things just fall away in the face of death, leaving only what is truly important. Remembering that you are going to die is the best way to avoid the trap of thinking that you have something to lose. There’s no reason not to follow your heart.”

    When he was diagnosed with cancer, at first the doctors told him that he should expect to live no longer than 3-6 months. He lived with that diagnosis for a whole day, until later that evening when he had a biopsy. It turned out to be a very rare form of pancreatic cancer that was curable. This was the closest he’s been to facing death. Key learning points:

    “Death is the destination that we all share, no one has ever escaped it (…). Your time is limited, so don’t waste it living someone else’s life”

    “Don’t be trapped by dogma which is living with the result of other people’s thinking. Don’t let the noise of others’ opinions drown out your own inner voice. And most importantly, have the courage to follow your heart and intuition.”

    I found Steve’s talk very inspiring. I think it’s important that we don’t forget in our everyday life to follow our passions and that we take the time to often look back at our life to make sure that we do what we love. Otherwise we should keep searching until we find the right path. Hopefully we’ll be as lucky as Steve!

  • Discrepancy of scale: Ron Mueck

    Recently while on holidays in Melbourne, I went to see an exhibition in The National Gallery of Victoria by hyperrealist sculptor Ron Mueck. Having heard about his lifelike but not life-size human sculptures, I was very excited to enter into his world. I was keen to see the way Mueck plays with scale and creates human sculptures presented at all stages of life.

    As I entered the room, I encountered the first sculpture of the exhibition “Dead Dad”; a representation of Mueck’s dead father, naked, lying on the floor, only three feet long. The hyper-realism of the model was so striking that I could feel the fragility and the morbid temperature of the body. The fact that he was naked and exposed to the fully-clothed onlookers made him look extremely vulnerable, and I felt a slight discomfort looking at him.

    exhi010311_rgb-crop

    As I continued my journey throughout the exhibition, i found that each sculpture had it’s own story to tell. Mueck’s depiction of different emotional states, such as isolation, fear and tenderness, made me feel like I was observing the human condition through a magnifying glass. I felt trapped in an enclosed space surrounded by emotions.

    However the most powerful story was represented by the “Wild Man”, a nine-foot sculpture of a bearded man clutching stiffly the stool he was seated on. Despite the monstrous size of the man, he seemed so vulnerable and the fear and anxiety emanated from his eyes. It felt like as if he was terrified of us – the audience. I could strongly empathise with the feeling of intimidation that was brought to life so vividly by the sculpture.

    exhi011031_rgb

    Every sculpture looked so realistic that it was hard to resist the temptation of touching them. However as I got close and reached out my hand, security approached me immediately, and so my desire was left unfulfilled! I still wonder if they feel as real as they look.

  • Protect The Human – new designs for Campaign pages

    Protect The Human is Amnesty’s International UK site. It’s designed to engage people to stand up for humanity and human rights.

    We’ve recently redesigned and launched new campaign pages on Protect The Human. The aim of the redesign was to improve the user experience and usability, which would lead to the increase in numbers of people getting involved in the campaigns for human rights.

    Campaigns play a crucial role on Protect The Human. They are designed to highlight the ongoing problems happening in the world. Each campaign has a range of actions for people to take in order to fight the injustice.

    To improve the campaign pages and increase the number of people taking actions, we’ve done some major changes. We started with the campaigns index page.

    Read full post

  • LOVEFiLM homepage redesign

    We’re very excited that the new LOVEFiLM homepage we designed has been released in beta!

    The previous home page had grown organically over the last few years and hadn’t keep up with how the business has developed. Since the last major update LF have launched a new magazine section, cinema listings and video on demand – none of which were highlighted on the home page very well. Many pages of the site have also been updated to a new, more visually appealing look and feel, which now needed to be echoed on the homepage.

    Read full post

  • Goodwood Festival of Speed

    We’ve recently launched an activity dashboard for Audi at Goodwood festival.

    Goodwood Festival of Speed is the world’s biggest and most diverse celebration of the history of motor sport and car culture. Audi UK has had a significant presence at the event for 14 successive years. The 2009 festival took place on the 3 – 5 July.

    Last month Audi asked us to design a dashboard that would bring this and previous years photos, videos and tweets taken from behind the scenes by Audi and their loyal fans at the Goodwood festival.

    It was a very quick project to embrace, and I was assigned to design it!

    The brief was to create a premium product using Audi brand guidelines in a way that feels approachable rather than corporate.

    To fulfill the challenge I did the following:

    • With obsessive attention to detail, I designed features like soft gradients, delicate textures, hover states on buttons, images and tabs, gentle strokes that help make the design look premium and expensive
    • Made it look simple – use of white space, a clean layout and light typeface makes the page look legible, improves readability and creates a feeling of sophistication and elegance, all which help enhance the performance
    • Kept it user friendly – soft edges, rounded corners and smooth gradients makes the site more approachable and encourage the users to upload their content

    Here’s the design. Have a look!

    audi_dashboard

  • Protect The Human new homepage

    Following up on Tim’s recent post on the new Protect The Human homepages, I’m going to write about the process I went through to create the final homepage designs.

    1. Sketching

    I started with sketches. Sketching ideas on the paper helped me visualize quickly what we wanted to achieve through the new homepages and how we wanted to address current site’s issues.

    It was an easy way to present the initial ideas to people involved in the project (client, creative director, developer, etc.), and made it easy to apply any changes required. It was also much quicker than creating the initial visuals in photoshop!

    photo_3

    2. Creating ‘grey boxes’ in photoshop

    After the sketching session I had a clear idea how to present both logged in and logged out homepage objectives. I knew the content that should go on the pages and I could start playing with it in photoshop.

    I started with laying out grey content boxes on the page, creating the grid, and showing the hierarchy.

    Logged in homepage

    hp_loggedin_p2_d002

    Logged out homepage

    hp_loggedout_p2_d00

    3. Designing

    The next step was to start the design. I did several versions of the homepage before achieving the final one. However, the previous two steps saved a lot of my time and made the actual design process less frustrating.

    Here are the final designs:

    Logged out homepage

    loggedout

    Logged in homepage

    hp_loggedin_blankstate_p2_d092

    _____________________________________________________________

    On the logged in homepage, for users who have only just registered and are new to Protect The Human, there is a set of 3 automatic, time-based actions suggested for them to take:

    blankstate

    Once user starts taking actions this panel changes to suggest personalized actions:

    actionsuggestion

    ‘Recent highlights’ panel becomes also personalized (Highlights for you) once user has specified interests. It displays the content based on user’s chosen tags and campaigns.

    highlightsforyou

    I’ve also created two templates for the feature area so that Amnesty has the flexibility to choose the type of content they want to show. They highlight crucial events, campaigns, etc., and urge the user to take action.

    Video template

    video1

    Image Gallery template

    imagegallery

    _____________________________________________________________

    Overall, I did truly enjoy the whole design process. Simple things like sketching can make the whole design process so much easier.

    More improvements to the site will follow as we’re currently working on them.

  • Highlights from Mark Boulton’s presentation at FOWD London 2009

    Mark Boulton was one of the speakers at this years’ conference Future Of Web Design (FOWD) in London. His presentation ‘Typography’s not on the Web, it IS the Web’ was the highlight of the day! It was very well prepared and very informative talk on the state of typography today.

    Here are the following highlights:

    1. What is typography?

    Typography is a language on the web. It conveys information in writing. A lot of data on the web is information. Language is information, therefore typography is a language.

    2. Designers role

    Authors have a conceptual model of what they write. Readers have their own conceptual model of how the information should be presented. It is designers’ job to interpret authors’ information. Understanding of the brand values and knowing the audience will help designers to bridge the gap between the authors’ and readers’ conceptual structure.

    3497042351_9cab8ba8881

    Photo by Vectorfunk

    3. Typography is information design

    Typography goes much deeper than just making things look pretty. It IS information design. A lot of typographic design is involved in splitting up and structuring the information. Typography is about conveying the information in the best way.

    4. Everybody can be a designer

    Not just qualified designers but everyone has the ability to be a designer with the tools that are available nowadays. People create newsletters, write blogs, use content management systems to create their websites, etc. These ‘amateur designers’ face a choice dilemma. They make bad design decisions because the tools that are available make it easy for them to make bad design decisions.

    Drupal.org is a good example of how to make bad design decisions. It is a content management system that Mark is currently working on to improve the user experience. 6 out of 7 sites created in Drupal are ugly! And that’s because the tools that are given to people make it hard to make the site look beautiful, i.e. users are left with the choice of 82 fonts (most of the fonts are not right for the job, i.e. Comic Sans). It would help users to make the right decision if the number of fonts was reduced and if they were given with the choice of two good fonts like Georgia and Helvetica instead.

    3497043997_894466cb76

    Photo by Vectorfunk

    5. Examples of bad typographical choices

    Typefaces are designed for a reason. 99% of typefaces have been designed for print.

    Comic Sans – 9 out of 10 times is a wrong tool for the job. It’s often used out of contexts and that’s because tools that are available for everybody make it easy for people to make bad design decisions.

    Meta Sans – is not a great font for the web. It never was designed for the web. It was designed to be used by German post office in print (i.e. postage stamps)

    Times New Roman – designed for print. Looks good on the web only in large size. Serifs are sharp and small, on screen become almost invisible in small sizes.

    So why not use Georgia instead? It was designed for web. Has got big, fat serifs that look good in small sizes as they don’t vanish.

    Web typography is limited, and we have to think hard before we make the right decision. While it might be easy job for designers it isn’t necessarily easy for the users. Our role as designers is to help users make good design decisions. We have to hold them by hand!

    It is also useful to go back to the fundamentals of good typography and raise the awareness among those who don’t know them.

  • OolaMoola

    Recently we’ve launched a blog OolaMoola for our client Hearst Digital.

    The blog is about how to live a fabulous lifestyle on a low budget. It consists of challenges that are taken by our creative and very determined editors StylishMoola and BirdyMoola, who know exactly what they want: get the best for less!

    As a Made By Many designer, I’ve created more than a few blogs so far, however designing OolaMoola was a new & fun experience altogether.

    Ok, so I guess the best part of it was that there was hardly any brief. There were no major constraints nor specific requirements. All I was asked was to create something inspiring, something that looks fresh and fun, and something that gives users a positive experience.

    To get some inspiration I looked at creative magazines (i.e. 4Talent, idn) and some design websites (i.e. designspongeonline.com, weebirdy.com). I started collecting together all the interesting elements that I found: images, textures, graphics, illustrations, fonts etc.

    collage2

    At that point, I knew what sort of look and feel I was after. I wanted OolaMoola to have a magaziny, crafty, hand-made look. To achieve it, I did the following:

    • Logo – cut out letters from magazines

    logo

    • Background colour – scanned magazine page to achieve the paper texture

    background

    • Illustrations and graphics – collages of photos of my friends and hand-drawn/mouse-drawn graphics

    images

    Here’s the final design I’ve come up with:

    oolamoola

    I really enjoyed designing it, and I love reading the blog now. You can’t get any better than that!

  • “Leveraging Cognitive Bias in Social Design” – Joshua Porter, Dconstruct 2008

    My colleagues and I went to Dconstruct – a one-day conference about designing and building the latest generation of social web applications.

    All of the talks were interesting, although I found some too techie for me as a designer. However, one talk by Joshua Porter was particularly interesting.

    Joshua talked about biases that affect the way people think and make decisions. He also shared some insights into how to use cognitive bias to get people signing up and using software. Here are some notes.

    Examples of cognitive biases:

    Bandwagon effect – people tend to do things because other people do the same. This is related to group pressure – if we don’t know something we follow the others, we use shortcuts rather than do the logical thing, which would require gathering all needed information (we act like sheep).
    Example:
    Freshbooks uses the bandwagon effect tactic to attract new users by emphasising number of new users, showing them on a worldwide map, and displaying reviews from “Happy Users”.

    Representational bias – people tend to follow like-minded people
    Example:
    Freshbooks uses a representative selection of happy users on their homepage with authentic photos, job titles, quotes, real names, etc.
    Yelp.com – for review of the day, they’ve chosen people that are very active on the site (lots of friends, lots of reviews). This is the desired behaviour that is valued at Yelp.

    Loss aversion – people prefer avoiding losses over acquiring gains.
    Example:
    • Best buy – you can shop there without creating an account, but at the end of the shopping process they say:” Create an account to save time the next time you shop”. Would be more effective if it was: “Create an account so you don’t lose the ability to track your package.”

    Ownership bias – people value things more when they feel sense of ownership. Some websites can get you engaged by creating something first before asking for any sign up – this creates an instant feeling of ownership.
    Example
    Slide – instantly engage you into creating a slide show without signing up. They encourage you to sign up afterwards so you can edit this slideshow later.

    Geni – gets you started very quickly, they just ask you to fill in three bits of information and you can start building a family tree that you can share.

    • Flickr – using “You”, “Your” – gives users a feeling that they own it

    I agree with Joshua that it is very important for web designers to understand and translate social psychology into a positive experience for web users.

    By understanding biases designers can use them to their advantage to attract and convince people to sign up and use the service.

    Equally, if it’s not clear what the site is about and the proposition isn’t strong enough to attract users, then it won’t build an audience. And what’s the point of that?

Our latest tweets

Categories

Archives

Find us on the web