Challenge Summary
Welcome to the International Red Cross Red Crescent (IFRC) - LET (Learning | Education & Training) Hub Web Design Challenge! In this challenge, we are looking for your design concepts to redesign the “Learning | Education | Training” hub of the International Federation of the Red Cross and Red Crescent, an organization who run global e-LET (Learning | Education & Training) programmes to support the development of skills and competencies of its 17 million youth volunteers and staff providing critical, often life-saving support to their communities in 189 countries world-wide. The new site will be spun off from the larger IFRC.org site into a new standalone website (though will link to it of course). The existing site can be viewed at: http://www.ifrc.org/en/get-involved/learning-education-training/
Round 1
We would like to see all of the designs for the challenge in round 1.
1. Landing page
2. Programs Landing Page
3. Courses page
4. Video testimonials
Round 2
In round 2, we will focus on refining the pages designed in round 1.
We are looking for a forward-thinking, cutting edge design, so we would like the opportunity to make each design the best it can be and provide a good number of options to the client!
1. Landing page
2. Programs Landing Page
3. Courses page
4. Video testimonials
5. Basic Page
6. News
You will design a series of webpage templates that will be used to rollout the entirety of the IFRC LET Hub site. The existing site content will be repurposed and redesigned to modernize the site and make it more attractive and easily navigable. The new site should be much more visual and less reliant on large pages of plain text. Think: big images, content broken up into distinct sections, highly legible typography with a strong visual hierarchy. The site will translate into several languages so make sure your design accounts for differing lengths of text. The site should be cutting edge, reflecting the e-Learning element of the programmes it represents, and should also make best use of and reflect all latest design practice (e.g. AirBnB’s moving images, paneled scrolling sections, social media feeds, testimonials from users, infographic type approach to share numbers portraying breadth and depth of the programmes, etc).
Users of this site are seeking information about the educational offerings of the IFRC. This includes short, self-paced online courses in the Learning Platform, tutor-led professional development courses, and project based learning through collaborative communities (HELP). National Society (e-)LET activities will increasingly be reflected and profiled too (organisational and individual). We want to make sure users are able to find the content they are looking for easily and also navigate between sections of the site and explore deeper. The site would ideally be so engaging (design as much as content etc), it would help the various programmes go viral within the community!
This is the first, and largest, in a series of challenges for the IFRC. Be on the lookout for additional challenges to launch shortly after the completion of this challenge!
Design Goals:
- Modernize the page templates.
- Encourage navigation between sections. Keep users on the site.
- Make written content highly legible and files and links easily accessible.
- Make the pages, design, layout extremely attractive!
Templates:
Wireframes for five page templates have been provided in the files section. All elements of the wireframe should be present in your design, but the layout and design of the wire offers only a suggestion. Feel free to explore different layout options–we are very open to your ideas! The IFRC team is open to pushing boundaries and are extremely excited to be cutting edge, providing design goals are met.
1. Landing page
The landing page is the first page users will see upon arriving to the site (it will still be linked to/from www.ifrc.org/learning). Users will be greeted by a carousel of content and topics featuring large, intriguing images from the IFRC library and clear calls-to-action (consider the possibility of video in the background!). The most important content within the site will be linked to in highly visual modules beneath the main carousel. Consider different ways to design this content—think of the page in distinct sections. Go big with imagery and icons. Overall, this page should provide a snapshot of the various and varied programmes available and visually engage the user.
2. Programs Landing
The second-tier page template that will be used throughout the site. This page type will feature a large image header with a clear call-to-action. Beneath, a series of tabs will switch between page content so users can remain on this page while continuing to browse.
In the given example (the “Programs” landing page) the content toggles default to “About the LP” section. This content will offer a high level overview of the IFRC’s offerings and present strong, visual links to the other sections within this page. We would also like a way to display a series of written testimonials from satisfied users.
3. Courses / Projects (latter in case of HELP).
This is a unique page template that presents the different IFRC course offerings to the user. In addition, a series of video testimonials will highlight the success of these courses. (Note: The top section of this page is based on the “Programs” template.)
4. Video Testimonials (for the various programmes / initiatives)
"Testimonials" content is a tab in the “About” page. The new site will feature a growing library of feedback and video testimonials of the success of the different programs. This page will house those videos in a simple interface. We’re open to suggestions on how these videos will play and we’d like to see your suggestions. (Note: The top section of this page is based on the “Programs” template.)
5. Basic Page
A flexible template that could be utilized to display a wide variety of content. Pay attention to typographic hierarchy and different ways to style text with this template. Consider how images and videos would display within the body of text.
6. News Landing Page
We do not have a wireframe for this content. We are looking for your ideas for the layout of a simple news page.
-Users will be presented with a list of news content, in sequential order.
-Accommodate for articles having large, beautiful imagery, and others that might be text only.
-Think of ways to use basic content tags or categorization to allow users to filter through content.
Elements to explore:
--Colors, typography, layout, etc. The whole package.
--Display numbers to show breadth and depth of programmes
--The current site reflects a dated vision of this content and layout. Since we’re spinning this portion of the site onto its own, feel free to start completely from scratch!
--The Dutch Red Cross National Society website affiliate is a good example of the level of sophistication we are looking for.(but please do not be bound by this)
http://www.rodekruis.be/wat-doen-we/bloedvoorziening/de-weg-van-het-bloed/ Use this as inspiration for where you can take your design. As this is also a site featured Red Cross content, the use of color and typography are in line with how we want to modify the existing Learning site.
-http://www.ifrc.org/global/rw/protecthumanity/#intro A site recently launched by the IFRC. We would expect a cleaner, simpler approach for the site designed for this challenge but keep in mind that the IFRC does produce a range of looks for different types of content.
A video - that wasn’t possible to use and must not be shared further or displayed in any way other than for the purposes of this design challenge - shows how we have been trying to push the boundaries, to engage, to go viral. However, the IFRC design and other guides shared must be strictly adhered to. https://drive.google.com/file/d/0Bz2O3ygvMndLTHhiVlY3dkw4U0k/view?usp=sharing
���Keep “responsive” design practices in mind as you develop your concepts. We will run a First-To-Finish challenge at a later date to complete the responsive states of the site.
Elements to retain:
Written content.
Design Requirements
Desktop size: 1366px wide
Target Audience
Red Cross Red Crescent Youth & Volunteers (and Staff) from across the globe
Multinational, multi-cultural audience. Different languages spoken.
Supporting Documents
-IFRC wireframes document
-IFRC brand guidelines
-IFRC image selects [Google Drive link]
Branding Guidelines
- Refer to our website (Brand Reference)
- You can use images, fonts, colors from this reference site
-Use the included Branding Guides from the IFRC while designing.
We are really excited to see what you create!
Judging Criteria
- How well does your design align with the objectives of the challenge
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
- How visionary is the design
Submission & Source Files
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Please upload PNG images in a zip file with all requested contest requirements stated above. Number and Name your files appropriately to aid in the review process. This is very important.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop or Illustrator and saved as layered PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors
SPECIAL REQUEST FOR VOLUNTEERS!
The IFRC relies on volunteers across the globe to help others in many different capacities. If you have the desire to volunteer for your own National Society of the the Red Cross and Red Crescent, please click here to learn more. We are always looking for potential volunteers!
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.