I have started to redesign a local NGO's website as a side project. The motivation behind this is to practice approaching UI design in a way taught to me at Interaction Design Foundation, where I currently study UI and UX design. I'll be handing over the result to the NGO upon its completion for free if they are interested in having it.
This is part 1 in a 10 part series. In this post, I will be covering the home page and sharing my thoughts on the current design as well as showing the design I made based on those thoughts. You can scroll to the bottom for the final result if you don't care about the process.
The old header & slider
The first thing the user sees when visiting the site is the header. My thoughts for the current one are:
- The first thing I see is social media icons because most people read from left to right. It's an uncommon place to put social media icons as they usually are of secondary importance to the actual navigation of the site.
- The logo is quite large and composed of too many elements. The branding could be simplified because a simpler brand is better memorized by people.
- The color used for the top bar of the header is off-putting. It's a sort-of brown-beige mix that's neither friendly or professional. It doesn't even match the logo color.
- The contrast for the navigation items is really bad. It only scores 2.09 WCAG.
- There's a quote in the middle of the header in a font type that's very hard to read. I'm also not sure what does it intend to achieve. I understand the quote aims for compassion and urgency to help those who can't help themselves, but it comes off in poor taste.
After seeing the header, the user is greeted with this slider:
My thoughts on the slider are:
- Sliders don't work well as a masthead. Masthead should capture the person's attention with information, but sliders hide information behind a delay or an action (arrows or dots for navigation) which the user may not even use, so there may be slides the user won't even see.
- This particular slide has a captivating title, but no action to follow it. The slide itself isn't clickable and there's no button or link either.
The new header & masthead
With the thoughts gathered above, I've redesigned the header and the masthead to be one unified thing. I've chosen friendlier colors with better contrast ratios as well as made the logo smaller and easier to remember. The masthead now captures the person's attention with actual information and has a call to action button for those who might wish to donate (The donation page will be a separate part in this post series) as well as a call to action link for those who might want to volunteer (will also be a separate part in this post series).
While volunteers are also very important for the organization, it doesn't pay the bills. Thus, donating is of higher priority than volunteering, which is signified by their difference in contrast and size they occupy on the screen. The entire feeling of the current website is very sad and pessimistic, so I changed that to have a more optimistic vibe, with brighter colors and a little added playfulness with the squares floating in the masthead's background. Tiny details matter.
Call to action followed by another call to action
After the header and the slider, the first thing a user sees is a call to action section. Remember; the website still hasn't informed the user about what exactly it is they do yet this is the second time they are asking for money. Thoughts:
- The spacing of this section is quite bad with uneven spaces between the blocks of text and buttons.
- There's an odd border right at the top of the two calls to action buttons that do not fit there.
- The buttons themselves are too far apart from each other with questionable color choices. Which of them is supposed to be a primary and secondary action? I can't tell.
But what if I told you that this call to action section is followed by a second call to action section?
That's right. This time it's a banner image urging people to call and donate money to their cause. There's nothing wrong with asking money and especially if your cause is helping those who can't help themselves, but asking money without telling us where the money goes comes off insincere. You don't want that. You want to build trust and confidence.
Replacing the call to actions with information
Instead of asking for money in two subsequent sections, I decided to remove those sections and instead inform the visitor what it is that this organization does. Now the truth is that the logo already sort of says what they do, but it's ambiguous and open for interpretation. This section will clearly outline in 3 steps what the organization does.
I then follow that up with a section on who is behind this organization and why they do what they do. This is so that the visitor would form a more personal relationship with the organization through directly seeing the people behind it. The visitor can then dive deeper into the team or their mission by following the call to action buttons. I've made these blend in with the background because this information isn't of primary importance.
Removing the unnecessary bits
After the sections mentioned above, we are greeted with some sections that aren't quite needed and some that don't even make a lot of sense.
- While it's great this organization has news because it often indicates to the user how active the organization is as well apart from the news themselves, I don't think they need to be on the front page here. This is secondary information in its importance.
- The color choices and spacing here are very off-putting. The colors aren't friendly nor professional and the spacing is uneven.
- The "load more posts" button takes up way too much screen estate.
This is a section of video ads. Thoughts:
- While these are great for the medium of video (say for advertising on TV or YouTube), I don't see how having ads on the organization's website that these ads promote serve any usefulness.
- If these ads do anything at all then it's to, again, tell people to donate money.
This is a section that .. doesn't make a whole lot of sense to me. Thoughts:
- The left part I have no idea about. What is that?
- The rest of it seems to be about a TV series that's about animals made by a different organization? I can't quite tell what this section is trying to tell me.
This is a section of motivational quotes. Thoughts:
- I suppose the purpose of this is to turn a visitor into a donator or volunteer, but it comes off tacky and unprofessional.
And yet another call to action section. Thoughts:
- Like I've said above, this website has an overall pessimistic feeling to it. This call to action section is a perfect example of why; instead of presenting you with a hopeful message, it tries to guilt-trip you into donating money which is an awful way to get any help at all whether it would be online or offline.
- So many call to actions on the page gets the visitor overwhelmed and gives them a feeling of being pressured into making that action, which makes the user less likely to make that action.
The old links section
This is the "links" section. It's here to further educate the visitor on the matters related to the organization. Thoughts:
- The image on the left doesn't apply for each of the links here.
- Inconsistent spacing creates an uneven feeling. The typographical choice here to align all of the content to the middle has a poor result on readability.
The new links section
The redesigned section features a more captivating title and a paragraph that says right away what we're dealing with. Each of the links features a relevant image to them, making them unique and relatable as opposed to the bare icons the design had before.
The old sponsors' section
The sponsors' section is important. It tells companies that they can associate their brand with a positive thing; such as helping those that can not help themselves. It's a win-win situation because the organization gets the much needed financial help and the company gets publicity. Thoughts:
- As is a trend with this poorly executed website, the spacing is uneven in a lot of ways making the entire section seem unprofessional.
- The title of this section makes it seem that this is a rock bad. Or if, as I'm guessing, this title was meant as a hell-to-the-yeah, it's a bit childish.
- Having a row of company logos, then a row of statistics, and then again a row of company logos is inconsistent and odd.
- I don't think mixing numbers with sponsors is such a good idea. The idea of this section is to see what brands or companies are supporting this organization to either build trust or make you, a company owner, want to be one of those companies. The numbers of the organization should be on the sponsorship or donation pages, where the visitor is guaranteed to be interested in them.
The new sponsors' section
I've completely removed the numbers from this section as well as updated the title and added a paragraph to it. This highlights clearly that the organization is thankful for the companies sponsoring them and encourages others to do the same. It shows boldly the companies who do already sponsor them as well as have a call to action for becoming a sponsor yourself.
The old footer
- It has a Facebook "like" widget on the left, contacts in the middle, a logo, and an awful lot of uneven spacing as well as, of course, the unfriendly color choices.
The new footer
I've made it much smaller in height as well as used the friendlier color choice I also used for the header and masthead. The social media icons that you previously saw in the top left of the header you now see on the right side of the footer. The embedded Facebook widget is removed and the contact info moved under the Contact page.
Putting it all together
To put all of this together, we get a design that looks like this:
Much better right? I think so. If you're interested in more, check out part 2.
Get the latest posts delivered right to your inbox. You can even start a discussion with me to let me know what you think, if you want, of course.