Challenge Summary
Challenge Summary
Welcome to the Topcoder UI/UX Designer Talent Pool Challenge! In this challenge, we want you to showcase your talents to help us identify potential UX/UI designers that will be invited to join a talent pool and work closely with the Topcoder Product team to scale our design efforts. This is going to be a challenge that will have 5 equal prizes. The challenge will have a different review process than the typical review, so please pay attention. It will be very iterative with a lot of feedback sessions.
Challenge Format
Submit your designs of the Topcoder Registration page (Desktop and Mobile responsive) in the following order as soon as you are ready for them to be reviewed:
1. UX Research – Review 1
2. UX Research – Review 2 - Deadline: March 22, 09:00 AM EST
3. UI Mock – Review 1
4. UI Mock – Review 2 - Deadline: March 27, 09:00 AM EST
5. UI Mock – Review 3 - Deadline: April 1, 09:00 AM EST (note: you CAN submit to this stage, even if you didn't submit before anything!)
6. UI Specification – Review 1
7. UI Specification – Review 2 - Final deadline: April 4, 09:00 AM EST
Full Description & Project Guide
Background Overview
For this challenge we want to identify designers that are equally versed in UI and UX design. The goal is to examine the problems, build the UI, and the final development specification of a single front-end component.
THE CHALLENGE
This project is about designing an improved version of the Topcoder registration experience: https://accounts.topcoder.com/member/registration
In order to do that, it’s mandatory to follow a couple of steps in the below order. These steps will be similar to what you will do if you’re going to join the Topcoder Design pool.
1. UX Research: Research and suggest an improved flow for the Topcoder registration experience.
2. UI Mock: Build the UI Mock of the registration interface. Showcase the component states.
3. UI Design Specification: Build the specification of the registration component:
- ALL states of the UI
- ALL breakpoints
- Mobile and Desktop
- Sub Components Used
IMPORTANT
We want to explore your process and evaluate the UX and UI skills. Please focus on a single flow (registration) but explore all the cases, list all the problems you can think of. We DO NOT want you to digress with additional flows such as lost password, social login, Single Sign On, email verification, 2-step authentication, etc..
REVIEW PROCESS
This is a different type of review. We are open to provide 2 feedback sessions per stage — UX research, UI mock, UI specification — for a total of 6. The goal is to identify how you work with a design team in an iterative setting. The reviews will be on demand — as soon as you have a completed set of artifacts, submit them and post in the forum that you are ready for a review. Please ask questions for clarification - we value the questions you ask as much as the final deliverables you’ll show us.
DESIGN BRIEF
We want to evaluate your UX and UI design skills with a simple challenge. The end goal is to build a registration component. The challenge is aimed to emulate the iterative process of product design, so please be proactive and ask questions to ensure you’ll be successful.
1. UX Research
The registration flow should be based on the current process on Topcoder, and we would assume the same data and functions are to be carried over. Please research and recommend improvements in the overall UX flow for registration. The goal is to have a new community member registered quickly and painlessly.
At this stage we care about UX Analysis and Research, what can be done better. This should be a UX report which should show which is the problem, potential solutions, comparison of best practices. Here’s a very simple example: http://www.alexislucio.com/#/sysdig-spotlight/ (Research and Insights)
You can search how other companies are treating their registration page to come up with new ideas and solutions. Think about a plan to improve the registration component, you can add annotations on a screenshot of existing page or any other method that works for you.
2. UI Mock
The UI exploration should start with exploring 2 directions for style that will align with our brand, but should strive to improve the overall aesthetics of the page - layout, typography, hierarchy, color, scale, etc.
This part is about concepts and UI effective designing in Sketch. It’s what we are used to do on a regular challenge. Here's the Topcoder logo to use.
3. UI Design Specification
Based on the UI directions a final component specification of the registration will be required, outlining all the states of the components so a developer can look at your specification and develop the components in code. This should include all interactive states of all components, flow states with content and cases — empty, editing, error, short password, very long password, etc..
Here’s an example of a specification:
https://marvelapp.com/896b1jd/screen/54501169
For this challenge you should use Sketch only!
Stock Artwork & Icons
- Public stock photo and icons are not allowed in this challenge. You can only use photos taken by you or from our Topcoder Flickr album. All the icons should be created by you.
Sizes
This design should be an adaptive one so you should follow the below sizes for different breakpoints:
Web: 900px (min on desktop), 1024px, 1280px, 1600+px
Mobile: 320px, 375px (can use same resolution as for web and export at double size)
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 members and customers
Judging Criteria
- Familiarity with the 3 stages of UX Research, UI Mock and UI Specifications
- How good your UX Research skills are
- How clean your UI Mockup design is
- How complete your UI Specifications are
- 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
Welcome to the Topcoder UI/UX Designer Talent Pool Challenge! In this challenge, we want you to showcase your talents to help us identify potential UX/UI designers that will be invited to join a talent pool and work closely with the Topcoder Product team to scale our design efforts. This is going to be a challenge that will have 5 equal prizes. The challenge will have a different review process than the typical review, so please pay attention. It will be very iterative with a lot of feedback sessions.
Challenge Format
Submit your designs of the Topcoder Registration page (Desktop and Mobile responsive) in the following order as soon as you are ready for them to be reviewed:
1. UX Research – Review 1
2. UX Research – Review 2 - Deadline: March 22, 09:00 AM EST
3. UI Mock – Review 1
4. UI Mock – Review 2 - Deadline: March 27, 09:00 AM EST
5. UI Mock – Review 3 - Deadline: April 1, 09:00 AM EST (note: you CAN submit to this stage, even if you didn't submit before anything!)
6. UI Specification – Review 1
7. UI Specification – Review 2 - Final deadline: April 4, 09:00 AM EST
Full Description & Project Guide
Background Overview
For this challenge we want to identify designers that are equally versed in UI and UX design. The goal is to examine the problems, build the UI, and the final development specification of a single front-end component.
THE CHALLENGE
This project is about designing an improved version of the Topcoder registration experience: https://accounts.topcoder.com/member/registration
In order to do that, it’s mandatory to follow a couple of steps in the below order. These steps will be similar to what you will do if you’re going to join the Topcoder Design pool.
1. UX Research: Research and suggest an improved flow for the Topcoder registration experience.
2. UI Mock: Build the UI Mock of the registration interface. Showcase the component states.
3. UI Design Specification: Build the specification of the registration component:
- ALL states of the UI
- ALL breakpoints
- Mobile and Desktop
- Sub Components Used
IMPORTANT
We want to explore your process and evaluate the UX and UI skills. Please focus on a single flow (registration) but explore all the cases, list all the problems you can think of. We DO NOT want you to digress with additional flows such as lost password, social login, Single Sign On, email verification, 2-step authentication, etc..
REVIEW PROCESS
This is a different type of review. We are open to provide 2 feedback sessions per stage — UX research, UI mock, UI specification — for a total of 6. The goal is to identify how you work with a design team in an iterative setting. The reviews will be on demand — as soon as you have a completed set of artifacts, submit them and post in the forum that you are ready for a review. Please ask questions for clarification - we value the questions you ask as much as the final deliverables you’ll show us.
DESIGN BRIEF
We want to evaluate your UX and UI design skills with a simple challenge. The end goal is to build a registration component. The challenge is aimed to emulate the iterative process of product design, so please be proactive and ask questions to ensure you’ll be successful.
1. UX Research
The registration flow should be based on the current process on Topcoder, and we would assume the same data and functions are to be carried over. Please research and recommend improvements in the overall UX flow for registration. The goal is to have a new community member registered quickly and painlessly.
At this stage we care about UX Analysis and Research, what can be done better. This should be a UX report which should show which is the problem, potential solutions, comparison of best practices. Here’s a very simple example: http://www.alexislucio.com/#/sysdig-spotlight/ (Research and Insights)
You can search how other companies are treating their registration page to come up with new ideas and solutions. Think about a plan to improve the registration component, you can add annotations on a screenshot of existing page or any other method that works for you.
2. UI Mock
The UI exploration should start with exploring 2 directions for style that will align with our brand, but should strive to improve the overall aesthetics of the page - layout, typography, hierarchy, color, scale, etc.
This part is about concepts and UI effective designing in Sketch. It’s what we are used to do on a regular challenge. Here's the Topcoder logo to use.
3. UI Design Specification
Based on the UI directions a final component specification of the registration will be required, outlining all the states of the components so a developer can look at your specification and develop the components in code. This should include all interactive states of all components, flow states with content and cases — empty, editing, error, short password, very long password, etc..
Here’s an example of a specification:
https://marvelapp.com/896b1jd/screen/54501169
For this challenge you should use Sketch only!
Stock Artwork & Icons
- Public stock photo and icons are not allowed in this challenge. You can only use photos taken by you or from our Topcoder Flickr album. All the icons should be created by you.
Sizes
This design should be an adaptive one so you should follow the below sizes for different breakpoints:
Web: 900px (min on desktop), 1024px, 1280px, 1600+px
Mobile: 320px, 375px (can use same resolution as for web and export at double size)
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 members and customers
Judging Criteria
- Familiarity with the 3 stages of UX Research, UI Mock and UI Specifications
- How good your UX Research skills are
- How clean your UI Mockup design is
- How complete your UI Specifications are
- 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.