Challenge Overview
Project Overview
Welcome to the "IBM - SiBM Agile StandUp Tool UI Prototype Challenge"!! The goal of this challenge is to create the HTML5 Prototype for a responsive application using the provided storyboards. The prototype must follow our standards and our guidelines. Review the details below.
The main task of this project is to create the HTML5 Responsive UI Prototype based on the provided Storyboard design by using industry standard best practices for responsive apps.
This UI Prototype will use Responsive Design solution that will works within all devices Platform. You must use Responsive web HTML5 best practices so it will looks good in all targetted device. Read more details for UI Prototype Requirements and Flow below.
As part of this challenge you will need to document all HTML5/CSS3/JavaScript code. We need clear explanation of the code to help us figure all the HTML5/CSS3/JS code functions and make it easier for future developers and the client to understand what you have built.
NOTE: This challenge will leverage Bootstrap.
Challenge Task Overview
This application will make it easy for agile development teams to hold daily stand-up calls, remind each team member about what they are supposed to say, show a list of who is attending the stand-up, show the mood (sentiment) of the team, and show a timer so that each person in the meeting knows when their time is up.
The main task of this competition is to develop a Responsive HTML5 prototype based on the provided storyboard designs. We are focused on the "Desktop" view for this challenge. It is very important that you implement and use Bootstrap correctly so we can update the mobile views in a future challenge.
Tips for Success: Ask questions early and get the Copilot or PM's feedback is very important for everyone to be successful in UI Prototype challenges.
Key Requirements
- Focus on overall Bootstrap/great code structure.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- This new Portal will be a responsive HTML5 application - it will need to be scalable for different devices (mobile devices, tablets, and desktops), but for now, focus only on Desktop version.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Screen Requirements
00. Login
- Refer to "01-Login.png", "02-Login-passwordok.png", "03-Login-passwordwrong.png"
- User needs to provide their credential before able to use the application.
- Provide error condition when user provide wrong credential in the apps.
- Once user click the login button, apps will verify the user credential and let them know that their credential is valid (02-Login-passwordok.png) before being redirected to homepage
01. Homepage
- Refer to "04-Homepage.png", "05-Homepage-view-action-items.png", "06-Homepage-notification.png", "07-Homepage-scrum-master.png".
- Once user successfully logged in to the application, they will see homepage as the default page in the apps.
- This page will show list of all projects that related to the user. For most users, this list will contain just one stand-up, but there might be users who have more than one.
- Each list will have several content elements which are :
--- Project name
--- Project Description
--- Time when the standup call will happen/or currently happen
--- Emergency Phone number
--- Person that create the project standup page (Scrum Master)
--- Button to join the Standup call "Join StandUp"
--- Link to see all issues list in the project called "Show Action Items"
--- List of all user that participate in the StandUp calls.
- If user click the "show action items", they will be able to see all open issues, and even add to this list or mark items as resolved. (05-Homepage-view-action-items.png)
- User can see new notification from the homepage (06-Homepage-notification.png) -- this shows up just the first time they log in after they have been added to a project.
- Clicking the "Join StandUp" button will bring user to the StandUp page, which will open in a new window.
- If user involved in some project but it's not shown in the apps, they can create their own StandUp calls page by click "Create StandUp" button. This way, user will automaticall become the Scrum Master for this project.
- If possible, list projects by the time of the standup, with the earliest one showing up first.
- if the user is the scrum master, they are able to edit or delete a project.
- The list will be shown based on the time of StandUp calls will be happen. So if I look at my list, and have more than one item, the first one in the day will show up first, followed by the second.
02. Basic Page
- Refer to "12-Basic-page.png"
- Once user click the "Join StandUp" button, they will goes to the StandUp page, but first, they need to filled in their current mood/emotion first.
- User needs to choose one of the emoticon that reflected their current emotion/feeling today.
- If user not choose the emoticon, they cannot join the StandUp page and make calls with other team members.
03. Scrum Setup Page
- Refer to "15-Setup-standup.png", "16-Setup-standup-error.png"
- If user not see their projects in the homepage, they can setup new StandUp pages for the projects and invite other team members into the page.
- User can create the StandUp page via clicking "Create StandUp" button in the homepage.
- User will go "15-Setup-standup.png" where he can enter information related to the project in this page.
- Provide error condition for any empty field in this page (16-Setup-standup-error.png).
- User will automatically become Scrum Master for the new StandUp page.
04. Standup Page for all users except the Scrum Master
- Refer to "09-Standup.png", "10-Standup-next-queque.png", "11-Standup-hasnt-started.png"
- After user select his emotion/feelings in the Basic page, they will see this page (09-Standup.png) where they can do interaction/communicate with other team members via phone call.
- Users can see who is on the call, who is on the team but not on the call, who is currently speaking, who has already spoken.
- If a user is the next one to speak, they see an indication that they are up next.
- If user wants to speak next, they will need to click the "I Want To Speak" button in order to get their turns to speak up. After user click the "I want to Speak" button, the button will disappear and user will be shown notification that they are in queue. (If they are the very first person to speak, that is, if no one else is speaking, then they instead see the "Start Speaking" page -- this is what starts the 15-minute, timer described below)
- Users can also see key information about the standup -- the name of the call, the mood of the team yesterday, and the mood of the team. Note that all moods are represented in across the team and do not show for individuals.
- A timer, showing how close they are to the 15 minute total (each StandUp calls duration only for 15minutes, fast and efficient)
- Open action items for the standup (from before this meeting), plus new ones added in this meeting. Users can create new action items, indicate if they are blockers, and check off action items when they are done.
05. Standup page for Scrum Master
- Refer to "08-Standup-scrum-master.png", "08.2-Standup-scrum-master-end.png", "09-Standup-scrum-speaking.png"
- User that create the stand up calls will become "Scrum Master" in the app
- The Scrum Master sees everything that a regular user sees (the scrum master may also participate in the call), but also more functionality; Scrum Master will be able to manage the standup calls and see user activity in the standup calls.
- There will be some link to manage the standup calls, "Edit Standup" link will bring Scrum Master to Scrum Setup Page to edit the standup calls content information.
- Scrum Master also will be able to decide whose turns to speak if necessary, with a "Next Speaker" button to make someone the speaker.
06. Start Speaking Page
- Refer to "13-Speaking.png", "14-Time-is-over.png"
- Once user reach their turns to speak this screen will appear.
- When the user speaking, there will be a timer that count the conversation, also there will be some list for what kind of information that needs to be presented in the conversation. This list will always appear in the conversation.
- Once the speaking page appear, timer will count the conversation, if it reach the limit (2 minutes), the apps will show limit notification and redirect the speaker position to someone else (check wf "Start Speaking Page - Limit")
Specific HTML/CSS/JavaScript Requirements
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- 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 layout 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 style-sheet.
- 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 Requirements:
- All JavaScript used must not have any copyrights to any 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 are allowed to use JQuery and Bootstrap framework for this challenge.
Browsers Requirements
- Chrome is a priority
- Latest Firefox, Safari & Chrome Browsers
- IE10++ (can be left for final fixes)
Documentation Provided
- Wireframes, Storyboard and All necessary flow documents can be found in forum!
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.