Challenge Summary
Welcome to "Topcoder Responsive UI Design Challenge Part 1". This will be a series of challenges to focus on revamping the current experience for some of our most visited pages for the Topcoder community. For this challenge you will be working on redesigning the Calendar and Practice pages. This will be a responsive UI design challenge so you will focus on creating the new experience for both Desktop and Mobile devices.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
CHALLENGE OBJECTIVES
The redesign of the current Calendar and Practice pages.
The goal is to simplify the UX and create a solid UI that can work without too many differentiations on Desktop and Mobile devices.
Make your design to work responsive naturally. Every element and interaction should be easy to see and use in mobile devices
1) Calendar Page (Desktop)
2) Practice (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.).
1) Calendar Page (Desktop & Mobile)
2) Practice (Desktop & 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.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2.
BACKGROUND OVERVIEW
The current Calendar and Practice pages have tons of information and a very long scrolling. We would like to avoid this long scrolling and see how we can now present the content in a new and innovative way.
Have in mind that these pages will be visited by new members also, who probably won't know how Topcoder works. So think of the best UX while designing these 2 pages.
DESIGN GOALS & PRINCIPLES
EXPLORATION SCORE
TARGET AUDIENCE
Topcoder Competitors
Please consider that a high percentage of these users will be new Topcoder members who probably don’t know too much about the community and how it operates.
PERSONA
CHALLENGE FORUM
DOCUMENTATION
SCREEN REQUIREMENTS
01) Calendar Page
The Calendar page basically contains all the information regarding the upcoming events using Google calendar application. Have in mind that these events not only will be related to Algorithm, but also to general Topcoder events: TCO, Regional Events, Webinars, etc.
The main issue with this page is that it doesn't work on mobile devices and lack of any interactivity.
Think of a way to simplify this view while making it modern and easy to use. This calendar is going to be a Google Calendar so think about that when designing it. Allow users to interact with this calendar by providing functionalities that enable them to save an event to their personal calendars by connecting Google accounts or downloading the event.
Would be good to see the full interactions around this page, like modals, and events outside the calendar.
We need to show a list of upcoming events, think on the best way to integrate the calendar view with this events list.
Remember that making this work with mobile devices is the key!
02) Practice Page
The Practice page is an informative page that guides our new members about how to compete and provides quick access to challenges (live or previous) where they can start polishing their skills.
This page is oriented to all areas within Topcoder, such as: Design, Algorithm, Data Science and Development.
Should be really easy to read and navigate. Think of the newest members in our Community and how hard it is to find information about challenges and how to compete.
One of the weak points on this page is the excessive long scroll that needs to be performed in order to see and read all the information. So think on ways to reduce the scrolling on this page.
We would like to keep the same sections we have now, so consider to keep them. Those sections are the following:
BRANDING GUIDELINES
TARGET DEVICES
Web/Desktop: 1366px x 768px The majority of our competitors use this resolution.
Mobile: 375px x and height adjusted if necessary.
STOCK PHOTOS AND ICONS
Photos: use only free photos from the sites allowed by Topcoder or Topcoder images from our Flickr gallery.
SUBMISSION AND SOURCE FILES
Submission File
Submit JPG/PNG image files based on Challenge submission requirements stated above
MarvelApp link for review and to provide feedback
Declaration files document contains the following information:
Source Files
All source files of all graphics created in Sketch, Figma, Photoshop, Illustrator and XD and saved as an editable layer
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
CHALLENGE OBJECTIVES
The redesign of the current Calendar and Practice pages.
The goal is to simplify the UX and create a solid UI that can work without too many differentiations on Desktop and Mobile devices.
Make your design to work responsive naturally. Every element and interaction should be easy to see and use in mobile devices
Round 1
Submit your initial designs for checkpoint feedback1) Calendar Page (Desktop)
2) Practice (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 designs with all checkpoint feedback implemented1) Calendar Page (Desktop & Mobile)
2) Practice (Desktop & 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.)
If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2.
BACKGROUND OVERVIEW
The current Calendar and Practice pages have tons of information and a very long scrolling. We would like to avoid this long scrolling and see how we can now present the content in a new and innovative way.
Have in mind that these pages will be visited by new members also, who probably won't know how Topcoder works. So think of the best UX while designing these 2 pages.
DESIGN GOALS & PRINCIPLES
- Easy to use interface, The design should follow the current Branding, styling and behaviour provided in this challenge. So please make sure your design is consistent and feels like a part of the whole application.
- This challenge is really open in the matter of how you want to propose the best experience for these pages.
- We are looking more for original concepts rather than high fidelity designs. So focus on creating the best UX for these pages. So you don’t need to strictly follow the design guidelines for Topcoder, you must follow the colors and fonts but still consider we are providing free room to explore UX.
- We might be adding promotional banners in these new pages, so this is an important aspect to have in mind while designing. Consider the best place to have these banners. We are open to suggestions, so it could be sidebars or hero banners. Surprise us!
EXPLORATION SCORE
- Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
- Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
- Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
- Branding: Flexible - follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals.
TARGET AUDIENCE
Topcoder Competitors
Please consider that a high percentage of these users will be new Topcoder members who probably don’t know too much about the community and how it operates.
PERSONA
- Name: Dominic
- Occupation: Topcoder New Member / Design & Development Competitor
- Passion: He just found out about Topcoder from a friend, registered and created his Profile. He is looking forward to starting competing and winning!
- Goals:
- Wants to qualify for his first TCO ever
- Wants to know the latest news and information so he never miss an event
- Wants to learn more about what Topcoder can offer in the matter of events, webinars
- Wants to know what are the available options to practice so he can improve his skills and be ready for the next competition
- Frustrations:
- Currently, it is hard to find the information about the upcoming events.
- He is not sure if Topcoder offers options to practice
- He lost a couple of challenges because don't know how to compete in Topcoder
- Everytime he invites a college friend to Join Topcoder, they have a hard time finding information regarding the competitions and the upcoming events.
CHALLENGE FORUM
- If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum.
DOCUMENTATION
- Topcoder Design Guidelines or download it from this LINK directly.
- Current/Live Pages that you can use for content reference only.
- Calendar
- Practice
SCREEN REQUIREMENTS
01) Calendar Page
The Calendar page basically contains all the information regarding the upcoming events using Google calendar application. Have in mind that these events not only will be related to Algorithm, but also to general Topcoder events: TCO, Regional Events, Webinars, etc.
The main issue with this page is that it doesn't work on mobile devices and lack of any interactivity.
Think of a way to simplify this view while making it modern and easy to use. This calendar is going to be a Google Calendar so think about that when designing it. Allow users to interact with this calendar by providing functionalities that enable them to save an event to their personal calendars by connecting Google accounts or downloading the event.
Would be good to see the full interactions around this page, like modals, and events outside the calendar.
We need to show a list of upcoming events, think on the best way to integrate the calendar view with this events list.
Remember that making this work with mobile devices is the key!
02) Practice Page
The Practice page is an informative page that guides our new members about how to compete and provides quick access to challenges (live or previous) where they can start polishing their skills.
This page is oriented to all areas within Topcoder, such as: Design, Algorithm, Data Science and Development.
Should be really easy to read and navigate. Think of the newest members in our Community and how hard it is to find information about challenges and how to compete.
One of the weak points on this page is the excessive long scroll that needs to be performed in order to see and read all the information. So think on ways to reduce the scrolling on this page.
We would like to keep the same sections we have now, so consider to keep them. Those sections are the following:
- Practice Challenges
- How to get started
- Sponsored Challenges
- Our Top Help Articles
- Learn with us
- Have questions?
BRANDING GUIDELINES
- Please check forum for branding guidelines
TARGET DEVICES
Web/Desktop: 1366px x 768px The majority of our competitors use this resolution.
Mobile: 375px x and height adjusted if necessary.
STOCK PHOTOS AND ICONS
Photos: use only free photos from the sites allowed by Topcoder or Topcoder images from our Flickr gallery.
SUBMISSION AND SOURCE FILES
Submission File
Submit JPG/PNG image files based on Challenge submission requirements stated above
MarvelApp link for review and to provide feedback
Declaration files document contains the following information:
- Stock Photos Name and Links from allowed sources
- Stock Art/Icons Name and Links from allowed sources
- Fonts Name and Links source from allowed sources
- Full Details of the Topcoder Policy can be found in this LINK
Source Files
All source files of all graphics created in Sketch, Figma, Photoshop, Illustrator and XD and saved as an editable layer
FINAL FIXES
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors
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.