Challenge Summary
Welcome to the Stone iPhone Android Application Storyboard Contest.We just completed HTML wireframe in previous contest. Right now we need you create the storyboard design of the Stone iPhone/Android Application. In the end of this contest, we're looking for clean, professional, and have great User Experience of the application.
If you have any question, please raise in the forum, Let's discuss anything!.
Round 1
Your submitted design solution for client review (Portrait and Landscape Orientation)
1. Login
2. Forgot Password
3. Contact Info
4. Home
5. Open Calls
6. Performance Dashboard
7. Unit Details
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of storyboard (Portrait and Landscape Orientation)
1. Login
2. Forgot Password
3. Contact Info
4. Home
5. Open Calls
6. Performance Dashboard
7. Unit Details
8. Log Service Call (Unit)
9. Log Service Call
10. Settings
11. Contact Otis
12. Completed Archives
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Contest Details
Stones is a company that provides business to business services. The client is looking to create a new mobile application that allows users to monitor and track the performance of their equipment.
IMPORTANT
- Please reference the provided wireframe(Stone_wireframe_finalfix_ver_5.zip). You need capture all page flow in your stoyboard design.
- In some page, we need your help design good color theme implementation. Check attached Stones Mobile App Mockup.pdf for example. Suggest us more better theme of the application! No restrictions colors.
- Remember when create graphics for mobile site, all UI elements must have fluid width, so it will support at landscape and portrait layout. You must create separate screenshot design for landscape and portrait layout.
- Graphics are extremely limited on the mobile version of the website.
- Research related "cool" web based Safari Mobile, Android and Blackberry browsers applications and how they work/interact/navigate.
- There must be a clear way to navigate through the application from screen to screen and the screens themselves should flow together in a logical manner.
- Buttons and links should be large enough and spaced out enough to ensure that the correct item is selected each time.
- Please research the Safari Mobile, Android and Blackberry browsers guidelines for size and best practices, here's some web to help you begin design the application for mobile site:
Best Practices To Develop Perfect Websites for iPhone and Mobile Devices
http://woorkup.com/2010/01/10/best-practices-to-develop-perfect-websites-for-iphone-and-mobile-devices/
Mobile Web Design: Tips and Best Practices
http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html
Mobile Web Design: Tips & Techniques
http://www.cameronmoll.com/archives/000577.html
Submission Requirements
1. Login
- User should be able to select the English or Other Language. Create this separate pages.
- Show us how the error validation version of login page looks?
2. Forgot Password
- Create page of "Forgot password"
- Show "Other Language" looks.
- Notice the "Sent Password" message show up after Tap Reset Password link.
3. Contact Info
- User will arrive after login to this page.
- Contact Information row need alternative row/zebra strips?
- Show us how the "edit" page looks?
4. Home
- This default looks of homepage.
- Homepage show 6 icons in page, they are "View Open Service Calls", "Performance Dashboard", "Log Service Call", "Settings", "Contact Otis", "View Completed Activitites".
- Numbers above the "View Open Service Calls" menu means new messages not read yet.
- Make sure the icons match the meaning of page.
5. Open Calls
- Filter Modals show up when Tap at "Contract" , "Building" and "Date Range" inputs.
- When select "Custom" option in "Date Range" select, it will show datepicker rows.Design how datepicker should looks?
- You need create separate screens after user do some filter search.
- Tapping each row will show some quick info.
- Tap the arrow will take to details page.
- Tap "Call Otisline" will show the calling box.
6. Performance Dashboard
- Availability need "red", "green" and "yellow" color represents the availability. We need you design them.
- Tapping each row will show some quick info.
- You need re-design the "call" and "email" icon. Do not take icon from wireframe.
- Tap "Call" icon will show the calling box.
- Tap "Email" icon will show the standard email input.
- Tap the arrow will take to details page.
- Arrow placed in the right side. It will take to Unit Details page.
- You need give different style for the total rows than the other rows.
- Arrow placed in the right side. It will take to Total Details page.
7. Unit Details
- This page will show 3 tabs of "Event View" and "Calendar View"
Event View
-- Design the table on this page.
-- Create some icons to explains the type legend/filter. Do not use icon from wireframe.
-- There's some legends in the bottom.
-- Click arrow in the right side will take to "Service Call Details", "Repair" and "Maintenance Visit Details" page, depends on the icons.
Calendar View
-- Create some icons to explains the type legend/filter. Do not use icon from wireframe.
-- Notice the "+" button in calendar. It means in that day contains more than 2 events, click the button will show all events.
-- There's some legends in the bottom.
8. Log Service Call (Unit)
- User will land on this page, when Tap "Log Service Calls" button
- Design proper layout for this form.
- You need create separate screens show the success & failed submit.
- For the checkboxes, show how it should looks when checked on.
9. Log Service Call
- This page has similar layout/design with Log Service Call (Unit)
10. Settings
- You need capture all design of these following pages under Setting menu:
- Add Building
-- Update title to "Add Building"
-- Tap this button will show the details content to Add Building
-- There's delete button in the right side, click the button will show confirm message. How it should looks?
- Contract Information
-- There's 2 tabs show in this page. "Sales Representatives" and "My Contact Details"
-- Under "Sales Representatives" tab, select the "Building #" will show different content.
-- Under "My Contact Details" tab, click the edit button will take to editable form.
- Auto Logout
-- On this page, there's "Yes/On" and "No/Off" options to set Auto Logout options when close this application.
- Sync Information
-- On this page, there's "Offline" and "After Login" options to set Sync options when use this application.
- Feedback
-- User can post the feedback by put some info in the feedback posts.
11. Contact Otis
- This page will show same structure with the Unit Details
- You just need match content with wireframe.
12. Completed Archives
-- Design the table on this page.
-- Create some icons to explains the type legend/filter. Do not use icon from wireframe.
-- There's some legends in the bottom.
-- Click arrow in the right side will take to "Service Call Details", "Repair" and "Maintenance Visit Details" page, depends on the icons.
Target Audience
Current Customer.
Potential Customer.
Judging Criteria
- User Experience
- How well you create the storyboard designs
- Cleanliness of your graphics and design.
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 image files based on contest submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.