Capital Group Research Portal Design Challenge

Welcome to “Capital Group Research Portal Design Challenge”! In this challenge, we are looking for your help to design an interactive web-based experience to showcase the content of their research brochure. Client is looking for production-ready UI designs that can leverage the web/interactivity to creatively present the content from their existing research brochure (PDF file).

CHALLENGE OBJECTIVES

• Responsive Web Design
• Upto 10 Desktop Screens + 2 Mobile Screens
• Production ready UI design

Note: While only 4 screens are listed in the below description. We want your help in identifying sub-screens and they may go upto 10 desktop + 2 mobile screens in total.

Round 1

Submit your initial designs and any notes you might have for checkpoint review. 
01) Landing page - Desktop
02) Background - Desktop
03) Process - Desktop
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your Final submissions
01a) Landing page - Desktop
01b) Landing page - Mobile
02) Background - Desktop
03) Process - Desktop
04a) Research - Desktop
04b) Research - Mobile
- As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
- Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

PROJECT OVERVIEW:
Over the years, Capital Group has had a consistent investment philosophy — one established by Jonathan Bell Lovelace when he founded the company in 1931:

• Buy the stocks of good companies at reasonable prices.
• Thoroughly research a company before you invest in it to determine its actual worth.
• ���Always be guided by a commitment to honesty and integrity.

The scale and scope of our proprietary research, built over 90 years, allows us to uncover what we believe to be compelling investment opportunities for our clients.

• The purpose of this project is to develop interactive web-based experience to showcase content from client’s research brochure.
• Client is interested in converting the flat PDF information into modern looking interactive web experience that can work across the desktop, tablet and mobile.
• Open to explore interactive graph/visualizations to capture existing information from PDF to the website.

EXPECTED SOLUTION:
The final UI design is expected to contain all of the information from existing brochures provided in the forum, but creatively placed across a responsive and interactive website which will work within the client's parent website.

Also, please keep in mind that users can access the page by
1. Navigating from other pages within the site. This page has a section on our research capabilities. We would add a link here that would lead to these pages. https://www.capitalgroup.com/intermediaries/gb/en/about/capital-system.html
2. Promoting it in email or potentially paid media, so the user would land directly on this page. As a proposal, I would suggest that the call to action be to learn more about ESG at Capital, which would go to this page:
https://www.capitalgroup.com/intermediaries/gb/en/about/esg/esg-home.html


AUDIENCE:
Financial intermediaries: who work with individual investors to help them make good investing decisions, and other people who work for large financial firms, like UBS. Those people will also be making decisions about which investments to offer to investors. Clients team are trying to influence them to ultimately choose Capitalup investment products to make available and recommend to their clients, then individual investors.


SCREEN/FEATURE REQUIREMENTS:
Please make sure your design includes the following screens:
We hope to organize the entire research brochure into multiple pages/tabs to allow simple and interactive experience. While we propose the following structure, we are open to your creative ideas about information organization, layout, etc. 
We are looking for a modern-looking interactive website experience that matches client’s branding guidelines and makes use of creative visuals/layouts/transitions. You are suggested to draw inspiration from showcases like Awwwards, 10 Modern Web Design Trends for 2020 and similar places.

00 Global Elements

• Retain header and footer design from client’s existing website. 
• Do not modify these elements. See client’s website. Sample image in challenge assets.
• Include the Global elements on all subsequent pages.

01 Landing page - Desktop and Mobile

• This screen is the opening page for the Research portal (this).
• This page will retain header and footer design from the client's existing website.
• Cover image and opening text to invite users to learn what this is about. Example: “Research is part of our core philosophy”.
• Use information from the rest of the PDF to construct relevant navigation. This can be different tabs or links to pages (like Background, Process and Research). But we’re open to your suggestions in naming and breaking the pages into sub-pages.
• This screen will also have a Call to action button. While the actual Call to action is not decided yet, please use “Learn more” for now.
• Please refer to the client's existing website and other inspiration.

02 Background - Desktop

• This page captures the information from “Background and History” i.e. pages 3-5 from the PDF.
• You can use images from the PDF and use additional stock images as necessary.
• You are expected to convert the textual information into visual or interactive elements on the page, so it allows a more engaging experience for the user.
• You may break this page into sub-pages, or under in-page navigation. We would like to see creative ways of placing this information.
• Follow comments and/or updated content as per Updated brochure (Docx File).

03 Process - Desktop

• This page captures the information from “How we determine if a stock is mispriced” i.e. pages 6-15 from the PDF.
• You can use images from the PDF and use additional stock images as necessary.
• You are expected to convert the textual information into visual or interactive elements on the page, so it allows a more engaging experience for the user.
• We want to convert static graphs into interactive visuals to make them more engaging.
• You may break this page into sub-pages, or under in-page navigation. We would like to see creative ways of placing this information.
• Follow comments and/or updated content as per Updated brochure (Docx File).

04 Research - Desktop and Mobile

• This page captures the information from “How research is integrated into our investment process” i.e. pages 16 onwards from the PDF.
• You can use images from the PDF and use additional stock images as necessary.
• You are expected to convert the textual information into visual or interactive elements on the page, so it allows a more engaging experience for the user.
• We want to convert static graphs into interactive visuals to make them more engaging.
• You may break this page into sub-pages, or under in-page navigation. We would like to see creative ways of placing this information.
• Follow comments and/or updated content as per Updated brochure (Docx File).

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

Creativity: 8
1: barely new ideas
10: a utopic product with features not proven to be able to be fully implemented

Aesthetics: 9
1: low-fidelity design, wireframe or plain sketch
10: finished looking visual design

Exploration: 10
1: strictly follow an existing reference or production guideline
10: open to alternative workflows/features not listed here that would help the overall application

Branding: 8
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

Device Specifications

• Desktop: 1366px x 768px; Height: As required
• Mobile: 375px x 812px; Height: As required

Branding Guidelines and Design Assets

• Your designs must use the Branding Guidelines and Design Assets posted in the challenge forum.
• Font: Avenir Next
• Palette and Branding: Follow the provided Brand Guideline document

Final Deliverables

• Declaration file about stock icons, and font link source used in your design.
• All original design files in JPG/PNG for client review
• All original design files in Figma, Sketch, XD, or Adobe Photoshop and saved as a layered editable file.
• Marvel Prototype
  • We need you to upload your screens to Marvel App
  • Please send your marvel app request in the challenge forum
  • You MUST include your Marvel app sharing URL link as a text file in your submission (in your marvel app prototype, click on share and then copy the link)

Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors), modify overall colors, or merge features from other winning placements.

Stock Photography
Stock photography is allowed in this challenge.