Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

A top-down look at the New Internationalist redesign

Thanks to all of the excellent and constructive feedback so far, I am today working towards the New Internationalist pages that I am designing being feature complete and ready for sign-off next week. With that in mind, I wanted to share with you a top-down view of all of the pages that I have been working on.

Below are thumbnails grouped by section. Each is linked to a higher-resolution version in our New Internationalist group on Flickr.

Magazine

Blog

Books

Shop

General

I am very open to constructive criticism about ways to improve what I'm doing, in-fact I really want to hear it, whether you're a reader of New Internationalist or not, both here, on Flickr or on the New Internationalist Tech Blog.

Leave your comment

craig zheng

May 27 2009 @ 03:41am #

First glance thoughts:

I like the alt home layout. I like the idea of being able to tab between blog and magazine content, and somehow it feels more “live”.

The “for the new reader” alert bar is a very nice touch, though instead of essentially repeating the tagline it might offer more useful orienting information: “... is a communications cooperative that publishes a monthly magazine, books, blogs, etc. etc.”

Darrell Houle

May 27 2009 @ 04:33am #

I like the alt homepage layout as well. It’s very organized with good use of whitespace. I think the main image size might prove to be hard to satisfy a news/magazine format given its width and low height but that’s just an observation. The size feels more art/banner sized than news image sized.

I’d also add that you might want to A/B test keeping the ‘Subscribe’ banner at the bottom and moving it to the top right column. Its current position is considered a strong banner placement (end of content area) but might not be setting the context of the site soon enough (news site with off-line roots).

I support an approach to bring attention to “this month’s issue” but leave the call to action (subscribe) to the magazine page after you’ve built interest.

I also thought the ‘Browse by topic’ above the search box was a label until now. I think it might be better positioned below the ‘Search’ button or where ever it can’t be confused as a label.

Really strong work Andy.

Andy Clarke

May 27 2009 @ 04:47am #

@craig zheng: I like the alt home layout. I like the idea of being able to tab between blog and magazine content, and somehow it feels more “live”.

— The alternative home page might be repurposed somewhere on the site at some point, but for now it’s abandoned. As I wrote last week, “In talking to people about this approach, several problems came to light. Which tab should be open by default? Magazine or blogs? Which-ever I chose, there was a danger than a reader might miss the other? Who knows, it may well find itself reused on another part of the new site?”

The “for the new reader” alert bar is a very nice touch, though instead of essentially repeating the tagline it might offer more useful orienting information: “… is a communications cooperative that publishes a monthly magazine, books, blogs, etc. etc.

— True. That copy is placeholder and will be replaced by the editors and will include a link to the About page.

@Darrell Houle: I like the alt homepage layout as well.

— See my reply to Craig, above.

I’d also add that you might want to A/B test keeping the ‘Subscribe’ banner at the bottom and moving it to the top right column.

— Good idea. I am working on a few alternative sizes/shapes for subscription panels.

I also thought the ‘Browse by topic’ above the search box was a label until now. I think it might be better positioned below the ‘Search’ button or where ever it can’t be confused as a label.

— Gah! This has proven to be a right ol’ pain. In the very early iterations it was below the search box. However I moved it to above to help the search box line up better with the main navigation.

Really strong work Andy.

— Thanks! Can I send an invoice to you too? ;)

craig zheng

May 27 2009 @ 06:17am #

More…

Magazine view: the “Next Month” box has a publication date displayed. Maybe the “Last Issue” box and the main feature box – if it’s going to always contain the current issue – should have pub dates too? It might seem unnecessary/redundant, but that’s the kind of cue that I think reassures readers that the content is current. Ditto this thought on the archives page.

Country/person profile: might be interesting to see what these look like with the “fact file” section above the copy. Ditto for reviews. Also, maybe this is in the works, or maybe it’s not technically possible given your setup, but it would be neat to display a list of recent related articles/blog posts, perhaps with a link to a search/browse of all related items.

Review page: the sidebar is a bit confusing at the moment, both its visual hierarchy and the mix of content.

Finally, just wanted to say that I’m loving the typography on the site more and more every time I look at it :)

John Holdun

May 27 2009 @ 07:49pm #

Love your use of hover transitions, but I feel like the form treatment might be a little too extreme. Something about the pulsing really bothers me as a user, not to mention that besides the three very different states—blur, focus, hover—the style the elements revert to after hover seems to be different than the blur state.

But then, that’s really the only thing that bugs me. Everything else is just amazingly creamy. Great work.

Dinyar Godrej

May 28 2009 @ 12:19am #

I definitely prefer the first option here for the home page to the alternative design - it’s good to have a magazine cover up front, it reminds the reader that this is a website that depends heavily on the magazine for its content. (My personal preference when visiting other magazine sites is to head first for the articles that have appeared in print and only take a cursory look at the blogs. With newspaper sites, I rarely look at blogs.)
I’d like to see a ‘pick from our archives’ kind of section to complement the ‘most popular’.
I’m mentioning this now as it looks like the cut was done to make it fit under the logo: it’s ‘The people, the ideas, the action’ not ‘The people, ideas and action’ which doesn’t have quite the same emphatic ring. 
Love what you have done with the archives page - you can just tell I like a lively page! This would be the obvious place to put a ‘subscribe’ ask - is there room for that?
The magazine page looks fine: however, will there be somewhere where readers can find a contents page as of old? That let you know everything that there was in any particular edition. I think that’s quite an important function.
The article presentation is looking good too. My only concern on this page is the landscape format use of the visual image for the article - not all pics would suit this format.
The compare page is fun - and an interactive idea - it probably only applies to the Country Profile.
The Country Profile also looks neat. What’s the benefit of losing the photograph here? (I like my pictures.)
Not sure the more serious ‘Profile’ approach to the ‘Worldbeater’ section would work - if people expected a standard write up and then read our humorous hatchet job, they may be put off. I think the nature of the section needs to be conveyed better.
One overall comment - whereas I really like the open look of the spreads, I feel a bit concerned at the regularity and restrained look of the fonts, in particular the New Internationalist at the top. It gives an annual report kind of look to some pages, which may play down the liveliness of some of the content. It’s difficult to judge of course, not seeing this with ‘real’ content and the accompanying images.
thanks for listening,
Dinyar

craig zheng

May 28 2009 @ 01:21am #

I’ve already posted a comment about the blog pages, particularly the blog entry sidebar. The only other thing that jumps out at me as I look at this again is that it’s not entirely clear to me how the comments template works. Is it meant to be appended to the bottom of a blog entry/article page?

Andy Clarke

May 28 2009 @ 01:41am #

@craig zheng: The only other thing that jumps out at me as I look at this again is that it’s not entirely clear to me how the comments template works. Is it meant to be appended to the bottom of a blog entry/article page?

— That’s still up for discussion. My recommendation is for comments to appear on a separate page (as A List Apart) because a: I hope that there will be a lot more of them after the relaunch and b: I want to maintain a visual link between the article and the call-to-action that will appear at the bottom of each page.

@Dinyar Godrej: I definitely prefer the first option here for the home page to the alternative design.

— That’s been decided.

I’m mentioning this now as it looks like the cut was done to make it fit under the logo: it’s ‘The people, the ideas, the action’ not ‘The people, ideas and action’ which doesn’t have quite the same emphatic ring. 

— I made that edit, for visual reasons. It won’t be an issue to change that and balance with the logo by making the wordmark larger.

The magazine page looks fine: however, will there be somewhere where readers can find a contents page as of old? That let you know everything that there was in any particular edition. I think that’s quite an important function.

— You’ll see, when more real content is added, that the magazine issue page itself acts as a contents page for that issue and will feature all its articles, grouped into logical columns.

One overall comment - whereas I really like the open look of the spreads, I feel a bit concerned at the regularity and restrained look of the fonts, in particular the New Internationalist at the top. It gives an annual report kind of look to some pages, which may play down the liveliness of some of the content.

— The design, particularly of typography, has evolved through the process. It most definitely more ‘restrained’ and that is a key part of my design decision to make the site look less reactionary or angry (as some people have mentioned of the current site). The type has also been designed to showcase the content and I hope that it allows that content to speak for itself, without the need for fancy fonts or other elements doing the talking for it.

James

May 28 2009 @ 01:56am #

Hello Andy,

We are the NI Sales and Marketing Team who are congregating with the aim of making a few helpful comments. We can’t rule out individual members also submitting comments.

We like the overall feel which is very clear and pleasing to the eye; also the colour coding for the different sections. However perhaps need a bit more thought about how best to give strong selling messages with special offers etc without harming
the overall design. And “Subscribe” means magazine but need to think about this as may be better to also offer gift subs, e-mail newsletter, on-line edition, RSS etc from the word “subscribe”

Like the proposed Home Page with queries:
a) Can the 3 top sections change or are they fixed as magazine, shop and subscribe.
b) Logo should be in current font.
c) Subscribe button is missing top-right
d) What is the thinking behind the funny little box top-left.
e) Note street address is UK so is each visitor geo-targeted? This would be good as we need to do this when linking books, archive issues etc to Shops.

On Magazine page:
a) Suggest a bit clearer about status of the 3 issues highlighted. Use “issue” rather than “month”.
b) Cover images should be linked.
c) Suggest current issue is flagged “Now on-line” and next issue is “Now in shops”.
d) Could be a more prominent section for subscribing, particularly if we want to make a special offer etc.
e) Will the main box describe the issue, if so this might give spare space underneath.
f) Like the Columns at the bottom.
g) We note that the red used is different from the red in the current magazine banner.

Articles
a) Not convinced by new version with article in a central
section. Prefer previous version.
b) Like wide image but will there always be something
appropriate with this width.
c) Like book links, assume they will always be appropriate to article.
d) Similar articles might be better higher up on right.

Archive
a) Note we are now 10 issues a year having been 11 for some years so need to ensure covers are in right calendar year.
b) Should be links to new back issue section in Shop.

Browse
a) We like it. How do you get here?

Oops, run out of time. We’ll be back tomorrow

NI S&M;Team

Andy Clarke

May 28 2009 @ 02:29am #

Apologies to everyone for this next, detailed reply to marketing. (Isn’t it fun to have these discussions in public and not hidden on a Basecamp? (gulp)

@James: However perhaps need a bit more thought about how best to give strong selling messages with special offers etc without harming
the overall design.

— That, is a hugely important point. I know how important it is to generate sales. I also feel (and best practice backs this up) that the current site’s use of internal ads or links to internal content that look like paid ads is a bad move. We all know that users instinctively avoid paid ads (unless they have a need in mind), so disguising navigation as ads makes it less effective, not more. We need a fine balance in visual style and I’ve agreed to help the marketing team with a style-guide that balances sales needs with aesthetics. On other point, I think that because the navigation right across the site is clearer and more intuitive, you will need fewer ‘internal ads’. This has the flip-side of opening up more paid slots — yum.

Home page

Can the 3 top sections change or are they fixed as magazine, shop and subscribe.

— The magazine slot should be fixed, as it acts to link a reader to the magazine content below the fold. Shop and subscribe are flexible, but I’d need to hear a good use case to move them.

Logo should be in current font. Subscribe button is missing top-right. What is the thinking behind the funny little box top-left. Note street address is UK so is each visitor geo-targeted? This would be good as we need to do this when linking books, archive issues etc to Shops.

— The typeface I have used is Whitney. I have chosen this face because of it’s similarities to Knockout (the current face) but without the distorted letterforms (N, I, L) of the current logo. I don’t want to fight a battle over this, but I do feel that Whitney better reflects the new, more modern, open direction of the redesign. If by ‘missing subscribe button’ you mean the red sash, sorry, that won’t be returning. The issue number box is designed to subtly reinforce the notion that this site is magazine based. It is also a quick visual indicator that the site has updated. Adam, Phillip and I have already discussed geo-targeting in detail.

Magazine

Use ‘issue’ rather than ‘month’. Cover images should be linked. Will the main box describe the issue, if so this might give spare space underneath? We note that the red used is different from the red in the current magazine banner.

— Good catches on the ‘issue’ and linked covers. I have made the changes. The current ‘intro’ dummy text will describe the content of that specific issue (as this template is reusable), so yes. Well spotted, the red is indeed not the same as the magazine banner. That is because colours that look great in print (CMYK) rarely work on screen (RGB). The case in point with your red is that it looks angry on screen, it makes you want to claw your eyes out. So my new red for this site is a hue (tint) of your red, over black. It makes for a more restful look, better readability for links and doesn’t make you want to murder someone.

Articles

Not convinced by new version with article in a central section. Prefer previous version. Like wide image but will there always be something appropriate with this width. Like book links, assume they will always be appropriate to article. Similar articles might be better higher up on right.

— My reasoning for the narrow article layout for current/important articles is to maximise readability and take away distractions. When an article fades into history, it will automatically be presented in the more conventional layout you like. The narrow layout for current/important articles is one of the key part of my new design. You will likely see me stamp my feet like a little girl ;)

Browse, we like it. How do you get here?

— Follow the link adjacent to the search box.

I will post a new set of files with updated templates to our internal Basecamp tonight. Please ask Philip or Adam for a copy.

Phillip Smith

May 28 2009 @ 03:29am #

Andy “(Isn’t it fun to have these discussions in public and not hidden on a Basecamp? (gulp)”

Just remember: You’re breaking new ground here, Mr. Clarke! Ain’t it fun?

Phillip.

craig zheng

May 28 2009 @ 03:42am #

Andy, if your recommendation for comments to be split out onto another page is adopted, how will you handle linking between the two? I don’t see comments linked from the blog entry page, and I don’t see the entry/article referenced or linked from the comments page.

Also, If the comments are on their own pages, I wonder whether it might make more sense to include in the sidebar a list of recent comments or most-commented articles rather than a topics list, since the reader has likely switched from a sort of general browsing mode into a more participatory mode…

S&M;

May 28 2009 @ 09:56pm #

Hi Andy,

S&M;back again; thanks for your prompt responses.
Couple of points to come back on:
a)The 3 boxes at top of Home Page which are the main place which we want people to use in order to buy, subscribe etc. So we are not convinced that these are clear or colourful enough compared to the surrounding material, eg the paid ad at top of page. We would also like to have the ability to flag major events in these boxes, eg launch of a new book, NI exhibition opening. So perhaps the first two boxes could be flexible enough so could have a variety of messages linking to any part of site, or perhaps any of these boxes could have rotating messages. Presumably the external ad site at the top could be used occasionally for internal ads.
b) Still not sure about little box top left, and people don’t understand our issue numbers.
c) Most people coming to the Home Page will be looking for New Internationalist and so to give reassurance we think that the font (bodega sans) and strap line should be the familiar ones.
d) With “missing subscribe button” we didn’t mean the corner badge; we meant that “subscribe” alongside donate etc top right.

OK, on to other pages:

Compare
Looks interesting. What is “these items”?. Look forward to seeing how this pans out.

Blogs.
a) Bit text heavy, perhaps photo of main blogger or illustration if available.
b) If you are reading there doesn’t seem to be an easy way of getting to the related comments.

Books
a) Geo-targeting again with not all books available in all countries and obviously each country having their own prices.
Current books pages solution is probably best where all books illustrated but you are shown flags of countries in which you can buy each book. Or have you a better solution?
b) With illustrated books need to look at images rather than a sample chapter. Flash program or light box?
c) Author should be mentioned in boxes of featured books.
d) Need ability to say “available as e-book”.
e) Right side underneath categories) could be useful space to be used for special announcements, eg book launch, newspaper feature etc. Blog format?
f) In individual book pages should be links to similar books or books by same author.
g) Will be other things to go under Categories, eg book trade enquiries, submissions, download catalogue pdf (image), academic/educational enquiries etc
h) A Coming Soon tab alongside Latest Publications.

Shop
Not sure exactly what you are controlling and what new Magento system will control. Here are some initial thoughts but do you want more detail from us now?
a) Top ad would only be internal shop ads.
b) Need a longer introduction esp for those coming straight to the shop. Then make it clearer what “change” means, suggest whole line moves up to be under logo.
c) Categories should be highlighted with illustrations and above Recently Added. (see Natural Collection)
d) Need A-Z listing, particularly for people who know what they want. Maybe Search should be clearer as two search boxes are confusing.

Individual Products
a) Looks good. Need pace for additional images, with scrolling for products like photographic calendar.
b)May not always have a review so should be possible to be blank, also not show “more reviews” if none.
c) Need to encourage you to buy other things through images. 

and a couple of new thoughts on overall site:

where do press/media enquirers go to?
is site wide commenting still on the agenda?

good luck

S&M;

Andy Clarke

May 29 2009 @ 12:04am #

@Sales and marketing:

Home page

The 3 boxes at top of Home Page which are the main place which we want people to use in order to buy, subscribe etc. So we are not convinced that these are clear or colourful enough compared to the surrounding material, eg the paid ad at top of page. We would also like to have the ability to flag major events in these boxes, eg launch of a new book, NI exhibition opening.

— The finished visual design is still being worked on, so expect to see that panel a little more eye-catching. The middle and right boxes will be flexible enough for you to feature this content.

Most people coming to the Home Page will be looking for New Internationalist and so to give reassurance we think that the font (bodega sans) and strap line should be the familiar ones.

— I understand, but we also need to consider those readers of the web site who are not familiar with the magazine or regular readers of it. They are our target audience as much as regular readers.

With “missing subscribe button” we didn’t mean the corner badge; we meant that “subscribe” alongside donate etc top right.

— It is poor usability to show several links (in different places) in view that lead to the same page or perform the same action. While there is a subscribe function in the teaser panel, an additional link in the navigation is redundant and confusing (do they do the same thing?). However, when the teaser boxes are used for something other than subscribe, it is then justifiable to add a link to that in the navigation. Then, and only then.

Blog

Bit text heavy, perhaps photo of main blogger or illustration if available. If you are reading there doesn’t seem to be an easy way of getting to the related comments.

— All addressed in the latest revision of the designs.

Books

Author should be mentioned in boxes of featured books. Need ability to say “available as e-book”. Right side underneath categories) could be useful space to be used for special announcements, eg book launch. In individual book pages should be links to similar books or books by same author. Will be other things to go under Categories, eg book trade enquiries, submissions, download catalogue pdf (image), academic/educational enquiries etc. A Coming Soon tab alongside Latest Publications.

— All addressed in the latest revision of the designs.

Shop

Not sure exactly what you are controlling and what new Magento system will control. Here are some initial thoughts but do you want more detail from us now?

— The new store will be controlled by Magento, so my job is to design an overall visual look for the store, rather than the specific features or functionality. I expect that there will be a later phase, once the store is built, where I’ll revisit the store templates to make sure that they fit with my style guides.

Where do press/media enquirers go to? Is site wide commenting still on the agenda?

— I expect that they will be most logically placed on the contact page. Yes, I really believe that commenting should be available on all magazine articles as well as blog entries.

Amanda

May 29 2009 @ 01:48am #

Hi Andy

The site’s looking great.

I have some specific queries about the subscribing process. (I look after the subs in the UK.) The various subscription fulfilment companies NI uses has always made getting people to the right page quickly a challenge.
How will people be directed to the correct fulfilment company to subscribe?
How about flexibility to promote incentives and payment methods that other offices can’t or don’t want to offer. Geotargeting? Can the light box (which I love) be geotargeted for example?

Amanda

Andy Clarke

May 29 2009 @ 02:08am #

@Amanda: How will people be directed to the correct fulfilment company to subscribe? How about flexibility to promote incentives and payment methods that other offices can’t or don’t want to offer. Geotargeting? Can the light box (which I love) be geotargeted for example?

— Earlier iterations of the subscription box (even before the popup was thought of) contained a drop-down for a customer to select their country. I had lengthy discussions with Adam Ma’anit who brought up the possibility of geo-targeting in the process. You might want to check with him and the web team about that, but I think it’s still on the table.

Charlie

May 29 2009 @ 08:34pm #

I really like the javascript modal popup for subscribing too.

There were two minor design things that I got confused about. The “one moment please” thing that comes up when it loads is a bit hard to see, maybe you could squeeze a bit more contrast in there? And maybe the popup could have an “X” in the top right or a close link? It took me a few cycles to figure out that I could click away from it.

Andy Clarke

May 31 2009 @ 11:06am #

Thanks everyone for all your amazing feedback on this project so far. I’ve posted a design update with the latest look-and-feel design, plus links to revised versions of all the templates at New Internationalist redesign - entering the final stages.

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.