Challenge Summary
Welcome to Tangerine Kiosk Display Information Design Challenge.
We need your help to create a design for a display (TV) that will show solar energy related information in an engaging way, including animations. It should be short but fun. Jump in now.
Best of luck!
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Resources
Download assets from the drive folder https://drive.google.com/open?id=0B1hQWnfwpYvrWk94S0JGVzhBM3M
We need your help to create a design for a display (TV) that will show solar energy related information in an engaging way, including animations. It should be short but fun. Jump in now.
Best of luck!
Round 1
Submit your design for a checkpoint feedback.- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
The goal of this challenge is to update the look and feel of a display that will produce attractive and engaging real-time information. The view will be displayed on a Samsung TV in the customer’s store, operative 14 hours a day.
Concept Goals
The design must support the ability for the viewer to read all content from a distance of 6 – 10 feet. The design must support the resolution and form factor of the Samsung TV as contained in the screen specifications.
The main objective is for the customer (BriarPatch) to communicate the benefit of their solar energy system. This is done through captioned slides, energy generation data and environmental benefits.
The display will address four areas of interest to the customers:
1. Client branding: Design will reflect the style of the client website.
2. Client story: Design should be able to communicate customer’s story about their environmental program through video or photographs with captions.
3. System performance and contribution: Production data from the solar panels will be displayed and updated every 15 minutes. All data pages must contain the timestamp (date and time) from the data feeds. Standard data presentation is:
- Current generation and weather conditions.
- Historical generation as required by the customer (e.g., Daily, Monthly, Annual, Lifetime).
- Daily, Monthly and Annual charts.
- Environmental benefits as required by the customer (e.g., CO2 reduction reported both as metric tons and as equivalencies, such as carbon absorption of acres of forest).
4. Partner recognition: Display logos and roles of partners, such as installer, solar panel manufacturer, etc. BriarPatch is the main logo. The rest are partners (e.g. Tangerine).
The design should present the above information in an engaging fashion, using animation and movement as appropriate. Since the display will run on a TV, there will be no opportunity for the viewer to manually navigate and interact with the display; therefore, the design will also need to guide the viewer through the different elements in a way that can be scripted when implemented.
Screens Requirements
1. Display
Considering the provided information in the Concept Goals section, come up with a design solution that showcases the following display composition pattern. Follow this exact same layout to implement an engaging design - see live sample for a large view.
There are five (5) slider elements/pieces which rotate information. This behaviour must be kept. Initially, user wouldn’t be able to operate or interact with the UI since it’s a display but if you find a way to add controls (arrows, progress, etc) in a very subtle way that would be a plus, not mandatory though.
Create several screens to showcase your animation/transition samples.
We don't want to see a design that is too busy or distracting. The focus is the main slider and the benefits sections (1.5 and 1.6); the other information sections are of secondary importance.
1.1. Logo
- Briar Patch logo should be prominent.
1.2. Site Information
- Create one slide with site name (Briar Patch Coop) and address.
- Create one slide with System Size (kW).
1.3. System Information
- Create one slide with Current Temperature and Weather Conditions.
- Create one slide with Daily Solar Generation (kWh).
- Create one slide with Lifetime Solar Generation (kWh)
1.4. Partners
- Place Tangerine logo and placeholders to simulate more partners.
- These should be less prominent than the main logo (see 1.1.).
1.5. Main Content Slides
- Create three (3) story slides made of photos and captions. Extract photos from this video.
- Create five (5) educational slides made of photos and captions. Use provided educational background photos.
- 3 Charts (daily, monthly, annual): amount of energy generated each hour of the last day, each day of the last month, & each month of the last year.
1.6. Environmental Benefit Slides
Display four (4) environmental benefits slides with caption (use provided photos):
- CO2 Reduction.
- Car emissions.
- Acres of forest.
- Homes powered.
Resources
Download assets from the drive folder https://drive.google.com/open?id=0B1hQWnfwpYvrWk94S0JGVzhBM3M
Branding Guidelines
- Branding colors must match the provided BriarPatch branding document (NOT from the website).
- Font to be used is Coco Gothic. If you don’t own it use a similar approach. You’ll be asked to replace it during final fixes phase.
- Logos are provided.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- 42 inches TV: 1920px x 1080px.
- Color mode: RGB.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com) and/or Adroc (adroc@topcoder.com). Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotspots) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload.
Stock Artwork (Illustrations, Icons, Photography) – NOT ALLOWED
- Stock artwork is NOT allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
Target User
1. Tangerine customer: a company (BriarPatch on this case) that has installed solar energy and wants to have an engaging, branded display to showcase their commitment to the environment.
2. BriarPatch customers and employees: the viewers who will want to be able to quickly see and understand the benefits our customer is providing and how these benefits relate to them.
Judging Criteria
- You kept the same layout but refined the look in a pleasant way?
- How interesting and engaging is your display design?
- Is the data easy to read and enticing?
- Cleanliness of your graphics and design.
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Sketch, Adobe Photoshop or Illustrator. Layers should be named and well organized.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.