PSDFan Extra

30 Minute Redesign #100: Skill 7

30 Minute Redesign #100: Skill 7

Today I’m going to be redesigning Skill 7′s website. Skill 7 is a wonderful organization that hosts sports courses, training and events for young people.

It’s also awesome that this is the 100th 30 minute redesign! I can’t believe this series has been so successful and had such longevity. Thanks to all PSDFAN readers for the support. I have a bit of a confession… as this was the 100th redesign, and I was running out of time as there was SO much to fix I actually took 40 minutes on the redesign in total. Don’t judge me! ;)

The Original Design:

You can see the original site design below:

Skill 7

You can check out the original website here: Skill 7

First Impressions: Strengths

Every site has some merits, and the good impressions I made here are these:

Relevant Background Design

The background image on the current design may be fairly garish, but it’s at least relevant to the theme of the site (soccer training).

The bright grassy background is one of the few keys as to what this site is all about. Whilst it’s not a great design feature it does at least help people understand the organization a little better in the site’s current iteration.

Skill 7 Redesign

Unique Logo

One of the better points of this site was their logo. The hand-drawn illustration of the lion stood out as a nice design feature in a site that otherwise falls down in a lot of ways.

The logo is unique, relevant and not badly designed. Currently it helps act as a central point for the design, framing the surrounding content.

Skill 7 Redesign

Explanatory Sentence Attempting to Describe the Site

Whilst the purpose of the organization is far from clear enough, it’s encouraging to see at least an attempt at explaining what the website is all about.

The intro sentence: ‘Skill 7 have been providing PPA cover sessions and after school clubs at the following schools since 1999.’ is nothing if not helpful, and is definitely heading in the right direction.

Skill 7 Redesign

First Impressions: Weaknesses

Of course no website is perfect, and our site’s often make negative first impressions upon readers without us even realizing! Here are the negative first impressions I received from this site:

Disorganized Layout

For me the biggest problem with this site is how disorganized the content is. It’s absolutely overwhelming, in a very bad way.

Not only is there a lot of content (I’ll get to this in my next point) but it’s not adhering to any sort of grid or structure. It seems almost randomly strewn over the page. You look one place and there are logos and badges, another place there seems to be multiple versions of the same menu, another place there is illustrations, graphs and photos.

Each piece of content is out of alignment with every other piece of content, and the result is very jarring and likely to push your visitors away from your site.

Not only this, but the content is not consistent. There is a huge variation in colors, fonts and general design throughout the layout, and this inconsistency only makes the site feel more shambolic and disorganized.

Skill 7 Redesign

Too Much Content

Another huge problem with this site is the sheer amount of content.

You’ll notice in a lot of my redesigns I’ll talk about reducing your content to the minimum of what’s needed. Anything extra detracts from this and will confuse and put off your visitors.

This site is one of the worst offenders I’ve ever seen for trying to put absolutely everything on their front page.

There are logos, sponsor badges, news, events, countless menus (why!?), prominent social media buttons that all clash, logos of schools and more. Not to mention all of this content clashes with a hideous grass texture background.

Remember – subpages exist for a reason! Put some of your key content on your subpages.

When designing your homepage think about what people want from your site? Your main purpose should be to explain what you’re about and to establish credibility. Then you can draw them into looking at your subpages for more relevant info.


Skill 7 Redesign

The Purpose of the Site Is Not Clear

Apart from the background image and that hidden away explanatory sentence there isn’t a lot clarifying what you do as an organization.

I shouldn’t have to search for this information, it should be immediately obvious.

Part of the problem is the huge amount of obsolete content on your homepage, but you also need a clear, informative headline area to explain your organization in a sentence or two for new visitors.

Skill 7 Redesign

My Redesign Proposal

You can see my redesign proposal below:

Skill 7 Redesign

Let’s look at some of my aims for the redesign:

Cleaned Up Content, Made More Organized

My first job was to remove the huge mass of obsolete content from the homepage. This should either be scrapped or if essential moved to a relevant subpage.

Now I could focus on clarifying the key homepage content.

Not only this but no more disorganized page structure! I used a grid based system to ensure all content was well lined up and easier on the eye, rather than placed sporadically around the page. I also opted for consistent fonts, colors and styling.

The result is a more professional overall page that doesn’t push your viewer’s away.

Skill 7 Redesign

I Clarified What the Organization Does

In the original site it’s pretty hard to work out exactly what Skill 7 do.

I made a point of introducing a large welcome banner that explains the organization in a couple of clear, informative sentences for new visitors.

I realize this intro text may not be totally accurate, but I’ll leave it up to you guys to best explain your organization (you know best!).

I also added a nice personal touch by including photos of all the coaches and staff in the background for the banner, making them truly a part of the website.

Skill 7 Redesign

I Established Credibility and Trust

Your website needs to be trustworthy, particularly for new visitors looking to learn more about your organization.

You’re entrusted with young people and physical training and need to appear as credible on your website as you are in the offline world.

In my redesign I achieved this through several methods:

  • Firstly you’d be how great a professional website can be for your credibility, no matter what the content.
  • I included plenty of pictures of your staff and coaches throughout the design
  • I included an area to meet your top coach and displayed his impressive qualifications.
  • I included an optional testimonials area with great feedback from a happy parent.

Skill 7 Redesign

Suggest Your Own Site for a Redesign

You can have the chance to have your website redesigned in next weeks post. All you need to do is leave a comment to this post with your website address and why you think it needs a redesign.

The Benefits of Getting Your Site Redesigned Include:

  • Most obviously – a FREE redesign job!
  • Your website gets exposure to Blogs.FanExtra’s readers
  • You understand how to improve your website. This isn’t just a redesign, it’s a lesson in design principles.
  • You will get emailed the .psd of your redesign to integrate into your site.

The Rules for Submission:

  • The website your submit must be your own website.
  • Your website must not contain any illegal or inappropriate content.
  • Your website must be English language, as otherwise it’s too difficult for me to redesign out of context.

Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

About the Author:

Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

Leave a comment

2 Comments:

  1. poplar says:

    nice

    can you show your redesigns as they would look in any screen width? what would the background be?

    • Tom says:

      That’s something I can consider doing in the future sure. In this case the green bar would likely just extend out to the page edges, and the layout would remain central.

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY