Challenge Overview
TeenShare - Mobile Screen Conversion UI Prototype
TeenShare is a mobile app that will be used by teens to loan, trade, or sell the items they own and don’t need anymore--and to buy, borrow, or trade for items other teens no longer want or need.
In this challenge we are converting the provided Storyboard to a working (Mobile Layout) Ionic/HTML5/AngularJS/CSS prototype that compile run in iPhone/Android devices.
Challenge Requirements
General Notes
- Use JSON to load data for the application, this include navigation, and categories. The structure is up to you.
- Should use ionic directives (ion-list, ion-item, etc.) as much as possible.
- You need to follow the ionic best practice in this contest.
- The converted prototype should exactly match the provided design/storyboard.
- Your design needs to be responsive, so in different screen sizes the application can adjust the layout accordingly.
- The app will be only in Portrait view.
- All pages on produced prototype should be linked to each other. Let us know if you need clarification about the flow, it is clarified in the InvisionApp.
InvisionApp - Clickable Prototype
- We have created a clickable prototype from design in InvisionApp, you can try it here to understand the flow between items and screens
https://invis.io/3Y77WZM92
- Note that mobile gestures (i.e. swipe left/right) will not work on the desktop browser, you need to open the link in your mobile to experience it.
- Refer to _Click Map.jpg, this is outcome of design to explain navigation visually.
Screens Requirements
The following will list required screens, refer to invisionapp prototype to understand the interaction, transitions and navigations between screens.
1. Splash Screen
- It should be same as (01 - Landing.jpg) without the bottom buttons.
2. Landing Screen
- Screenshot : 01 - Landing.jpg
3. Navigation
- Screenshot : 03_1 - Main Navigation.jpg
4. Login Screen
- Screenshot : 01.jpg, 02.jpg
- Simulate invalid login.
- The eye icon in password is used to show password.
- Remove remember me checkbox.
5. Signup Screen
- Screenshot : 03 Sign Up.jpg
- Tapping on city will open up a menu with list of cities.
6. Dashboard
- Screenshot : 04 Dashboard.jpg, and 08_4_2 - All Items.jpg
- Implement slider at the top
- Add up to 8 categories, it is Ok if images are duplicate, they are loaded from json so we can update them later.
- User can use swipe gesture to switch between Item Categories and All Items tabs.
- In 08_4_2 - All Items.jpg :
- User can tag : 06_0_5 - Tag Item.jpg
- User can like item : update # of hearts and make heart red when user like, and visa versa.
- User can add item to favorite : use local storage to add to favorites so it appears in Favorites screen when opening it.
- This page should have progressive scrolling.
7. Search
- Screenshot : 04_02_2.jpg
- All information to be loaded from json.
- By default it will show stats and recent items or seller the user viewed, so you need to use local storage to store latest items/users the user visited.
- When typing you can just show list of items as result.
8. Item Category List Screen
- Screenshot : 05_1 - Sub Category.jpg
- All information to be loaded from json
9. Category Item List Screen
- Screenshot : -6 - Item List.jpg, and 07_4.jpg
- Swiping left takes user from new to popular, and visa versa.
- The list functionality is same as “All Items” tab in Dashboard.
- Using filter user can switch view from grid to list and visa versa.
10. Category Item List Filter
- Screenshot : 07_1 - Refine & Sort Options.jpg, 07_1_.jpg, 07_2.jpg, 07_3_.jpg, 07_3.jpg
- Changing view should be implemented.
- The navigation to sub page should be implemented, and simulate selected item, the information can be hardcoded.
- No actual filtering happens here, we only implement changing view, and show items selected, enter seller name, play with scrollbar.
11. Item Details
- Screenshots : 07_5 - Item Detail.jpg, 08 - Item Detail.jpg, 08_0 - Item Review.jpg, 08_1 - Item Review.jpg, 08_2_.jpg.
- User can use gesture to navigate between Details and Review tabs.
- Load information from json.
- User can like, tag, and favorite an item, same as done in List screen.
- Details tab :
- Implement slider at bottom.
- Use Google Maps to open the location.
- Implement slider at the top for images.
- Review Tab
- Implement the comment thread, new comment should be added with current date/time (Now, 2 secs, 4 mins, 5hrs, a day ago, full date).
12. Invite Friends
- Screenshots : 09 - Share App.jpg
- Nothing to be done in this screen except listing the content as in screenshot, tapping on the > arrow will show alert “This feature will be implemented in future”.
13. Notifications Screen
- Screenshots : 10 - Notifications.jpg
- The dark background item means not read.
- Progressive loading should be implemented here.
- Tabbing on item takes to Item details screen.
- Use swipe gesture to navigate between tabs, they all show same content.
14. Profile Screen
- Screenshots : 11 - My Profile.jpg, 11_0_1.jpg, 11_0.jpg, 11_2.jpg
- The screen list the items same as done in other item listing screens.
- Implement progressive loading in this screen.
- Same functionality here where user can like, tag and favorite item.
- User can edit an item or delete it by tapping the three dots.
15. Settings Screen
- Screenshot : 11_1 - Profile Settings.jpg
- Tapping on city will work same as in signup.
16. Add/Edit Item Screen
- Screenshot : 12 - Upload Item to Sell.jpg, 12_0.jpg, 12_1.jpg
- When tapping on Select > it should open a sub-page with list (same as sub-screen list in filter), and Select turns to the selected text but in black.
- Other fields are input items.
17. Favorite Items Screen
- Screenshot : 13_1 - My Favorite Item List.jpg
- This screen is same to list items screens in dashboard, with same functionality, it only show favorite items.
- Un-favorite item will remove it from list.
18. Messages List
- Screenshot : 14_1 - Message List.jpg, 14_2_1.jpg, 14_2_2.jpg, 14_2.jpg
- Use gesture to show delete/favorite a person.
- It should implement progressive scrolling, add more items to simulate that.
19. Messages Thread Screen
- Screenshots : 14_3 - Message Details.jpg, 14_3_.jpg, 14_3_1 - Add Attachment.jpg
- Simulate chatting by others that when you add a message it responds to you with another message, you can keep array of messages in json file and randomly post them as response. This is just for demo purpose.
- Tap on smily face will open keyboard as well, same as tapping in the input field to input text.
Specific HTML/CSS/JavaScript Requirements
- You must use HTML5 and CSS3, it is preferred if you use Sass.
- 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.
- 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.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Libraries/Plugins
Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
Device Requirements
- iPhone 5, 5s, 6 and 6+ (Portrait View)
- Android with similar to iPhone screens resolution (Portrait View)
Documents
Storyboard and Screenshots are provided in challenge forums.
References
- http://ionicframework.com/getting-started/
- http://learn.ionicframework.com/videos/