Innovation Center App Design Challenge

Welcome to the "Innovation Center App Design Challenge". This challenge will focus on creating new design screens for our Innovation Center App that will be used as a sharing information platform where anyone can find and learn about our Innovation Center, view information about it, and find top quality articles or videos around leadership, technology, and innovation. 

Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!

Round 1

Submit your initial designs for checkpoint feedback
01) Home screen (Mobile Portrait and Tablet Portrait)
02) Discover Screen (Mobile Portrait and Tablet Portrait)
03) Innovation Center Screen (Mobile Portrait)
05) Schedule Visit Screen (Mobile Portrait)

• As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)

Round 2

Submit your final designs with all checkpoint feedback implemented
01) Home screen (Mobile Portrait and Tablet Portrait)
02) Discover Screen (Mobile Portrait and Tablet Portrait)
03) Innovation Center Screen (Mobile Portrait)
04) Virtual Tour Screen (Mobile Portrait)
05) Schedule Visit Screen (Mobile Portrait)
06) Browse Screen (Mobile Portrait and Tablet Portrait)
07) Settings Screen (Mobile Portrait)

• As part of your Final submission, you must replace your checkpoint submission with the final submission into MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt
• Make sure all pages have the correct flow. Use the proper file numbers, (1, 2, 3, etc.)
• If you're not submitting in the Checkpoint/Round 1, you are not eligible to submit in the Final/Round 2

CHALLENGE OBJECTIVES

• Hybrid Application (iOS and Android)
• To create 7 unique screens (Mobile + Tablet)

BACKGROUND OVERVIEW

• This app will be used to show what we are doing around Innovation or technology. It will have the areas of technology or the solution that we are currently working on.
• This app will have a repository/sources of articles and videos related to leadership, technology, and innovation
• Users that use this app will have the ability to learn about our innovation centers, which are located around the world. They can either learn about these centers through virtual tours which are self-guided, or they can schedule an actual tour of the facility that can be done either through Webex on in-person/onsite tour
• Basically, the app would allow the app user to read, see and request information, or contact experts to learn more about it and/or schedule visits to attend virtually or physically to one of our innovation centers
• It's an external-facing app that is going to be available for free on Apple and Google Play stores. Anybody can download the app and use it

TARGET AUDIENCE

• Tech people who want to know what we are doing with respect to innovation and technology

PERSONA

• Name: Brian
• Occupation: Project Manager at Multinational Company
• Goals: Learn more about the solution that is offered in the Innovation Center 
• Frustrations: Unable to get information about the solution or Innovation Center easily
• Wants: An application that able to provide complete information about the solution and Innovation centers 

USER STORY

• Brian is a project manager and being assigned to a new IT project that requires him to outsource all the resources to get the project done, due to lack of employees available to work on the project in his company as everyone is busy
• Brian is doing some research online about companies that offer their IT services but he is still not sure if they are the perfect candidates to work on his project, as there is not much openness, knowledge transfer, and innovation being offered by these companies
• Brian ask one of his colleagues and get a suggestion to download the popular Innovation Center App from the Play Store
• Brian downloads the application, once it's done, he is very surprised because he can see a lot of information about the company’s innovations, he can see their innovation center building locations and he is even able to do virtual tours. He also observes that there are many interesting projects that different teams are working on along with the projects’ progress.  In addition, there is a lot of education material that can be accessed for free in the app  
• Brian is sure now that this company is the perfect candidate to work on his project, but he decides to get more information so he books an onsite tour to get in touch more with the company from the innovation center app

DESIGN CONSIDERATION

• Simple and clean design over complex and flashy
• Needs to follow our design branding guidelines (we provides another application that we’ve created earlier as your references)
• Use color or great visual comparison to highlight a comparison of important information
• Intuitive for the user; should never be left asking "what do I do next?"
• Easy viewing for pages that may be over overcrowded with information

CHALLENGE FORUM

• If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum: https://apps.topcoder.com/forums/?module=ThreadList&forumID=765869

EXPLORATION SCORE
In terms of expectations, we would like to measure the concept against the following in the one to ten scales:

• Creativity: 8
  • 1: barely new ideas
  • 10: a utopic product with features not proven to be able to be fully implemented
• Aesthetics: 9
  • 1: low-fidelity design, wireframe or plain sketch
  • 10: top-notch finished looking visual design
• Exploration: 7
  • 1: strictly follow an existing reference or production guideline
  • 10: open to alternative workflows/features not listed here that would help the overall application
• Branding: 9
  • 1: don’t care at all about the branding just functionality
  • 10: without a properly branded product there is no success

DOCUMENTATION

• Wireframes.pdf
• Design Guidelines (GUI Kit and Design Reference from another app)

SCREEN REQUIREMENTS
01) Home screen (Mobile Portrait and Tablet Portrait)

• Reference Wireframes.pdf page 2
• This screen should welcome and help the user to gain understanding about the app purpose
• This screen should be more than just a “welcome” screen. The point of this screen is to provide an introduction to the company’s innovation mission where anyone can find and learn about our Innovation Center, view information about it, and find top quality articles or videos around leadership, technology, and innovation 
• Present the company innovation mission in various ways, maybe via videos and/or welcome notes from the CEO? 
• Probably add a summary of the innovation center activities (how many projects available, team members, how many innovation center buildings available, etc?)

02) Discover Screen (Mobile Portrait and Tablet Portrait)

• Reference Wireframes.pdf page 3
• Once the user taps on the "Discover" screen, they will be presented with the following information:
  • Scrolling banner at the top, displaying/feature information about what is happening in our innovation centers around the world. To learn more and see the full information, the user simply taps on the banner (no need to show the full information, just provide the scrolling banner)
  • “The latest news” should show what’s recently happening around our platform and innovation centers. It can be a list or card view of the latest articles, videos, etc. To see the full list of “latest news” the user will simply tap the “see all” button (no need to show the full list of the latest news, it is out of scope for this challenge)
• This page should have a section where the app user can find and select one of our innovation center locations (currently we have two innovation centers in India and USA)
• Feel free to add your ideas and creativity for this screen, what kind of information that will fit well into this screen? 

03) Innovation Center Screen (Mobile Portrait)

• Reference Wireframes.pdf page 4
• This screen will appear once the app user chooses one of the innovation centers from the Discover page. From this screen, the user can learn  and find more information about the  specific innovation center that they selected
• Show the innovation center information such as its address, projects available in this location, team members in that location, etc
• Gallery of images, videos about the innovation center
• From this screen the user can:
  • Tap to take a self-guided virtual tour of the center
  • Tap to schedule an in-person (or remote) tour that is facilitated by the people that run the center

04) Virtual Tour Screen (Mobile Portrait)

• Reference Wireframes.pdf page 5
• From here, the user will be presented with a 360-degree view of the center
• We need to provide some way where the user can navigate through various areas of the innovation center. One idea is to provide interactions where the user will be able to see a map of the innovation center building and there are several marker positions that they can choose/select to see the virtual room. Or another idea will be a google street style navigation where the user can visit all the innovation center areas by clicking anywhere and he will move/travel virtually to that area
• In some areas of the innovation center, provide some defined button/markers with “learn more” text in it. When the user clicks the marker, provide a modal window or any style that you prefer to showcase detail information  about that particular area of the innovation center (such as photos, project-related, team members that sit there, etc)
• At any point in time, the user can tap the Done button to return back to the previous screen
• Feel free to be creative and provide the best possible virtual tour interactions that you think will be suitable for this app

05) Schedule Visit Screen (Mobile Portrait)

• Reference Wireframes.pdf page 6
• After the user taps the “schedule visit” button they will be presented with a pop-up that will allow them to select a day/time to schedule a “live” tour of the center
• Key attributes that need to be collected during the scheduling are:
  • Name (first, last)
  • Email address
  • Phone number
  • Company/Institution name
  • Industry
  • Type of session (i.e, in person or remote) - For in person, the user will need to provide additional information about numbers of people attending
  • Topics of Interest - Will be based on demos available at each center and whether “in person” or “remote” tour
  • Date / Time - User should only be able to select dates/times that are available (i.e., will need to integrate a calendar system to know what is available)
  • First-time visit (i.e., yes or no)
  • Comments

06) Browse Screen (Mobile Portrait and Tablet Portrait)

• Reference Wireframes.pdf page 7
• Once the user taps on the Browse tab they are presented with an opportunity to search for any top quality content/videos by:
  • Favorites
  • Topics
  • Collections
  • Downloaded
• Or, they can simply scroll thru the list of “what’s new” in the app
• You don’t need to create screen interactions for these groups and “what’s new”, just create the Browse Screen

07) Settings Screen (Mobile Portrait)

• Reference Wireframes.pdf page 13
• Once the user taps the "Settings" from the main menu, the user will be redirected to the settings screen and able to see the following features on the setting screen:
  • Notification, where the user will be able to choose whether they want to receive information notification (via on/off toggle) for "latest news" or "what's new" in the app
  • Feedback, where user can send feedback about their experience or any issues when using the app (out of scope, just provide the button/link in this screen)
  • About, where user can see general information about the app, for example, “release date”, “version”, “etc”  (out of scope, just provide the button/link in this screen)
  • Privacy Policy, to show content about privacy policy (out of scope, just provide the button/link in this screen)

BRANDING GUIDELINES

• Design Guidelines: 
  • Use this design guideline as your reference, please note that the style of the reference app provided was using Apple Human Guidelines and since we want to make this application as a hybrid app, use them as reference for the colors, fonts, icons treatment, and clean design style
  • Stock photos and stock icons are allowed from the approved sources

TARGET DEVICES

• Mobile Portrait: 1125px x 2436px (iPhone 11 Pro)
• Tablet Portrait: 1668px x 2388px (iPad Pro)

SUBMISSION AND SOURCE FILES
Submission File

• Submit JPG/PNG image files based on Challenge submission requirements stated above
• MarvelApp link for review and to provide feedback
• Declaration files document contains the following information:
  • Stock Photos Name and Links from allowed Sources
  • Stock Art/Icons Name and Links from allowed Sources
  • Fonts Name and Links source from allowed Sources

Source Files

• All source files of all graphics created in either Adobe XD, Figma, Sketch, Photoshop and saved as an editable layer

 
FINAL FIXES

• As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors