Challenge Summary
Welcome to the “Topcoder TaaS Intake UI Design Concept Challenge"! The scope of this challenge is to plan and design a better user experience for the customers coming to Topcoder for TaaS work as they are looking to find new members for their projects.
Note: although this is a challenge for Topcoder, we allow the usage of any design tool, not just Sketch. The look and feel of the application should be Topcoder, as in using colors and fonts we have, but we’re not strict on using the GUI KIT / it’s not a judging criteria. We’re looking for your creative ideas here.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
1. Create TaaS Team
1.1. Select a Role
1.2. Input Skills
1.3. Input Job Description
2. Search
3.1 Match Found
3.2 Match Not Found
1. Create TaaS Team
1.1. Select a Role
1.2. Input Skills
1.3. Input Job Description
2. Search
3.1 Match Found
3.2 Match Not Found
4. Xeno User Rates
5. Global Rate
Challenge Objectives
Project Overview
Audience
Persona
User Story
Mike is using the Topcoder TaaS micro application to create a team with members to help him with his project. He needs 10 members skilled in Python and SQL. He is using the newly developed interface developed by Topcoder where he can input requirements either by role, skill or input a job description.
He uses the skill option and on the next page he sees that this job is a fit of the Backend Developer role and that now there are 86 members matching it. He can also see that 40% of them can work full time and 60% part time only in the TaaS. Then the system will determine automatically that Mike is not a Xeno user (this is because Xeno customers have a special rate). He will be then taken to the screen where he can see the specific payment rates based on how many of them will be full time and how many part time. After this step, the process is closed.
Design Goals & Principles
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
Glossary
TaaS = Talent as a Service, is the new workforce model where the customers can hire one or more members for a project for the duration of a few weeks to a few months, part time or full time. It’s what it’s known to the community as Gig Work.
WYSIWYG = is an abbreviation for What You See Is What You Get, an editor that allows you to edit and format text and it will display the same way as it will show when published. Example here.
Background
In this challenge, we plan to design an experience for our customer when looking for members for their TaaS work. The application plans to show the clients that we have the members and what’s their rate. We won't show members right away in any of the screens as that will all still happen in another separate application. This application just gives them the high level info: if we can do it, and what it will cost. It should instill confidence that Topcoder can handle the need.
If the members are not found like for example a rare skill is desired, the application will assure the customers that we are doing our best to find those members and we’ll return back to them soon with updates.
We have added a flowchart for you to better understand the connections between the below listed screens and how the userflow works.
Note that you can group, merge screens as you wish as long as you have the functionality to meet the requirements. While we have several steps here, we don’t wish to make the process seem long (might help having an indicator of progress).
We are looking for your ideas and creativity here:
SCREENS REQUIREMENTS
1. Create TaaS Team
In the TaaS microapplication, the users can create several teams for the projects they need with different people. What we are designing here is just a little part of the TaaS application, where the user can search and see if we have the members with the skills needed for his project. The user will not create a specific team of 10 people here, just check on the availability on the resource in general.
The design should be placed in this frame so it fits the TaaS microapplication.
On the left side, next to My Teams, there should be an option to Create a New Team. Then on this page the user will see:
Topcoder is going to create roles behind the screens, so if a user searches by a role, that will return a match result for sure. If the user is adding skills or description, then the system will try to match that as close as possible to a role/resource.
1.1. Select a Role
Note: This can be a separate page or it can be displayed on the previous one. Up to you how you represent it.
On this page the user is shown with several member roles to choose that he thinks will fit his team the best. Examples of roles are:
Think about how to show these options in an engaging way - can be a list but you could also display them visually all at once as their number will be limited.
1.2. Input Skills
Note: This can be a separate page or it can be displayed on the previous one. Up to you how you represent it.
Here the customer will be selecting from the existing member skills. Skill examples include:
Think about how to show these options in an engaging way - can be a list but you could also display them visually all at once as their number will be limited.
1.3. Input Job Description
Note: This can be a separate page or it can be displayed on the previous one. Up to you how you represent it.
In this case the user will have an editor WYSIWYG where he can add his description of the members he is looking for (an example of an editor is here, but we can have it simpler). Based on what the customer is adding here, the algorithm behind will try to guess what the potential role/match could be.
2. Search
While the system is performing a search, and especially for the cases where we use a description, we’d like to see a screen with more graphics, something engaging. An example would be a map with people all around the world showing up or some other interesting progress representation. Looking forward to your ideas here.
3.1 Match Found
If the user has selected a role at the previous step, the system will find a match for sure as all the roles have been previously defined by the Topcoder team so the user will go to screen 4. Xeno User
If the user has selected skills or added description, the system will try to find a match for him. If it passes a certain threshold, this page will be displayed with the following data:
3.2 Match Not Found
If a match was not found we will:
4. Xeno User Rates
Some of the users, from the Xeno company, are having a special rate card for the TaaS services than the rest of the world so the system will automatically detect if it’s a Xeno user.
If the user is part of the Xeno company, we will display their rates based on the below:
5. Global Rates
If the user not part of the Xeno company then:
Branding Guideline
Size
Desktop: 1366 x 768px (width x height)
Stock Photos and Icons
Marvel Projects
Final Deliverables
Note: although this is a challenge for Topcoder, we allow the usage of any design tool, not just Sketch. The look and feel of the application should be Topcoder, as in using colors and fonts we have, but we’re not strict on using the GUI KIT / it’s not a judging criteria. We’re looking for your creative ideas here.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
Round 1
Submit your initial designs for checkpoint review. Feel free to add any screens which are necessary to explain your concept.1. Create TaaS Team
1.1. Select a Role
1.2. Input Skills
1.3. Input Job Description
2. Search
3.1 Match Found
3.2 Match Not Found
Round 2
Submit your final designs plus checkpoint feedback implemented. Feel free to add any screens which are necessary to explain your concept.1. Create TaaS Team
1.1. Select a Role
1.2. Input Skills
1.3. Input Job Description
2. Search
3.1 Match Found
3.2 Match Not Found
4. Xeno User Rates
5. Global Rate
Challenge Objectives
- This is a web application and will be part of the TaaS micro application
- 10 simple screens to be designed
- The design will live in a provided frame
- Plan to create a simple and streamlined experience for the users
Project Overview
- The purpose of this challenge is to design a new process, more simple and efficient for Topcoder customers when they wish to find specific members for their projects
- The application will consists on just a few steps to complete for the user and at the end, the customer will get a clear response if there are members in the community that meet his requirements or not and what the next steps are
- The customer will also be informed about pay rates
- In the current system, once the customer enter his requirements he has to wait for a while until someone gets in contact with him and we wish to change that
Audience
- Topcoder customers who are searching for members to work on their projects
Persona
- Name: Mike
- Occupation: Project Manager at HP
- Goals:
- Mike would like to like to create a team with 10 Python and SQL developers for his project on Topcoder
- He would like to see their availability and cost
- Frustrations:
- With the current Topcoder system, Mike has to add many details about his project and at the end of it, he doesn’t get a clear answer if Topcoder has the members with that skill or not. Besides that, there is a time lag seeing the candidates.
- Cost estimations are also handled offline
- Wants:
- A way to add only the essential data he needs in order to find out if Topcoder has members with those skills
- If available, he should see the resource availability and cost estimation
User Story
Mike is using the Topcoder TaaS micro application to create a team with members to help him with his project. He needs 10 members skilled in Python and SQL. He is using the newly developed interface developed by Topcoder where he can input requirements either by role, skill or input a job description.
He uses the skill option and on the next page he sees that this job is a fit of the Backend Developer role and that now there are 86 members matching it. He can also see that 40% of them can work full time and 60% part time only in the TaaS. Then the system will determine automatically that Mike is not a Xeno user (this is because Xeno customers have a special rate). He will be then taken to the screen where he can see the specific payment rates based on how many of them will be full time and how many part time. After this step, the process is closed.
Design Goals & Principles
- The style of the design should be simple and clean and in big lines, it should look like it belongs to Topcoder
- We are focusing mostly on concepts here, rather than a perfect UI, so following the GUI KIT is not a judging criteria
- The application design should be placed within this frame
Exploration Score
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:
- Creativity: 9
- 1: barely new ideas
- 10: a utopic product with features not proven to be able to be fully implemented
- Aesthetics: 5
- 1: low-fidelity design, wireframe or plain sketch
- 10: top-notch finished looking visual design
- Exploration: 8
- 1: strictly follow an existing reference or production guideline
- 10: open to alternative workflows/features not listed here that would help the overall application
- Branding: 3
- 1: don’t care at all about the branding just functionality
- 10: without a properly branded product there is no success
Glossary
TaaS = Talent as a Service, is the new workforce model where the customers can hire one or more members for a project for the duration of a few weeks to a few months, part time or full time. It’s what it’s known to the community as Gig Work.
WYSIWYG = is an abbreviation for What You See Is What You Get, an editor that allows you to edit and format text and it will display the same way as it will show when published. Example here.
Background
In this challenge, we plan to design an experience for our customer when looking for members for their TaaS work. The application plans to show the clients that we have the members and what’s their rate. We won't show members right away in any of the screens as that will all still happen in another separate application. This application just gives them the high level info: if we can do it, and what it will cost. It should instill confidence that Topcoder can handle the need.
If the members are not found like for example a rare skill is desired, the application will assure the customers that we are doing our best to find those members and we’ll return back to them soon with updates.
We have added a flowchart for you to better understand the connections between the below listed screens and how the userflow works.
Note that you can group, merge screens as you wish as long as you have the functionality to meet the requirements. While we have several steps here, we don’t wish to make the process seem long (might help having an indicator of progress).
We are looking for your ideas and creativity here:
- Think how can improve this flow can be more helpful to the user
- Do you research on how other websites in this space are processing the way customers request for resources/ members. Many times, the customers are asked about this when they create a profile. Examples of sites you could check are Turing, Toptal, Freelancer, Fiverr, and many others.
- What other new ideas can you add to the application that we didn’t think of?
SCREENS REQUIREMENTS
1. Create TaaS Team
In the TaaS microapplication, the users can create several teams for the projects they need with different people. What we are designing here is just a little part of the TaaS application, where the user can search and see if we have the members with the skills needed for his project. The user will not create a specific team of 10 people here, just check on the availability on the resource in general.
The design should be placed in this frame so it fits the TaaS microapplication.
On the left side, next to My Teams, there should be an option to Create a New Team. Then on this page the user will see:
- A field to enter the team name
- A short description about the team/ project
- Then he will have to choose from one of the 3 options below how to find members matching his requirements
- Select a Role - this is the easier option, when the customer know they want a front end developer, or a full stack developer, mobile one or others
- Input Skills - in this situation the customer knows his developer has specific skills, such as for example: Java, Python, Oracle, etc.
- Input Job Description - this is the scenario where the customer is using a description to explain what he needs (this is the most vague from the 3 options)
Topcoder is going to create roles behind the screens, so if a user searches by a role, that will return a match result for sure. If the user is adding skills or description, then the system will try to match that as close as possible to a role/resource.
1.1. Select a Role
Note: This can be a separate page or it can be displayed on the previous one. Up to you how you represent it.
On this page the user is shown with several member roles to choose that he thinks will fit his team the best. Examples of roles are:
- Angular Developer
- React Developer
- Salesforce Developer
- Java / Spring Developer
- DevOps Engineer
- Data Engineer
Think about how to show these options in an engaging way - can be a list but you could also display them visually all at once as their number will be limited.
1.2. Input Skills
Note: This can be a separate page or it can be displayed on the previous one. Up to you how you represent it.
Here the customer will be selecting from the existing member skills. Skill examples include:
- Python
- SQL
- Oracle
- Java
- etc.
Think about how to show these options in an engaging way - can be a list but you could also display them visually all at once as their number will be limited.
1.3. Input Job Description
Note: This can be a separate page or it can be displayed on the previous one. Up to you how you represent it.
In this case the user will have an editor WYSIWYG where he can add his description of the members he is looking for (an example of an editor is here, but we can have it simpler). Based on what the customer is adding here, the algorithm behind will try to guess what the potential role/match could be.
2. Search
While the system is performing a search, and especially for the cases where we use a description, we’d like to see a screen with more graphics, something engaging. An example would be a map with people all around the world showing up or some other interesting progress representation. Looking forward to your ideas here.
3.1 Match Found
If the user has selected a role at the previous step, the system will find a match for sure as all the roles have been previously defined by the Topcoder team so the user will go to screen 4. Xeno User
If the user has selected skills or added description, the system will try to find a match for him. If it passes a certain threshold, this page will be displayed with the following data:
- A message such as “We have matching profiles” ( because sometimes it could not be a specific role match, but might map to a resource/ developer we have)
- Matching Rate: “80%”
- Numbers of Members (who are counting in that role): “300”
- Show time availability such as :
- 60% of members are available 20 hours / week (part time)
- 20% of members are available 30 hours / week (part time)
- 10% of members are available 40 hours / week (full time)
3.2 Match Not Found
If a match was not found we will:
- Let the customer know that this is a niche skill they are asking for we will be looking internally for members matching their requirements and be back at them in about 2 weeks
- Display niche rate details: this will be the fixed cost for any niche roles
4. Xeno User Rates
Some of the users, from the Xeno company, are having a special rate card for the TaaS services than the rest of the world so the system will automatically detect if it’s a Xeno user.
If the user is part of the Xeno company, we will display their rates based on the below:
- Xeno has a couple rates types: Junior, Standard and Senior rates
- The rates should be displayed for the full time (40h / week) and part time (20 and 30h / week) members
- If the required skill is a niche one, we will only show the Standard rate
5. Global Rates
If the user not part of the Xeno company then:
- Display the rates for the full time (40h / week) and part time (20 and 30h / week) members
- Display average cost/ week
- Fulfillment ETA: for example “Qualified candidates within 24h” / “ Interviews can start within 48h”
Branding Guideline
- Follow the Topcoder branding in BIG lines - that means to:
- Use Roboto font family for regular text and Barlow/Barlow Condensed for titles
- Place your design in this frame on the right side similar to this page.
- You can use any icons allowed in the Topcoder rules or the Streamline icon set (shared in the forums)
- NOTE: we are not looking for following the Topcoder GUI KIT exactly (download from here)
Size
Desktop: 1366 x 768px (width x height)
Stock Photos and Icons
- Photos are allowed in this challenge
- Icons: you can only use icons that are allowed by Topcoder icons policy or the Streamline icon set that we usually use in the Topcoder challenge (link to it will be provided in the forums)
- Fonts: use Roboto font family for regular text and Barlow/Barlow Condensed for titles
Marvel Projects
- Upload your screens to Marvel App.
- Ask in the forums for the Marvel project
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
Final Deliverables
- Create an archive with all 3 items below:
- An archive called Source.zip file to include:
- All original source files created in Sketch, XD, Figma, Photoshop, etc.
- An archive called Submission.zip file to include:
- All your design files in PNG or JPG format
- MarvelApp link for review and to provide feedback
- Your declaration files to include any notes about fonts usage, photo and icon declaration and link to your Marvel project
- Create a JPG preview file of 1024 x 1024 px
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.