6 Research Ready Websites

July 24, 2014

A Case Study of Non-Profit Research Organization Websites

Take a look at these 6 non-profit research organization websites and learn how each of them incorporated some must-have design elements.

1. SRI International 

The 10 things we love about this website are:

1. The home page image gallery. The gallery grabs visitor’s attention by displaying interesting photographs.
2. Text is used in the gallery slides. Using actual text on each slide of the gallery instead of just images allows search engines, like Google, to find and index the content and makes the information searchable on the website.
3. Links in the home page slider. The buttons and heading text in the gallery slides are linked to blog posts, giving the reader a simple way to access the whole article.
4. The categorized research image grid. Just below the image gallery there is a block of photographs that help communicate how the company has categorized their research. This visually pleasing element on the home page also provides quick and easy access to their research.
5. Legible fonts. When designing the site, they used easy-to-read fonts that enhance communication.
6. Simple navigation. The navigation is really clean and not complicated for such an involved site.
7. Great sidebar content. All of the pages on this website have secondary information housed in the sidebar, providing the reader with a further reading option that keeps them engaged on the site.
8. Inclusion of news and featured projects sections. On some of the pages there are “News” and “Featured Projects” sub-sections that engage visitors and keep them on the site to read more.
9. Social media icons. The site also has social media icons in the footer that allow for easy sharing of information across a range of social media websites. The icons are also color matched to reinforce the organizations brand identity.
10. Newsletter signup. The small, uncluttered footer also features a newsletter signup. The signup has only one field where visitors are asked to enter their email address, making the process fast and easy.

2. Donald Danforth Plant Science Center 

This site meets our design standards because:

1. It displays professional photography. The large image sliders on the homepage of this site contain beautiful, professional photographs that you’ll see used throughout the site as header images on each page.
2. It’s easy to navigate. The breadcrumb navigation keeps the reader informed of their location of the site at all times. The fast response of the menu animations when the visitor hovers over a menu item is also nice. This gives a visual cue as to where the user is pointing the mouse.
3. It uses the sidebar to feature important items. The left sidebar of the pages in this site provide readers with access to further readings either through expandable navigation or by clicking on one of the featured articles or videos.
4. It features branded social media icons. The branded social media icons in the footer of this site add a nice touch to the design.
5. It uses a professional style sans serif font. This makes it easy on the reader’s eyes, especially when reading large amounts of text.
6. It has a call-to-action button. Although quite subtle, there is a “Donate Here” call-to-action button on the homepage of this site. Many non-profit organizations include these types of buttons on their website, but this site displayed it very tastefully. The button grabs your attention, but not in an alarming way.

3. American Diabetes Association 

This website is research ready because it includes:

1. Large, contemporary sized fonts that make the site really easy to read.
2. A creative homepage gallery. Unlike a regular homepage slider, this gallery exhibits unique transitions between articles by requiring the visitor to click on the plus icons in the lower right corner of the smaller boxes. Upon clicking on the “+” symbol on a small box, the boxes animate and rearrange to show the article you clicked on as the big image. Then, when you click on the arrow on the big version, you are transferred to the full article.
3. Unique sub-navigation. Upon clicking on a main menu item, a unique behavior is enacted to display sub-navigation. The layout makes it really easy to find what you’re looking for without the navigation jumping all over the place.
4. Large, professional and friendly images grab the visitor’s attention and makes the site appear upscale.
5. A newsletter signup and social media icons. These two features allow for quick information gathering and assist with easy social sharing of content.
6. A Blog! It’s a great place to share research updates and teach readers about new discoveries.
7. Call-to-Action buttons. A large red “Donate Now” button and a large yellow “Become A Member” button are easily recognized at the top of the pages.
8. An easy-to-read layout. A large width main column with generous padding on the left and right, as well as generous padding between paragraphs, eases readability.
9. Additional articles for further reading. Visitors stay engaged after scrolling down to the bottom of the website pages where they’re met with a listing of additional articles to read.
10. Secondary footer navigation. The large footer provides an additional option for navigating the site.

4. National Multiple Sclerosis Society 

A few great elements of this site include:

1. The HUGE image slider. And I mean really HUGE! Visitors to this site are greeted with a big image slider showcasing large, friendly images with call-to-action buttons on top to grab the readers attention.
2. A bold color palette. The orange and blue buttons and text against the white background draws the visitor’s eye to key click-points in the site.
3. Big, bold navigation. A visitor will always know their exact position within the site.
4. White space. Spreading the page elements out in an open grid helps with communicating a lot of information without the user feeling overwhelmed.
5. An abundance of call-to-action buttons. A large number of call-to-action buttons are used throughout the site, but their consistent, simple look keep the website looking clean.
6.  The “Discover More” section. At the bottom of each page there are additional articles listed to keep the visitor engaged and to promote further learning.
7. Color-matched social media icons. At the bottom of the page, there are branded social media icons that keep information about the organization flowing on other platforms.
8. The “Stay Informed” button. This button takes visitors to a page where they can create an account to receive mailings and other communications from the non-profit organization.
9. The “Make A Donation” button. As a very important call-to-action, this button is persistently visible to readers in the header of the website
10. It’s responsive! This site can collapse and transform to display optimally on any device, including desktop computers, tablets and mobile phones.

5. American Cancer Society 

We believe this site is well-designed because:

1. It uses large imagery and statistics to grab attention.
2. It includes a large “Donate” call-to-action button in the upper right corner of every page.
3. The navigation is easy to understand. The color coding of each section makes it easy to know exactly where you are within the site at any time.
4. Three blog posts are promoted on the homepage. Just under the navigation bar are three images accompanied by preview text that link visitors to the full blog post articles.
5. Blog posts are categorized. The blog is separated into categories which makes it really easy to navigate and find articles related to topics of interest.
6. Secondary navigation is available in the large footer.
7. Social sharing icons are displayed on every page. Above the donate CTA are icons for Facebook, Google +, Twitter and YouTube, which help the social reach of the organizations message.

6. Shriners Hospital for Children 

This website caught our attention because:

1. It’s clean and organized. A generous use of white space makes it really easy to read and comprehend the information.
2. It uses fun, animated icons in the navigation bar.
3. It features large, emotion grabbing images in the homepage slider. The colorful images accompanied by bold text and call-to-action buttons in the slider compels visitors to donate or send a loving message to one of the children.
4. The large, fun fonts are aesthetically pleasing. The use of large, fun, sans serif fonts for titles throughout the site engage visitors and make the content easy to read.
5. Tons of professional photos coat the website and pull on the visitors emotions.
6. Social media icons visible in the footer make it easy for visitors to share content.
7. It has an email newsletter signup section in the footer. Signing up is super simple by only requiring visitors to enter their email address.
8. There is a unique patient portal feature. This allows patients to log in to the site and safely and securely view their healthcare records.
9. Visitors can watch videos. In the research section of the site, a YouTube video is embedded on the page, filling the entire screen.
10. Success stories can easily be found. The site is designed to make it really easy to navigate to the success stories through the research and patient care sections of the site.