Challenge Summary
Welcome to Hercules - Iris Portal Responsive Design Challenge. In this challenge, we are looking for your help to redesign an existing portal which is a Communication Cloud platform (PaaS) featuring APIs and SDKs for VoIP (video/voice), messaging, user auth, and other web application functionalities for mobile, javascript, and embedded devices. Twilio is a good example of a similar company in terms of platform scope and capabilities.
For this design challenge, we are looking to focus on a new and modern design direction for this application and to create an effective design. This challenge is focused on a new design that will focus on refining the experience.
We are really excited to see your designs for this challenge.
Good Luck!
Round 1
Submit your initial designs for Checkpoint Feedback
01 Landing Page (desktop)
02 Blog (desktop)
04 API page (desktop)
05 Dev Portal Landing Page (desktop)
You must upload your submission to MarvelApp so we can provide direct feedback on your designs.
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all the required designs with all Checkpoint Feedback implemented.
01 Landing Page
02 Blog
03 Documentation
04 API page
05 Dev Portal Landing Page (Page 15 in pdf)
05 Application Page (Page 17 in pdf)
06 Platform Status (Page 18 in pdf)
You must upload your submission to MarvelApp, for the final submission - you can reuse the prototype that you shared for checkpoint
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
We are looking for help from the TopCoder Community in creating our own unique experience that Developers will love.
Design Considerations:
- This will be a responsive design!
- The header, footer, search and side navigation (s) must be optimized for a simple user experience.
- Have the size of the design as follows:
- Desktop: 1366px width and height as required
- Tablet: 1536 x 2048px
- Mobile: 750 x 1334px
Required Screens:
01 Landing Page
- This will be the main landing page for users, developers, and administrators.
- General marketing style landing page
- Can use content from the current site, layout can/ should change though
- We are looking for some very high level diagrams for front page with generic concepts like communications between telephones, mobile, pc, smart tv, car, IoT devices, etc
02 Blog
- Basical blog style layouts
- Need to account for content types like: text, images, videos & code snippets
- Client really likes medium.com style blog posts
- Maybe some options for different content layouts (images left aligned, galleries, stacked content, etc.)
03 Documentation
- SDK and API sections
- SDKs should include "download" links
- APIs should direct to a new API page
- Client likes: https://www.twilio.com/docs/ as an example
04 API page
- Please see attached screenshot for an example
- Just update styles to match new design/ UI
05 Dev Portal Landing Page (Page 15 in pdf)
- What is the best user experience for this page
- This should show the main level dropdown or a way to switch between multiple apps. For example, the screenshots provided are what would show for 1 app, but the use should have the ability to select a dropdown or something and select "Application 2", which would then update the left nav and content for that application (This application switcher is not shown in the screenshots).
05 Application Page (Page 17 in pdf)
- This shows the individual application page.
- Main menu changes to a sub-page.
- For content refer to the page 17 of the pdf.
- Looking forward to your thoughts on how you show this page.
06 Platform Status (Page 18 in pdf)
- This page shows the status of the platform.
- Main navigation changes to reflect this page / make sure to show this in your design.
Reference:
The following sites are references, so please DO NOT COPY:
Reference 1
- Support Chat support
- Docs: need some consistent format like Markdown that can be imported into styled Documentation with code sections and various headers
- Slideshow modal dialog for simple tutorials
Reference 2
- bar selectors, Page loading progress indicator
Reference 3
- like sign in page, card interface, color scheme
Live Site
- User for CONTENT ONLY
- We are looking for new UI, UX and new concepts
- Show us what the best experience is!
Branding Guidelines:
Branding Guidelines
- Make sure you are using the correct colors, fonts, icons, etc. all available at the above site.
- The use of the Web grids is important to follow to keep your designs organized.
- Pay close attention to have font sizes and button/ tap areas change from desktop to mobile
Stock Artwork:
- Stock Artwork policies: https://help.topcoder.com/hc/en-us/articles/217481408-Policy-for-Stock-Artwork-in-Design-Submissions
- Latest Design Policies: http://help.topcoder.com/hc/en-us/categories/202610437-DESIGN
Target Audience:
- Developers and Administrators
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Note you would need to implement all required functionalities and items as written in the supporting document.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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, or Adobe Illustrator as a layered AI file.
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.