Project Mom and Pop - Mobile version UI prototype enhancement

Project Overview

This project aims to create an entire platform with the goal of supporting and expanding small businesses everywhere, using both web and mobile applications. We are looking for experienced members to help us make our vision of an attractive, user-friendly platform a reality. This project presents a unique opportunity to make a real difference in the world.  As most people know, small business is the backbone of any economy. Unfortunately, small businesses have the most difficult time raising money, finding customers and being able to apply new products and approaches to help their businesses grow. Client has set out an ambitious goal to change this and we need someone to help us realize our goals.

 

Challenge Task Overview

The scope will be:

• viewing gift card offers
• gift card offer details
• purchasing gift cards (with My Cart page and Braintree payment widget),
• gifting page (it's new, see the desktop version at qa.foundershare.com; please note you must possess at least 1 gift card to be able to gift it)
• my history (both for Champions and Business Owners)
• How it Works
• FAQ page

1. Being provided with storyboards that explain UI, user behaviour and navigation (there are no wireframes) the contestants have to implement a responsive UI prototype. All storyboards are in scope. Though the number of pages may seems too large, it is not that scary actually: the submission walked through every click each user could perform. Some pages are repeated multiple times with the image of a finger placed on different options for clicking.
2. If some pages are missing any UI elements (not available in the source PSD file) or some user behaviour/navigation is unclear please raise this issue early at the forum.
3. Please note that the web app target both desktop/tablet layout and mobile layout and functionality will differ a bit between them. This challenges addresses mobile layout only. However, you can refer to the implemented Desktop functionality at qa.foundershare.com. If you browse it with a desktop device or tablet it will render the desktop version; if with a mobile device - mobile version - the one you are to enhance in this challenge.  Also you can deploy the code attached for reference at your own instance.
4. If you are navigating to the pages that are not in scope of this challenge (e.g. those that already exist), the navigation must work and a blank page with its name only must be opened in the browser. Please note you may also need to update the existing pages as per storyboards. 
5. The current codebase with the deployment guide is here. You will need only "mom_mobile" project.
6. You are to update the existing pages of mobile project. If any storyboards override an existing page, the latter has to be updated according to the sroryboards. Channge record must be logged in a separate file of you submission.
7. The current mobile version is also available at qa.foundershare.com

 

Some misc notes

The Gift card offers list page must become Home page where any user inclunding anonymous lands on. Anonynous user will be navigated to login page in case she performs any action that requires authentication. She can also tap "log in" link direcrtly. 

 

Key Requirements

• Convert the existing prototype to be HTML5 using AngularJS
• AngularJS best practices should be followed, for example: consider using AngularJS routing feature.
• Look & feel should remain the same for all elements on all pages
• Maintain the same hover state for all buttons and links
• Test in all the required browsers (see the list below)
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly
• Ensure you submission clear of HTML and CSS Validation error and warning
• We'd like to have the code modularized so it's easier to maintain the code
• Follow the structure / coding standards of the provided prototype

 

CODE REQUIREMENTS:

HTML5

- 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 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

- 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 codes so future developers can follow the code.

- 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.

?

JavaScript Libraries/Plugins

• AnguarJS must be used as the main framework
• jQuery & jQuery UI

 

Browser Requirements (latest versions)

• Mobile Safari (iOS)
• Chrome for iOS and Android mobile devices
• Android Browser

Final Submission Guidelines

Submission Deliverables

A working Angular.js prototype with the listed requirements covered.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.

The submission must not have any back-end part so that it can be easily deployed at a very basic web server without any additional software (e.g. node.js) to install.