Jurriaan RoelofsPremium Concept

Website Redesign for SooperThemes.com premium Drupal Themes

By Jurriaan Roelofs

   on Oct 22, 2010
12 Reviews3 Votes1 Favorite1442 Views
new

This concept is a new version of an older concept. View Old Version

Concept Reviews

  • Jamie Linder

    Jamie Linder

    Rank: 1 Elite

    3776

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    4 Votes
    This review has been awarded.

    You say in your description, "- Button colors and layout changes are not yet implemented. It doesn't make sense to change this without testing so I'm going to prepare a binary logistic regression analysis to see what effect these differences have on conversion rates."

    This all sounds very fancy, but before you spend time doing whatever that is, colors, layout & spacing are all very crucial to the success of this design.

    The design needs to have cadence, rhythm. The grid system is great tool, but don't get so mired into laying out blocks in a precise pattern that you neglect the flow of objects, and the spaces in between objects, and how those objects relate to one another. Use the grid, but don't let it enslave your design.

    1) Readability, usability need to be primary goals. 2) Fun, quirky, cool things need to follow in the steps of your primary goals.

    I think you're letting some of the "fun" elements get in the way of basic usability design issues.

    Look closely at items like alignment, padding, leading, widths, heights, proximity, visual (not logistical) alignment.

    Once those spacing adjustments have been finessed, it will be easier to get a good "feel" from this and your other pages.

    I hope my comments help, though the reason I reviewed this again is to let you know how important that spacing is. To me, this was not yet ready for another review, and the changes you may have quickly made have not fundamentally impacted this design.

    • sooperthemes.jpg
    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 23, 2010 at 2:12 AM

      Hi Jamie, I respect your opinion but I'm not really sure what you mean, personally I already get a good feel from the current layout. Can you explain what sort of spacing you mean, or maybe you know some cool reference articles?

      I know that vertical rythm can mean lining up all your typography between columns in the design but the type is already lined up like that, except for in the blog.

      I must say that in the past years I've only been doing coding and development work; outourcing the design work. I've picked up designing a few months ago so I'm still very impressionable and I'll take up any learning material I can get.

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 23, 2010 at 9:14 AM

      Jurriaan, I am not trying to criticize your design, I am trying to critique it. If as a developer you're not seeing what I see, as a designer, perhaps another way for me to communicate whats happening is to spend some of my own time working on your design. I couldn't spend an hour of my Saturday morning on this, but I will spend about 15 mins. to try and illustrate what "invisible" spacing issues are occurring.

      I would appreciate credits awarded for my time spent on this, and I'd be happy to continue explaining if you appreciate the effort and knowledge I am trying to share with you.

      I've attached a quick spacing adjustment idea; this is not a blue print for design, but a diagram to compare leading, spacing and positions. Its not a science, its an art.

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 23, 2010 at 9:16 AM

      I should also mention that the yellow blocks I added were to show you what I see when I look at your text layout. Choppy, evenly spaced, methodical. You need to use spacing and hierarchy to help a users eye move through the page and tell where it stop and act.

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Oct 23, 2010 at 9:20 AM

      One more thing, Smashing Magazine is a pretty good resource for articles on things such as this. Here's an article on leading that you as a developer might be able to use:

      http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

    • Lisa Tweedie
      Lisa Tweedie commented:
      Posted: on Oct 24, 2010 at 1:59 PM

      Have to say I didn't get what Jamie was on about until I had a look at the website in action. He is absolutely right. Somehow it looks pretty good on the screen shot above. But when you go to the website is fairly obvious that you need to work on the white space. Thanks for spending the time on the example Jamie I've learnt something here. I particularly like what you have done with the type sizes of the main font.

  • Michael Gunner

    Michael Gunner

    Rank: 1 Elite

    CF Verified professional

    6064

    • Design: 2
    • Purpose: 2
    • Originality: 2
    • Engagement: 2
    3 Votes
    This review has been awarded.
    Dreadfully generic

    Posted on Oct 24, 2010 at 12:15 PM

    Hi Jurriaan Comments

    "binary logistic regression analysis" - pointless, a waste of time. Simple A/B testing should be enough, and if you're doing "binary logistic regression analysis" over the colours of a few buttons, I think you're wasting too much time on that when other areas are in need of your attention. There's no need to turn creative web design into a complex over-engineered science.

    Navigation Bar. Difficult to spot, and when it is spotted, the text is too close together. The colour of the text is not different enough from the background for me. Contrast is everything.

    Visual hierarchy. We have a slider, great, but it only displays one theme at a time, whilst we have this gigantic header telling us something we probably already. If I go onto a themes website, I don't need them to tell me I'm on a themes website. I know - I clicked it. You also place all this text explaining and justifying the site, with the most important part, the themes, below the fold. Don't waste time telling people you have drupal expertise - let them see for themselves!

    The "steps". Again, this is pointless. You don't need to tell people visiting a themes website that they have to choose a theme and then pay for it. It's patronizing.

    Popular themes. Why only 4? This page has got to sell your themes, but you only show 4 of them. Most websites have a bounce rate of 60%, if 60% of your visitors exit on the first page then those 60% will only see 4 different themes. Show them more and it's likely your bounce rate will drop.

    "Customers say". Maybe not pointless, but still takes up too much valuable space.

    Footer. Quite nice, but I don't like the texture. Well laid out, but too "texty" for my liking.

    Spacing. Good in some parts, but terrible in others. Your mid-section looks very clumsy and the text occupies too much space.

    General Comments

    Whilst this is a "nice" design, that's where it stops. It suffers from being very generic, nothing about it screams originality.

    I much prefer the approach of a site like this: http://www.templatemonster.com/drupal-themes.php

    Whilst not great looking, functionality wise it completely trounces your site. I can see a page covered in themes and hovering on them I can immediately get a preview. I can quickly and easily find a theme I like.

    It also provides a great search tool, which you don't have at all, a glaring omission.

    It also straight away tells me costs for buying the theme, getting it installed and owning it exclusively.

    It just works so much better function wise, so much so that I can forgive it for looking a bit dated visually and I don't doubt for a second that site will always generate more traffic and greater sales then yours.

    Yes - that isn't their homepage but that's not what's important, it's the page that comes up when I search Drupal Themes - THAT is what's important.

    That basically sums up my review. Good luck!

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 24, 2010 at 1:34 PM

      "binary logistic regression analysis" - pointless, a waste of time.

      Hey Michael, actually I was doing this and similar analyses on my site for my master thesis research (Marketing) and I really enjoy coming up with cool stuff to test and then geek out in SPSS, and I like to randomly bring it up in conversations hahaha, so thats why I mentioned it. looks like you wrote an awesome review, I will read it completely 2morrow.

    • Michael Gunner
      Michael Gunner commented:
      Posted: on Oct 24, 2010 at 1:36 PM

      Well I guess if you're doing it for practice and knowledge purposes and for education then go ahead, no harm in it. But I think if you do do it, apply it more generally, it sounds a bit tedious just for buttons. I just think in a commercial environment I wouldn't recommend over analysing something :) - look forward to your comments.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 29, 2010 at 9:08 AM

      "hilst we have this gigantic header telling us something we probably already" good call, I agree. It should communicate value instead of a generic description.

      "The "steps". Again, this is pointless. You don't need to tell people visiting a themes website that they have to choose a theme and then pay for it. It's patronizing." But it does clearly delineate the next steps, removing any doubt. And there is also the power of suggestion :)

      "Popular themes. Why only 4?" yes I'll definitely try different setups here. Current bounce rate is only 45% but there is room for improvement.

      "Spacing" After reading all the comments I'm spent some time look at my own design and I agree that I definitely need to put the grid on again and steer this design back on the road.

      "Search" - I only have 8 themes so search would be useless.

      offtopic: Don't buy Drupal themes from templatemonster, they have a reputation for hardcoding stuff in the template and bypassing Drupal's systems - thus rendering the theme useless if you don't want the exact look you see on the screenshot.

      Telling from the temaplatemonster downloads counts on the grid page I sell way more themes than they do. My shop is the #2 dealer (in sales/revenues) in Drupal themes after topnotchthemes.com.

    • Jesper Riijk
      Jesper Riijk commented:
      Posted: on Oct 30, 2010 at 6:49 AM

      Michael, with respect, I think you're wrong to advise against the testing. This is a website trying to sell something and the design is ultimately measured by its results not its beauty. I agree with the whitespace concerns and a ragged left edge is always a risk.

      I have to say however I am not as upset as everyone else about this design. It is a significant improvement over its predecessor and looks way better than the other two drupal theme shops I have seen (fusionthemes and cmsquickstart). The themes look superior to the competitors. Good luck for the future.

    • Michael Gunner
      Michael Gunner commented:
      Posted: on Oct 30, 2010 at 6:55 AM

      Jesper, you're misinterpreting my comments. I'm not saying don't test at all. I am saying that going to extraordinary lengths such as "binary logistic regression analysis" to decide which colour to make the buttons is going way over the top.

      You should test your web designs, but basic A/B testing is easily enough for a site like this and I certainly wouldn't conduct Binary Logistic Regression Analysis to decide which colour to make my buttons - it's ludicrous overkill.

      Jurriaan, cheers for your comment. I do appreciate now search would be a fruitless task. As a side note, I don't use Drupal, I am a Wordpress guy, but I appreciate your comments regarding templatemonster.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 30, 2010 at 7:52 AM

      Of course data doesn't mean anything if there isn't a professionally constructed design at the base. But form there on, stop relying on the hippo! If you don't know what that means I highly recommend this article as an introduction to statistical analysis: [pdf alert] http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.141.474&rep=rep1&type=pdf

      Thanks for your comments guys, all of them are very useful and actionable, and I also enjoy the discussion of gut feeling vs data - and art vs science. I think it takes an artist to come up with creative ideas that engage and interest people but a scientific approach to see how well the idea works in the real world.

      @Jesper thx for the best wishes

    • Michael Gunner
      Michael Gunner commented:
      Posted: on Oct 30, 2010 at 8:10 AM

      My point is obviously not getting across very well, so I shall just leave it, if you wish to conduct such intricate testing to decide whether a button should be blue or whether it should be green then feel free - but for me I would not bother for a site like this, it is to me a waste of time when time would be better spent on more important aspects of the design which are significantly weaker :o)

  • Lisa Tweedie

    Lisa Tweedie

    Rank: 1 Elite

    CF Verified professional

    4636

    • Design: 3
    • Purpose: 2
    • Originality: 1
    • Engagement: 2
    2 Votes
    This review has been awarded.
    Check out the fold-line on your designs

    Posted on Oct 24, 2010 at 2:12 PM

    Hi Jurriaan

    I've commented a bit on some of the other reviews.

    I actually like the design when I see the screen grab on this page but I really didn't like it when I see it implemented on your site. I'm not sure if this is because it has yet to be tweaked.

    Aside from what I said above my further thoughts are:

    • Have you have checked out the fold line on your design? What will punters see in a standard window. I have a feeling it will cut across your text. Your header is fairly large.
    • When I see it on the website the whole page looks too big as though I am viewing it in a magnifying glass ... is there a case for shrinking the whole design so you see more of it (I am usually one for increasing text size but like this it doesn't work for me). I think this is especially the case on the footer.
    • I do think the red & green clash horribly with the blue! I don't really understand why you haven't used the colour scheme from your logo as a starting point for the web-page. Obviously straight use of red and green would make it look a bit christmassy! But how about trying it with a grey skyline (kinda a concept feedback style colour scheme?). It would clash less (You wouldn't be able to use so twitter bird so effectively though). Alternatively maybe instead of sky you could have a green forest header theme ??? Sorry just freewheeling here ...
    • I really dislike the curly brackets - are they necessary?
    • I also dislike the button in the middle of the slider graphic. Maybe it could be attached at the bottom or at the top ... it breaks up the view of the theme and it has an ugly design.
    • On the footer the I think the list of items should line up with the title rather than being offset.
    • I don't think the 1234 works on the product pages ... feels more like a home page thing. I wonder if you could cut it down to 3 steps ... choose a theme, choose a package, pay. Although the other reviewer may be right this may be talking down to your users. Who are they? If they are likely to be people who use theme sites all the time then definitely it is. The stepped approach works for fairly novice users.
    • I would also lose the "Why Choose Super Themes" from the product page.
    • I might consider loosing the Popular Themes slider from the bottom of the product page too. The simpler you can make these pages the more likely they are to consider the important information you do what them to look at!
    • On the Pricing page I would change the title to simply Pricing. Lose the sub heading. On the red buttons I simply have the logo and "join" it is obvious which one they are joining and putting the abbreviated words looks very messy. Again I would lose Popular themes from this page.

    Hope that helps ...

    Lisa

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 29, 2010 at 9:18 AM

      Thx Lisa,

      " If they are likely to be people who use theme sites all the time then definitely it is. The stepped approach works for fairly novice users."

      This is also a point, paid themes are kind of an emerging industry in Drupal and people are not so much used to it. Though a leading wordpress seller that I researched also uses this: http://www.woothemes.com/ so maybe it will still keep working through the power of suggestion even if people already know how the process works.

      I will try removing it from the product page.

      offtopic: I noticed some commented critized me using statistical analysis to judge which design setups work best but I think the data speaks for the customers and what works for the customers is more important than the opinion of professional (including myself), or more aptly said the HiPPO (Highest Paid Persons' Opinion). http://www.google.com/search?q=hippo+highest+paid+person+opinion

      -Will try to redesign the slider buttons thanks

      -

  • Jami Gibbs

    Jami Gibbs

    Rank: 1 Elite

    CF Verified professional

    1810

    • Design: 1
    • Purpose: 2
    • Originality: 2
    • Engagement: 3
    2 Votes
    This review has been awarded.
    Alignment

    Posted on Oct 23, 2010 at 3:22 AM

    Hi Jurriaan,

    I'm following up on what the previous review said about your alignment. I've attached two images:

    1. The first image is showing you where I see alignment issues at first glance (the red lines being the left and right alignment and the problem areas highlighted in purple).

    2. The second image is where I took your screenshot into Photoshop and reworked the items to help you see where the alignment can be improved. I personally wouldn't go with those icon images you've chosen for the "Why Choose SooperThemes?" area but I worked with them to give you a better idea of how they might be implemented better.

    • alignment.jpg
    • mock-up.jpg
    • Jami Gibbs
      Jami Gibbs commented:
      Posted: on Oct 23, 2010 at 7:06 AM

      Just noticed your P.S. regarding the 960 grid system. All I can say is that if you're already using the 960 grid system in your Photoshop layout and you think that everything is lined up perfectly, then you aren't using the 960 grid system correctly.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 23, 2010 at 7:56 AM

      Thanks, I kinda like what you did with wrapping the text abround he icons, it makes the benefits look more wholesome. The downside it that it breaks the flow of the text.

      I don't like what you did to the next steps, now the numbers don't align with the the 4 or 3 column parts of the layout.

      I think everyone uses the grid differently, some people more strictly and some more loosely. It's also never a bad thing to make something stand out by placing it off the grid, like the "next" word of the next steps bar in my original design. Though not appropriate for this design I am a fan of more stric grid designs, such as of course the homepage of Khoi Vinh: http://www.subtraction.com/

    • Jami Gibbs
      Jami Gibbs commented:
      Posted: on Oct 23, 2010 at 8:06 AM

      I can only give you my professional recommendation about website design balance and usability. I want to point out that reviewers have been consistently saying you need to improve your alignment and spacing with this design. I spent an hour this morning doing that for you. I can't force you to change the things that are off. You can take it or leave it. Good luck.

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 23, 2010 at 8:48 AM

      Yes, and I appreciate that! I'm definitely not going to "leave it" - I will take your advice to heart and I'm glad that you took the effort to go into photoshop and align things and I like many of the adjustments but please don't take it personal if I point out something that I don't initially like, maybe I just need to look at it better :)

    • Jami Gibbs
      Jami Gibbs commented:
      Posted: on Oct 23, 2010 at 9:25 AM

      I never take anything personally here. :) I look forward to seeing an update if you have time to post it here again.

    • Lisa Tweedie
      Lisa Tweedie commented:
      Posted: on Oct 24, 2010 at 2:06 PM

      For me their are also spacing issues on the Menu bar at the top.

      Also the worst problem with the icons is the Drupal Expertise icon which sits too close to the text on either side. if you do nothing else change this icon so that it is the same size as the others. Also the Customer Says Photo sits too close to the text.

      I really like the numbered steps but you do need to do some work on the way they are spaced currently (even if you reject the design above). I wonder if working on the font sizes as Jamie suggests above might help?

  • Arnold Koske

    Arnold Koske

    Rank: 2 Titan

    426

    • Design: 3
    • Purpose: 3
    • Originality: 2
    • Engagement: 2
    1 Vote
    This review has been awarded.
    Logo & Header

    Posted on Oct 27, 2010 at 8:48 AM

    Overall site looks great just fix the alignment and spacing issues. Color scheme looks good too.

    However I have problems with the following

    Logo

    Your logo is so out of touch with the general feel of the site. The font, colors and orientation are all wrong.

    Header

    Remove the textured effect on the header. The flat theme slides do not blend well with the textured background

    Finally you don't have to completely throw out your design. Just fix the minor issues and it will be ok.

  • Bryant Maroney

    Bryant Maroney

    Rank: 4 Master

    865

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    1 Vote
    This review has been awarded.
    Margins

    Posted on Oct 27, 2010 at 11:20 AM

    Excellent mockup. However the margins seems to be a little off in areas. - The logo isn't lining up with the text below it, the pricing button..etc. - The shaded area where it states "Next" should align with the rest of the theme. - The footer logo on the right also isn't positions correctly with the header of the theme.

  • Rog Pensax

    Rog Pensax

    Rank: 10 Newbie

    12

    • Design: 2
    • Purpose: 1
    • Originality: 1
    • Engagement: 1
    0 Votes
    the overall look

    Posted on Oct 27, 2010 at 11:56 PM

    The site's a bit overwhelming and its not really enticing visitors to focus on an idea or aim for a particular section. All the concepts are too far away from each other and ease of navigation is lost. The whole page needs a more compact look plus a review of how the colours complement each other. Its got potential and its accessibility and attraction would be great if several changes were made to the layout. The header section is rather big and distracting. I like the footer with its grass, trees and links but again this needs to be somewhat more compact.

  • Ricky Cox

    Ricky Cox

    Rank: 3 Superior

    189

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    0 Votes
    Logo looks too small

    Posted on Nov 02, 2010 at 7:27 PM

    Just one comment, the logo looks a bit too small, it seems to get lost in the layout. Maybe it could be larger and cross partially into the darker blue strip below.

  • Ashish Roy

    Ashish Roy

    Rank: 3 Superior

    436

    • Design: 1
    • Purpose: 1
    • Originality: 1
    • Engagement: 1
    0 Votes
    Logo & Font

    Posted on Nov 03, 2010 at 3:51 AM

    The logo looks a bit cheap and lowers the tone of the layout. Also change the hover color of navigation font & some big font size, other wise the design is not OK.

  • Omar Neusser

    Omar Neusser

    Rank: 10 Newbie

    14

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    0 Votes
    Draft

    Posted on Oct 24, 2010 at 3:03 AM

    Hi & good day,

    From my amateur webdesign point-of-view I may say I find your design very professional and modern. Yeah you said you want to redo the logo. Also I like the grading from blue to light blue to white for the content-bg.

    Keep on !

    bw, Omar K N

  • Cristian Nastasi

    Cristian Nastasi

    Rank: 3 Superior

    387

    • Design: 4
    • Purpose: 3
    • Originality: 3
    • Engagement: 4
    0 Votes
    Draft

    Posted on Oct 24, 2010 at 10:37 AM

    Complimenti molto belli i colori utilizzati.

    Non mi piace molto il logo ma il lavoro generale direi che è ottimo.

    Bravo

    • Michelangelo Cremona
      Posted: on Oct 25, 2010 at 5:31 PM

      Si sono daccordo anche io , a parte il logo che è tutto da rifare io metterei un fondo a nuvole trapsarenti e per quanto riguarda txt e descrizioni inserirei nel CSS => text-shadow: -1px 1px 0px #000;

    • Jurriaan Roelofs
      Jurriaan Roelofs commented:
      Posted: on Oct 29, 2010 at 8:53 AM

      yep it's CSS3 text shadows, if you have any questions about the design feel free to ask but I don't speak italian. CSS text-shadow is not compatible with older browsers so you should only use it for progressive enhancement (meaning that without text-shadow it should at least look decent).

  • David Brena

    David Brena

    Rank: 5 Advanced

    120

    • Design: 4
    • Purpose: 3
    • Originality: 4
    • Engagement: 2
    0 Votes
    Call to action

    Posted on Oct 24, 2010 at 5:33 PM

    I like the overall design and feel...

    Just a couple of things..

    The red in sooper themes seams a bit off

    Also, I think their is no clear which would help out with endgagement.