Before I started reviewing your concept, I attempted to do the 5 second test on it. For those who don't know what the 5 second test it, its simply an attempt to identify what the website is about and what it can do for me just by looking at it during 5 seconds.
During those 5 seconds, I was able to tell that this site is about credit, since I focused by eye path on the logo and read "Credit" on the logo. However, besides that, I was not immediately able to understand what this website can do for me and what its actually about, beyond being related to credit.
In terms of the first impression, it was positive. I like the colors that were chosen and font choice. The design is clean and pleasant to look at, you make good use of spacing between elements, and the structure is coherent with navigation elements placed, with a few exceptions, where they should be.
So, without further ado, I'll review each aspect of your concept. I'll try to be straight to the point about where I feel you could improve the design.
1) Header. Your header is great. Its not using too much real estate, the navigational elements are well placed and don't hurt my eyes with too much contrasting elements. The search form is placed where it should be. Perhaps I would change a little bit the color of the copy on the blue navigational bar, since the contrast is a little low there.
2) Central Section In terms of the prime real estate, I feel that you have wasted a lot of space on an image that doesn't add much value to the overall experience. As I've stated in the past, Jacob Nielsen, the usability "pope", always questions the use of "smiling ladies", the name he gives to stock images or other types of images that don't really serve any purpose to explain what the website is about, or that don't really serve any usable purpose. I believe this is the case with the image of the hands holding the globe, as well as the 3 smaller images on the bottom right hand corner of the b&w image there.
Remember, this is the most valuable real estate on your page, and you are sort of "wasting " it with just one piece of copy: "Financial services built on integrity" - which doesn't tell me much about what you can do for me.
However, I do understand that you might need to have such an element on your website to set the tone of what the institution is about, even if by the use of stock images. However, I would swap places with the 3 light-brown buttons on the right hand size.
Those 3 buttons are your main Calls to Action. Its what users can actually do on your website. They can join the Credit Union, Form a Credit Union, etc. So, I would but these buttons on the left hand side of the central section, make them a bit bigger, and make them a bit brighter too. They are buttons, but they don't feel like buttons. I would add some sort slight gradient effect on them in order to ensure users understand they are buttons. The stock images would them move to the right hand side.
3) Lower section In terms of the lower sections of the site, I would raise the position of the E-letter subscription and place that where you have currently included "The CU Movement", which in turn would go where the "About us" is placed. "About us" could go where the E-letter subscription is currently placed. The point is that you need to try to put above the fold whatever is most relevant or useful to users, or whatever you want your users to act on. The more you dedicate prime real estate to those elements, the more results you will get from them.
I would also give more contrasting color focus to the "Success Stories". Its very powerful and gives a lot of credibility to the service. Make it stand out more!
4) Footer. I love your footer. Its very well structured, and the colors are spot on. You get the contrast necessary to read it well, all the information is there, but its clearly a less relevant section of the website. Well done here!
Overall, a great effort. Congratulations.
A few tips:
1) Try to spend more time working on your wireframes and concept first using a tool like Balsamiq. Have your wireframes reviewed here at Concept Feedback before you dive straight into photoshop. Too many designers make the mistake of doing that, and end up wasting pixel-pushing hours on photoshop when they could validate the structure and elements of a concept much more cheaply through a wireframing tool. Once its validated, then you get to the nitty gritty of photoshop.
2) Read up on Conversion Rate Optimization, Personas and Persuasion architecture / copy. This is the road to success in making effective websites.
3) Always use REAL copy when reviewing a concept. Ditch the "Lorem Ipsum" stuff. Its not realistic, it doesn't reflect reality, it gets in the way.
Take care, and submit your next pages for us to review. We're here to help!
@migliari
Hello Maximo, Thanks for your concise yet detailed feedback, really appreciate your time spent on these excellent review write up. Definitely will put them to use.
The best, Amazing
Hello Maximo,
Website is ready for launch now, thanks once again for your reviews. http://www.cuagh.com
| Minor Problem on cua ghana website design layout-less border.png | |
| 1 | Your alignment is a little off center. |
| 2 | Your alignment is off center here too. |
| Serious Problem on cua ghana website design layout-less border.png | |
| 1 | You'll want to consider making this sign up form stand out a little bit more else your users will completely miss it. |
| Positive Feature on cua ghana website design layout-less border.png | |
| 1 | Great font. Clean and professional. Nice choice. |
| 2 | Nice placement of these important areas of the website to encourage your user to click through. |
| 3 | Really great idea to feature a "Success Story". |
Overall I think this is a very clean and well thought out design with a nice push towards positive usability.
I think the design is very professional but it could be improved by making certain sections more engaging for your user like the e-letter subscription form and footer area.
Check out my notes about specific sections for more details.
iJamii
Smart spotting of off alignment, thanks for your notes. Want to share thoughts on how to improve the footer?
Thanks Jami
What I mean about the footer is it could use some texture and/or a little more attention grabbing techniques like an icon for each section or background pattern.
Check out these footer examples to see what I'm suggesting (not that you should do exactly what they're doing but rather see how their footers are much more engaging):
http://tiny.cc/rsikg
http://tiny.cc/rk6rm
Hello Jami,
Website is ready for launch now, once again thanks for your reviews. http://www.cuagh.com
| Minor Problem on cua ghana website design layout-less border.png | |
| 1 | Final banner treatments need to be extremely rich photography |
| 2 | Some key information is below the fold (Members Say..., Success Stories E Letter Sign-up) These elements maybe the most persuasive element (they establish trust, and are clear engagement opportunities). Maximo pointed this out in the 5 second testing... |
| 3 | perhaps too many items in this footer |
| Serious Problem on cua ghana website design layout-less border.png | |
| 1 | This central object paths the visitor to their discreet call to action. The banner to the left of this central object needs to trigger an emotion that connects to a large audience. Growth and Integrity is a common theme - but you may want to explore other themes like credit union membership principles (there is fundamental business model difference to the commercial bank model) |
This is a solid visual design - and I completely agree with Maximo Migliari's review.
You need to pare back to a lower fidelity wireframe (using Balsamiq Mock-ups or MockFlow) to explore how to "express" the value proposition of Credit Unions.
Do more wireframes - based on patterns In this pattern example (Nonprofits as networks of help - Pattern Group A). You may benefit from understanding the inter-relationships between this pattern and other associated patterns. I use this quite often for inspiration.
Good start - keep going!
Dear Micheal, Thanks for the links as always, very profound of you. I appreciate the notes too and will work on it to keep going.
A
Dear Micheal,
Website is ready for launch now, thanks once again for your reviews. http://www.cuagh.com
My pleasure.
| Minor Problem on cua ghana website design layout-less border.png | |
| 1 | I like this tag-line, however for consistency I would cap the 'b' on the word built |
| 2 | again, I would cap the 's' on the word say |
| 3 | move this above the actual quote |
| 4 | I agree that these stock photos don't add much to what the site is wanting to convey.I do like the photos below of the people smiling. I know it's a little hoakie, but pictures of smiling people always gives a warm fuzzie feeling especially when it comes to finances. |
| 5 | I agree that this section should stand out more. The red button wouldn't be my color pick either. Red is associated with being negative especially for financial institutions. No one wants to "be in the red"... |
| 6 | use big quotes here |
| 7 | use big quotes here |
| 8 | these could stand out a little more. either with a different color background, or some indentation. not sure what exactly, but something to make them 'pop' more |
| 9 | possible move into footer? |
| 10 | change the red to a more positive color |
| Positive Feature on cua ghana website design layout-less border.png | |
| 1 | Love this footer! |
well hello Amazing - overall great looking concept. I don't have too much more to add to the reviews already posted.
please see my notes...
Nicely done!
:-)
Hi Rebecca,
I couldn't agree more on your color spot, I do appreciate your notes, excellent suggestions and worth putting to work.
All the best Rebeca, thank you. A
Dear Rebecca,
Website is ready for launch now, thanks once again for your wonderful reviews. http://www.cuagh.com
| Positive Feature | |
CleanThe site is very clean with ample padding around all the elements. Nice work. | |
PicturesThe pictures in the About Us and CU Movement section work well. | |
| New Idea | |
More Color to 3 Credit Union BoxesThese boxes fit will in the space, but I completely bypassed them due to their pale color. Spice these boxes up a bit with either colored icons or a complimentary color to the blue. | |
Add Another CatchphraseI see that it's a credit union and you're built on integrity, but what else? I'd come up with another descriptive statement to place under the main image and above the About Us and CU Movement sections to maintain the users attention. Tell them a little more so they dive into the About Us next! | |
Great job with this design and layout. It's very clean and has a good flow. I tried not to duplicate the other reviews so there are just a few minor tweaks to consider.
Hello Andy,
Website is ready for launch now, I really appreciate your reviews and thanks once again for your insights. http://www.cuagh.com
Looks great! Nice job!!
| Minor Problem | |
More with lessI think you have too many content sections on this page. Instead I would allow the user to dig deeper for non critical content like About Us and Latest News. By reducing the content the user can focus on the call to action butons on the right. Once there at those pages give the content. And content that converts the user to your goal. | |
| Positive Feature | |
Call to actionI think your call to action panels on the right are good. I would like to see the boxes pop a bit more, perhaps a 1px matching blue border. | |
Overall a nice design, however it does not seal the conversion for me just yet.
Hello Michael,
Website is ready for launch now, thanks once again for your reviews. http://www.cuagh.com
| Minor Problem on cua ghana website design layout-less border.png | |
| 1 | All Capitals? Conside using similar style to "Latest News" |
| Positive Feature | |
| Professional design | |
| New Idea on cua ghana website design layout-less border.png | |
| 1 | Quote of the day could be more fun? Nice idea |
Great work overall!
Dear Luke,
Website is ready for launch now, thanks once again for your reviews. http://www.cuagh.com
| Minor Problem on cua ghana website design layout-less border.png | |
| 1 | I think the footer is too busy |
| 2 | not centered |
| 3 | not centered |
I like the design. Great job.
Hello Mircu,
Website is ready for launch now, thanks once again for your reviews. http://www.cuagh.com
| Minor Problem | |
Tag lineThe tag line "Financial Services built on Integrity" is a bit ambiguous, because people scan instead of read it's important to a main message and one that can be easily categorised in a persons mind. | |
Red as a action colourRed can be interpreted as a danger colour, thus does not tend to be used as a way to identify primary actions on the page. The other thing is that blue is also you action colour, i.e menus and links. Keep in mind that you can use queues such as position, shape, colour, texture and other treatments to identify actionable elements. | |
| Serious Problem | |
Accessibility colour selectionIt might be an idea to check the colour contrast of the light grey text on white and the grey text on the green/beige background for accessibility. This could also be an issue around form input boxes and labels. | |
| Positive Feature | |
Tasked based navigationNice navigation based around tasks (e.g. Form a Credit Union). | |
Safe designA nice hybrid web/web 2.0 design | |
Standard looking website, safe colour selection. Nice navigation based around tasks (e.g. Form a Credit Union). Keep in mind though that people don't always find you from the home page.
Dear Lee,
Website is ready for launch now, thanks once again for your wonderful reviews. http://www.cuagh.com
excellent review!