Website design for OHCHR

Part 1. OHCHR Two Covenants Campaign Website

OHCHR wishes to create a website to celebrate the 50th anniversary of the ICCPR and the ICESCR.

The website will be geared to both the general public and to OHCHR field presences and partners. It will provide information about the campaign and how to get involved, including resources that partners can use in support of the campaign. It will also feature human stories surrounding the covenants, and links to more information on the International Bill of Rights.

The highlight of the website will be an interactive quiz/game that will challenge players to bust and dispel various myths about human rights (e.g. Human rights are a Western invention, favor criminals, inhibit free speech, etc.) Players will be asked a serious of multiple-choice questions, some based on real human rights cases, in which they must decide if a human rights violation truly exists in the scenario and why. Points will be earned with each question and the game concludes by awarding the player a title (e.g. “Human Rights Myth-busting Master”) that can be shared on social media, encouraging others to play.

The contractor will:

1. Create an engaging interface design and functionality for a website with the pages/sections outlined below (maximum 12 pages). Two distinct visual design/functionality proposals for the overall look and feel of the website must be presented.
2. The content pages to be created are:
3. Home page – a visually compelling entry point to the campaign.
4. Covenant pages – 1-3 pages – with background information about the two covenants, with links to further information available on the main OHCHR website.
5. Stories page – 1 page that features stories related to the campaign (the actual story pages will reside on the main OHCHR website.
6. Resources – 1-2 pages – This section will feature material that can be used by OHCHR field presences and partners who want to show their support for the campaign. (i.e. downloadable logo files, posters, e-cards, visual identities, etc). It will also include a calendar of upcoming events (including online/social media events such as Google Hangouts).
7. Interactive game/quiz – The aim of the game is to both entertain and educate players by challenging them to think through myths about human rights. It will consist of 5-10 multiple-choice questions. Upon answering each question, players will be awarded a certain number of points, and will be shown an explanation, as well as any relevant links to further information on the OHCHR website. At the end of the game, the game will display their total score and corresponding level (ideally with an avatar), which they can share on social media.

Timeframe:

The contractor will begin the design of the website upon the award of the contract and having received the necessary input from OHCHR.

Each section of the website will be completed within two weeks of the contractor having received the necessary content from OHCHR.

Part 2. OHCHR website redesign and Web development

OHCHR is now looking to update the visual interface of the remaining website to give it a more current and appealing look and feel, along the same design direction taken for the homepage redesign, as well as to improve its usability and user experience.

Since the website is managed by a Content Management System (CMS) -- Microsoft SharePoint – we will need to create page layout designs to accommodate the different types of pages on the website, which will then be used for updating the CMS templates.

To update the CMS templates, we will need to create prototype pages in HTML/CSS from the page layout designs. These HTML/CSS pages will be integrated into the CMS to replace the existing templates.

A guidelines document for visual design, including content placement and formatting, and Web development for the redesigned pages will also need to be created. We are seeking a contractor to provide these deliverables for the OHCHR website.

Tasks

In consultation with the OHCHR Communications Section and the IMT Section, the selected contractor will carry out the following tasks:

Phase 1: Conceptualization

1.Work with the OHCHR Communications Section and a selection of key stakeholders within OHCHR to understand the current digital experience of the OHCHR.org website and our objectives for the website. This phase will enable the identification and shared agreement of: OHCHR’s digital objectives, the outcomes for the different audiences who visit the website, and the challenges that OHCHR needs to overcome to achieve these.

2.Gather information about our existing and desired web audiences and how each of these audiences might interact with OHCHR.org to achieve their respective goals. The selected contractor will then be required to overlay this research with stakeholder workshops and/or interviews (conducted remotely via video/teleconference if necessary to avoid travel costs) to ensure that all internal insights and requirements are captured and that the organization’s goals and challenges are clearly understood.

3.Fully document the insights gathered, which will be used as the basis for the rest of this project’s deliverables.

Phase 2: Content structure (wireframing)

1.Review/audit the current content structure of the OHCHR.org website (existing page layouts, navigation and templates). Evaluate the current structure in regard to the approach identified in Phase 1 to determine the necessary page types and layouts (news pages, issues pages, etc.) to be modified or created.

2.Develop the Web page layout wireframes (content structure) for 20-30 pages to be developed into visual designs. The wireframes will illustrate the information architecture of the site and will visually display the proposed content hierarchy, page layouts, navigation and various user journeys across devices (mobile/tablet/desktop). From this, the contractor will also develop a high-level sitemap that will illustrate the overall structure of the entire website.

Phase 3: Design

1.Based on the approved wireframes from Phase 2, develop three distinct visual design proposals for the overall look and feel of the website redesign.

2.Once one of the visual design proposals has been selected, provide 20-30 Web page layout designs based on the approved wireframes. The layout designs may include illustrations of functionality requirements to be implemented during development of the HTML/CSS. The page layout designs must be created in accordance with principles of “Responsive Web design” in order to provide an optimal viewing experience across a wide range of devices. (http://en.wikipedia.org/wiki/Responsive_web_design)

3.Provide a Web style and development guidelines document based on the approved design and functionality. The guidelines will include necessary information regarding visual design styling, including content placement and formatting, and Web development to be used as reference for any further work needed on the website.

Phase 4: Development (HTML/CSS/JavaScript prototyping)

1.Once the Web page layout designs have been approved, provide fully functional prototypes of the approved 20-30 layout designs using HTML, CSS and JavaScript. The prototypes will include any functionality agreed to in the layout design phase.

2.Provide CSS-based printer versions of the 20-30 prototypes.

3.The page must be created with cross-platform Web development that meets W3C Web standards (www.w3.org/standards) and United Nations Web Accessibility Guidelines (www.un.org/webaccessibility), and that is tested against current standards-compliant Web browsers.

4.The page must be created using “Responsive Web design” in order to provide an optimal viewing experience across a wide range of devices. (http://en.wikipedia.org/wiki/Responsive_web_design)

5.Assist the OHCHR in-house Web team, as needed, with the integration and debugging of the functional prototype within its SharePoint Content Management System (CMS).