Challenge Summary
Welcome to the XPRIZE - Competition and Operations Portal Design Concepts Challenge. We are looking for all NEW design concepts for the XPRIZE competition and operation application portal. This new Responsive portal will serve as the operations platform for the XPRIZE Foundation. This new portal will register users, competitors, judges, advocates etc. who will be participating in some aspect of the XPRIZE program. Think of this as our internal portal where customers can manage their XPRIZE challenges and where we can help communicate and manage the process. We expect the portal to be heavily used with traffic above 100,000 registrants.
*Note:
- This is a repost where we have clarified our screen requests and focus
- Branding: Your design should NOT mimic anything from the existing XPrize branding/sites etc. We are looking for something new.
Best of luck!
1) Dashboard (Phone and Desktop)
2) Team Page (Phone and Desktop)
3) Prize/Program Detail Page (Phone and Desktop)
- Submit a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Dashboard (Phone and Desktop)
2) Team Page (Phone and Desktop)
3) Prize/Program Detail Page (Phone and Desktop)
4) Individual Profile Page (Phone and Desktop)
+ Onboarding/First-Time user screens
5) Register/Login (Desktop)
6) Prizes Listing (Desktop)
7) Search (Teams/Prizes) (Desktop)
- Submit a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details
The goal of this challenge is to design the look and feel for our new competition and operations portal. This portal will be the one stop shop for the operations team and our external network of competitors, judges, mentors, ambassadors, and partners. This means that an XPRIZE competitor should be able to log in, see all information and communication related to their competition, submit or provide information as necessary and connect with our broader community for a variety of purposes.
We are providing some rough wireframes for reference. In this challenge, we are looking for NEW solutions and your suggestions for best practices in usability and for designing modern and smart responsive applications.
Competition and Operations Design Goals
The platform must be a one stop shop for competition teams to register and provide documentation and submissions to XPRIZE. It should feel like a really sleek “Linkedin” for innovators but with additional functionality for judging.
- Design should be clean and simple but visually beautiful and be engaging to the user.
- DO NOT use or copy the XPrize website. You will fail this challenge. Since this is an "internal" operations application it is okay that the design is different.
The User Workflow
There will be a wide variety of users of the platform. The UI and experience for the user will be the same, but we will require some additional features depending on each role (see Workflows.pdf):
- Competitor
- Team Lead
- Judge
- Mentor
- Ambassador
- Partner
- Admin/XPRIZE Staff
- General XPRIZE Staff
Screen Requirements
Overall
- Review Workflows.pdf
- Capture hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
Overall Onboarding/First-Time User Experience and Process
- Look to design a friendly onboarding strategy to explain to the user what the different sections are about and how to use them. We like the Slack approach, using floating hints/overlays to point out with messages the goals of the UI features.
1. *Dashboard (Phone and Desktop)
See page #2 from the provided wireframes
- Once a user logs in they will land on their Dashboard
- This is a priority page in the experience - really think about how this will look and work.
- Action items a user can take from their dashboard
-- Start a Team
-- Join a Team
-- Mentor a Team.
- The dashboard will display recognition badges, show programs and latest news they might be following.
- Display program/prize information for each program/prize they are involved with including the name of the prize/program, their role, the timeline/next up activities, prompts, and notifications.
- First-time user experience: Realize there should be an onboarding flow (first-time user where we need them to complete things) and existing user view.
2. *Team Page (Phone and Desktop)
See page #3 from the provided wireframes
- In XPRIZE we have competitions where "Teams" register to compete. This page is all about that team.
- This page provides legal and contact information for a team that is registered to compete in a competition. Users will be prompted regarding completing their profile (complete/strength like Linkedin) and any next steps/activities. They will be able to see prize timelines, view upcoming and prior submissions, manage team members, team story, and logo, manage skillset postings, post impact stories, post links to external sites, showcase badges for prior awards/competitions and display current competition status.
- This is where a Team gets to showcase who they are.
- First-time user experience: The Team "Setup" will have an initial "first-time user" setup wizard that walks the user through their Team page setup.
Features
- Users would be able to edit and update their team's profile (like a Linkedin profile)
-- Team story (edit)
-- Team members (invite, remove)
-- Teams legal information (edit),
-- Open positions (add, remove).
- Clicking “Invite” in team members section should activate a method/form requesting for email and message to invite a member to join the team.
- Submissions section display's a list of items (submissions). There should be a way to distinguish the group of submissions (open and closed).
- Each submission should display title, due date, score (a number between 0 and 10) and status (open, in progress, submitted, closed).
- Users can see a list of open positions, which are just like job postings; a team may need help from an engineer so they would post that they need that skillset, etc.
3. *Prize/Program Detail Page (Phone and Desktop)
See page #1 from the provided wireframes
- This is the dashboard level information about an XPRIZE program or prize including timeline, news, information on participants, resources (documents, FAQ's etc.), social media feeds and the option to follow etc.
- The user should be able to see a high-level information about a program/prize. The status should indicate where the prize is in its timeline.
- The user is able to see the XPRIZE program team (who is hosting the program/prize).
- The user is able to see recent news (title, thumbnail, brief). When clicking a news title or action button, a user is able to see news details (full content, photos, etc).
- The user is can see an overall timeline of the prize
- Resources should display a list/grid of items. These items are categorized by Documents (title, description) and FAQs (common questions and answers).
- The user is able to see social media feed about the topics around this program/prize page.
- The user is able to see a list/set of information about the teams that already joined this program. Each team info should contain the team badge/thumbnail, name, and location.
4. Individual Profile Page (Phone and Desktop)
See page #4 from the provided wireframe.
- This is the individual user's profile page. A user will be able to edit sections of their profile (like a Linkedin profile): Skills and accomplishments (add, remove), personal information (edit), affiliations (add, remove).
- This page will display a user's name, location, IPRIZE statement, recognition badges, profile views, profile strength card and action prompts.
- Display and manage skills and accomplishments including skills, honors, education etc.
- Display and manage personal information including nationality, email, phone, gender, birth year, social media, current organizational affiliation and title, background info, prior and/or current team membership. Should have an initial setup wizard that walks the user through first time setup.
- First-time user experience: A user profile "Setup" will have an initial "first-time user" setup wizard that walks the user through creating their profile.
~
Additional Screens to help with the user flow
5. Register/Login (Desktop)
- The user should be able to sign up or login into the site.
- In the register scenario, the user should be asked for First Name, Last Name, Email, Password and Invitation Code. The user should be able to register by using social network accounts, Facebook or Linkedin.
- Reference the provided diagram flow
6. Prizes Listing Page (Desktop)
- A user can see a set of programs (prizes) currently active.
- Each prize has a title, short description, thumbnail and action link to see a details view.
7. Search (Teams/Prizes) (Desktop)
- Search should be very powerful and useful in the portal. It will be an individual page and not a modal window.
- A user is able to search for teams to join.
- A user should be able to search for prizes
- Search capabilities should allow to narrow down results by parameters such as team name, program, needed skills, location, etc.
- A user can select one or more teams he wants to join and apply.
~
Branding Guidelines
- Colors, style, and typography must be original, do not follow any reference from the existing website.
- Use the provided logo.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1440px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Innovators, engineers, thought leaders, academics will be primary users.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
*Note:
- This is a repost where we have clarified our screen requests and focus
- Branding: Your design should NOT mimic anything from the existing XPrize branding/sites etc. We are looking for something new.
Best of luck!
Round 1
Submit all listed items for Checkpoint Review.1) Dashboard (Phone and Desktop)
2) Team Page (Phone and Desktop)
3) Prize/Program Detail Page (Phone and Desktop)
- Submit a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your Final Designs plus checkpoint feedback.1) Dashboard (Phone and Desktop)
2) Team Page (Phone and Desktop)
3) Prize/Program Detail Page (Phone and Desktop)
4) Individual Profile Page (Phone and Desktop)
+ Onboarding/First-Time user screens
5) Register/Login (Desktop)
6) Prizes Listing (Desktop)
7) Search (Teams/Prizes) (Desktop)
- Submit a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Details
The goal of this challenge is to design the look and feel for our new competition and operations portal. This portal will be the one stop shop for the operations team and our external network of competitors, judges, mentors, ambassadors, and partners. This means that an XPRIZE competitor should be able to log in, see all information and communication related to their competition, submit or provide information as necessary and connect with our broader community for a variety of purposes.
We are providing some rough wireframes for reference. In this challenge, we are looking for NEW solutions and your suggestions for best practices in usability and for designing modern and smart responsive applications.
Competition and Operations Design Goals
The platform must be a one stop shop for competition teams to register and provide documentation and submissions to XPRIZE. It should feel like a really sleek “Linkedin” for innovators but with additional functionality for judging.
- Design should be clean and simple but visually beautiful and be engaging to the user.
- DO NOT use or copy the XPrize website. You will fail this challenge. Since this is an "internal" operations application it is okay that the design is different.
The User Workflow
There will be a wide variety of users of the platform. The UI and experience for the user will be the same, but we will require some additional features depending on each role (see Workflows.pdf):
- Competitor
- Team Lead
- Judge
- Mentor
- Ambassador
- Partner
- Admin/XPRIZE Staff
- General XPRIZE Staff
Screen Requirements
Overall
- Review Workflows.pdf
- Capture hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
Overall Onboarding/First-Time User Experience and Process
- Look to design a friendly onboarding strategy to explain to the user what the different sections are about and how to use them. We like the Slack approach, using floating hints/overlays to point out with messages the goals of the UI features.
1. *Dashboard (Phone and Desktop)
See page #2 from the provided wireframes
- Once a user logs in they will land on their Dashboard
- This is a priority page in the experience - really think about how this will look and work.
- Action items a user can take from their dashboard
-- Start a Team
-- Join a Team
-- Mentor a Team.
- The dashboard will display recognition badges, show programs and latest news they might be following.
- Display program/prize information for each program/prize they are involved with including the name of the prize/program, their role, the timeline/next up activities, prompts, and notifications.
- First-time user experience: Realize there should be an onboarding flow (first-time user where we need them to complete things) and existing user view.
2. *Team Page (Phone and Desktop)
See page #3 from the provided wireframes
- In XPRIZE we have competitions where "Teams" register to compete. This page is all about that team.
- This page provides legal and contact information for a team that is registered to compete in a competition. Users will be prompted regarding completing their profile (complete/strength like Linkedin) and any next steps/activities. They will be able to see prize timelines, view upcoming and prior submissions, manage team members, team story, and logo, manage skillset postings, post impact stories, post links to external sites, showcase badges for prior awards/competitions and display current competition status.
- This is where a Team gets to showcase who they are.
- First-time user experience: The Team "Setup" will have an initial "first-time user" setup wizard that walks the user through their Team page setup.
Features
- Users would be able to edit and update their team's profile (like a Linkedin profile)
-- Team story (edit)
-- Team members (invite, remove)
-- Teams legal information (edit),
-- Open positions (add, remove).
- Clicking “Invite” in team members section should activate a method/form requesting for email and message to invite a member to join the team.
- Submissions section display's a list of items (submissions). There should be a way to distinguish the group of submissions (open and closed).
- Each submission should display title, due date, score (a number between 0 and 10) and status (open, in progress, submitted, closed).
- Users can see a list of open positions, which are just like job postings; a team may need help from an engineer so they would post that they need that skillset, etc.
3. *Prize/Program Detail Page (Phone and Desktop)
See page #1 from the provided wireframes
- This is the dashboard level information about an XPRIZE program or prize including timeline, news, information on participants, resources (documents, FAQ's etc.), social media feeds and the option to follow etc.
- The user should be able to see a high-level information about a program/prize. The status should indicate where the prize is in its timeline.
- The user is able to see the XPRIZE program team (who is hosting the program/prize).
- The user is able to see recent news (title, thumbnail, brief). When clicking a news title or action button, a user is able to see news details (full content, photos, etc).
- The user is can see an overall timeline of the prize
- Resources should display a list/grid of items. These items are categorized by Documents (title, description) and FAQs (common questions and answers).
- The user is able to see social media feed about the topics around this program/prize page.
- The user is able to see a list/set of information about the teams that already joined this program. Each team info should contain the team badge/thumbnail, name, and location.
4. Individual Profile Page (Phone and Desktop)
See page #4 from the provided wireframe.
- This is the individual user's profile page. A user will be able to edit sections of their profile (like a Linkedin profile): Skills and accomplishments (add, remove), personal information (edit), affiliations (add, remove).
- This page will display a user's name, location, IPRIZE statement, recognition badges, profile views, profile strength card and action prompts.
- Display and manage skills and accomplishments including skills, honors, education etc.
- Display and manage personal information including nationality, email, phone, gender, birth year, social media, current organizational affiliation and title, background info, prior and/or current team membership. Should have an initial setup wizard that walks the user through first time setup.
- First-time user experience: A user profile "Setup" will have an initial "first-time user" setup wizard that walks the user through creating their profile.
~
Additional Screens to help with the user flow
5. Register/Login (Desktop)
- The user should be able to sign up or login into the site.
- In the register scenario, the user should be asked for First Name, Last Name, Email, Password and Invitation Code. The user should be able to register by using social network accounts, Facebook or Linkedin.
- Reference the provided diagram flow
6. Prizes Listing Page (Desktop)
- A user can see a set of programs (prizes) currently active.
- Each prize has a title, short description, thumbnail and action link to see a details view.
7. Search (Teams/Prizes) (Desktop)
- Search should be very powerful and useful in the portal. It will be an individual page and not a modal window.
- A user is able to search for teams to join.
- A user should be able to search for prizes
- Search capabilities should allow to narrow down results by parameters such as team name, program, needed skills, location, etc.
- A user can select one or more teams he wants to join and apply.
~
Branding Guidelines
- Colors, style, and typography must be original, do not follow any reference from the existing website.
- Use the provided logo.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1440px min width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Provide a MarvelApp presentation of your design to help us understand your design concept.
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com).
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
Innovators, engineers, thought leaders, academics will be primary users.
Judging Criteria
- Interpretation of the user experience.
- Is the website/application easy to use/intuitive?
- Cleanliness of your graphics and design.
- Are mobile-first considerations appropriately applied to the design concept?
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.