Challenge Summary
Welcome to "Green Eeel - Cloud Automated Testing Application Wireframe Concepts Challenge". In this challenge, we are looking for topcoder community help to create a new flow for our application called Green Eel. We're also looking to the community to come up with interesting ideas for the workflow - we're absolutely open to creative solutions! At the end of this wireframe challenge, we are looking to have a complete solution for the user experience and flow of the application.
Round 1
Initial solution for client review :
01. Login/Logout Screen
02. Create Order Screen
03. View Order Status Screen
04. Order Confirmation Screen
05. Start/Stop/Destroy VM Screen
Round 2
All requirements like stated in challenge details with client feedback applied.
01. Login/Logout Screen
02. Create Order Screen
03. View Order Status Screen
04. Order Confirmation Screen
05. Start/Stop/Destroy VM Screen
The Purpose of this challenge is to come up with the wireframe that helps define the flow of application. We are looking for the Topcoder Design Community to help us with planning our new "user experience" (UX).
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.
Wireframe Expectations:
- You must create traditional wireframe call-outs and notes
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The application must be very easy to use and intuitive. Keep that in mind when create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
- Use note pane in every single page you design to explain what items are addressed in that page from the documentation, what things you added/changed/removed, use it to make your idea clearer and help the client to give you constructive feedback.
Required Pages:
We are looking for you to create wireframe for the below pages :
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 the wireframes
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.
- Wireframe 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
Branding Guidelines :
- We prefer to use single page site interactions.
- As much as possible, follow flow interaction and layout from http://www.projectjellyfish.org/, use this site as your UX reference when create your wireframes.
Target Audience
- IT professional, Web Development Teams, High tech person that aware of the latest technology.
Learn Axure
- New to Axure? Here are some quick tutorials to help you get started.
- http://www.axure.com/learn
Judging Criteria
- User Experience of the application.
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow
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
Wireframes should be built in HTML or Axure. The resulting files are not critical in this Challenge. The most important point is that all the content is listed and the pages are linked together to show page flow. Keep your source files out from this submission folder.
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.