1

Democracy Reporting International Website

Request for Quotations

Bids can be submitted until 30 August 2020 by email to tender@democracy-reporting.org. Questions

can be addressed beforehand to the same email address.

1. Objectives

DRI is searching a supplier to develop a new version of the DRI website, based on the criteria set out

in this Request for Quotations and in Annex 1.

2. Background

Democracy Reporting International (DRI) is a non-partisan, independent, not-for-profit organisation

registered in Berlin. DRI promotes political participation of citizens, accountability of state bodies,

and the development of democratic institutions worldwide. Our headquarters are in Berlin and we

have offices in seven countries. Each of these country offices work in local languages in addition to

English.

DRI strives to provide relevant and timely information on democratic topics and political

developments. The organisation’s website plays a critical role in ensuring this. To make DRI’s website

more efficient and effective, we wish to improve the usability and attractiveness of our online

platform. The current version of the website runs on WordPress.

3. Requirements

The proposed implementation will be made in replacement of existing website features.

The new website should be developed using existing and well known free and open-source web

Content Management System (CMS), preferably using LAMP (Linux, Apache, PHP, MySQL)

technologies. All pages in the website should be created and administered using the functionality of

the CMS.

The CMS should provide the basic functionality of different content types, content categorization,

multi-level menu system and content hierarchy with unlimited depth and size with breadcrumb

functionality, configurable user roles and profiles, various access control restrictions (user roles, IP

addresses, email), multi-user content creation, publication and editing, descriptive SEO friendly

URLs, advanced search, content revision control, access statistics and logging, file management, and

caching and feature throttling for improved performance.

The website should be developed following the Responsive Web Design approach to allow web

pages render well on a variety of devices and window or screen sizes.

3.1. Functionality

The proposed solution for the new DRI website will include:

2

• Implementation of a new website based on well-known open-source CMS, providing

functionalities of creation, publication and editing of articles with different content types,

content categorization, multi-level menu system and content hierarchy with unlimited depth

and size with breadcrumb functionality, configurable user roles and profiles with various

access control restrictions, multi-user content creation, descriptive SEO friendly URLs,

advanced search, content revision control, access statistics and logging, file management,

and caching and feature throttling for improved performance;

• Implementation of a website including tools for running a group of affiliated sites (sections)

from one CMS backend, allowing to share themes, content types, users, users groups,

content, and configurations across the sections;

• Implementation of a website including tools to accommodate multi-language content and

support for language negotiation;

• Implementation of a new responsive, mobile first design for the website.

3.2. Basic system requirements

The development should be done based on the open source CMS, preferably using LAMP stack,

using PHP with Active Support Status (7.3 or 7.4 at the moment of writing).

• Site content items and navigation elements entirely managed via the CMS backend and

conform to W3C Standards:

• The webpage should pass W3C XHTML 1.0 Strict Markup Validation;

• Be cross-browser compatible (latest versions of Chrome, MS Edge and Firefox);

• Be Unicode compliant.

3.3. Design and usage

The new website will:

• Present content in a unified, visually compelling, and easy-to-use interface, utilizing templates for consistent branding and visual design;

• Be flexible, agile, and adaptive enough to carry through a product lifecycle of approximately five (5) years;

• Be accessible to search engine spiders and be created with good on-page SEO;

• The changes will be done in accordance with DRI visual identify guidelines (in the development in the moment of writing).

3.4. Usability

The system will provide simple front- and back-end user interface; users should be able to arrange their tasks by intuition, i.e. without the need of consulting user manuals or other expert users; usability should be leveraged by a high degree of interactivity and user assistance.

4. Timeline

Roll-out of the new website should be completed by the end of 2020, in accordance with the deliverables below.

• Research, discovery and planning phase (expected start on September 15, 2 weeks) • Design phase (expected start on October 1, 2-4 weeks) • Content mapping, migration and assembly phase (expected start on October 1, 2-6 weeks) • Development and programming phase (expected start on October 1, 6-12 weeks) • Beta testing, review and trainings phase (expected start on November 16, 2-4 weeks)

3

• Site launch (planed for December 15-25, 2020) • Maintenance of the website from 1 January 2021 until 31 December 2021, renewable for two

years until 31 December 2023. Alternatively, the bidder can present an Agile (time-boxed iteration based) release plan, aimed at meeting the deadline of December 15, 2020, mentioning the previous milestones in the estimated release plan.

5. Deliverables

The supplier will deliver, in accordance with the above timeline:

5.1. In addition to the finished website corresponding the requirements outlined in Annex 1, the supplier company will produce appropriate deliverables for each phase:

• Design mock-ups, storyboards agreed with DRI to effectively communicate the user experience of features to stakeholders, to be used for review and iteration;

• CMS System architecture and infrastructure description documentation;

• CMS Templates, including the CSS and JavaScript Components;

• CMS Installation Manual;

• Major user dialogs and the control flow;

• List and description on background tasks (if any);

• The community or custom Modules used or developed;

• A usability plan to establish a structure for conducting usability test, interactive prototypes to test on real users, and a usability report that reports on the findings of the test.

5.2. The supplier will further deliver:

• CMS source code, including any third-party or custom modules or extensions;

• Site theme source code, including all the templates, CSS and JavaScript Components;

• A release plan, describing all the system components, their dependencies, as well as the deployment sequence and any known issues together with appropriate workarounds;

• Facilitate mapping and migration of the information from the existing DRI website to newly developed CMS.

5.3. Throughout the scope of the project and as part of its maintenance work, the bidder will:

• Guarantee secure and high-performance operation of the environment, website and

applications, by updating the software environment and regular checking of the

system status, including but not limited to updates and upgrades to the Operating

System, LAMP stack, CMS core and extensions.

• Operation of a server monitoring and process supervision tools to ensure prompt

reaction to failures or performance issues.

• Operation of a ticketing system for server and website support, including 3 priority

levels (Business critical, Degraded service and General issue) with appropriate

response times for each level.

6. Qualifications of the bidder

The bidder should:

• Demonstrate a solid understanding of user-centred design principles and experience creating web designs incorporating user testing;

4

• Demonstrate excellent visual design skills and be up to date with trends in visualcommunication, especially web design standards, User Interface patterns, and datavisualization;

• Demonstrate knowledge of the principles of responsive web design for delivering content tomobile devices, for example flexible grids, flexible images/media, and media queries;

• Demonstrate the ability to integrate accessibility throughout design;

• Demonstrate proficiency with:o W3C standards;o Design tools for examples: Adobe CS package;o PHP, MySQL, JavaScript, AJAX;

• Demonstrate proficient experience with well-known open-source CMS, includingdemonstrated experience with highly customized systems;

• Demonstrate experience in migration of data into CMS utilizing different external sources (e.g..csv file, SQL database, XML/JSON source, etc);

• Have recent experience in successfully performing similar services, preferably withinternational organizations, governmental structures or large non-profit organizations;

• Key personnel working with DRI (e.g. the project manager) will have at least five (5) yearsrelevant experience with similar projects. Other personnel will have at least three (3) years ofrelevant experience.

7. Information requested from bidders

Portfolio

• Proven experience and track record of projects of similar size and nature, to be demonstratedthrough portfolio of existing/past clients and incl. URLs of past work;

• Proven experience with development of a similar project using open-source CMS, includinggeneral information on used CMS (versions, community and custom modules or add-ons).

• Experience with governments, international organizations or large civil society groups;

• Demonstrated familiarity with similar projects;

• References that include the names, contact names, phone numbers, and addresses oforganizations with whom the respondent has previously contracted to provide similarservices.

Project proposal

The offer should contain a project proposal which should include the following:

• The bidder should submit a preliminary project proposal for the transformation of the new DRI website, in accordance with the outlined Website Objectives, Requirements, Deliverables and Time Schedule.

• Describe in detail how you would create and test the design requirements including proposed timeline, development plan/stages, technical plan, and deliverables;

• Describe your methods for integrating stakeholder and user input;

• Fill out the Financial proposal form in Annex II.

Profile

• Name, address, email, phone, website;

• Years in business/years of experience;

• Form of ownership, any parent company or subsidiaries, no. of employees;

5

• CVs of the team members who will be deployed in the project, including responsible web designers, front- and back-end developers, and project manager;

• Any relevant certification.

Annex I A

Democracy Reporting International Website

Annex 1 – Functional Requirements

1. Requirements

The website should be developed using existing and well known free and open-source web Content

Management System (CMS), preferably using LAMP (Linux, Apache, PHP, MySQL) technologies. All

pages in the website should be created and administered using the functionality of the CMS.

The CMS should provide the basic functionality of different content types, content categorization,

multi-level menu system and content hierarchy with unlimited depth and size with breadcrumb

functionality, configurable user roles and profiles, various access control restrictions (user roles, IP

addresses, email), multi-user content creation, publication and editing, descriptive SEO friendly

URLs, advanced search, content revision control, access statistics and logging, file manager, and

caching and feature throttling for improved performance.

The website should be developed following the Responsive Web Design approach to allow web

pages render well on a variety of devices and window or screen sizes.

2. Functionality

Multi-Site, differentiated by the URL

The website structure should provide tools for running a group of affiliated sites (sections) from one

CMS back-end, allowing to share themes, content types, users, users groups, content, and

configurations across the group of sites.

The implementation should allow functionality of the following main groups:

Global (eg. https://democracy-reporting.org/) – an overarching website, representing the the Head

Office of the organization.

Country Office / Programme (eg. https://democracy-reporting.org/CC) – the separate spaces for

publication of webpages by the Country Offices of the organization. The CMS should provide

possibility for users for Country Office will be responsible for the content of that particular Country

Office. The CMS should provide separation for users of one Country Office section from interfering

with the publications of other Country Offices.

Multilingual Localization

The CMS should provide functionality for website users to configure languages and apply languages

to content published for website visitors. The following languages should be supported: English

(default), French, Arabic, Ukrainian, Urdu, Sinhalese, Tamil, Burmese.

The default language and the language of the Global section of the website should be defined in

English language.

Each Country Office section should be able to present information to visitors in several languages

from the list (eg. English, French and Arabic).

Annex I B

The CMS should also provide the multiple language support for CMS Admin panel.

User Roles

The CMS should allow Group/Section based permission systems, accommodating separation for

users of one Country Office section from interfering with the publications of other Country Offices

The following user roles should be defined for website’s Global section:

Global Administrator – role that performs Management of the CMS, Template Management,

Language Management, Global/Country Office section Management, Category Management, etc.

Global Editor – role that is allowed to Manage Users on Global section, Manage Publications on

Global and Country Office sections, Manage Categories on Global and Country Office sections.

Global Author – role that allowed to Create content for Global and Country Office sections.

The following user roles should be defined for website’s Country Office / Programme sections:

Country Administrator – role that performs Management of Users, Languages and Categories on

that particular Country Office section.

Country Editor – role that is allowed to Manage Publications on the particular Country Office section

and Nominate Publications for Global section.

Author – role that is allowed to Create content for that particular Country Office section.

Content Types

The CMS should be able to provide functionality for different content types with pre-defined

collection of data elements, which relate to each other by an informational context, to be served to

the website’s visitors.

The CMS should allow (but not limited) the following content types:

Static Page – simple page for creating and displaying information that rarely changes, such as an

"About us" section of a website. The Static Page should allow display of formatted text, images,

embedded videos, attached downloads, etc.

Story/Publication – a page for creating and displaying content that informs or engages website

visitors, reserved for pages like Press releases, Site announcements, etc. The story should allow

display of large header image with appropriate description, information on the author(s) of the

Story, body of the story with formatted text, short excerpt, images, embedded videos, attached

downloads. The Stories should have capability to be categorized by predefined categories with

possibility of displaying the related Stories/Publications from that category. In addition to the

described fields, the Stories should provide possibility of displaying which predefined donor

organization the particular Story or Publication was developed with.

Event – simple page for creating and displaying on the website the information on events organized

by the organization. The Event page should allow display of event date, location, formatted text,

images, embedded videos, attached downloads, etc. In addition to the described fields, events

Annex I C

should have capability to be categorized by predefined event categories, with possibility of

displaying the related events.

Featured Story – special type of the story, reserved for Major Events or Projects. Designed in a

flowing “one page website” format, with possibility of adding special blocks on demand, with

background color separation, static background images and different titles for each block and the

body of the block with the formatted text.

Donor page – similar to the Static page, simple page for displaying information on particular donor

organization. The Donor page should allow display of donor logo, link to the donor website,

formatted text, images, embedded videos, attached downloads, etc.

Content Revision

The CMS should provide Revision feature allowing content to be updated and edited after initial

publication with tracking of changes made to files by individual users.

3. Themes The website should have the visual themes (views) defined for displaying corresponding Content

Types and automatically generated landing pages for the Global section (default homepage), and

Country Office / Programme’s.

Views

The views are presented using the Blocks they are comprised of. The following Views should be

implemented:

Home Page – the default index page of the website, containing Header block, Main Story, Secondary

Story and More Stories blocks, and Footer Block for the Global section. The Stories in the Home page

should be displayed automatically based on the categorization type that promotes the story into

either Main, Front Page (Secondary) and More Stories.

Country Office / Programme Landing page – the default landing page of the Country Office section,

containing Header block, Secondary Story and More Stories blocks defined for that particular

Country Office only, and the Footer Block for the particular Country Office section. The Stories in the

Country Office / Programme Landing page should be displayed automatically based on the

categorization type that promotes the story into either Front Page, or More Stories.

Static View – reserved for the Static Page content type, containing Header, Side Menu, Body, and

the Footer blocks displaying information of respective Global or Country Office.

Story View – reserved for the Story/Publication content type and displayed in a form of a blog post,

containing Header and Side Menu blocks, the Body block with the header image and author

information, Donor block, if any donors present in the Story, and the Footer block displaying

information of respective Global or Country Office.

Featured Story View – reserved for the Featured Story content type, displaying the Header block,

Body block, containing one or more Partial Element Blocks, with respective backgrounds and

content, Donor block, if any donors present in the Story, and the Footer block displaying information

of respective Global or Country Office.

Annex I D

List View – reserved for displaying Search results, Event list or Donor list, containing Header,

Advanced Search (if search result), List and Footer Blocks displaying information of respective Global

or Country Office.

Blocks

The display blocks are used to describe the views. The following blocks should be defined for the

website:

Header Block, containing organization’s Logo, Main Menu elements with their sub-components,

language switcher, and a search box. Header Block should automatically collapse when accessed

using devices with small and medium screens, displaying only the Logo and a button, containing the

rest of the elements.

Breadcrumbs, indicating the current page’s location within a navigational hierarchy that is generated

automatically. Breadcrumbs block should automatically collapse when accessed using devices with

small and medium screens, displaying only the a drop-down button, containing the location

information.

Footer Block, displayed on the bottom of the page, containing form for the Newsletter subscription

and associated links and buttons, Contact information, links to Static pages,(eg Ipmrint, Privacy

Policy, Countries of operation, Team), buttons with the Links to Social Media sites (eg Facebook,

Twitter, YouTube, LinkedIn), and Secondary Menu elements. The Footer block should be

distinguishable from the the rest of the page by darker background color and light text color. The

elements in the block should be displayed in three columns, which should collapse into stacked on

top of each other when accessed using devices with small and medium screens.

Side Menu Block, containing a single column with Stories under the same categorization. The block

should collapse into an expandable menu element when accessed using devices with small and

medium screens, displayed above the Body Block.

Pagination Block, displaying pagination to indicate a series of related content exists across multiple

pages.

Advanced Search Block, displaying advanced search form displayed above list of search results,

including default values for the advanced search fields making it easy to refine searches. The block

should collapse into a single search form, with a link containing a toggle revealing rest of the

functionality other when accessed using devices with small and medium screens.

Main Story Block, displayed in single column, containing the header image attached to the Story

with the Title of the Story and Excerpt linked to the story. The image should be automatically scaled

to fit the frame.

Secondary Story Block, displayed in a block of 2 columns in one row, with one column containing an

header image attached to a Story, with the Title of the Story and Excerpt linked to the story, and

second column containing two Stories, displayed in rows, with the images attached to the Stories,

with the Titles and the Excerpts of linked to the stories. The images should be automatically scaled

to fit the frame. The block should automatically collapse into 3 rows when accessed using devices

with small and medium screens.

Annex I E

More Stories Block, displaying grid of 6 elements, each containing a header image of a Story with

the Title and the Excerpts of the Story linked to the story. The images should be automatically scaled

to fit the frame. The block should automatically collapse into 6 rows when accessed using devices

with small and medium screens, displaying the image on the left side with the Title and the Excerpts

of the Story linked to the story on the right side.

Body Block, displaying the body of the Story in a single column, containing formatted text, images,

videos, links to downloadable attachments, etc.

Partial Element Block, displaying an element of a story in a single column, featuring custom

background color or a background image, formatted text, images, videos, links to downloadable

attachments, etc.

Donor Block, displayed in a form of 3 columns, containing the logos and a names of the donor

organization, linked to the donor website, stored in the Donor page information. If more than one

donor is present in one column, the donor information should be displayed in rows within that

column. The block should automatically collapse into rows when accessed using devices with small

and medium screens.

List Block, displaying the series of content containing a common criteria (category, search result, etc)

existing across multiple pages, displayed in a form of rows containing image on the left side with the

Title and the Excerpts of the Story linked to the story on the right side.

Annex II A

Annex II – Financial Proposal

Democracy Reporting International Website

Name of Bidder: _________________________ Address: ________________________________ Place: ________________________________

Lump sums: Price offer in

Euro (net) Additional information or comments

Design and development of the new version of the DRI website based on the technical requirements and Terms of Reference.

Price for maintenance of the website (lump sum for six hours per month; 216 hours over 3 year). Remuneration for additional work to be based on hourly rates below or separately agreed-upon lump sum.

Travel costs to Berlin (as applicable).

Total

Hourly rates: Hourly rate in

Euro (net) Additional information or comments

Administration and support (e.g. communications with client, project management, etc.)

Web development and programming

Conceptualisation, design and advice

All prices are net and do not include VAT. The prices are fixed for the duration of the contract. Price changes can only arise on the basis of legal requirements. Place, date: Signature of the bidder: