Challenge Summary
Welcome to the Big Blue "QE Journey" Mobile Application Design Challenge! The goal of this challenge is to create a new mobile application that gives executives a quick "Quarter End" view of the status of all business units and their applications.
In this challenge we have provided you with wireframes to explain the mobile application idea we have in mind. We are looking for you to design the user interface (great visuals) and ideal user experience for this type of application.
Let us know if you have any questions!
Round 1
Submit your design for a Checkpoint feedback
1. Login page
2. Home page
3. Business unit status overview page
4. Product Details Page
5. All Open Alerts
6. Alert Details
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Final Design plus Checkpoint feedback
1. Login page
2. Home page
3. Business unit status overview page
4. Product Details Page
5. All Open Alerts
6. Alert Details
7. Alert Preferences
8. Executive contacts
9. Thanks Page
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Challenge Description:
The Quarter End Journey (QE) Application is an application that gives executives a quick view of the status of all business units and their applications. In this app an executive can see any highlighted issues (example: a project is having trouble).
The home page of this application shows a graphical view of the entire portfolio, broken up by business unit, with the status information coded in red, yellow, and green.
We are looking for the [topcoder] design Community to help us design the user interface based on the provided wireframes.
Supporting Documents:
- Branding Guidelines (Banding Guidelines.zip)
- Mockup Screens (QEM Mobile screens-v5.pdf.zip)
Design Goals:
- Review the branding guidelines and plan out the user interface
- How quickly the user can find what they are looking for?
- The application should be easy to use.
- Think about simple but effective solutions
- Navigation: Use the navigation solution provided in the wireframes - (but design it to look better!)
- Focus on modern mobile design and best UI design practices
- We need to focus on both iOS and Andriod platofrms for this application.
Screen Sizes:
- Mobile Resolution: Design for iphone 6 Retina Display 750px * 1334px
- Make sure you create graphic in 'shape' format, so when resize for retina versions, graphic still look sharp! It will be great if you can provide the landscape version.
Required Screens:
- Refer to the provided wireframes (remember to treat these as wireframe guidance)
1) Login Page:
- A user will be able to enter Intranet ID and password.
- We need a Login button.
2) Home page:
- Consider showing the bars in the chart horizontally, instead of vertically.
- Menu opens up when user taps the hamburger icon.
- Tapping home from any screen closes the slide out and returns the user to the home page (the user can swipe to close the slide out, as well)
- Clicking on Alert icon (!) will take the user to all open alerts page.
3) Business unit status overview page:
- Back takes the user back to the home page.
- Clicking on a product will take the user to product details page.
- Clicking on Alert icon (!) will take the user to all open alerts page.
4) Product Details Page:
- Back takes the user back to the page for this business unit.
- This page has three tabs:
-- Details:
--- Application Name
--- Status
--- Current Readiness Status
--- Outlook Readiness
-- Contact:
--- Avatar
--- Name
--- Job Position
--- Text Message Icon
--- Call Icon
-- Alerts:
--- The full list of alerts for this product displays, in order of Open first, then Closed.
--- Alert Title
--- Alert Date
--- Status (Open/Closed)
5) All Open Alerts:
- Open Alerts:
-- Alert Title
-- Alert Date
-- Application Name
-- Status (Open/Closed)
-- Clicking on an Alert will take the user to alert details.
6) Alert Details:
- Alert Detail:
-- Status
-- Description
-- Application Affected
-- Outage Information
-- Date and Time Opened.
- Back takes the user back to the page from which they opened the alert (either the All Alerts list or an alert from an individual application).
7) Alert Preferences:
- Can be accessed from menu.
- If Receive Alerts is of, then the individual business units cannot be checked.
- If the user taps “All”, then the individual selection elements below are automatically checked.
8) Executive contacts:
- Can be accessed from menu.
- Contact:
-- Avatar
-- Name
-- Job Position
-- Text Message Icon
-- Call Icon
9) Thanks Page:
- Can be accessed from menu.
- This page will be a thank you page to our investors and should display:
-- Investor Avatar
-- Investor Name.
Important:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
Target User:
- This application will be viewed primarily by IBM executives this means the user should be able to consume important information at a glance, the graphics should be visually appealing and designed for business environment.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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.