Challenge Overview
Welcome to the Spark Mobile “Home Deck” Prototype Challenge! The primary objective of this project is to help drive consumer engagement to increase the awareness and usage to the Spark Mobile Home Deck.
For this challenge, the goal is to create the HTML prototype based on the provided storyboard design and requirements outlined in the Challenge Details section.
Final Submission Guidelines
General Requirements:
- Create all the mentioned pages and interactions outlined below.
- Use the fonts and layout from the attached image layout spec requirement.
- The browser scope for this challenge are mobile and tablet browsers only.
- Use mobile first approach.
- Use Angular.js as the Framework for page navigation and animation
- Use Bootstrap for all CSS simplification
- Follow the instructions and guidelines in the provided “wireframe” screenshot specs for the correct typography, spaces, and flows.
- Image content should be treated as img tag and not a CSS background.
- The width should be set as 100% fluid, this will show more tiles if there are tiled elements (ex. apps and news).
Required Pages:
The following are the pages and functionality needed for this challenge. Please note that the referenced storyboard mentioned below are for mobile view. Check the Galaxy folder for the storyboard’s tablet version.
Use the provided storyboard guidelines file in case there is no storyboard for specific page/screen or ask in the forum for clarification.
1. Home
- See HomePage_Spec.png for reference.
- Login will cause the page to slide down under the login button by 200px and just have a white placeholder for login and authentication actions to be added later. Login functionality is out of scope for this challenge.
- Google search is only an input field placeholder and its functionality is out of scope.
- Pay Bill and My Account buttons are dead links.
- Weather
-- Touching the weather area will display as shown
-- Tapping an item redirects to the Weather Details page as shown in Weather_Detail_Spec.png
-- Remove the “arrow down” icon, this is out of scope.
-- See Weather_Detail_Spec.png for the correct action flow.
- Apps Wall
-- This section will display all the apps of the project, simulate at least 10 apps. You can get sample apps from Google Play store or from the example feed document.
-- User can slide the apps left/right to display the other apps.
-- Tapping on an app will take the user to the Google Play store or the Apple AppStore.
-- Remove the “arrow down” icon on the top right part of this section, this is out of scope.
-- See AppWall_Detail_Spec.png for the correct action flow.
- Latest News
-- This section will display all the available news, simulate at least 10 items. Use dummy content for now.
-- User can slide the news left/right to display the other news item.
-- Touching a news item will redirect offsite to the source of the news article.
-- Remove the “arrow down” icon on the top right part of this section, this is out of scope.
-- See LatestNews_Detail_Spec.png for the correct action flow.
- News Feed
-- This section shows available sources and a description of the source.
-- Touching the icon will open a News List page which will list all current news articles from that source as seen in NewsFeed_Detail_Spec.png
-- The “add new feed” should be tappable, use dead link for now.
-- Remove the “arrow down” icon on the top right part of this section, this is out of scope.
-- see NewsFeed_Detail_Spec.png for the correct action flow.
- My Spark
-- Each item in this section are tappable.
-- Tapping the item will take the user offsite
- Footer
-- All nav and social media icons should be a hyperlink, use dead link for now.
2. Weather Details
- See 06_03_WeatherDetails_Full.png for reference.
- Swipe Left, back button or a button on the top left to go back should return to home page.
- Add image placeholder for the advertisements as shown in Weather_Detail_Spec.png
- Add a text link after the bottom advertisement and before the footer text links that says “Download 1Weather Now”. This will be centered and follow the same style as with the footer text links.
3. News Source Details
- See NewsFeed_Detail_Spec.png for reference.
- Similar layout for “Latest News” on home page
- Left/Right swipe-able top news image with title on top of it.
- Scrollable list of news articles
- Touching any take you to “Story Detail Page”
- Swipe Left, back button or a button on the top left to go back should return to home page.
- Disregard “Categories”, they are out of scope
4. Story Details
- See the right part of NewsFeed_Detail_Spec.png for reference.
- Apply standard header and footer.
- Image placeholder at the top part of the article, please keep in mind that there is also a possibility of embedding a video.
- Advertisement placeholder at the middle of the article.
- Recommended news at the bottom before the footer section.
- Swipe Left, back button or a button on the top left to go back should return to home page.
5. Frequently Asked Questions
- Just a test page with topics and answers.
- See 08_01_FrequentlyAskedQuestions.png for reference.
- Each item can be expanded or collapsed.
- Swipe Left, back button or a button on the top left to go back should return to home page
Angular Instructions:
We will have a follow up code challenge to implement the data call and is important to follow the following instructions for this challenge:
1. Use this style guide https://github.com/johnpapa/angular-styleguide as a starting point for your Angular development to provide consistency through good practices.
2. Call out the different areas of the page which will be data driven to each be new directives and views.
Home (Controller):
- Weather
- App Wall
- Latest News
- News Feed
- Add Site
- My Spark
- Search
News (Controller)
- Top Video Services
- Top News
- Categories
Story Detail (Controller) - Most of this is from the controller.
- Recommend stories
- advertisement (try to reuse from other places)
Weather Detail (Controller)
- Keep the current section as part of the main views
- Each item in the listing should pull from the same directive
- advertisement (try to reuse from other places)
Ask early in the challenge forum as soon as possible if you have any confusion or question regarding the challenge requirements.
Browser Compatibility:
- Latest Google Chrome (Android)
- Latest Safari (iOS)
HTML5
- Use the latest version of Bootstrap for the project
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use the latest version of Bootstrap for the project
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
- Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You must use AngularJS for this challenge.
Images
- Icons are included in the zip file
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
Submission Guidelines:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.