Challenge Summary
Welcome to the Ptah Wizard Page Continuation Concept Design Contest.
The goal of this contest is to continue improve our completed Ptah Form Wizard from previous contest. In this contest is we need your help give more thoughts how to make the form wizard adapted the new requirements and functionality as explained more details below.
Round 1
Your submitted design for client review:
- Initial concept design graphics of Ptah Wizard Page Continuation Concept Design
- Notes - Please tell us your thoughts around your concept design.
Round 2
Your final design for a review:
- Final concept design graphics of Ptah Wizard Page Continuation Concept Design
- Notes - Please tell us your thoughts around your concept design.
Contest Details
This is a design challenge for TopCoder Studio community to come up with a UI design to solve a real-life difficult design problem for a new application.
In previous contest, designers were tasked with designing a UI template that can display information (i.e. transactional data, rules, logic) about any software application that involves a linear process flow with a hierarchical step structure where top level process steps have multiple levels of embedded sub-steps.
In this contest, we would like to see updated designs that can accommodate non-linear process flows and still meet all of the design/display criteria of the first iteration.
Concept Design Problems
On this contest, we need your help to suggest us how to combine 1st-Place.zip and 2nd-Place.zip from previous contest (Read contest spec carefully) So we can get our solid final storyboard design with more updates stated below.
What our thoughts from 1st place
- appears at first to be a basic old tree but is subtle and clever in how it achieves an obvious sense of 'place' (the "where am I").
- The simple 'next steps' button gives the user real control over where they are.
- The scrollbars are actually not needed (neither is the breadcrumb at the top).
- The clincher, for me, is the ability to work on a particular step for a variety of 'people' (cases) (we assume) via the pref/next buttons to the right of the customer name.
- This allows lateral editing across massively complex forms and would allow someone to, say, edit only the address fields of 1000 customers without going through the entire screen flow..
What our thoughts from 2nd place
- It is just totally cool out-of-the-box thinking.
- It's really fantastic economy of design (the very busy graphics notwithstanding).
- If each circle had 20 steps I believe that could be up to 3,200,000 steps without scrolling!
- User can't easily browse the entire path at all and that the %-done labels are ultimately confusing (imagine telling your boss "I'm 33% of 70% of 46% of 33% of 23% done..")
Functionality Requirements
- Replace 40 customers with 40 cases or projects (hereinafter “cases”) and there may still be 216 screens per case based on the total number of steps or tasks (hereinafter “tasks”) for that particular case.
- However, in contrast to the previous example where one step/task followed another, the tasks in this version may be more loosely related such that some of the tasks can be completed in any order while others require other tasks to be completed first.
- The relationship between the tasks (linear or otherwise) should be visually displayed in the template design.
- Furthermore, some tasks may be such that they can be performed by multiple users while other tasks are assigned to particular users. Such assignment information about each task should also be visible in the UI design.
- For the tasks that are assigned to multiple users, some may allow multiple users to work on them simultaneously while others have a locking mechanism where only one user can work on a task at any given time. Such locking information should also be visually displayed.
- One or more tasks can be grouped into or characterized by stages (e.g., Complete Application, Review Application etc.) related to a particular case and each case may have one or more stages defined.
- So, the final UI design should visually display the corresponding stage information for an active current task being worked on as well as all of the stages defined for the selected Case.
- All fields on this form must be visible on every screen.
- This form need displayed when for every step/screen (fyi: This just simulation, real app will show different font 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 makes very clear to the user which step/task within a case they are on, how are the stages/tasks related and defined, which case is being edited, and in an economical elegant way, despite the massive area of forms.
- Graphic design is not the primary objective--clear information and readablity is, however good graphic design may be necessary to make information most clear.
- You may illustrate any conceivable design construct and/or web technology theoretically available, including interactive components, transitions etc. or rely solely on good placement of information, use of space, etc.
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.