Challenge Summary
Welcome to IBM - SiBM Internet of Things Assessment Mobile App Design Challenge!
IBMers will use the Internet of Things Assessment mobile app to help clients assess readiness and discuss industry standards related to the Internet of Things (IoT). IoT is a new concept within the market, and most businesses are unsure how to approach projects within the space.
By using this app, the user will answer a few statements and the app will then assess their IoT readiness against the larger industry. The app will also give users recommendations for improvements which can be saved / shared.
Note:
- You are highly encouraged to provide your own ideas and solutions to this application beyond the provided wireframes.
- Please do not just give us a colored version of wireframes. The wires indicate general functionality and flow and are a guide to explain the idea of the app.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation.
1. Landing Page.
2. Home Page.
3. Validation Page.
- If you have time - please provide us with a click map for your design.
- 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 any Checkpoint feedback:
0. Navigation.
1. Landing Page.
2. Home Page.
3. Validation Page.
4. Analysis Page.
5. Recommendation Page.
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Details:
The goal of this challenge is to help users (IBMers) make an IoT assessment for their clients and show them the IoT maturity of their organization. You have been provided a set of wireframes to design from. Take and build from these ideas to better develop the UX of the app and establish a visual identity.
Branding Guidelines:
All submission MUST follow IBM Design Language (if you haven't learned it yet - now is a great time!):http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility.
- Since this application will be very visual (colors) - think about color blindness and the need for contrast/labels.
- You will notice the color accessibility suggestions within the IBM Design Language.
- Accessibility checklist.
Design Goals:
- Develop a logo and color scheme to brand this app. Work within the IBM design language.
- Design the interface and interactions within the app.
Design Considerations:
- How should this application be designed?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN application design!
Target devices:
- Mobile Resolution: Design for iPhone 6 Retina Display 750px x 1334px.
Make sure you create graphical elements in “vector” format, so when resize for retina versions, graphic still look sharp! It will be great if you can also provide the landscape version.
Supporting Documents:
- Wireframes (wireframe.zip).
Definitions:
- IoT: Internet of Things.
- Dimension: Name for each of the corners of the pentagon. There are hence 5 Dimensions.
- Statement: 10 statements asked by the App to the user; each statement can be upto 22 words long.
- User: Person using the App.
- User Radar chart: Pentagon picture plotted for the data fed into the App by the user.
- Benchmark Radar chart: Pentagon picture superimposed over the User Radar chart based on the historical data / data repository. (Please note historical data is not there / very thin at this time).
- Relationship between Statement and Dimension: It is difficult (and will confuse) if a radar chart has to be drawn as a polygon with 10 sides. It is hence proposed to group the 10 statements into 5 Dimensions so a meaningful (and easy to read) pentagon can be presented. Each Dimension will hence have either 2 or 3 statements. Users should know which statement have gone into which Dimension group.
- Dimension level: Numerical number associated with each of the Dimensions. Namely: 1 (innermost pentagon) to 5 (outermost pentagon).
- User Dimension Value: Value based on the data entered into related statement. (can be between 1 and 5). This data is used to plot User Radar Chart.
- Benchmark Dimension Value: Value based on the benchmark Radar Chart.
- User Data: Numerical number associated with the response to each of the statement. There are hence 10 user data. (value generated by the App based on user’s input is between 1 and 5).
Required Screens:
0. Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application.
- We need 3 menu items (Ignore the ones in wireframe):
-- Start Assessment.
-- Help.
-- Previous Assessment/s.
1. Landing Page:
- Please refer to landing_page.html
This is the landing page for the application.
- It should very clearly show what user can do with this application and what the application is all about.
- This page should contain basic info to explain features.
- Should contain a “Start” button.
2. Homepage:
- Please refer to home_page.html
- The text "Logo" should be repalced with "Assessment" Logo in all pages.
- User will be able to select the kind of assessment he wants. The only assessment that is working in this application is Internet of Things.
-- Internet of things.
-- Please remove other assessments from homepage but keep the space as is to allow us in the future to add other assessments.
- When user clicks on Internet of Things text or icon the assessment should start – please ignore the wireframe workflow for this one.
3. Statements:
- Please refer to questions.html
- Should be able to list 10 statements; each statement can be upto 22 words long.
- Users will answer statements by responding with their readiness level from 1-5 (1 means strongly disagree and 5 means strongly agree) within a color band beneath the statements. [Note: This is just one way that users could answer statements. We are open to other ways that users could respond to statements and give responses in a numerical form. Show us your ideas!]
- Each statement should have right to left navigation, so the user, if required, can find out more about the statement by browsing over from right to left.
- User should be able to visually see all their responses placed over the color band.
4. Analysis Page:
- Please refer to report_summary.html
- By placing the cursor over the radar chart’s dimension, user should be able to see which statement in the previous (with the color code of their response) is grouped to that particular dimension.
- The radar chart should have the boundaries colored inline with the color band chart.
- Radar chart’s spider diagrams (two are shown) should have transparent shading, so when two are superimposed, they will still be visible.
- Color band should have titles at the left and at the right.
- Color band should display the Assessment number for both scores.
5. Recommendation Page:
- Please refer to report_recommendations.html
- Each recommendation (when applicable) can be upto 22 words long.
- App should be able to generate a PDF report covering the three phases – PDF will be saved to app or emailed.
- App should also ask the user if they believe that their response should be a part of the Benchmark. (email to be asked for, if not yet provided as a part of previous point) *** this is not shown in the wireframe ***
- When a user does right to left navigation for any of the recommendation, user should see two color circles with score : one circle reflecting their response and another benchmark score.
- note that the Save behavior in this wireframe seems odd -- presumably the user should go back to the landing page when saving their data, rather than being asked whether they want to take a new test.
6. Assessments History page:
- Please refer to your_assessments.html
This page shows the reports you have saved. It can be accessed from the menu drop-down on the home page. (Note: Please think about whether it would make sense to access these from the home page, as well.)
- for each report, the user should be able to tap it to open it, and from there, to get a button to see the recommendations. The look of these is the same as for new reports.
- note that the Share button does not belong on the Assessment History page, even though it is shown in the wireframe.
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 Users:
- The target audience for this application will be IBM employees.
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- 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.