Challenge Summary
Welcome to the Avalon Research Articles Responsive Design Challenge!
In this challenge we need your help to design a responsive application that will be used to display research articles based on user’s behaviour and interests. The application should be visually appealing and have a convenient user journey, with a minimum number of clicks for the user to get to the result.
We require a few pages, to take care of the listed features, but feel free to come with other suggestions, if you find better ways to achieve same result.
Good luck!
How To Compete in This Challenge
- Competing in Topcoder design challenges is easy.
- First, register for the challenge by selecting the “Register” button in the top right.
- Second, review this challenge spec which provides details on what you’ll need to design.
1. Dashboard – Articles sorted by Subscribed Topics and Tags (desktop)
2. Article Details (desktop)
3. Customize Subscription (desktop)
4. Search Articles (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
1. Dashboard – Articles sorted by Subscribed Topics and Tags (desktop + mobile)
2. Dashboard – Articles sorted by Date (desktop + mobile)
3. Article Details (desktop + mobile)
4. Customize Subscription (desktop + mobile)
5. Search Articles (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Full Description & Project Guide
The goal of this challenge is to design the look and feel of a lightweight responsive web tool
(desktop, mobile) that will be used to help users receive targeted content based on their behavior.
Design Problem
Avalon is a financial company who also publishes research articles. Because of the large amount of articles, they are looking for your help to provide an easy way for users to find the article they are looking for.
The most important features to consider for this tool are:
- It should be very quick, fast access to the research article the user is interested at.
- Seamlessly navigation through the pages
- Have the ability to customize in multiple ways how the Research Article List is looking
Screens Requirements
The pages listed below are to be used just for content reference. If you have better ideas, please suggest how to organize the content in a more efficient way.
1. Dashboard – Articles sorted by Subscribed Topics and Tags
As the user comes to the dashboard, he will see the list of Research Articles displayed, selected based on subscription of topics of interest.
Each article will have:
- Thumbnail image or video
- Main Topic to which the article belongs
- Article header
- Estimated time required for reading
- Article summary
Besides the list of articles, the user needs to have the:
- Ability to go to Dashboard – Articles sorted by Date page
- Ability to go to Customize Subscription page
- Ability to search an article
- See a list of Topics and Additional Tags as per user subscription, to help the user navigate between articles belonging to various topics of interest
2. Dashboard – Articles sorted by Date
This is not a filter, but a separate dashboard where, in addition to the articles displayed based on User Subscription page (previous dashboard) the user will also see the entire collection of latest articles available sorted by date of publication.
Each article will display same information as on the previous page and have an additional filter by topics. Each article will have:
- Thumbnail image or video,
- Main Topic to which the article belongs
- Article header
- Estimated time required for reading
- Article summary
Besides the list of articles, the user needs to have the:
- Ability to go to Dashboard - Articles sorted by Subscribed Topics and Tags page
- Ability to go to Customize Subscription page
- Ability to search an article
- See a list of Topics and Additional Tags as per user subscription, to help the user navigate between articles belonging to various topics of interest
NEW: Filter by Topics: Each publication is categorised into a Topic of interest. Clients can select a Topic of interest to view the latest publications relating to the filtered topic of interest.
3. Article Details
Clicking on one of the articles on the dashboard page, will bring the user to this page where he can see the entire content:
- Image / Video
- Article header
- Author
- Article summary
- Main topic to which the article belongs
- Date and time of publishing
- Estimated time required for reading
- Content text
- Charts / tables / graphs (when they available for the article)
- List of Tags that the article is related to (tags and topics that have been subscribed to will be highlighted)
- Disclaimer/Disclosure information for the users for a particular Article
- List of other articles with content relevant to the article being read
4. Customize Subscription
This is the place where the user can customize his topics of interests and the additional tags.
Main Topics:
- Ability to see his list of subscribed topics
- Ability to add new topic from a fixed number topics
- Ability to unselect/remove a topic from his list
Additional Tags:
- Ability to see his list of subscribed tags
- Ability to add new tag from the pre generated list (the tags are generated by the application as the new articles are created)
- Ability to unselect/remove a tag from his list
- Option to search and add additional tags
5. Search Articles
Searching articles is an important part of the applications so the user can find quickly what they are looking for.
- The user can search based on next keywords: tags, ISIN(eg.4588775), valoren(eg.CH0004588775), company name, article name, etc.
- As the user is typing in, the results will change dynamically and there should be Additional Tags provided as search suggestions. The articles that are belong to the subscribed preferences, should be highlighted.
- The search results will also show next to the articles, a list of Stocks, that might be related to the keyword (example: if keyword is “beverage”, then one of the stocks might be “Coca-Cola”. The search results would comprise of articles and a separate list of stocks both related to the keyword). We need to see a quick snapshot to view performance of each stock as well.
- The user can select an article link to go to the article’s details and from there the user is able to navigate back to the main search results screen
- The Search screen should also be reached when a tag is clicked on from a Research Article. In this case by default, the screen should display the search results based on the selected tag
Branding
- Follow the attached branding for the colors, style and typography.
- You should use Arial as your only font for this challenge.
- Keep things consistent. That means all graphic styles should work together.
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them properly so you don’t fail screening.
Target Devices
Responsive desktop and mobile application.
- Desktop: 1366px width. Height will be adjusted accordingly.
- Mobile: 750 x 1334px. Height will be adjusted accordingly.
Marvel Prototype
- Request a Marvel Prototype on forums or keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Customers of the Avalon company who are buying financial instruments and are interested to read research articles on latest updates on the industry
Judging Criteria
- How fast and easy can the user find a research article
- How good is the User Experience
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
In this challenge we need your help to design a responsive application that will be used to display research articles based on user’s behaviour and interests. The application should be visually appealing and have a convenient user journey, with a minimum number of clicks for the user to get to the result.
We require a few pages, to take care of the listed features, but feel free to come with other suggestions, if you find better ways to achieve same result.
Good luck!
How To Compete in This Challenge
- Competing in Topcoder design challenges is easy.
- First, register for the challenge by selecting the “Register” button in the top right.
- Second, review this challenge spec which provides details on what you’ll need to design.
Round 1
Submit your initial design for a Checkpoint Feedback1. Dashboard – Articles sorted by Subscribed Topics and Tags (desktop)
2. Article Details (desktop)
3. Customize Subscription (desktop)
4. Search Articles (desktop)
- As part of your checkpoint submission, you must upload your submission to Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates1. Dashboard – Articles sorted by Subscribed Topics and Tags (desktop + mobile)
2. Dashboard – Articles sorted by Date (desktop + mobile)
3. Article Details (desktop + mobile)
4. Customize Subscription (desktop + mobile)
5. Search Articles (desktop + mobile)
- As part of your Final submission, you must replace your checkpoint submission with the final submission into Marvel App so we can provide direct feedback on your designs. Please include the Marvel App URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Full Description & Project Guide
The goal of this challenge is to design the look and feel of a lightweight responsive web tool
(desktop, mobile) that will be used to help users receive targeted content based on their behavior.
Design Problem
Avalon is a financial company who also publishes research articles. Because of the large amount of articles, they are looking for your help to provide an easy way for users to find the article they are looking for.
The most important features to consider for this tool are:
- It should be very quick, fast access to the research article the user is interested at.
- Seamlessly navigation through the pages
- Have the ability to customize in multiple ways how the Research Article List is looking
Screens Requirements
The pages listed below are to be used just for content reference. If you have better ideas, please suggest how to organize the content in a more efficient way.
1. Dashboard – Articles sorted by Subscribed Topics and Tags
As the user comes to the dashboard, he will see the list of Research Articles displayed, selected based on subscription of topics of interest.
Each article will have:
- Thumbnail image or video
- Main Topic to which the article belongs
- Article header
- Estimated time required for reading
- Article summary
Besides the list of articles, the user needs to have the:
- Ability to go to Dashboard – Articles sorted by Date page
- Ability to go to Customize Subscription page
- Ability to search an article
- See a list of Topics and Additional Tags as per user subscription, to help the user navigate between articles belonging to various topics of interest
2. Dashboard – Articles sorted by Date
This is not a filter, but a separate dashboard where, in addition to the articles displayed based on User Subscription page (previous dashboard) the user will also see the entire collection of latest articles available sorted by date of publication.
Each article will display same information as on the previous page and have an additional filter by topics. Each article will have:
- Thumbnail image or video,
- Main Topic to which the article belongs
- Article header
- Estimated time required for reading
- Article summary
Besides the list of articles, the user needs to have the:
- Ability to go to Dashboard - Articles sorted by Subscribed Topics and Tags page
- Ability to go to Customize Subscription page
- Ability to search an article
- See a list of Topics and Additional Tags as per user subscription, to help the user navigate between articles belonging to various topics of interest
NEW: Filter by Topics: Each publication is categorised into a Topic of interest. Clients can select a Topic of interest to view the latest publications relating to the filtered topic of interest.
3. Article Details
Clicking on one of the articles on the dashboard page, will bring the user to this page where he can see the entire content:
- Image / Video
- Article header
- Author
- Article summary
- Main topic to which the article belongs
- Date and time of publishing
- Estimated time required for reading
- Content text
- Charts / tables / graphs (when they available for the article)
- List of Tags that the article is related to (tags and topics that have been subscribed to will be highlighted)
- Disclaimer/Disclosure information for the users for a particular Article
- List of other articles with content relevant to the article being read
4. Customize Subscription
This is the place where the user can customize his topics of interests and the additional tags.
Main Topics:
- Ability to see his list of subscribed topics
- Ability to add new topic from a fixed number topics
- Ability to unselect/remove a topic from his list
Additional Tags:
- Ability to see his list of subscribed tags
- Ability to add new tag from the pre generated list (the tags are generated by the application as the new articles are created)
- Ability to unselect/remove a tag from his list
- Option to search and add additional tags
5. Search Articles
Searching articles is an important part of the applications so the user can find quickly what they are looking for.
- The user can search based on next keywords: tags, ISIN(eg.4588775), valoren(eg.CH0004588775), company name, article name, etc.
- As the user is typing in, the results will change dynamically and there should be Additional Tags provided as search suggestions. The articles that are belong to the subscribed preferences, should be highlighted.
- The search results will also show next to the articles, a list of Stocks, that might be related to the keyword (example: if keyword is “beverage”, then one of the stocks might be “Coca-Cola”. The search results would comprise of articles and a separate list of stocks both related to the keyword). We need to see a quick snapshot to view performance of each stock as well.
- The user can select an article link to go to the article’s details and from there the user is able to navigate back to the main search results screen
- The Search screen should also be reached when a tag is clicked on from a Research Article. In this case by default, the screen should display the search results based on the selected tag
Branding
- Follow the attached branding for the colors, style and typography.
- You should use Arial as your only font for this challenge.
- Keep things consistent. That means all graphic styles should work together.
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge. Please remember to declare them properly so you don’t fail screening.
Target Devices
Responsive desktop and mobile application.
- Desktop: 1366px width. Height will be adjusted accordingly.
- Mobile: 750 x 1334px. Height will be adjusted accordingly.
Marvel Prototype
- Request a Marvel Prototype on forums or keyla.blue1@gmail.com
- Provide clickable spots (hotzones) to link your screens and show the interactivity.
- We need you to upload your screens to Marvel App.
- You MUST include your Marvel App URL on your notes during submission upload (in your Marvel App prototype, click on share and then copy that link)
Target Audience
- Customers of the Avalon company who are buying financial instruments and are interested to read research articles on latest updates on the industry
Judging Criteria
- How fast and easy can the user find a research article
- How good is the User Experience
- Hierarchy and organization of content
- Cleanliness of your graphics and design.
Submission Deliverables
Preview Image
Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your submissions within it. You are free to resize or crop your submission to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Submission File
All requested Contest Deliverables in JPG or PNG file format in RGB color mode at 72dpi.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, XD or Sketch. Layers should be named and well organized.
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.