Technology Radar Responsive Web Application UI Design Challenge

Welcome to “Technology Radar Responsive Web Application UI Design Challenge”.  In this challenge, we are looking for your creativity to design and conceptualize the UX/UI for a private version of the ThoughtWorks Technology Radar. You will be focused on concepts and creating how this application should look and feel.

Let us know in the forum if you have questions!

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 Challenge Admins in the forums. Please post any questions you might have for the client in the forums.

Round 1

Submit your initial designs and concepts for checkpoint review
1) Desktop
2) Mobile

Important:
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes for Desktop and Mobile.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

Round 2

Submit your final designs with checkpoint feedback implemented
1) Desktop
2) Mobile

Important:
- As part of your final submission, you must update your submission to MarvelApp.
- Use the same MarvelApp prototype you received in the checkpoint.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
 
Background Information
The Technology Radar is a web-based experience that sets out the changes that we think are currently interesting in software development; things in motion that we think you should pay attention to and consider using in your projects.

TopcoderMobile is looking to for the initial concepts and UI for a new responsive web application using part of the open source code/ design that ThoughtWorks has already developed on “Technology Radar”. The ability for the radar is to show both the industry maturity and the TopcoderMobile maturity side-by-side so that we can compare. To be clear, we are design 2 tech radars and a way to view both and/ or compare and contrast each.

• Your design concepts should allow for easy switching between views or the ability to view both in some way.
• It should be clear what view (TopcoderMobile or ThoughtWorks) you are viewing/ currently looking at.
• Need the ability on the TopcoderMobile view to have links to SMEs (Subject Matter Experts) for each technology on the radar
  • The idea is that for each of the tools, platforms, language & frameworks, techniques we have the ability to see the SMEs
• Need the ability to view/ link to POCs (proof of concepts) for any "POC" or "Mature" technology on the radar
  • The idea here is that we have the ability to view all the running POCs associated with each of the items in the 4 quadrants/categories.
• The experience should be responsive and work great on desktop and mobile.

What are our four quadrants?

1. Tools
2. Platforms
3. Language & Frameworks
4. Techniques

We need to take all of the tools/technologies in the current matrix and align them with the aforementioned categories for the TopcoderMobile version. We can use dummy/ placeholder data for the design concepts.

What are the rings?
The rings of the radar for both the ThoughtWorks and TopcoderMobile views should be:

• Assess
• Trial
  • POC
• Adopt
• Mature
• Hold.

TopcoderMobile Specific Radar

• Assess: Worth exploring with the goal of understanding how it will affect the enterprise.
• Trial: Worth pursuing. It is important to understand how to build up this capability. TopcoderMobile should try this technology on a project that can handle the risk.
  • POC: Actively pursuing. Working with teams and technologies to better understand how to build up this capability.
    • Pre Adoption Demo: Teams are actively demoing the POC and capability for others to see.
• Adopt: Strongly recommend that TopcoderMobile should be adopting these items. We use them when appropriate for our projects.
• Mature: We are actively using this item in many environments with great success. It has been in TopcoderMobile production for over 6 months
  • Post Adoption Demo: Teams are sharing successes and demoing
• Hold: Proceed with caution  
• Annotation on each item:
  • New or Moved
  • No Change
  • Need sunsetting

Industry Specific Radar (ThoughtWorks)

• Assess: Industry data suggests exploring with the goal of understanding how it will affect your enterprise.  
• Trial: Industry data recommends the trial of this product. Try this item on a project that can handle the risk.
• Adopt: Industry data points towards the adoption of these items.  
• Hold: Proceed with caution  
• Annotation on each item:
  • New or Moved
  • No Change
  • Need sunsetting

For more information about what a Radar is and how it works please check this video.

Required Screens & Functionality
1) Radar Overview

• Based on all four quadrants, need to create a TopcoderMobile Maturity radar view.
• Recreate the ThoughtWorks radar view so that we can compare it against the TopcoderMobile view/ version
• Both the TopcoderMobile and ThoughtWorks radars should be accessible and viewable somehow. This could be an easy switch functionality or showing the data side-by-side or some other method
• The experience should be streamlined, fluid and easy to understand

2) Source Code Repository

• Need an ability to edit the source data through a git repository. The goal being that the data can be inner sourced from within TopcoderMobile organically:
  • Data to be seeded from a source repository; file type can be JSON or another format.
  • TopcoderMobile will be curating the data however for the Proof of concept, dummy data can be seeded
  • Example dummy data: https://docs.google.com/spreadsheets/d/1waDG0_W3-yNiAaUfxcZhTKvl7AUCgXwQw8mdPjCz86U/edit?usp=sharing
• What this ultimately means is that we can't and shouldn't deviate too much from the look and functionality set forth by the ThoughtWorks radar. We can build upon it, but not completely change it.

3) Associated SMEs and POCs with technologies

• Need a way to list the SMEs associated with each item on the TopcoderMobile radar view (if available)
• Need a way to link to POCs pertaining to each "POC" or "Mature" item on the TopcoderMobile radar (if available)

4) Radar Customization

• Customizations as needed to the ThoughtWorks Tech radar:
• Extend to include visualizations as needed
• Build upon the ThoughtWorks version of the radar to design the TopcoderMobile version

Branding Documentation

• Use the colors, font, and basic UI found here: https://drive.google.com/drive/folders/1nZdFGlTOsO8kPBtb81ME3hK6wgIsuOls?usp=sharing
• Make it elegant, clean, and professional

Target Device and Size
Responsive design:

• Desktop: 1280px width (height adjusted as needed)
• Mobile: 750px width (height adjusted as needed)
• Think Mobile First! When designing your UI.
• Use a proper grid system to keep things organized

Judging Criteria

• User Experience of the application
• Completeness and accuracy of your UI Design
• How well your design provides a consistent user flow and experience
• How well your design align with the objectives of the challenge

Submission & 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
Submit JPG/PNG for your submission files.
Submit MarvelApp for your design.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator, or Sketch!

Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.

Stock Photography
Stock photography is allowed in this challenge. See this page for more details.