Challenge Summary
Welcome to "IBM - SiBM Agile StandUp Tool Design Challenge". In this challenge, we are looking for your help to create the best "experience" for our new web application which will be used by Agile practitioners to more easily and effectively communicate with their team members.
At the end of this challenge, we are looking for the best possible UI/UX for this application!
Thank you and good luck!
Round 1
00. Login
01. Homepage
02. Basic Page
03. Scrum Setup Page
04. Standup Page for all users except the Scrum Master
Round 2
00. Login
01. Homepage
02. Basic Page
03. Scrum Setup Page
04. Standup Page for all users except the Scrum Master
05. Standup page for Scrum Master
06. Start Speaking Page
Challenge Details
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 each team member and show a timer so that each person in the meeting knows when their time is up.
Design Guidelines
All submission must follow the IBM Design Language. Make sure that all graphics, including buttons and icons, are in VECTOR format. Learn the IBM Design Language - it is the key to success in the IBM challenges!
- Layout
- Typography
- Iconography
- Color
- Interaction
- App Inspiration
Accessibility
When you are planning your concepts, make sure you are also designing for accessibility. You can view the accessibility checklist here.
Screen Size
- Screen Resolution: Use a minimum of 1024px for the width with height adjusting accordingly. Consider your layout for responsiveness since we are targetting responsive web for the apps.
- Make sure that you create graphical elements in VECTOR format so graphics retain quality when resized.
Suggested Screens
The following are only suggested screens. We highly recommend that you add other screens and features that you believe will work best with the main goal of the web application. We are looking for the best "experience" design. Do not just copy and color the wireframes. The IBM Design Language is key here!
00. Login
- We need a simple login page, that asks for the user name & password. No need to include "forgot password" or "sign up". The user will be an IBM employee.
01. Homepage
- Reference Screen "Homepage" in the wireframes.
- Default page that will be appear every time a user opens the application
- Provide simple logo for the app - you will not be judged by your logo creation, we just need a simple graphic that works with your overall layout and reflects the goals of the application.
- Show all the Agile projects that belong to the user via a list view or another view (table? image display?).
- Most users will have just a single project, although it might be possible for someone to have 2 or 3.
- User can click any agile project link from the homepage.
- On the left side of the list, it will show information about the project summary, the time that the standup is running, and a "JOIN" button available for user to join the standup meeting. The JOIN button appears at all times; the app will not keep track of whether a stand-up is running now.
- On the right side of the list, it will show all new things/issues that needs to be resolve in the project so user can be aware of the project status condition, user also able to create new things/issue and give some description whether it can be a blocker in the projects or just an ordinary stuff. Checked list means the issue/things has been resolved and non checked list means the issue still open and needs to be done asap.
- Notice that there is "CREATE STANDUP" at the bottom left of the page, if user click this, he can create new standup calls for his new projects that not yet available in the list.
02. Basic Page
- Reference Screen "Basic Page" in the wireframes.
- User needs to select one of the agile projects from the dashboard (either by clicking the name or the JOIN button), then they will be redirected to this screen.
- User will be asked to provide their moods condition at that time so other user will notice his current moods when doing conversation with them.
- There will be numbers 1-5 for the mood expression level. We're looking for something simple -- a single click to show your mood.
03. Scrum Setup Page
- Reference Screen "Scrum Setup Page" in the wireframes.
- User can be a Scrum Master role for his projects if they create a new standup call in the app
- User first needs to enter information about the project such as project name as standup name, description of the project goals, the phone number to call to join the standup (note that sometimes phone information can be long, as it can include numbers for several countries), meeting time and timezone and the list of participants for the scrum.
- All fields needs to be filled in, otherwise it will trigger an error (or the Create My Standup button will not be enabled). Once all fields complete, user can click "Create My Standup" button to create new standup calls.
04. Standup Page for all users except the Scrum Master
- Reference Screen "Standup Page" and "Standup Page - I'm Next in the Queue" in the wireframes.
- 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
- Reference Screen "Scrum Master Page" in the wireframes.
- 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
- Reference Screen "Start Speaking Page" and "Start Speaking Page - Limit" in the wireframes.
- 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")
Important:
- Keep things consistent. This means all graphic styles should work together and follow our best practice.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Feel free to add new screen to explain your design interactions for the apps.
Documentation
- Wireframes - make sure to plan the experience do not just color the wireframes!
Target Audience
- The target audience for this application will be Agile Practitioners
Judging Criteria
- How well you plan the user experience and capture your ideas visually
- How well you design the application layout!
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Submission & Source Files
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Submit JPG/PNG for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.