Challenge Summary
Welcome to the Berlin App TopCoder and Studio Members contest. For this contest, we are looking to our community to create a page of this app that talks about how the app was created. This will basically be some text about TopCoder / Studio and a map that shows the (aprox) 70 members who helped us create the Berlin app.
Round 1
Round One will end with your submission of at least ONE (1) screen showing your design concept.
Round 2
Round Two will begin with milestone winners and feedback posted. For Round Two, you will be required to submit at least TWO (2) required screens.
FULL DESCRIPTION
For this iPad app you will create a minimum of TWO (2) screens. One will be your design concept and one will show animation and/or a hover state for the same design. You are welcome to include more screens if you have additional views or concept variations that you wish to include.
The basic concept behind the Info Page:
The Berlin Attendees will be using the Berln App throughout the event. If they click on the "i" information icon, they will see this new screen which describes how the app was created and shows a map of members who participated in it's creation. We also want this page to feel as though it belongs to the app (not something entirely different, which does not match exisitng look/feel/styes).
Basic concepts behind the map design:
The map should be engaging and invite the user to interact. Interaction will be some change when the user touches a country. You should show the name of the countries where members live on the map (though this does not have to stand out) but you do NOT need to include the names of countries without any members. When a country is touched, we should see all of the members who live in that country. The map must also show indicators for the members in each country. All of this can be done a number of ways...
Here are some ideas:
- one indicator could appear for each country, with a number on it that indicates how many members live there.
- each member could have his/her own unique indicator on the map (note: we might run into problems with this concept if there are a large number of members in one small country, though we do like the idea of this.. just need to see if it can work!)
- we could have the US selected by default, and show the member hendles who live there by default (this may help users realize that the map is interactive and not just a static map?)
- we could show ALL member handles at all times, and just highlight the members from that country, when you touch a country.
- the member handles could be accompanies by member profile pics (we like this idea, but only if room allows / it makes sense design-wise to do so)
- we could show a group of members ON the map (popup when touched?)
- we could show members below the map (if ON the map will not make sense to you, design-wise).
- any other ideas? we're open on this :) so long as there is interaction and all member handles are viewable, somehow.
PLEASE USE STOCK PHOTOS for member profiles, if used. They should be the same ratio as actual member profile pics (though you can scale them down, if needed.
Required Screens:
1) Screen One should be your design concept for this infomation screen. It must include all of the following required content:
- Existing app header: This can be found in the provided PSDs (blue bar with logo/section title/buttons). You will change the title for the section to "App Information".
- Title for the page (large red text, for example "Salon Pfaueninsel" on map psd): this will be "How This App Was Created".
- Text for the page: (see "Berlin_TC-InfoText.rtf")
- Member map: this will be a world map that shows the countries that the member's are from and indicate the member's that live there (use dots similar to one of the maps provided in PSD files).
- Some way of showing the member handles. How this is done is up to you (see more info on this, below)
- TopCoder and Studio Logos
2) Screen Two will show hover state and / or animation for your concept. IMPORTANT: for your hover state, you must use the country with the largest number of members living there, so we can see how your concept works with the largest number of handles!
We have uploaded the following files for you (see the "Berlin_TC-Info_ContestFiles.zip"):
- Two (2) PSDs from exisisting Berlin app maps: Use the exisitng layers as a refernce in order to keep your screens consistant with the elements / look / feel of the existing app. You may also use the "locations" psd as a base/template (keep the header layers and replace the content layers with your own, if you wish).
- Member List: This is a list of all members that have worked on this app and the countires they come from. Use it to figure out how many users you must indicate per country and also for member handles to include in your screens.
- Info Text: This is the text that must appear on the screens.
- Logos: These are TopCoder and Studio logos that must appear on your screens.
BRANDING
Most IMPORTANTLY your screens must "fit" the exisitng styles from the application and appear to be part of the app - ie not feel separate from the rest of the app. Use the provoded PSD files to get a feel for those styles.
Below are some specific brand guidelines for this project.
Typography :
- Use Arial font only. We will replace this with the client's font after the contest ends.
- Text should be simple and easy to read (avoid super tiny fonts, have generous use of line-height / padding / white space).
- Good typography (logical use of font styles / sizes to help the user understand content hirachy) is desired.
Colors :
- use color scheme consistant with the provded "locations" PSD (red accent color).
- The client prefers medium to dark gray for fonts that appear on white backgrounds (rather than harsh black) and white or very light gray fonts on dark backgrounds.
Effects :
Remember that Accenture always prefers simple blocks of colors and design elements. Follow the exisitng styles and do not add new gradients / drop shadows / rounded corners / etc that will not fit with the existing app design.
TARGET AUDIENCE
High-level business CEOs, CIOs, VPs, etc
REFERENCE DESIGNS
Provided PSDs
JUDGING CRITERIA
- How creative the content elements are
- How well created the elements are
- How easy the design / layout makes it to digest the information
SUBMISSION & SOURCE FILES
Preview Image: Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File: All Requested Contest Requirements stated above.
Source Files: All original source files of the submitted design. Files should be saved as layered PSD files.
FINAL FIXES
As part of the final fixes phase you may be asked to modify your graphics, images (sizes or colors) or modify overall colors. Source files that are not easily editable will need to be corrected, if applicable.
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.