Challenge Summary
Welcome to the Topcoder Connect Part 2 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. We have already run a challenge for designing the first pages and now we are looking for designing the rest of them.
Note: this is a Sketch only challenge.
1. Notifications (portrait view)
2. Create Project (portrait view)
3. Landing Page (portrait view)
4. Landing Page – Search and Filter (portrait view)
1. Notifications (portrait and landscape view)
2. Notifications Settings (portrait and landscape view)
3. Create Project (portrait and landscape view)
4. Landing Page (portrait and landscape view)
5. Landing Page - Search and Filter (portrait and landscape view)
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. A Topcoder admin can see all projects from all times and has the ability to search for specific ones.
In order to see how this application functions right now you can log in on
https://connect.topcoder-dev.com/ with next credentials: username: “pat_monahan” and password: “topcoder123!”. Please note that the pages content might be a little different than the attached Topcoder Connect Part 2 - Desktop.sketch files – and you should follow the sketch files for content usage. When you login with this user, you will see the user flow from the role of an admin.
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 as well as the designs source file for the other Connect mobile pages so look to reuse them as much as possible to keep consistency.
1. Notifications
One of the main usage of Topcoder Connect mobile application is for users to be notified about project statuses. Right now on desktop, when a user clicks the notifications icon, a pop-up will be displayed and user can go to see them all.
We have already designed this page in the previous challenge and you can take that page from the attached design files. We want to improve it by adding the ability for user to:
- mark all notifications as read
- have an option to go to notification settings page.
Once all notifications are read, user should see a new page with a message that he is caught up with everything. Show us how this page looks.
2. Notifications Settings
On this page user will be able to customize what type of notifications he would like to receive. Please check attached Sketch files.
3. Create Project
We need to see the following pages:
-Project creation – Step 1
-Project creation – Step 2
-Specifications
Project creation happens in 2 steps: at first client can pick the type of project he’d like to run by Topcoder: website, chat bot, application, etc. and then he can customize it further. When designing for mobile, we would like you to show 2 project types per line so the user can see more items without scrolling that much.
On second page, the user has different options to add more details for his project. Check the attached desktop source files and include all the elements in your mobile designs: showing number of screens, primary target device, project description, budget, file attachments, etc.
Once the user has created a project he can then go to specifications page and edit it. This page is almost the same as project creation, except that it has headers for each sections like “App Definition” and “Development Specification”, as well as Project Estimation on left side. A user can see project estimation only when he completed all information and then he can submit if for review. On mobile, we’d like to see the project estimation placed on top of screen, so when user does some changes to specifications, he will see how duration and quick quote information will change. Think how can you show this, considering there’s also lot of scrolling.
4. Landing Page (Admin View)
Once the admin has logged into Connect he can see a list with all projects for all clients. Projects can have different status: Active, Draft, In Review, Reviewed, Completed, Cancelled and Paused. The admin can view his projects as list or grid (we only need to see list view) and he can also filter or search projects.
The project will display some data like: ID, project, data last updated etc. but in mobile view we want to see only the important data displayed for each project item:
-Project type (icon)
-Project name
-Description (should show maximum 2 lines of text from desktop page)
-Customer
The representation should be similar to how email is displayed on iOS system, so the admin can see a condensed view of the projects (check example file). From this page, user can see the project details, either by expanding the current list item like an accordion or having a link to go to an entire new page.
As each project has its own status, we’d like them to be grouped: all active projects should stay under same section – this is similar to how Github notifications work(check attached image). At first user will see all sections collapsed: Active Projects, Draft Projects, etc. and when expanded he can see all projects under it who have that status (check attached images for reference).
5. Landing Page (Admin View) – Search and Filter
Show us how search and filter for the projects listing looks. Check on Connect website the flow to see how it should function and look into attached file to re-use same components.
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.
- 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 Files
- Topcoder Connect Part 1 Mobile Designs
- Topcoder Connect Part 2 Desktop Designs
- Topcoder GUI KIT
- Additional referenced files
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 portrait and landscape view:
- Mobile: 375px x height adjusted accordingly and export at double size(2x) from Sketch (note: you can use same fonts and other elements sizes from desktop to mobile and just re-arange them to look good).
Marvel Prototype
- Request a Marvel Prototype 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 Customers
- Topcoder Admins
- 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
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 Sketch source files of the submitted design.
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. We have already run a challenge for designing the first pages and now we are looking for designing the rest of them.
Note: this is a Sketch only challenge.
Round 1
Submit your initial design for a Checkpoint Feedback1. Notifications (portrait view)
2. Create Project (portrait view)
3. Landing Page (portrait view)
4. Landing Page – Search and Filter (portrait view)
Round 2
Submit your Final Design plus Checkpoint Updates1. Notifications (portrait and landscape view)
2. Notifications Settings (portrait and landscape view)
3. Create Project (portrait and landscape view)
4. Landing Page (portrait and landscape view)
5. Landing Page - Search and Filter (portrait and landscape view)
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. A Topcoder admin can see all projects from all times and has the ability to search for specific ones.
In order to see how this application functions right now you can log in on
https://connect.topcoder-dev.com/ with next credentials: username: “pat_monahan” and password: “topcoder123!”. Please note that the pages content might be a little different than the attached Topcoder Connect Part 2 - Desktop.sketch files – and you should follow the sketch files for content usage. When you login with this user, you will see the user flow from the role of an admin.
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 as well as the designs source file for the other Connect mobile pages so look to reuse them as much as possible to keep consistency.
1. Notifications
One of the main usage of Topcoder Connect mobile application is for users to be notified about project statuses. Right now on desktop, when a user clicks the notifications icon, a pop-up will be displayed and user can go to see them all.
We have already designed this page in the previous challenge and you can take that page from the attached design files. We want to improve it by adding the ability for user to:
- mark all notifications as read
- have an option to go to notification settings page.
Once all notifications are read, user should see a new page with a message that he is caught up with everything. Show us how this page looks.
2. Notifications Settings
On this page user will be able to customize what type of notifications he would like to receive. Please check attached Sketch files.
3. Create Project
We need to see the following pages:
-Project creation – Step 1
-Project creation – Step 2
-Specifications
Project creation happens in 2 steps: at first client can pick the type of project he’d like to run by Topcoder: website, chat bot, application, etc. and then he can customize it further. When designing for mobile, we would like you to show 2 project types per line so the user can see more items without scrolling that much.
On second page, the user has different options to add more details for his project. Check the attached desktop source files and include all the elements in your mobile designs: showing number of screens, primary target device, project description, budget, file attachments, etc.
Once the user has created a project he can then go to specifications page and edit it. This page is almost the same as project creation, except that it has headers for each sections like “App Definition” and “Development Specification”, as well as Project Estimation on left side. A user can see project estimation only when he completed all information and then he can submit if for review. On mobile, we’d like to see the project estimation placed on top of screen, so when user does some changes to specifications, he will see how duration and quick quote information will change. Think how can you show this, considering there’s also lot of scrolling.
4. Landing Page (Admin View)
Once the admin has logged into Connect he can see a list with all projects for all clients. Projects can have different status: Active, Draft, In Review, Reviewed, Completed, Cancelled and Paused. The admin can view his projects as list or grid (we only need to see list view) and he can also filter or search projects.
The project will display some data like: ID, project, data last updated etc. but in mobile view we want to see only the important data displayed for each project item:
-Project type (icon)
-Project name
-Description (should show maximum 2 lines of text from desktop page)
-Customer
The representation should be similar to how email is displayed on iOS system, so the admin can see a condensed view of the projects (check example file). From this page, user can see the project details, either by expanding the current list item like an accordion or having a link to go to an entire new page.
As each project has its own status, we’d like them to be grouped: all active projects should stay under same section – this is similar to how Github notifications work(check attached image). At first user will see all sections collapsed: Active Projects, Draft Projects, etc. and when expanded he can see all projects under it who have that status (check attached images for reference).
5. Landing Page (Admin View) – Search and Filter
Show us how search and filter for the projects listing looks. Check on Connect website the flow to see how it should function and look into attached file to re-use same components.
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.
- 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 Files
- Topcoder Connect Part 1 Mobile Designs
- Topcoder Connect Part 2 Desktop Designs
- Topcoder GUI KIT
- Additional referenced files
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 portrait and landscape view:
- Mobile: 375px x height adjusted accordingly and export at double size(2x) from Sketch (note: you can use same fonts and other elements sizes from desktop to mobile and just re-arange them to look good).
Marvel Prototype
- Request a Marvel Prototype 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 Customers
- Topcoder Admins
- 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
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 Sketch source files of the submitted design.
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.