Challenge Summary
Welcome to the Topcoder Connect Mobile Design Challenge!
In this challenge we need your help to design few mobile pages for Connect platform from the responsive desktop version. This challenge is not simply a reskinning, but it also includes optimizations for the mobile screens.
Note, this is a Sketch ONLY challenge. If you haven't jumped on board yet, this is a perfect time.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge.
1. Landing Page (After Login)
2. Project View
3. Navigation Menu
- 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. Landing Page (Before Login)
2. Landing Page (After Login)
3. Project View
4. Create a New Project
5. Navigation Menu
- 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.)
Design Problem
The goal of this challenge is to create a better UX for Connect website on the mobile browsers. The Connect platform is used by clients to create and launch their projects. Once they have an account and log in, they can create a project, define their goals an requirements and add any input documentation that’s needed. It’s a fast way to create a project in minutes!
A Topcoder architect will then review the requirements and assign a copilot. The copilot will write challenge specifications and launch the challenge, all while communicating with the client in Connect, the challenge status and phases. Right now, the mobile application doesn’t look good and we need your help to design a good user experience.
Required Pages
In this challenge we are asking for couple of responsive mobile pages as part of the Connect experience. Note: the desktop Sketch source files have been attached and you should look to reuse them.
1. Landing Page (Before Login)
This is the page that user sees when he comes to connect.topcoder.com
The user can see the intro information, can start a project and at a later time make an account, learn more about Connect or login into his account to check status of his project.
2. Landing Page (After Login)
Once the client has logged in he can see a grid with his projects as cards. Think how can the user optimize the navigation. We need the following:
- Navigation
- Project cards
- Option to create a new project
- Footer
3. Project View
This is where the user can see details of his project. Think how to show all this information for mobile – focus on display a top level overview of things and for details let them go to secondary pages (mobile experience). It needs to include the following as per desktop version:
- Navigation tabs
- Project short description
- Project status
- Links to other sites or information referenced in the requirements
- Project Team members which includes: the client, project manager, copilot
- Timeline project updates/ discussions
- Add comment/reply: this should be a separate view and cover the whole screen with a big text area and keyboard underneath
Look to display the information is such a way, that the user can easy access it all at anytime.
4. Create a New Project
On this page we just want the application to detect user is on mobile and show a message like “For the full experience log in to connect.topcoder.com using your desktop browser”.
5. Navigation Menu
We don’t want to clutter the interface, so it’s best to move some of the elements into the drawer menu. Menu should include next items:
- User profile options
- Latest notifications
- Create a project
- Footer information and links
The most important things you need to keep in mind are:
- Usability: we need the client to be able to easy access Connect from mobile and launch his project seamlessly. Think mobile: user should be doing one thing at a time
- Consistency: we have already designed the desktop application so you should reuse existing elements to have a uniform look and feel.
- All these designs will be applied once the mobile browser is detected, and desktop version remains same
Branding
- We have provided the Topcoder Connect Desktop designs. You need to reuse those elements and create the responsive mobile design. Don’t modify colors or styling, focus on user experience.
- The GUI KIT includes typography style, colors, form elements, icons, etc. – look to follow it as close as possible
- Fonts: use only Roboto font and follow the defined sizes in the GUI KIT for labels, headings and body texts as well as defined colors.
- Unit size: we are using 5px as a standard size, so try to keep all distances and line heights as a multiply of that.
- If there is something else you need or have questions, ask the in the forum.
Input:
- Topcoder Connect Desktop designs
- Topcoder GUI KIT
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge, but only use from Nucleo in case you have to.
Target Devices
Responsive mobile application
- Mobile:750px x 1334px / height adjusted accordingly
375px x height adjusted accordingly and export at double size(2x) from Sketch (note: you can use same font sizes from desktop to mobile)
Marvel Prototype
- Request a Marvel Prototype on forums on forums or email 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
- Topcoder New Customers
- Topcoder Project Managers
- Topcoder Copilots
Judging Criteria
- How easy is to use the Connect application on mobile?
- Is the design consistent and follows the UI from desktop designs?
- Hierarchy and organization of content
- Overall design aesthetics
In this challenge we need your help to design few mobile pages for Connect platform from the responsive desktop version. This challenge is not simply a reskinning, but it also includes optimizations for the mobile screens.
Note, this is a Sketch ONLY challenge. If you haven't jumped on board yet, this is a perfect time.
Read the challenge specification carefully and watch the challenge forums for any questions or feedback concerning this challenge.
Round 1
Submit your initial design for a Checkpoint Feedback1. Landing Page (After Login)
2. Project View
3. Navigation Menu
- 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. Landing Page (Before Login)
2. Landing Page (After Login)
3. Project View
4. Create a New Project
5. Navigation Menu
- 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.)
Design Problem
The goal of this challenge is to create a better UX for Connect website on the mobile browsers. The Connect platform is used by clients to create and launch their projects. Once they have an account and log in, they can create a project, define their goals an requirements and add any input documentation that’s needed. It’s a fast way to create a project in minutes!
A Topcoder architect will then review the requirements and assign a copilot. The copilot will write challenge specifications and launch the challenge, all while communicating with the client in Connect, the challenge status and phases. Right now, the mobile application doesn’t look good and we need your help to design a good user experience.
Required Pages
In this challenge we are asking for couple of responsive mobile pages as part of the Connect experience. Note: the desktop Sketch source files have been attached and you should look to reuse them.
1. Landing Page (Before Login)
This is the page that user sees when he comes to connect.topcoder.com
The user can see the intro information, can start a project and at a later time make an account, learn more about Connect or login into his account to check status of his project.
2. Landing Page (After Login)
Once the client has logged in he can see a grid with his projects as cards. Think how can the user optimize the navigation. We need the following:
- Navigation
- Project cards
- Option to create a new project
- Footer
3. Project View
This is where the user can see details of his project. Think how to show all this information for mobile – focus on display a top level overview of things and for details let them go to secondary pages (mobile experience). It needs to include the following as per desktop version:
- Navigation tabs
- Project short description
- Project status
- Links to other sites or information referenced in the requirements
- Project Team members which includes: the client, project manager, copilot
- Timeline project updates/ discussions
- Add comment/reply: this should be a separate view and cover the whole screen with a big text area and keyboard underneath
Look to display the information is such a way, that the user can easy access it all at anytime.
4. Create a New Project
On this page we just want the application to detect user is on mobile and show a message like “For the full experience log in to connect.topcoder.com using your desktop browser”.
5. Navigation Menu
We don’t want to clutter the interface, so it’s best to move some of the elements into the drawer menu. Menu should include next items:
- User profile options
- Latest notifications
- Create a project
- Footer information and links
The most important things you need to keep in mind are:
- Usability: we need the client to be able to easy access Connect from mobile and launch his project seamlessly. Think mobile: user should be doing one thing at a time
- Consistency: we have already designed the desktop application so you should reuse existing elements to have a uniform look and feel.
- All these designs will be applied once the mobile browser is detected, and desktop version remains same
Branding
- We have provided the Topcoder Connect Desktop designs. You need to reuse those elements and create the responsive mobile design. Don’t modify colors or styling, focus on user experience.
- The GUI KIT includes typography style, colors, form elements, icons, etc. – look to follow it as close as possible
- Fonts: use only Roboto font and follow the defined sizes in the GUI KIT for labels, headings and body texts as well as defined colors.
- Unit size: we are using 5px as a standard size, so try to keep all distances and line heights as a multiply of that.
- If there is something else you need or have questions, ask the in the forum.
Input:
- Topcoder Connect Desktop designs
- Topcoder GUI KIT
Stock Artwork & Icons
- Stock photo and icons are allowed for this challenge, but only use from Nucleo in case you have to.
Target Devices
Responsive mobile application
- Mobile:
375px x height adjusted accordingly and export at double size(2x) from Sketch (note: you can use same font sizes from desktop to mobile)
Marvel Prototype
- Request a Marvel Prototype on forums on forums or email 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
- Topcoder New Customers
- Topcoder Project Managers
- Topcoder Copilots
Judging Criteria
- How easy is to use the Connect application on mobile?
- Is the design consistent and follows the UI from desktop designs?
- Hierarchy and organization of content
- Overall design aesthetics
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.