Challenge Summary
Welcome to "Green Eel - Cloud Automated Testing Application Design Challenge". In this challenge, we are looking for topcoder community help to create a new look and feel for our application called Green Eel. We're also looking to the community to come up with a beter UI/UX concepts for the apps - we're absolutely open to creative solutions! At the end of this challenge, we are looking to have a new UI/UX solution for the application. Join with us NOW!!
Round 1
Initial design for client review
Round 2
All requirements as stated in challenge details with client feedback applied
About Green Eel
Green Eel is an application that help web development teams improve their ability to do full stack automated testing with Selenium. Users can log into the site and ask for virtual machine to be made in a Cloud that will come pre-installed with an automated testing platform. Once the order has been processed, the user will be able to do RDP / VNC into the environment and begin learning or using the automated testing technology. They will have the ability to destroy or pause the environment at any time.
Branding Guidelines :
- We prefer to use single page site interactions (parallax).
- As much as possible, follow flow interaction and layout from http://www.projectjellyfish.org/, use this site as your UI/UX reference when create your design.
Design Considerations
- Looking for modern, intuitive user interface
- Focus on the design being a great user experience, think simple but effective solutions!
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Branding colors, fonts are open to the designers.
- What should the priority features be?
- How quickly could you find information?
- Stock Photos: Feel free to use any images related to this concept.
Screen Sizes
- Desktop: 1280px width and height as required.
- Will be responsive design. Keep this in mind while designing
Required Screens
01. Login/Logout Screen
- User needs to have ability to login/logout in the apps.
- User needs to login first to be able use features in the apps.
- Provide generic login features in your design
02. Create Order Screen
- Once user successfully login to the apps, they will be able to create an order for a automated testing virtual machine
- Simple order form contains set of manual form fields or simply choose templates packages for the automated testing virtual machine?
- User should be able to submit their order form into the apps and get confirmation message that their order status is on progress.
- Once user submitted the order form, they will be able to check their order status in the apps.
03. View Order Status Screen
- Upon successfull login, user will be able to see all his order status from the application.
- There should be several ways to see the view order status, maybe via list, details, or tiles.
- User will be able to dig into details of their order status.
04. Order Confirmation Screen
- Once the order is complete, user should have some kind of notification to receive information about the virtual machine to access it through RDP or VNC
- Feel free to provide the best interaction for user to receive the notification message.
05. Start/Stop/Destroy VM Screen
- User can start navigate and testing the VM once their order is complete.
- They will be able to start the automated testing VM, or Stop it.
- They will be able to delete/destroy the VM if they no longer needs it.
- The apps should account for api calls as follows :
* Post Login/
* (Put /Order/{browser: 'firefox', environment: 'windows', userID: 123} - Response {orderId: 123}
* Get /Order/Status{orderID} - Response {orderStatus: [accepted | provisioning | complete]}
* Post /Logout
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance.
Supporting Documents
- We have a wireframes references in this challenge, you can use any aspect from the wireframes to create the best UI/UX concepts.
- You need to post in forum for your topcoder username in order to get the documentation.
- If You currently participating in the Green Eel wireframe challenge, joining this challenge means you are going to be disqualified from the wireframe challenge automatically.
Target User
- IT professional, Web Development Teams, High tech person that aware of the latest technology.
Judging Criteria
- How well you plan the user experience and capture your ideas for the homepage visually
- 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.