Redesign of CURE Blog

This is looking really great. I think you've hit the right tone and feel spot on with your design.

There are so many good things to comment on. The way you've styled your comments, the thought to integrating social media, the balance of typography, the care to detail on each element and the engaging design of the footer - it's all great stuff.

It's funny. The only time I start spotting the tiny tiny things are when basically the site is looking great and working well. Your attention to details overall is lovely.

Please feel free to ignore this totally it's just something which popped into my mind when I saw it and that is the font used for the word 'cure' in the logo - the arm of the 'r' feels a bit harsh and short. Because of the lovely friendly open feeling of the site, this feels at odds with everything else. A longer, rounder arm would feel better to me. Also the little boy - maybe his top leg curve could be adjusted to curve round the body - I realize you need the gap here but the angle of the line makes him look like he's wearing a pair of white underpants over his trousers. Again feel free to ignore this - it's really tiny detail stuff and overall the feeling is very good and I'm a big fan of inner shadow so this appeals to me personally too.

To answer your specific questions...

Making use of space greater than 960px I'm not a great useability expert so am not the best person to answer this question. Being a charity type website, I'm guessing accessibility for all is a big priority. If I look on my laptop monitor which is tiny then I don't see the date etc. Also in this area you have useful comments, share etc. I can really empathize with you on your dilemma here - it looks great as it is and it's such a nice and clean visual solution to displaying your date etc. However, this date etc totally cannot be seen on a smaller monitor. Not sure if anyone has any useful suggestion as to how to fix this one other than trying to incorporate the date into the 960 area.

back to home link in the sidebar... It does feel a bit large and I didn't realize it went back to home automatically although obviously it explains this on rollover. It's size is very similar to the actual logo size but at the same time because of the colour, it draws the eye over to this right hand column and helps guide the eye through the page.

I do really like when you hover on your logo how you get the lovely hand drawn text come up showing it's to go home. The text on rollover on the Back to blog home is great too. Rollover in footer to the store is fab too as is the rollover on the Donate Now. Really the attention to details is lovely.

Overall layout and design Fab, fab, fab, groovy, spot on, clean, functional, engaging, great attention to detail, subtle, Gorgeous balance in typography, great use of colour, lovely rollovers, very very very very nice indeedy.

Sidebar I don't think it's too pushy. I think maybe the number two background could be a little darker to aid legibility and clarity of type against it. It's a bit of a struggle to read at the moment on certain monitors. On my ancient old monitor, it's ok but on my more swanky mac monitor, it's much harder.

As for suggestions, it's great right now but maybe a little gallery of mini images (maybe a small block with 3 images in each row) which link to various stories about how people's donations and help have helped them. Kind of like the friends view on facebook. Or maybe a gallery to special friends of Cure... really these could be awful ideas - just brainstorming...

The Help Cure Now widget This feels great as it is although I do like when I clicked on the Find out more ways to help now and it had how different amounts of time can help. Maybe a narrower more simplified version of this 1 minute, 5 minute idea could be worked for the sidebar as it really is a very effective way to realize how little time it can take to make a difference.

Any more thoughts of navigation - this is where I'm not such an expert so I'll leave that for others to maybe answer more thoroughly. I personally found the site very easy to navigate and think it's great.

Hope this helps and I haven't waffled too much and it makes sense. Give me a shout if you want me to explain anything if it doesn't make sense... :)

i liked it- it is nice.. a few things though.. - the overall color scheme is more towards "save tree/environment" rather than being something to do with "medical" or "cure".. so i am talking about the green used- may be u can add a bit more blue to make it more "medical". - the 'donate now' should be more prominent- like u really need money/help. - i think you should provide a better contrast for content- it is readable but it surely will help to have a bit lighter background.. ---- otherwise a very nicely designed site.

Hi Joel,

Congratulations your design looks outstanding. I like it a lot.

Traditionally few usability issues:

1. Duality of menu buttons is the biggest usability issue. Users will not know that they have to move their mouse over this small triangle to see a drop-down. Behaviour of the button should be consequent & typical. Best way is to have drop-down active on full button hover.

2. Tagline would work better near the logo.

3. Breadcrumbs do not look like breadcrumbs. On the other hand I'm not sure they are required and why blog is inside media?

4. More than 960 is not a big issue but you could easily avoid it by removing left 'column' with date and other stuff. The date is really not that important for readers.

5. All social share links can go to the post's footer and free up the space on the left.

6. I don't understand why users who are on Cureblog page see the huge link to Cureblog

7. Obvious explanations are not needed. Users who are using RSS will know what it is. Users who prefer newsletters in mailbox will give emails. On the other hand I'm not sure this box should be located in such prominent place. Maybe it could be together with all other media/social/follow us things in the footer.

8. There is strange section in menu - Other locations. What is the difference between Afghanistan and Cambodia? Users will not understand it. Interfaces should not be organized in ways that are illogical, or require the user to have access to additional information that is not found in the interface itself.

9. Widget box is wicked :) It tries to say things which are already on the page in different places diluting the message. Singnup for the enewsletter page behind the link is a usability nightmare & conversion killer :) It requires first name, last name, email, physical address, city, state, zip - Nobody will give all this data to register for a newsletter :)

10. Tags probably should be in a separate box to the countries tags because people will not click this tab to see tags.

11. Search box is lost in the footer. Is it search for the whole site or only blog? If for all site it the footer is a good location but the input box could look more prominent.

12. all share & stay in touch social media icons should be together. I also don't think they should be so distinct. This blog is much more important than any content on those sites.

13. Cure store is an important support element which should be near donate.

14. Back to top button is generally not required "because the exact same functionality is provided by simply dragging the scrollbar to the top of the page. It's almost always better to rely on a single, generic interaction technique so that users don't have to ponder the choice between two alternate interaction techniques for the same goal. The time it takes to make the decision is usually more than the time saved by the shortcut."

15. I can bet nobody will notice Feedback tab in the footer. If you really have to have it there I would suggest using contrast colour.

I took the liberty of checking some other pages and must say they would also require some attention from user experience point of view. Donation page for example is really problematic - typical conversion killer.

Design issues:

1. I would get rid of 90% of the dotted lines. Everything looks so boxes with them and it creates unnecessary borders and limits users' perception.

I hope this helps. Keep up the good work

Cheers!

Michael

(user experience designer & strategist)

Paper textures never get old for me. There's something wonderful about making a website SEEM tactile. Now to address your concerns:

Space When I resize the window to a smaller size (my resolution is 1440x900), the meta info disappears. I would suggest tweaking the CSS so this doesn't happen (Screenshot). I saw in your response that most of your visitors had 1280 or higher resolution. I would still make sure it works properly in smaller resolutions.

Back to home You can never have enough navigational cues so I think having the breadcrumb and a link dedicated to the blog page is good. The placement is just right because it catches your attention pretty well. I wonder why cure is uppercase and not lowercase like the logo.

How do you feel about the post layout and design? The post layout & design works very well. It's pretty easy to tell when a post starts and a new one begins. The addition of dashed borders helps with his. Overall, is it easy to read an follow? There could be more contrast between the text and background colors. Otherwise, easy to follow. I like that you've included a hover effect for the posts. Do share links appear easy to find? Yep Are categories and tags easy to identify? Yes, because of the borders and the change in background color.

How does the sidebar feel to you? Engaging enough? Too pushy (with the calls to action)? Suggestions for additions to the sidebar? The sidebar isn't too much in my opinion. The lighter background color is enough to make the blog posts appear heavier allowing for them to stand out.

The "Help CURE Now" widget - how effective do you think it is? The widget will certainly get the users attention but not distract from the blog posts.

Navigation or anything else The breadcrumb could use a bit of space beneath it. I love love love the tag style. Thank you for including an arrow for a drop down menu. There are plenty of sites that don't include such a simple graphic that takes away the surprise of more content.

There you have it. I tried to be as thorough as I can but dang, Emma covered a good bit already. :)

Hey Joel - this is a solid design here. The colors, textures and structure all work really well together. I'm going to be pretty picky here and tell you a few things that I think could be better, but just remember that as is, this is a fantastic design here. Take a look at my notes and you'll see all my thoughts.

Great work, overall I think the site is consistent, easy to follow, has great typography and attention to detail. Just a few details to sure up and I think you're there. Very well done my friend!

Hi Joel, Ya know when you love something so much and because you do you keep adding and adding to it? Well, I think this one may be a bit over loved. The first thing that I could pinpoint are the dotted lines are everywhere. Using the dotted line subtly where needed will help make this look less busy. Maybe, not to box the text in. Yet, let the contrast of the background color define this separation.

The next thing I noticed was the alignment of the logo. Due to the date being far to the left, as well as the defined boxes and the light colored "Home, Media, Blog" below it, the logo looks mis-aligned. Maybe consider aligning it to the blocked text and align all in between as well. When you take the dotted line out it will help feel that it is aligned correctly as well.

Then you have the Cure logo and the CURE blog going on. Not only do the shades of green look a bit off. Yet so does the fact, that as previously mentioned, one is lower case and the other is capitalized. Maybe considering making the "CUREblog" smaller, so it doesn't fight so much for attention with the main logo.

I would consider making your titles stand out more than the dates via switching their colors with each other?

Just a couple more suggestions as I know it is a lot to take in :0) Maybe try and place your "Like" below the article rather than above or under the date. It seems to draw my attention to much to it rather than to the article itself. Maybe try and bring in the space between the paragraphs a bit and that will give you that extra space your looking for. If you still need more space consider making your text a bit smaller. Maybe take the dots out of the boxes where you have "Countries/Tags" at and to take out the staples ( for these are the over additions). Try and keep only so many shades of colors going on, it makes it look a bit busy with too many.

On the upside, I linked to your site and I really like how when you hover over the top links that you have some options that show and are lightly divided by those dotted lines. I like the bottom of this page and how it's arranged. I like the dates to the left. (If you do decide to keep it that way you may want to even move the logo further to the left. It is a tough call, You'll just need to experiment with that one. )

Hi Joel,

as usual, I like the design and the nice touches. Textures look great, box shadows are crisp and tidy, etc. etc. I'm not going to keep telling you what you're doing correctly but will get to the suggestions I can come up with.

I would suggest making the blog "page" area the lighter color of brown as opposed to the sideboxes. What is more important - the content or the auxiliary controls on the page? The lighter background would lead the eye telling it it's the meat and potatoes of the site!

The more I read online the more I notice that I like my text background to be lighter than the rest of the page.

I also would avoid the green font - that's your call to action color and you're using it on a block of text. Turning the background lighter would also make the text crisper - I like low contrast text on bg relationship but only when i don't have to read long posts. In design its aesthetic, from a usability standpoint it's very tiring to the eyes (low contrast, i mean).

Also - why not use a different style for the intro paragraph to the blog? Perhaps a couple of sizes up, or even a different type style would allow you to create a way for a user to quickly review what the blog post is about before continuing to read or relying solely on the title.

That's all I got - the frame / bg / buttons are fantastic. Hope this helps!

Joel

it is a shame they wont let you tweak or flat out FIX that logo. the logo really is close to being awesome. and im sure you would be able to push it to the awesome level. try harder to convince them~

i appreciate that you have effected every bit of every element to match the theme here. every texture, every letter, every button.. have each been tenderly considered.

i think that the width of this.. and that 20% of your audience does in fact have a monitor too narrow for exceptional viewing.. ..you really do need to find a way to fit the info in the standard width. i have clicked a few times now in the past couple days, from work and from home.. raising your large monitor statistics.. but i.. also had problems seeing the whole thing due to the fact that i don't use my web browsers at full screen.. ive got.. photoshop documents.. aim... illustrator.. skype.. iCal.. Mail.. etc. all going on around on my screen too.. so even those statistics say you're making the most happy.. they might only have a small window open for viewing your blog site.

you have brought in the green from their current logo and brighter green website. this whole thing you have created.. seamlessly works together. im just wondering though.. why green. besides that you had to... why not white.. "cure" .. seems like it would be a [white] light, not green.. i know you're restricted with your effect on the branding. i urge you though.. to make something that YOU think they should use as their blogging site. YOUR idea for a logo.. YOUR idea for a color scheme.. all they can do is say "no" but you would be doing yourself a favor.. to know that you tried.. and you never know.. they just might like it! they might say "that's brilliant! we love it!!!" i know you're at the end though [finishing touches] with this current design.. i just get upset when i hear really talented designers.. say that they know something could be better but don't persuade their clients to embrace their educated expertise. you could use your reasoning and talents to persuade them. show them a better design...! how could they say 'no' if its amazingly better!?

this green and roughness, worn paper makes me think of an african safari instead of curing injuries and disease. to color scheme something like "cure" i see: light in darkness.. glowing.. hope! shining light.. maybe dark grey and an intense light..? there are so many things you could do with it.. this is just one random concept.. (background texture found on flickr http://www.flickr.com/photos/chrysti/ )

but as it is.. without the fight.. it is truly a gorgeous highly detailed nice to look at blog. i just think its missing a concept that makes crystal clear sense. this is a stellar design joel.. just don't forget to fight for beauty and conceptual thoroughness ;)

Joel,

I didnt get your message in time to add anything that others havent already mentioned.

So great design and with little adjustments it will firm up really well!

Sorry for the late review ... I'm catching up just now. Don't know if it's still useful.

1. I would definitely not go beyond 960 ... a big no of your users would have a vertical scroll bar.
2. You have a breadcrumbs menu. A back button would be confusing, I would instead work on the menu area.
3. Overall the design is nice and easy to follow, maybe not so easy on the eyes because of the colors used, but then again there is good contrast between the text and background.
4. I would rework the sidebar. I think tag clouds are overrated and don't provide much value.

Cheers, Z.

Everything I would have said has already been pretty well documented by the other comments, but I thought it would be appropriate to give you my input since you asked for it!

I love the overall look and feel and design of the page. The content is well organized and the imagery is very nice. The color scheme works perfectly.

1) I don't think the "outside the 960" is an issue too much because the info there is not all that important. However, if you want people to be able to use the share links or something else there, this will be impossible for any user with low resolution.

2) Back to home button seems fine to me. Breadcrumbs you might want to underline text to make them look more like bc.

3) My only complaint is that you might have a few too many dots. Unfortunately I think you lose a lot if you take any of them out, so I'd probably leave it as is.

4) Sidebar works for me. It is supplementary content and doesn't really distract from the primary content in my opinion. If you are worried about that, you could dull out the "give" button a bit, but I think a few bright shiny call-to-action buttons make sense on a charitable org's site.

5) Not sure what you mean by this.

6) A few minor things. When you hover the arrow within "Help CURE Now" it turns green, but you can't click on it. Agree with the other point about the arrow hover menu, just make it drop down on regular hover.

Lastly, didn't see this mentioned anywhere else... if your window is smaller than the width of the page (960?) the background image gets messed up, especially if you scroll horizontally. Not sure how you have this set up, but you might have to add an additional container div or something to solve that. Centered backgrounds are always a PItA.

Hi Joel,

Sorry about the delay, I literally haven't logged in in ages, I just wanted to stop by and say this looks really great, just like the previous theme it's really fitting, light, refreshing, etc. You should be really proud of this piece, not only from a aesthetic perspective but also for usability (i.e. the post layout and various elements are well stacked).

Keep it up dude!

Cheers

Noel

Hi , I loved the design at first look. Everyting is so balanced , The Combination of Green and Light Brown giving impression that A green Hope for life in Deserted Sandy Area :)

The Design is just Perfect.

The old site design was also by you ? If yes you have a 1000x1000 times better design now :).

Regards -Sadia-

I really like the design itself. Colors and textures are perfect for the purpose. My comments would be about the overall usability.

1. I would put CureBlog logo in the top left corner to clearly identify in which section of the CURE website you are.

2. Move Subscribe, Help and Countries/Tags pane little bit up and put main CURE logo underneath so these to logos (CURE and CURE Blog) won't compete.

3. Motto "Healing changes everything". I recommend to remove underlining. Don't be affraid of loosing importance of the motto it's already bright enough and sits at the good spot. Since you're underlining URL's underlined motto is little bit misleading. I've tried to click it.

4. I would also add Home tab to the main navigation or a home icon, for extra navigation convenience.

5. Drop down menus in main navigation don't appear right away if you highlight the menu item. May be it's meant to be this way, but it's not obvious that you have to highlight tiny arrow to see the drop down.

6. Increase the space between first post and bread crumbs to dashed lines so close to each other may irritate the eye.

A really good Communicative and useful website,

A fresh & unique design, Cool drop down menu, Great content presentation and lovely footer and category page ,

Of course, side bar is also very useful .

A great site overall.

1. Well, things like the date each article was posted aren't entirely visible on my screen, and I have a resolution of 1024x768, so... maybe you could decrease the width of each article in the content section.
2. I'm kind of confused s to what a breadcrumb is. However, I think the back to home thing is fine.
3. Yes, I especially like the organization of this; everything is relatively easy to find.
4. No, the sidebar is wonderful, it is not pushy at all.
5. The widget is very effective, and the simplicity of it all makes it seem very easy to be able to help.
6. Overall, this is a very engaging site and layout. Good work!