Challenge Summary
Welcome to the FAST!!! Phoenix - Folder-Tree Structure Redesign Contest
Phoenix is a process management company that has numerous clients across different industries. Phoenix provides its customers with state of the art user interfaces for managing and monitoring their business processes. This contest aims to redesign the well known tree structure user interface that is used widely in many applications (such as browsing folders on drive).
Round 1
Your submitted design for a review.
- Initial concept design graphics of Phoenix - Folder-Tree Structure
- Notes - Please tell us your thoughts around your concept design.
Round 2
Your final design for a review.
Final concept design of Phoenix - Folder-Tree Structure
- Notes - Please tell us your thoughts around your concept design.
Above all this is an idea and conceptual design competition. We want to see your creative new ideas about how to represent a folder or tree structure to a user and allow them to navigate within the structure. The behavior and representation of the standard tree user interface is used widely, and for good reason: it works well and is easy to use in most cases. But the problem at Phoenix is we just can't stand how BORING it looks. Besides expanding and collapsing nodes, there isn't much interactivity either.
What would be a cool way to:
- Show this type of structure
- Let the user browse through the structure, selecting different things
- Show status or state of different things in the structure
- Do all of the above in an interesting and interactive way
Rules:
- I must be able to see the entirety of the structure at all times. That doesn't mean everything in the structure is always shown, but rather I can always see all the "edges" of any representation. Trees don't really have a first thing or last thing, no real beginning or end, however the traditional tree view does have a first thing and a last thing (like folder structures that are alphabetized). So, the traditional tree view has two edges (the first and last thing in it). Whatever your representation, we need to see all of you edges at all times AND have a good understanding of "how much stuff is there".
- I must have a sense of how big the structure is by looking at it at a glance.
- Whether I have selected a thing near the top-level or selected something deep in the structure, I must always be able to see at a glance where it is in relation to top-level things AND where it is in relation to other things nearby. This will help with both local (things nearby) and global (top-down) navigation.
- Your design should not be like something we have seen before and not resemble the tree structure already used so widely. It doesn't matter if you use shapes, nested objects, graphs, colors, 3D, windows, sliders, wheels, dynamic elements or animation, as long as it is not boring. :D
- Your design must meet the rules above even for very large, deep or complex structures. Not all of the things can be displayed at the same time so how can you hide unnecessary stuff while still meeting the rules above and allowing the user to browse the structure easily?
- If you think you have a cool idea but need to break a rule, you can either ask in the forums first or wait for R1 feedback, but these rules are pretty important so your idea better be cool. ;)
- When you reach some folder, any ideas present all content? How to navigate if there are some items on it? Any more legend information can show up?
- You can use attached folder tree structure for your submission, check example-tree.zip
We recommend drawing your own inspiration from a creative source that is esthetically pleasing to you. You may also take a look at these examples of designs that come close to what we are looking for but do not have everything we need:
Site References:
Timeline JS: http://timeline.knightlab.com/ (See how this timeline allows you to see the entire timeline at once and where you are within it. As you scroll through the timeline it automatically changes what is shown and what is hidden. We think this is super cool and wonder what different dynamic elements could created for a tree view.)
Timeline Design Inspiration: http://bashooka.com/inspiration/stunning-timeline-designs/ (This site shows a bunch of cool representations of a timeline. Pay attention to the ones that do not look traditional, those are the ones we like. We want to re-design tree views in the same way.)
If there is interaction in your design, make sure to describe it.
For round 1 we just want to see your initial ideas. For round two we will give you each our feedback and ask for something to be added/changed.
Target Audience
- Phoenix application visitors (internal to external users)
Judging Criteria
- How do you think from users of the application perspective? Is the NEW Folder Tree will be helpful? Ease to use?
- Your concept designs are easy to follow and understand.
- Possible to build in future development?
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.