FAST - Topcoder Website Redesign Concepts Challenge

Topcoder is redesigning their client facing marketing site in the near future and we are looking to the design community to concept new ideas and directions. We want to completely start fresh and rethink their entire experience; it's a clean slate! We're looking for a clean, modern, and simplified website experience. For this challenge, we are just focusing on the homepage design. At the center of the redesign and the "new" Topcoder is this one sentence:

“Topcoder is the simplest way to access and execute with incredible digital talent.”

The focus is on simple! 

Round 1

We're looking for design concepts. Show us enough of your initial design, direction, and ideas to give some feedback against.

Round 2

Completed design concepts of all required pages, plus any additional screens, interactions, user flows, etc. that help to explain and/ or round out your ideas.
The new Topcoder marketing website needs to inspire the right level of confidence that a customer’s experience will be simple, useful, and they will get fantastic outputs created by our amazing talent.

This design challenge is to help us explore design options and treatments and is meant to open our eyes and show us something brand new that we fall in love with and go, “YES, that’s it!!!” In this design challenge, we will be concentrating on a few key screens and interactions to help us begin this design journey. We are looking for fantastic detail and for the little design elements that truly make a website a joy to use. 

Key Things to Consider
Our new website should:

• Be simple, refined, and modern
• Have good use of space, balance, and maybe symmetry
• Be artistic and a bit whimsical, yet balanced 
• Show the Topcoder brand and brand voice of the design to feel confident, yet comfortable
• Use subtle animations to draw the eye and keep a user moving along
• Make great use of the Topcoder brand colors and the colorful gradient available to you, but think more about the use of colors to really accent design, buttons, and animations 
• Take advantage of geometry with the use of circles, ovals and rounded shapes that make the experience feel fluid and light
• Explore line drawing artwork and mixed media (imagery with line drawing) - This is up to YOU and we want exploration here !!! 
• Where applicable, use gamification elements to show how a user is progressing through a sequence of questions (you will see this in the linked presentation deck)

Our new website should NOT:

• Be overly busy (more space over cramped space)
• Feel “stuffy” or overly “Business Professional” - We do not want to see photos and typical business imagery (like tall steel buildings or business people shaking hands) 
• Use too many colors. While Topcoder and our logo does have a lot of colors and we encourage you to think about gradients and color usage, what we do not want are a ton of different colors, causing a busy looking design
• Feel too serious - Yes, we are a great company, but we smile, we make jokes, we have fun. The design shouldn’t make Topcoder feel stuffy.
• Use color layovers on graphics. The current Topcoder.com has a lot of this color treatment where the hero images are treated through a color filter - for this design, we want to move away from that styling

Branding & Inputs
As part of the redesign, we are also rethinking the Topcoder branding. NO, we are NOT changing the Topcoder logo. But we are open to changing other aspects of the brand

Fonts:

• You are encouraged to experiment with fonts you believe work with your design!
• We do recommend that you use Google Fonts so that anything you do use, we can potentially use in future development.

Colors:

• We are ok to look at new brand colors that apply only to the marketing/ customer side of Topcoder. The current brand colors will remain the same for the Community and logged-in side of Topcoder. New brand colors should be:
• Modern
• Have enough range that they can be used in several different environments, marketing materials, and use cases beyond just the website
• Feel like a cohesive palette and family of colors
• Refined in the number of colors. We are not looking for 20 different colors. Think about a few main colors and then use tints and shades to add range to the palette

Wireframes:

• View Wireframes - https://sketch.cloud/s/GJGJv/203wrp/play
• We've included some really quick and rough wireframes to help you understand the overall concepts
• DO NOT just color in these wireframes
• You are free and encouraged to break away from the content that is represented on the wireframes
• We are looking for YOUR IDEAS and CONCEPTS

Inspiration
We do not want copies of the following sites but use them as a mood board to think through how your design can borrow successful elements of the following sites.

Lemonade - https://www.lemonade.com/
Why we like this site

• Great use of space, accent colors, and fonts
• It feels fun, yet drives you to the experience they want for you
• Subtle animations throughout work
• Navigation movement is subtle but makes sense (see as you scroll what happens)
• Through color, your eye is drawn right to the buttons they want you clicking

Greenstone - https://www.greenstone.co/
Why we like this site

• Immediately modern and eye-catching with geometry and simplicity
• Nice use of modern gradients throughout
• As you scroll, the clean modern white design against the established background really makes for a pleasant experience, helping the case studies and customer stories to truly shine
• Color changes from tab to tab paired with hero animations for each section work nicely
• The navigation header is simple and transforms nicely as you scroll

Sugar.io - https://sugar.io/
Why we like this site

• It’s beautiful - it feels like a piece of art
• Great use of accents and even though there isn’t too much movement or animation it still feels like it is flowing
• Great mixture of media - line drawing with geometry works nicely

NOTE: this site (Sugar.io) is a bit TOO busy but we wanted to show some gorgeous, inspiring design

Mailchimp - https://mailchimp.com/
Why we like this site

• It is artistic and whimsical, yet approachable and on-brand
• It’s colorful, yet not-complicated
• Animations draw the eye throughout
• Each tab greets you with a ‘theme’ drawing to bring you into the new page content in a great way
• They commit to their theme of bold/odd drawings and just go for it
• Through color, your eye is drawn right to the buttons they want you clicking

NOTE: we’re not saying we love the surreal nature of the drawings on the Mailchimp site, but we like that they are unique and that they commit to this idea throughout the site

Oscar - https://www.hioscar.com/ny
Why we like this site

• Clean and modern
• Good use of color and typography (good variety in fonts, sizes, and colors
• Subtle use of animations
• Bold photography
• Quote feature is really nice - https://www.hioscar.com/get-quote/
• Unique and subtle design decisions to help guide the user and add interest. Example - https://www.hioscar.com/business/ny 
• NOTE: The site does get a little too busy in places. There is a lot of information condensed into single pages. We are looking to do the opposite have a sense of airiness with lots of white space and easy for the user to understand the core message of a page.

The Coloradan - http://thecoloradan.com/
Why we like this site

• Visually engaging and interesting
• Lots of subtle animations and user interactions without feeling overwhelming or cumbersome
• The organic nature of how the background images and graphics flow together. There are defined sections, but it doesn't feel like rigid dividers
• Really nice look and feel that carries throughout the entire site. Everything feels cohesive without feeling static and boring

Required Screens
01. Homepage

• This is the first page that a user will see when they visit topcoder.com
• It needs to be eye-catching, easy to understand, and not feel overwhelming
• The user needs to immediately understand what Topcoder is and what we do within the first 2 seconds of being on the site.
• Feel free to expand on the wireframes
• We are looking for concepts and UI/UX best practices

02. Solutions Wizard: Type of Work

• This is the first step of the solutions wizard
• The user has selected the "I Know What I Want to Build" button on the homepage/ hero area
• The user is selecting "App" on this screen
• The solution wizard experience should take them to an easy to understand and engaging experience
• This could be a full-screen experience, but we are open to other ideas as well
• It's important that the user understands what step in the wizard they are on, what steps are next
• Make sure you are designing a great user experience
• The solutions wizard should feel fast and easy. We do not want the user giving up halfway through

03. Solutions Wizard: Design Selection

• Simple selection to tell us if they have designs already or not
• Remember, keep the experience engaging and easy

04. Solutions Wizard: Devices

• Selection of what form factors the user needs their app to work on
• Mobile, tablet, web, and/or wearable

05. Solutions Wizard: Purpose

• The user is giving us more information about their app
• We can reduce the number of selections here if needed
• We are open to ideas on the best experience

06. Solutions Wizard: Users

• What type of user is their app intended/ targeted for

07. Solutions Wizard: Contact Info

• The user is required to give us (Topcoder) some additional information
• Name, work email

08. Solutions Wizard: Success

• This is the final screen of the solutions wizard
• The user has the ability to view their project that's automatically been created based on their previous information
• The user will receive a confirmation email and follow-up
• The user should be able to easily return to the main site

09. Solutions Page - App

• This is a normal marketing type page that explains the "App" solution available to customers
• We want to show that an "App" can include Design, Dev, and/or QA as part of the solution
• We want to feature a fun way to understand what you get at the end of each "stage/ phase" (design, dev, etc.) and why you might "stop" at that stage or just need one stage over another.
• Some interactive ways to "add" Dev, and "add" QA
• The visuals would change, the "why" you would go through that stage depending on what is selected:
• Design & Dev: Proof of Concept
• Design: Internal buy-in from additional stakeholders before moving forward
• Design, Dev, QA: Building a production ready app
• We realize this direction is pretty loose. We are looking for general ideas and directions
• Show us your ideas, how you would design something like this and what would be interesting, visually engaging, and beneficial to the user/ potential Topcider customers
• Again, the wireframes are just a VERY rough guide. Do not just color these wireframes. We are looking for your ideas.

Target Device and Size

• Desktop: 1440px width (height adjusted as needed)
• Use a proper grid system to keep things organized

Judging Criteria

• User Experience of the website
• Design concepts and execution

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, Adobe XD, 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.