Challenge Summary
Welcome to the FAST!! Hercules Mover Wireframe Contest.
The objective of this contest is to create new HTML wireframes of Hercules Mover based on screenshots of current application, also improve flow, layout and user experience of the application.
In the end of this contest we are looking for a process flow and layout design of the pages mentioned below that are part of the whole application. This application must be user friendly, intuitive, and easy to use and bring new User Experience when customer use the application.
Checkpoint deadline is at Tuesday Morning EST, join now!
Round 1
Your submitted solution for client review:
1. Login
2. Dashboard
3. View Move
4. Create move
5. Upload Move
Any comments about your wireframe, make sure all pages have correct flow!
Round 2
Final pages of wireframe contains these flow:
1. Login
2. Dashboard
3. View Move
4. Create move
5. Upload Move
6. Email
7. User Role
8. Dashboard User
Any comments about your wireframe, make sure all pages have correct flow!
Contest Details
Hercules Mover is internal application that the major functionality to tracking the customer information about the old and new address, products and their move date.
The purpose of this project is to improve current Hercules Mover application. This project will implement the new flow/suggestions for the new application and that comes with good support and wide developer base able to sustain future growth of the application and possible scalability requirements.
Wireframe Requirements:
- Your wirefame solutions must useful for all users role (Administrator and Common User).
- This application will be developed in a web-server use HTML5 and running on Desktop and Tablet platform.
- Minimum required page width is 768px.
- You need suggest us better flow of the application.
- Match color theme like on attached screenshots for your wireframe solution.
- All information of text and label need re-created on your wireframe. Watch the typos.
These are screenshots and flow of current application, check attached current-app-screenshot.zip
1. Login
screenshot: 1-login.png
- This is login page of Hercules Mover application
- fyi: this login showing Administator flow
screenshot: 1-sign-up.png
- When click Sign Up button user will take to Sign Up page
- There's only show Move ID row. Normally the user will just use the link they receive in the email, but this is an alternative requested by the client.
2. Dashboard
screenshot: 2-dashboard.png
- After logged in user will see this "Create Move" form.
- We're thinking on dashboard display all Moves list also all main actions buttons like "View Moves", "Create Move" and "Upload Move" or "Edit Profile" maybe? Any other suggestion?
- After entered email address in the input, user will see details form to filled (2-dashboard-menu.png)
- See main menu on the top left for Administrator role (2-dashboard-menu.png) they are: "View Move", "Create Move" and "Upload Move" links
screenshot: 2-dashboard-edit-profile.png
- Administrator user can edit their profile by click their username before "Logout" link
3. View Move
screenshot: 3-view-moves.png
- This page show all Moves from all customers, can only accesed by Administrator
- Notice there's no Edit link to edit user data
- Blue colored text on table represents the text link and tooltips.
- When hover at Custumer ID (3-view-moves-customer-ID.png)
- When hover at Old Address (3-view-moves-old-address.png)
- When hover at Products (3-view-moves-products.png)
- User will see confirmation when click Delete button (3-view-moves-delete-confirm.png)
- The client would like this to be a brief table, but then have a separate "View" page that the admin can go to to view all the details for a single move basically a detail page that can be navigated to from the table or search results
4. Create move
screenshot: 4-create-move.png
- input text show up at first time, to let user filled the email address
- default form look (4-create-move-email.png)
- filled form look (4-create-move-email-filled.png)
- when user click Create Move button when there's data need filled (4-create-move-email-validate.png)
- Validation error after click Create Move button (4-create-move-email-submit-error.png)
- Form created successfully message (4-create-move-success.png)
- Need ability to alert Administator if the email already created, and also how the message if that's new email in the system?
- We need your judgement how to let user know what kinda format need filled example for Internet speed should be numeric. Any other field need same treatment?
5. Upload Move
scereenshot: 4-upload-move.png
- Need instruction, what type file allowed? This is an XML file with values pertaining to a new move
- How format the upload file, etc I can send a sample XML file over, but I'm not sure how that pertains to the wireframe.
6. Email
screenshot: 5-email.png
- After Administrator create the email, it will automatically send email to user email address
- This is how current looks of sending email.
- Need you format the layout better!
7. User Role
screenshot: 6-welcome-first-time.png
- When user click provided links on sending email, user will take to this page
- Notice there's auto generated Move Code displayed on page.
screenshot: 6-welcome-edit-move.png
- After filled form of Sign Up For Move, user need edit their Move data
- Additional form show up when select Products > Internet field. (6-welcome-edit-move-provider.png) User need select the available Service Provider and confirm checkbox
- Click Finish button will show success message (6-welcome-edit-success.png)
8. Dashboard User
screenshot: 7-dashboard-user.png
- This page almost similar with Administrator flow
- Notice there's Edit link in the last column, that will let user edit their own Move information
- Available menu for common users (7-dashboard-user-menu.png)
Expected Wireframe Solution:
- We need to make the application flow better!
- We want to make sure the move ID (move ID is auto-created for each user) is shown when available, so:
-- On the move created confirmation
-- On the table list of moves
- We want the admin to be able to more easily find a move by:
-- Address
-- Customer email
-- Date
-- Move ID
- The Move date is going to be moved from the admin create screen to the customer confirm screen
- The viewing of the move for the administator should be a separate screen, not just in-line on the list of moves
- There should be functionality for the admin to resend the move email (which will also regenerate the move ID), but only for moves that aren't confirmed.
- The auto generated Move Code need use code expired messaging and flow needs to be better defined
Target Audience
- Administrator
- Internal User
Judging Criteria
- User Experience
- 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 contest. 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.