Challenge Summary
Round 1
Submit your initial design for a Checkpoint Feedback (Desktop + Mobile)1. Home
2. Products / Application Design
3. Enterprise Programs / Digital Factory
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Design plus Checkpoint Updates (Desktop + Mobile)1. Home
2. Products / Application Design
3. Enterprise Programs / Digital Factory
4. About
- As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
The Topcoder website is in need of a refresh. The previous website was quickly thrown together and is not showing its age and has a crumbling back-end infrastructure. This is the perfect time to reinvent our web experience and start fresh. That's where the community comes in. We want your help in guiding and designing the direction of the new topcoder.com. We've started thinking about and designing some rough guard rails for you to play within and we want to see your ideas and design concepts.
We've outlined a good sampling of pages that we would like to focus on for this challenge. These pages represent different kinds of content, will require different layouts, and have different levels of user focus. This is a design concepts challenge, so we are looking for ideas and unique design solutions. Keep in mind that is a primarily customer-facing site, so it needs to be professional while also showing the "spirit" of Topcoder. Reminder, this is a Sketch only challenge and we will only be accepting Sketch files for submission.
Challenge Goals
- Redesign and refine the overall Topcoder web experience
- Make for a more engaging and visually attractive website
- Keep things modern, clean, and professional
- Should accurately capture the "spirit" of Topcoder
- The website as a whole should be a "portfolio" piece for our customers. So great design, UI, and UX throughout.
Branding & Input
Below is a list of provided inputs and documentation of everything you should need for this challenge. If you need anything additional or something isn't clear, ask in the forum
1. UI and Navigation Inputs
https://drive.google.com/file/d/0B6kvOdxpqnKMUDB5dFlzRlRHZFU/view?usp=sharing
- There are multiple items included in this Sketch file
- This file should have what you need to get started, included UI elements, typography, navigation structures, icons, etc.
- If there is something else you need or have questions, as the in the forum
2. Copy Document
https://docs.google.com/document/d/1d-Z7_G3ZDb-9vyLWsLBJ8NHxPHAg5qyM-YDG5S8XqWQ/edit?usp=sharing?
- This includes all of the copy of each page outlined below
- This copy is not 100% final but should give you a good idea of what we are going for
- Use this a rough guide of what is needed on each page
- You are free to take this copy and design it however you see fit
3. IA (Information Architecture) Document
https://drive.google.com/file/d/0B6kvOdxpqnKMM1YtYk40bTZHTE0/view?usp=sharing?
- This document will give you a good idea of the entire site and how all the pages fit together
- It's the big picture view that will hopefully give you some context about where the pages you are designing fit in
4. Inspiration
https://projects.invisionapp.com/boards/7W3DXE3ZB8STA/?
- We've put together some sources of inspiration for how we are starting to think about the new site and where we want to take it
- Use these examples as guidance and to spark ideas from
Screen Sizes
We are designing for Desktop and Mobile devices. This will be a responsive web. Use the example pages in the Sketch file for reference
- Desktop: 1280px(w) (Height can expand as needed)
- Mobile: 375px (w) (Height can expand as needed)
Screen Requirements
We are focusing on just a small sample of the total screens for this challenge. These are all unique screens with different kinds of information and will require different layouts and design solutions based on the provided Copy Document.
1. Home
- This is the first thing that the user will see when they land at topcoder.com
- It needs to be visually engaging and most importantly, make the user want to stay and explore more
2. Products / Application Design
- This is a deeper interior page of the site
- User the navigation examples as reference
- What is the best way to organize and design the content outlined in the Copy Doc
- This is an exercise in layout, hierarchy of content, and great UX
3. Enterprise Programs / Digital Factory
- This is a longer page with a lot of content
- What is the best way to organize the content AND keep the user engaged
- This is a great exercise in layout and hierarchy of information. Show us what you got
4. About
- This page is all about Topcoder
- Make us look good :)
Sketch Files Only:
- We are ONLY using Sketch for this challenge, do to current workflows and additional tools that rely on Sketch
- No other formats will be accepted for this challenge (Photoshop, Illustrator, etc.)
Submission Design Presentation
- You must upload your submission to Marvel App so we can provide direct feedback on your designs.
- If you need a Marvel App Project, send email OR via challenge forum to these following email address: fajar.mln@gmail.com
- Important! Make sure to include the shared URL/Link to your MarvelApp inside your "notes.txt"
Target Audience
Internal employees, customers, community members
Judging Criteria
Your submission will be judged on the following criteria:
- Overall design and user experience
- New ideas and how well you solve the goals
- How well you lay out the content
- Hierarchy and organization of content
- Does your design "feel" like Topcoder
- Overall design aesthetics; Is your design modern, fresh, and professional.
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.
Source Files
All original source files of the submitted design. Files should be created in 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.
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.