Challenge Summary

The client for this project has decided to create an automotive-specific iOS & Android mobile tablet app that aggregates content across the company, digitally delivers that content to stakeholders worldwide, and can evolve with advancements in mobile technology and digital communications. Now we need your help to wireframe the UI for this app.

For this challenge, we need you to create Wireframes for the new DRIVEN by Dinnaco tablet application.  We have provided details below on the application use cases and required functionality for you to understand what should be included in your wireframes.  Your submission should show how all of these screens / functionality will flow together in the actual application.

We look forward to seeing your creative wireframe designs!

Round 1

Round 1 will focus on the following user functionality for the new application:

1) Welcome / Splash Screen - Allows users to login or register
2) Registration - Allows the user to enter their contact information and register to use the application.
3) Content Dashboard - Shows aggregated automotive content available to view, download, or share (PDFs, videos, podcasts, and infographics via LinkedIn, Twitter, etc.).  Should include the ability to filter content.
4) View Content - Allows user to view selected content. Should include the option to download or share.
5) User Profile Dashboard - View / edit user profile and preferences. 

NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!

Round 2

In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback).  For Round 2, you must also include all the remaining functionality described in the project documentation, including the following screens:

1) Welcome / Splash Screen - Allows users to login or register
2) Registration - Allows the user to enter their contact information and register to use the application.
3) Content Dashboard - Shows aggregated automotive content available to view, download, or share (PDFs, videos, podcasts, and infographics via LinkedIn, Twitter, etc).  Should include the ability to filter content.
4) View Content - Allows user to view selected content. Should include the option to download or share.
5) User Profile Dashboard - View / edit user profile and preferences. 
6) Customize content/topic preferences - Allows the user to build their news feed and decide what content to display.

NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!


Primary Goals:

For this challenge, we need you to create Wireframes for the new DRIVEN by Dinnaco tablet application.  We have provided details below on the application use cases and required functionality that should be included in your wireframes.  Your submission should show how all of these screens / functionality will flow together in the new application.

General Requirements:

- Produce HTML click through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The new application must be very easy to use and intuitive. Keep that in mind when designing your solution.
- You MUST cover all use cases / functionality shown and described in the challenge spec.
- Your wireframe should represent all the functionality of the screens described in the challenge spec. You should use these proposed screens as a guide, but if there is better way to display any information, feel free to reflect that on your wireframe.
- You must use wireframes notes on every single page you design to explain what items are addressed on that page, what things you added/changed/removed, and to make your idea easier to understand so the client can provide constructive feedback.

Project Description:

The client for this project (Dinnaco) is looking to expand it's automotive brand. Dinnaco's automotive digital strategy currently lacks an industry-specific marketing brand/platform, resulting in low viewership of digital content and low quality/quantity of contacts in their database. They have decided to create a customizable, mobile app that resonates with how people digest content.

The goal of DRIVEN by Dinnaco is to introduce a sustainable Dinnaco automotive-specific brand that aggregates content across the firm, digitally delivers that content to stakeholders worldwide, and can evolve with advancements in mobile technology and digital communications.  This will be accomplished by creating the new DRIVEN by Dinnaco application.  The new application will also capture user data, thereby increasing the quality and quantity of the pool of contacts.

Wireframe Requirements:

- All screens / functionality described below must be included in your submission.  
- The wireframe designs should work on both iOS and Android tablet devices.  You should target iPad and Kindle tablets as the primary devices for the application.
- You must also identify any gaps and fill them in to show how the new application will work. 

Screen / Application Requirements:

Application Use Cases:
1) User should be able to view, download, and share the latest automotive content (PDFs, videos, podcasts, infographics, etc.) from Dinnaco
2) Customize content/topic preferences - Users can customize the type of content they see in their news feed.
3) Filter options by region
4) Push notification capabilities to subscribers
5) Registration - Users can register to use the application.

Key features of the APP (i.e. What types of functionality we need to include):
- Interactive capabilities for use (i.e., download PDFs, watch videos, share social media, etc.)
- Real time updates
- Social media sharing – linked to LinkedIn, Twitter, Facebook, & Google+
- Customized user preferences - Includes the ability to customize the topics and type of content they see in their news feed.
- Multiple channels for social distribution
- Filtering capabilities - Ability to set filters on the content displayed (such as type of content, topic, etc.).
- Gamification/polling
- Back-end analytics (internal use only to drive a demand generation engine)

Screens:
1) Welcome / Splash Screen - Allows users to login or register
2) Registration - Allows the user to enter their contact information and register to use the application.
3) Content Dashboard - Shows aggregated automotive content available to view, download, or share (PDFs, videos, podcasts, infographics, etc).  Should include the ability to filter content.
4) View Content - Allows user to view selected content. Should include the option to download or share.
5) User Profile Dashboard - View / edit user profile and preferences. 
6) Customize content/topic preferences - Allows the user to build their news feed and decide what content to display.

NOTE: You are welcome to add additional screens or combine some of these screens if you feel it will improve the user experience.  As long as all the use cases / functionality above is included we are open to your creative ideas around how to break these things up into different screens.

Look-and-Feel:

The new application needs to match the look-and-feel design considerations provided by the client.

Design Considerations (What the client would like this APP to look like):
- Futuristic
- Easy to navigate
- User friendly
- Creates consumer demand
- Highly interactive
- Tailored
- Real time notifications
- Global connectivity 

IMPORTANT: We have also provided some design inspiration ("Design Inspiration - Example News Feed App.zip") - screen shots from an existing app that does a good job of aggregating and displaying news.  This example app shows a responsive design and intuitive user experience the client likes.  These screen shots show a user selecting the topics they wish to view, as well as their news feed (based on the user's topic selection and preferences). Please use this as design inspiration only - do not copy it exactly.  

Finally, please feel free to get creative and show us any ideas you have to improve the user experience!

Target Audience
- Current clients / prospective clients
- Management employees at Automotive Manufacturers / Suppliers / Dealers / Aftermarket – the entire automotive industry 
- Automotive industry contacts - all levels
- Media 
- Students – up and coming talent

Judging Criteria
- User Experience
- Simplicity and consistency
- Completeness and accuracy of the wireframe
- How well your wireframes provide a consistent user flow
- How well you implement the challenge requirements
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client)

What to Submit:
Preview JPG/PNG Image File
- 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 ZIP File
- All requested contest requirements as clickable HTML files generated by Axure.  All the content must be listed and the pages are linked together to show page flow.

Source ZIP File
- Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
- All fully editable original source files of the submitted wireframe as required by the contest under "Source Files" in the side bar should be included in your Source zip file.

Final Fixes
- As part of the final fixes phase you may be asked to complete one round of minor changes to ensure your submission meets the stated requirements of this contest. See more information about Final Fixes.

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.

Stock Photography

Stock photography is not allowed in this challenge. All submitted elements must be designed solely by you. See this page for more details.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2015 topcoder Open

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • HTML
  • RP file created with Axure

You must include all source files with your submission.

Submission limit

Unlimited

ID: 30049822