Challenge Summary
Welcome to the Ptah Wizard Page Concept Design Contest.
The goal of this contest is to get some initial concept design to kick off our Ptah User Interface site project. We are at the beginnings of this project and would like your help figure out what Navigation Menu looks like and how it works. This first contest is to focus on the navigation layout, features and functionality. Our main concern is your recommendation for the application functionality, navigation and user click-paths.
Round 1
Your submitted design for a review.
Initial concept design graphics of Ptah Wizard Page Concept Design
- Notes - Please tell us your thoughts around your concept design.
Round 2
Your final design for a review.
Final concept design of Ptah Wizard Page Concept Design
- Notes - Please tell us your thoughts around your concept design.
Contest Details
Ptah is our client codename. This is a design challenge to the TopCoder Studio community to come up with a UI design to solve a real-life difficult design problem for a new application especially focus on Wizard Form page as explained more details below.
Concept Design Problems
- Form wizard page should help user fill out all forms on every steps easily.
- Page Size layout Format: 1100px x 900px
- Use this pallete colors when create your concept design: http://www.colourlovers.com/palette/2462496/Wireframed
- There is a navigation menu with list of links to 40 customers.
- Each link contains First Name, Last Name and 6 digit ID number.
- Navigation must always appear on the screen. The list of 40 customers need displayed on each page, how your design give best practice of User Experience for this navigation menu?
- When a customer link is clicked the main work displays a form with new navigation menu a six-step form wizard.
- Then, the first of these wizard form is shown in the work area.
- User must fill out each form screen sequantially.
- We might need the validation error message?
- Each wizard is further broken into 3 subs-steps - each with its own form.
- And each of these sub-steps is broken into 12 additional sub-sub-steps.
- Sample of typical information format in navigation ( sub-sub-step 7, sub-step 2, of step 4 of customer Jack Robinson, A-12345 ). Note: In the real app, there will be total of 216 screens to edit for each customer.
- User must know easily what step/sub-step they are on at all times and how to move on to the next screen.
- On every step an intake form appears.
- All fields on this form must be visible on every screen.
- This form need to be displayed when for every step/screen. (fyi: This form is just simulation, real app will show different forms on each step).
- First Name (text field)
- Last Name (text field)
- Address (text field)
- City (text field)
- State/Province (select dropdown)
- Postal Code (text field)
- Country (select dropdown)
- Birth Date (text field)
- Account Number (text field)
- Mobile Phone (text field)
- Home Phone (text field)
- Work Phone (text field)
- Email Address (text field)
- Comments (textarea)
Notes:
- The goal is a UI design which make very clear to the user what step/sub-step within a workflow they are on, what customer being edited and in economical way, despite the masssive area of forms.
- You may illustrate design construction or web technology available, including interactive components, transitions, effects etc.
- Your design doesn't need to be perfect - help us understand how a user will use this application and what we need to focus on. We will run a follow-up contest to refine and design the actual layout into final storyboard designs.
- This contest is exploring the different features and possibilities - show us your concept designs!
- So, basically we request these 3 sections in single page on your submission, feel free to show more screens to explains your solutions more better.
1) Customers list on navigation
2) Workflow of form navigation
3) The form work area
Site References:
http://patternry.com/p=multiple-page-wizard/
http://spyrestudios.com/24-steps-left-pages-that-enhance-the-user-regristration-process/
http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/
http://designinstruct.com/visual-inspiration/web-design-inspiration/sign-up-forms/
Judging Criteria
- How do you think from users of the application perspective? Is the application will be helpful? Ease to use?
- Your concept designs are easy to follow and understand.
- Can we run another contest to implement/further design your concept?
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 image or any document files content your sketch of concept design based on contest submission requirements stated above.
Source Files
All original source files of the drawings/graphics plus your idea template file. (Often, these files will be the same as your Submission files).
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.