Challenge Summary
Welcome to the topcoder Web Arena Mobile Version Design Challenge.
For some previous months we keep improving User Interface and User Experience in topcoder Web Arena application. This time, we need Studio designers help again to create how mobile version look using responsive design solution.
Mobile versions need inherit existing topcoder arena design brand. Most tasks of this challenge, need you suggest new placement, layout and interactions to fits existing topcoder arena web pages into smaller mobile device screen.
Round 1
Your initial design solution for client review:
1. Login
2. Dashboard
3. Active Contest List
Make sure all pages have correct flow! Use correct file numbering.
Round 2
Final design + updates from checkpoint feedback for these following pages:
1. Login
2. Dashboard
3. Active Contest List
4. Registration Questions
5. Contest Details
6. Contest Summary
Make sure all pages have correct flow! Use correct file numbering.
Topcoder Arena is where all of the topcoder Algorithm Competition action takes place. It is where each coder can practice, compete, or spectate. The new topcoder application is build as web based platform use HTML5/CSS and javascript.
For this challenge we need your help to suggest how the best practice mobile version look based on completed web arena desktop version.
File Downloadables
- Phase-1.zip : overall topcoder arena in storyboard design
- topcoder-arena-logo.zip - Use this topcoder arena logo!
- 3-New-Icons.zip - New topcoder menu navigation icons
- Floating-Feedback.zip - Floating Feedback Design
- WebClip.zip - WebClip Design
Submission Requirements
- Get familiar with completed new look for topcoder arena. You can check live site here: https://arena.topcoder.com/#/u/dashboard
- As possible you must re-use existing design, do not introduce new graphics. If some graphics not exists, let us know for confirmation via challenge forum.
- Mobile version design from this challenge must look as one design sets of topcoder web arena.
- Use existing storyboard font, grab from this site: https://www.google.com/fonts/specimen/Source+Sans+Pro
- Make sure all graphics in mobile version use shape format based to make us easy to update the graphic when viewing application on Standard or Retina version.
- All existing elements and graphic need represent/transformed in proper way for Mobile version.
- Mobile Screen Sizes: 320px X 568px
Topcoder Arena Mobile Version Design Requirements
These are required pages for this challenge submissions:
1. Login
Desktop Screenshot: Phase-1.zip > 01A ~ Login.png & 01B ~ Login.png
- For Mobile version, how login page look?
- How you show up Login with Topcoder account and social media account in small mobile device screen?
- Update the logo with attached topcoder-arena-logo.zip
2. Dashboard
Desktop Screenshot: Phase-1.zip > 02A ~ Dashboard.png & 02B ~ Dashboard.png & 02C ~ Dashboard.png
- This is current look of topcoder Web Arena dashboard: current-app.png
- You need update the logo with attached topcoder-arena-logo.zip
- Match main navigation icons like current look of topcoder Web Arena dashboard.
- Grab latest icons from attached 3-New-Icons.zip
- Think about how main navigation designed for mobile version
- Remember, there’s sub navigation need show up, how mobile version look?
- Also in the right side of page there's message notification flyout (09D ~ Problem Statement.png) and logout button. How you design them in mobile version look?
- Notice “TC Time” move up before user information
- There’s NO connection time displayed in page, remove from your mobile version design
- After page title, there’s Web Clip design show up above all the boxes. Grab design from WebClip.zip
- For mobile version, how you represent all boxes in pages?
- Feel free use stacked and fluid layout to optimize usage of mobile width screen.
- Show separate screen showing how interaction look when user move from one tab to another on Active Contest box.
- Keep accordion function for “Profile Overview & Important Messages” boxes
- Show separate screen when user pick calendar view or list view
- Footer need displayed client logos
- There’s feedback button to allow user fill the feedback (Floating-Feedback.zip) How mobile version look?
- All the updates stated above need represent across the mobile page submission.
3. Active Contest List
Desktop Screenshot: Phase-1.zip > 03 ~ Contests.png
- In this Active Contest list, what is the best way to display table list in mobile format? Do some research!
- This site reference can be your starting point: http://exisweb.net/responsive-table-plugins-and-patterns
- We need show Public and Private Contests in Separated section
- Register and Enter button should easy to see on mobile screen
4. Registration Questions
Desktop Screenshot: Registration-Questions.zip
- This Registration Questions modal window show up after click the Register button
- User need walk each steps before eligible to register
- Show up separated pages showing the Registration Questions flow
5. Contest Details
Desktop Screenshot: Phase-1.zip > 04 ~ Contest Enter.png
- This page show up after user successfully registered to contest
- How you displayed all boxes contest
- There’s notification message on top right. How you show this area on mobile layout.
6. Contest Summary
Desktop Screenshot: Phase-1.zip > 05 ~ Contest Summary.png
- Contest summary will displayed Contest Summary and Leaderboard
- How you represent them in Mobile layout for easy to read?
- Show fluid table list to build in Mobile layout.
Target User
- topcoder Members
Judging Criteria
- Cleanliness of your graphics and design.
- User Experiences is our priority! Your solutions must ease to use!
- Consistency Look and Feel with Desktop version.
- How well you implement the required data and any suggestions, interactions and user flow you recommend (provide any notes or comments for the client) for mobile version.
- Is your solution possible to build as mobile version effortless?
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 Adobe Photoshop and saved as layered PSD file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics.
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.