Challenge Overview
Project Background
The client has their own website which provides a sharing economy service targeting skilled housekeepers and people who are looking for a housekeeper. It provides a matching place of users and housekeepers. Users can find and choose skilled housekeeping-partner from hundreds of housekeepers.
Now the client is going to add a new service to the site.
It’s a service to enable members in the community to earn profit in a more effective way. Members as skilled housekeepers can hold their own paid events to teach something about their specialty. And users can find these events and participate in ones they are interested in.
Client wants Topcoder community to develop UI prototype for this new service.
Challenge Overview
The goal of this challenge is to develop a UI prototype that covers some main screens for the new service, which is based on standard HTML / CSS and Javascript.
These are the screens in scope of the challenge:
(1) Personalized Page - This screen shows information about events related to a user.
(2) Event List Page - This screen shows a list of events with pagination.
(3) Event Details Page - This screen shows a detailed information about an event.
(4) Event Create/Edit Page - This screen is an "edit" mode of Event Details Page.
(5) Evaluation Review Input Page for Participants - In this screen, An event organizer can input evaluations for participants in this screen.
(6) Evaluation Review Input Page for Organizer - In this screen, participants can input evaluations for organizer of event they participated in.
(7) Notification Component - Indicator and balloon list of various notifications from the service.
(8) Dialogs - Several reusable dialogs
General Assumptions
The prototype will be merged with server-side application
You must build the prototype with standard HTML / CSS and simple javascript code because most parts of the screens are supposed to be rendered in the server-side. Usage of web frameworks like Angular.js / React.js is NOT allowed.
Users are general consumers in the middle or mature age
The users will use the service with their mobile phone (Android/iPhone) mainly but it should work on the desktop as well.
This is the first one in a series of challenges
Several UI prototyping challenges are planed to cover the whole scope of the project. We are going to use the outcome of current challenge as base for the next ones. So it’s a good chance to get started on this now.
Requirements
Prototype Requirements
- The prototype must be responsive.- The prototype must replicate the design, which should be straightforward to follow.
Detailed Requirements
- Detailed requirements for pages are provided in the forums.
HTML Requirements
- HTML should be valid HTML5 compliant.
- 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.
CSS Requirements
- 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 Requirements
- 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.
- Please do NOT use any complicated frameworks like Angualr. js / React.js, since later the client needs to convert this prototype to run on the server side (ejs for example), we need the prototype to be done with standard HTML5 / CSS / Javascript code.
Licenses & Attribution
- Third-party assets used to build your item must be properly licensed or free for commercial use. MIT, some modified BSD, Apache 2 licenses are ok, but if a library is not commercial friendly you need to get our approval first.
- Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.
Screen Specifications
- Must support desktop.
- Must support mobile.
- Must support retina display.
- Layout width should be fluid.
Browser Requirements
- Desktop: IE11+ (Windows), Latest Firefox (Mac & Windows), Latest Safari (Mac only) & Chrome Browsers (Mac & Windows).
- Tablet / phone: Latest Android and Safari Browsers.