We'll remember your contact info. for this session.

AKVOrsr_Landing_Page

Specs for AKVO RSR Landing Page

Attached is a mock-up of the landing page for the Hanga Ahazaza initiative. Its goal is to serve as a one stop page where partners can find information about the initiative, links to various tools (calendar, C3/RSR, Touripedia, etc.) and promote their partnership to the initiative.

NOTES

The font family to use is FF Mark (https://fontsinuse.com/uses/13945/mastercard-identity-2016 - https://www.fontshop.com/search#?q=FF%20Mark)
The logo top left is for branding purposes as well as a link to the MCF web site.
The image top center is to add visual interest. We may want to evenutally use an image carousel to promote images from various projects.
This page needs to be easily updatable (to reflect change in partners, for example, or to add new resources, etc., if need be).
The page is full width (1025px).


LANDING PAGE PLAN

URL: Please provide a generic URL for now

Title: Hanga Ahazaza Initiative

Header
MCF Logo (H1): https://mastercardfdn.org/wp-content/themes/mastercard-foundation/assets/img/logo.svg
Image (or image carousel?) representive of the initiative (for the moment, use this image: https://mastercardfdn.org/wp-content/uploads/2019/03/RS8862_2014-05-19-at-13-26-38-scr.jpg)

Main Content (628x393 px - 70% approx. of page width)
Heading (H2): Hanga Ahazaza Initiative
Short text (a few paragraphs) introducing the goals of the initiative and invitation to explore resoures and information contained in landing page (there may be slight changes to the text provided, see annexe)
Heading (H3): Results To Date
Dashboard: Featuring agreggated data from project reporting
Link: Learn more about this initiative (link: https://mastercardfdn.org/all/hanga-ahazaza/)
Link: Learn more about the Theory of Change (link: https://www.theoryofchange.org/what-is-theory-of-change/)
Embedded calendar of upcoming events (the calendar should have the same width as the main content to make it easier to consult)

Left Column (202x678 px - 30% approx. of page width)
Heading (H3): Resources
Links: C3 (link: TBD)
Touripedia (link: TBD)
Online Reporting Forms (link: TBD)
Heading (H3): Latest Updates
Thumbnails displaying images related to updates pulled from project reporting and linking to more information about the update (please display latest updates from RSR)
Link: See All Updates (link: TBD)

Footer
Heading (H4): Our Partners
Logos of the 11 project partners linking to their respective websites (links to be provided)

USE CASES

MCF Logo:

As a MCF staff member, I want to see my organization's identity displayed prominently on the landing page.
As a MCF staff member, I want to be able to click on the logo to go to the MCF website.

As an initiative partner, I want to see the Foundation's logo on the landing page to reassure me as to the site's authenticity.
As an initiative partner, I want to be able to click on the logo to go to the MCF website.

Banner image (or image carousel):

As a MCF staff member, I want to see eloquent images of the initiative displayed on the page to promote positive outcomes.

As an initiative partner, I want to see eloquent images of the initiative displayed on the page to promote positive outcomes.
As an initiative partner, I want to see images of my own projects displayed in the carousel to promote my outcomes.

Main Content:

As a MCF staff member, I want to inform vistors about the goals and objectives of the initiative in a simple in concise way.
As a MCF staff member, I want to see agreggated data about the initiative results updated in realtime.
As a MCF staff member, I want to provide more information about the initiative by linking to another page where this info can be found.
As a MCF staff member, I want to provide more information about the Theory of Change by linking to another page where this info can be found.
As a MCF staff member, I want to provide information on upcoming events related to the initiative.
As a MCF staff member, I want to have access to information on upcoming events related to the initiative.


As an initiative partner, I want to be able to read about the goals and objetives of the initiative in a simple and concise way.
As an initiative partner, I want to see agreggated data about the initiative results updated in realtime.
As an initiative partner, I want acess to more information about the initiative by being directed to another page where this info can be found.
As an initiative partner, I want access to more information about the Theory of Change by being directed to another page where this info can be found.
As an initiative partner, I want to have access to information on upcoming events related to the initiative.

Left Column:

Resources

As a MCF staff member, I want to provide access to key resources of the initiative (c3, Touripedia, online forms, etc.).
As a MCF staff member, I want to have access to key resources of the initiative (c3, Touripedia, online forms, etc.).

As an initiative partner, I want to have access to key resources of the initiative (c3, Touripedia, online forms, etc.).

Latest Updates

As a MCF staff member, I want to display information about the initiative's latest updates.
As a MCF staff member, I want access to information about the initiative's latest updates.
As a MCF staff member, I want to be able to have access to more updates by being directed to another page where this information can be found.

As an initiative partner, I want access to information about the initiative's latest updates.
As an initiative partner, I want to be able to have access to more updates by being directed to another page where this information can be found.

Footer:

As a MCF staff member, I want visually provide information about the initiative's various partners.
As a MCF staff member, I want to promote the Foundation's support to this initiative.

As an initiative partner, I want my organization's participation in the initiative to be prominently displayed on the landing page.
As an initiative partner, I want visitors to be easily directed to my website via the landing page.

Comments

Add a Comment

You can use Mockups text formatting markup.
Ex: *bold* _italic_ &underlined& -disabled- {color:#FF0000}colored{color} * New lines with asterisks for bulleted lists.

Are you sure you want to delete mockup "XYZ?"

Your mockup's data and history will be deleted forever!

Notify project members

Please click OK to reload the page and continue using myBalsamiq