Topcoder - Member Platform Design Direction Challenge

Welcome to “Topcoder - Member Platform Design Direction Concepts Challenge”. In this challenge, we are looking for you to help plan a new experience and user flow for a brand new Topcoder Member Platform App.

We need to see intuitive and easy to use "concepts", some rough sketches or ideas on how we need to envision this app, your solution should help us drive our conversation to the next stage of this project.

NOTE: The goal of "Design Direction" is to not create high-fidelity designs but to focus on thinking through the problem and proposing concepts, direction, or user flow for making things easier for our users. Design Direction is a little bit of Information Architecture, a little bit of UI/UX design work to help inspire and create a conversation with our customers.

Challenge Objectives

• Web Application
• Concepts

APPLICATION OVERVIEW
Topcoder Member platform will display all available work opportunities (Gigs, Challenges, Arena/Marathon matches) under one roof to the users and allow them to register/apply for and submit their work. What would the user flow/UX and platform be like?

So, different types of users (“gig/freelancers, challenge competitors, competitive programmers”) will be able to access the specific information (gigs, challenges, marathon matches, etc) they are looking for in one place and something to note is that each type of user will have different intentions/goals, we want you to research/come up with thoughts on what would be the intention/goal of each of these users and create a seamless user experience flow for each one of them.

~
CHALLENGE OBJECTIVES

• Create wireframes, sketches, or simple designs to convey your design direction
• Think of this as a low-fidelity design concept challenge.
• Provide fast and rough wireframes to show your concepts.
• You MUST cover all requirements mentioned in the challenge details below.
• You can use any type of tools to submit your ideas/workflow, so it can be a rough pen/paper sketch, axure wireframes, PowerPoint, Excel, etc
• We’d like to see how you think the application could work, potential simplified workflows, and interactions.
• Focus on what you think is important and provide concepts/ideas on where/how you think the project should go.

Note: We do not need guidance on typography, colors, etc. as previous Design Direction challenges - just focus on the problem, user flows, and "prototyping" your concept. 

AUDIENCE

• Gig/Freelancers
• Challenge Competitors
• Competitive Programmers
• Topcoder members and potential members

EXPLORATION SCORE
Creativity: 9
1: barely new ideas
10: a utopic product with features proven to be able to be fully implemented

Aesthetics: 1
1: low-fidelity design, wireframe or plain sketch
10: top-notch finished looking visual design

Exploration: 9
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: 1
1: don’t care at all about the branding just functionality
10: without a properly branded product there is no success

REQUIREMENTS
- You will need to create the user flow for each type of users described below.
- For all the users listed below, we need to consider the not-logged in view as well as the logged-in view.

Users
Gig/Freelancer:

• This will be a person who is looking for contract work.
• A Gig/Freelancer would be looking for specific gig work that matches their skills
• They dive into the details of specific gigs and apply for the gig that is a match.
• ���Gig work provides a guaranteed payment/incentive 

Challenge Competitor:

• Challenge competitors to find paid challenges and tasks and MM
• Register, discuss work and submit work.

Competitive Programmer:

• Competitive members land on this page to find SRMs and other competitions
• They will choose a particular item in the listing to register/compete.

Topcoder members current and potential:

• Any Topcoder member newbie who navigates to this page to see what is available for them to try out.
• Potential members who may check things out prior to registering to see what is available.

Screens & Features
01 Listing Page

• We want to bring all types of content (Gigs, Challenges, Arena/Marathon matches) under one roof.
• How are we going to segregate and organize these options in one place without compromising the user experience?
• Currently, we have filters that allow us to find content easily, how should we plan it in this new listing page, as each type of content has different filters (for example Gigs can be filtered by country, skills, etc, whereas challenges can be filtered based on the type of challenge, etc)
• How are they going to find the required content easily?
• What would be the goal of each of the users and what actions would be
• It is very important to think from a user perspective on what each type of user will be performing on this page.
• We want you to think about the user experience for not-logged in and logged-in users.
• For not-logged in members, what do you think we need to show?
  • We want to keep it minimal upfront and have a CTA to login/register to see more (for example users will need to register to see the job or challenge details) but make sure the experience doesn’t make them feel they are being pushed to register with the site.
• For logged-in members, think about how we can provide a more customized experience, some examples are:
  • What should be their typical user experience?
  • How will be able to quickly and efficiently achieve the steps towards their goal.`
  • Community Programs (Series of marathon matches)?
  • Featured or sponsored Content? These may be paid specifically by the client to be shown at the top of the page.
  • For Gig/Freelancer: Do you think it will provide a better experience if we show the list of all the jobs they have already applied for?

02 Details Page

• This screen will need to show the details about what they chose in the listing page
• If it is a challenge then we need to show the challenge details page, required skills, option to register
  • Once registered, what will be their next action/flow?
  • Users may discuss anything about the challenge in forums.
  • How will they submit their work?
• If it is a gig work then we need to show the details about the gig, payment, location, and expected duration and an option to apply.
• Overall, we want you to think through what else a user might expect to do on this page based on each user's next steps?

03 Apply for Job or Submit work on a challenge

• This is the page where the next action is performed
• Think through on different users and what they will be performing
• What else needs to be on this page to complete the user's goal
• What user feedback will they receive (confirmation message)?

04 Any other pages?

• Feel free to add any other pages that are required to complete the flow

REFERENCES
- https://www.smashingmagazine.com/2018/02/comprehensive-guide-user-experience-design/
- https://www.crazyegg.com/blog/what-is-user-experience/

DELIVERABLES
We want to make this challenge easy and fast, we don't want to have strict requirements on the format of the deliverables you produce. We recommend you think of how your solutions are presented. So, a complete PDF of your design concepts or Axure wireframes or a MarvelApp or a PowerPoint solution or an excel, etc. Anything that showcases your ideas the best (and makes it easy to follow). 

Here are a couple of references from the previous design direction challenge. The elements that we would like to see included in your submissions are: 

• Overall concept description

• Your wireframes/ screens /sketches with names and a short description to explain what that page is about. Your screens should be organized in the order you would like them to be seen.

• Make sure to provide all source files as usual created in Adobe PS, AI, XD, Sketch, Figma, etc. and all submission files, if you have created the hand-drawn sketches then submit them as source files.

• If you decide to use Marvel Prototype     

  • Please send your marvel app request to csystic@gmail.com
    You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).

JUDGING CRITERIA

• User Experience of the community app.
• Completeness and accuracy of your wireframes
• How well your wireframes provide a consistent user flow

BRANDING GUIDELINES

• NA

TARGET DEVICE

• 1366px width and height as required

SUBMISSION AND 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
Please submit HTML files or images (png/jpg) files
If you have created the wireframe in a design tool, then please create the clickable prototype in marvelapp and share the link to the prototype in your declaration file.

Source Files
All source files of the submitted ideas. If you would like to submit notes please include the notes.txt file.

Final Fixes
As part of the final fixes phase, you may be asked to modify content or user click paths