Challenge Summary
Welcome to Exponentials App - Design Refinement Challenge! Previously we ran a LUX challenge where we focused on iPad UX/UI design concepts and exploring general look-and-feel direction for the new Exponentials iPad app. Now we are looking to refine the winning design with additional features and explore concepts for some new screens.
The Exponentials iPad application will serve as a tool to educate users and help them understand all the different exponential technologies. The app needs to create a natural, immersive user experience filled with visualizations and other rich-content.
Round 1
Submit your design for a Checkpoint feedback:
1. Technology Dashboard.
2. Specific Technology Landing (Home Tab).
3. Use Cases Dashboard - Static Content.
4. Use Case Article.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file naming and numbering. (UseCase01, UseCase02, News01, News02, etc.).
Round 2
Final design plus any Checkpoint feedback:
1. Technology Dashboard.
2. Specific Technology Landing (Home Tab).
3. Use Cases Dashboard - Static Content.
4. Use Case Article.
5. News Feed - Dynamic Content.
6. News Article.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file naming and numbering. (UseCase01, UseCase02, News01, News02, etc.).
Challenge Overview:
The goal of this challenge is to take the 1st place submission and incorporate elements the client liked from the other winning submissions we got from the LUX challenge.
The Exponentials iPad application will serve as a tool to educate users and help them understand all the different exponential technologies. The app needs to create a natural, immersive user experience filled with visualizations and other rich-content. Think about how you interact with YouTube or Wikipedia - it’s very easy to just get lost in the content by clicking from video to video or article to article. This is the same experience we want for users of this app!
Branding Guidelines:
- We’ve included an updated branding doc based on the winning submission. It includes updated colors and font. Please make sure you are updating your colors and fonts to reflect this new branding document.
- The majority of the design styles should be pulled from the winning submission
Design Requirements:
- iPad resolution: 2048 x 1536px at 264dpi.
Supporting Documents:
- Exponentials - Client Feedback.pptx: Outline of updates and client notes (Exponentials - Client Feedback_original.pptx).
- 206802.zip: LUX challenge winner.
- Refined PSDs.zip: Has updated styles and branding. Use this as a starting point, but we want to see your own ideas for content.
- Exponentials---Branding.jpg: Color palette and fonts.
- Advanced Robotics.pdf: Original content for the Advanced Robotics sections. Use this as reference and to pull any additional content from.
You can find all of this supporting documents in this Google folder.
Required Screens:
We will use submission number 206802 as our base of work. Please use this submission to pull general styles and look and feel from. We’ve also supplied a Refined PSD (Refined PSDs.zip) that has a good outline of the sections and includes the current colors, fonts and branding from the Branding Doc; also included in the downloads.
1) Technology Dashboard
The technology dashboard will be used to view all 13 of the exponential technologies. We’ve included an example PSD (Refined PSDs: 01_Technologies Landing.psd) of how this can come together, but we are open to your ideas and concepts.
- The main area to focus on is how to handle multiple views of the dashboard. We are currently showing a horizontal swiping view (which we would like to keep), but would also like to include a grid and list view.
- What relevant content needs to be included with each technology? Brief overview text, indication that content has been updated (icon/ color), etc.
- Think about mobile focused ways to view the content. Swiping, gestures, etc.
- How can you interact with the technology sections? Does tapping on a specific technology flip over the tile to view additional details? Or does swiping up on the horizontal view slide that panel up to view the “Learn More” button and additional content? Think about the interactions and show how they will work in your designs
2) Specific Technology Landing (Home Tab)
We’ve included a PSD (Refined PSDs: 02_Technology Specific Landing.psd) of the overall structure for this page. We are looking for your concepts, ideas and designs for how to handle the content buckets.
- Setting up what Advanced Robotics: Intro text, icons, visual, etc.
- Dynamic Content: Trending articles/ news, updated content, breaking news, etc. What is the required functionality/controls that is needed for this? This area is wide open and we are looking for your ideas. The design style should follow what is currently in the PSDs.
- Twitter/ social media feeds: This may be a future release, but what are your ideas on how to handle this type of content? Could this be integrated into the dynamic content somehow? Multiple table or content views?
- Static Content: Static informational content related to Advanced Robotics.
3) Use Cases Dashboard - Static Content
The Use Cases Dashboard screen serves as the main screen to view all of the use cases for a particular technology. We’ve included the existing PSD (Refined PSDs: 02_Technology Specific Landing.psd) that this screen will need to be integrated into to. There is already tab for Use Cases. The Use Cases Dashboard should include:
- The Robot graphics needs to stay the same. Colors, fonts and button styles can be updated though. Clicking on a piece of the robot will take you to Use Cases Dashboard associated with that piece/ section.
- A sub navigation is needed or way to quickly jump back to the robot graphic to choose a new section. We are looking for your ideas here. Think about what makes the most sense for a tablet based app.
- Multiple views of the dashboard: grid vs. list views
- Additional items to consider exploring: previews of use cases, tags, favoriting/ liking
- Clicking on a tile on the dashboard takes you to the Use Case Article
4) Use Case Article
The Use Case Article page needs to include a few specific items:
- Should all be contained on one screen. No pagination
- Should include associated tags, issues or related industry links. Some way for the user to see what other areas of the app are related to this Use Case Article
- Think about how the user will get back to the Use Case Dashboard. This should be a simple and intuitive process. Think about how news reader apps handle this. Or does it function more like Facebook in that it opens a panel over the tap that can be closed out or swiped away once you reach the bottom of the article? Think mobile friendly interactions. We really want your ideas for how to best handle this content!
5) News Feed - Dynamic Content
The News Feed screen should be a part of that same technology view that we are supplying the PSDs for. There is already a tab included for “News”. Please include your designs within this tab. The News Feed should include a few key items and features:
- Some way to show which news articles are most popular. This could be by which articles are at the top and larger tiles, some kind of icon or simple marker, color coding, etc. Show us your ideas. The client likes the idea of different size tiles to break up the grid, but be creative.
- Filters: should be able to filter by All, Technologies, Industry, Issues, Newest, Most Popular/Trending
- Each news article tile should include the following: what area they belong to; Technology (which one), Industry (which one), or Issue. This should be done with color coding as well as titles or icons. Look at the branding guide for which colors are associated with each pillar (Technology, Industry and Issues)
- Trending graph or icon: How much are articles being shared, read or liked. Be creative in how this is represented.
- Tags: Some way to view the most popular tags associated with the highest trending articles. Is this in a side panel or integrated with the other filters some how? Selecting a Tag would show all of the articles containing that tag
- Any additional features, ideas of functionality that you think would be beneficial for a News Feed. We are open to your ideas, concepts and layouts. The key thing to keep in mind is to make sure things remain user friendly, intuitive and mobile focused.
6) News Article
The layout of this page will be pretty similar to the Use Case Article page. Should include:
- Clean crisp layout. This is long form content and it should be easy to read. Watch your line lengths (not too long) and font size (not too small)
- Tags associated with the article
- Share, like/favoriting functionality
- Ability to have images, videos, slideshows, quotes, sub-heads (H1, H2, H3), etc. Show what these various styles of content will look like inline with the longer news article. What unique functionality/controls are needed?
Important:
- Keep things consistent. This means all graphic styles should work together. The “Client Feedback PPT” includes elements from multiple submissions from the last challenge - please ensure they all work together in your design.
- All graphics should have a similar feel and general aesthetic appearance.
- Use the winning submission as your guide.
Target Audience:
- Anyone who wants to learn about exponential technologies.
Judging Criteria:
In order of importance, you will be judged on:
- How well does your design align with the objectives of the challenge.
- Creativity of your visualizations.
- Cleanliness of your graphics and design.
- Overall Design and User Experience.
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 Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
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. 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.