Challenge Summary
Welcome to Airbus - NCM Application Redesign Challenge.
In this challenge we are looking to redesign Airbus - NCM Application. Airbus NCM application purpose is for internal Airbus employee to identify and record new problems related to Helicopter & other aircraft parts/hardware.
We provide you with existing application screenshots, for all pages we will be very happy if you explore new ideas for improvements and new features! Start with the existing pages from client, and work your way through them. Analyze what are the current problems and explore possible solutions.
Read more description on challenge spec and let’s discuss any questions you have. This is initial challenge from Airbus company, let’s impress the client with great design to make them bring more projects!
1). Home Page
2). Create New NC with Work Order
3). Create New NC without Work Order
4). Manage Problem Board
1). Home Page
2). Create New NC with Work Order
3). Create New NC without Work Order
4). Manage Problem Board
What is Airbus NCM Application for ?
- NCM is abbreviation of Non Conformity Management
- A Nonconfirming product is defined as product that does not conform to customer requirements, applicable regulatory requirements and/or own requirements as defined by our organization
- Identify and record new problems related to Helicopter & other planes parts.
- Prioritize problems (new and old ones),
- Define and monitor actions associated to problems,
- Trace and solve problems.
What purpose of Airbus NCM Application?
- To provide a concise view of the problems discovered by the team,
- To share the progress of problem solving.
- To follow the actions identified by the team.
- To link the problem solving with higher organization levels.
Challenge Goals:
- Create NC Flows and Manage Problem Board screens are the most important
- Need some way to navigate easier around the site (beyond just the main navigation) for example using page breadcrumbs
- Moving betweens steps needs to be easier: Previous buttons or clicking on steps in the timeline to go to that step
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- New ideas for fixing existing problems
- New design to improve the user experiences for all users
- When you create icon/graphic, make sure they use vector shape format.
- Rethink the overall UI design and fix any UX issues as you see fit
- We are NOT looking to just take what is currently there "clean it up". There are big improvements needed throughout for the UI/UX.
- Make the application as a whole better looking and more usable
a). Screen Sizes:
- Laptop/Desktop Screen Size: 1280px(w) × height up to your design
- Mobile Screen Size Standard Portrait : 375px(w) × height up to your design
b). Design branding, colors, typography.
- Important: Client likes the white colored theme for header/navigation, Stick with that in your design.
- Other design element color palette is up to designer
- Fonts is up to designer
d). Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: tgerring@topcoder.com & lunarkid@copilots.topcoder.com
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Downloadable Files
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6dVlKUWJ0UXNMZTA
This folder contains of these following assets:
- Application Flow Screenshots (Check the screenshots to let you understand the application flow)
- Airbus Logo
- Mockup-Design for Create New NC
Submission Requirements
For all pages below please check the provided “Application Flow Screenshots”.
1). Home Page
Screenshots: refer to all 01-*.png screens flow
- Important: Client likes the white colored theme for header/navigation, Stick with that in your design.
- Design how main navigation look
- Search input and Language options need easy to access
- Use Fusion Charts API for generate all data on homepage. Feel free to explore any possibilities
Report Box
- There are 3 Gauges need displayed on page
- There’s D Steps legend boxes as indicator to solve the problem/Track the process/ workflow.
- D Step range is from D1 to D8
My Action
- This My Action box need serve as Notification area or To Do list when NC assigned to user.
- You can also move as an icon to the header.
- Suggest how My Action design should look and feel
Top 10 as a Customer
- Display Top 10 customer list as table format
Top 10 as a Leader
- Display Top 10 leader list as table format
Aircraft Program
- User select dropdown to select the aircraft
- Aircraft image placed on the left side
- After that user see bar chart for NCs escalated to Maturity Group & NCs not related to Maturity Group
Non Aircraft Program
- Non Aircraft program = Aircraft parts
- User need able to select from both dropdown
- There are 2 chart need displayed on page
Note:
- From main menu navigation, there are 2 submenu when user hover on Create New NC:
-- Create New NC with Work Order
-- Create New NC without Work Order
2). Create New NC with Work Order
Screenshots: refer to all 02-*.png screens flow
- This Create New NC displaying wizard step on top of page
- Green colored step means Complete
- Yellow colored step means In-Progress (partially complete)
- On the left sidebar there’s aircraft information
- Display General Information with photo image
- Also on some aircraft type user can see Priority boxes
- User need able to collapse/expand the left sidebar
Steps 1 (NC Detected) - NOT REQUIRED
- Initial form for NC information
Step 2 (NC Described) - NOT REQUIRED
- Describe NC is very important. Need complete information to reduce questions for following steps
Step 3.1 (Immediate Containment) - NOT REQUIRED
- Give you a replacement or temporary solution so you can keep working
Step 3.2 (Global Containment) - REQUIRED
- Assigns who will solve the issue, What, who, where, when, how, how many, why sub-steps for Description
- There are collapsible content for Team, NC Description and Immediate Containment
- Match data for each collapsible content based on screenshot
- Print button need easy to access
- Recreate how the form element look and feel for input, radio, checkboxes etc
- Need clear styling for active and disable form element
Team
- Match table list content based on screenshot
Immediate Containment
- User need able to select some dropdown option
- Need able to view all Action detail fields information
NC Description
- NC title placed on top of section
- There are sub tab navigation for What, Who, Where, When, How, How Many and Why
a). Sub-Tab What - REQUIRED
- Display data for Detailed Information box and Information about the standard
- On the bottom make sure the action buttons show different styling for required actions needed
b). Sub-Tab Who - NOT REQUIRED
c). Sub-Tab Where - NOT REQUIRED
d). Sub-Tab When - REQUIRED
- Display text box, datepicker, and input field for this section
- Think about how tab navigation flow works
d). Sub-Tab How - NOT REQUIRED
e). Sub-Tab How Many - NOT REQUIRED
f). Sub-Tab How Why - REQUIRED
- Display text box for this section
- On the bottom make sure the action buttons show different styling for required actions needed
Step 4 (Root Cause Analysis) - NOT REQUIRED
- What type of problem it is
Step 5 (Corrective Action Plan Defined) - NOT REQUIRED
- Correct plan depending on that particular type of problem. Define the plan
Step 6 (Corrective Action Deployed) - NOT REQUIRED
- Once plan is complete. Deploy
Step 7 (Preventive Action Plan) - NOT REQUIRED
- Make sure issue will not happen again. Capture notes
Step 8 (NC Eradicative) - NOT REQUIRED
- NC will be closed
3). Create New NC without Work Order
Screenshots: refer to all 03-*.png screens flow
- Important: Client need this page to display as single screen like client “Mockup-Design”
- Refer the existing flow from the application screenshots.
- Search for Work Order Number placed on top
Aircraft Information
- Add toggle button
- There are some fields need added before trigger search button
Material Information
- Add toggle button
- There are some fields need added before trigger search button
Photo Gallery
- This is contains the Gallery slider
- Create Stop Process and Alert button
NC Defect Code
- Match fields like screenshot
- User need able to browse the image
- Create NC button placed on the bottom of page
4). Manage Problem Board
Screenshots: refer to all 04-*.png screens flow
- We need you rethink and redesign the SQCDP design at the top
- This is a "progress" tracker for each are represented by
S = Safety
Q = Quality
C = Cost
D = Delivery
P = People
- Each section (S, Q, C, D, or P) is divided into 52 segments that represent 52 weeks in a year.
- In each week, if the maximum NC limit for the S/Q/C/D/P is crossed, that part of the image (belonging to that week) will be marked as Red. Else it will marked as green.
- We need to rethink the visuals of this to make it more user friendly, easier to understand what is happening, make it easier to develop, etc.
- Think through better graphs, visualizations, etc. to represent the same concept and data.
- Need to maintain "Monthly" and "Weekly" views for the calendar
- There are "actions" on specific dates of the calendar. You can think of these like "events"
- The most actions that will even be present on 1 day is 5 actions
- The user is able to see details and information on the action as well as "Approve", "Reject" or "Comment"
- We need to see what happens when the user clicks on these icons. Does it open an overlay/ modal?
- Would be nice to be able to see more than 1 action on a date at a time
- Ability to click and view All of the actions for a specific date.
- This might open a "day" view, an overlay with all the actions, tooltip, etc.
- Think through the best UX for this
- Also need to make sure the user can still access the 3 icons for each action (Approve, Reject, Comment)
Target User
- Airbus Internal Employees
Judging Criteria
- How well you REDESIGN Airbus - NCM Application into brand new feel and look
- Follow best practice of Responsive Design Patterns.
- Cleanliness of your graphics and design.
- User Experience
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 Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
In this challenge we are looking to redesign Airbus - NCM Application. Airbus NCM application purpose is for internal Airbus employee to identify and record new problems related to Helicopter & other aircraft parts/hardware.
We provide you with existing application screenshots, for all pages we will be very happy if you explore new ideas for improvements and new features! Start with the existing pages from client, and work your way through them. Analyze what are the current problems and explore possible solutions.
Read more description on challenge spec and let’s discuss any questions you have. This is initial challenge from Airbus company, let’s impress the client with great design to make them bring more projects!
Round 1
Initial Airbus - NCM Application Redesign Submission for these following screens on Laptop/Desktop Screen Size:1). Home Page
2). Create New NC with Work Order
3). Create New NC without Work Order
4). Manage Problem Board
Round 2
Final Airbus - NCM Application Redesign Submission with Checkpoint Feedback for these following screens on Laptop/Desktop and Mobile Screen Size:1). Home Page
2). Create New NC with Work Order
3). Create New NC without Work Order
4). Manage Problem Board
What is Airbus NCM Application for ?
- NCM is abbreviation of Non Conformity Management
- A Nonconfirming product is defined as product that does not conform to customer requirements, applicable regulatory requirements and/or own requirements as defined by our organization
- Identify and record new problems related to Helicopter & other planes parts.
- Prioritize problems (new and old ones),
- Define and monitor actions associated to problems,
- Trace and solve problems.
What purpose of Airbus NCM Application?
- To provide a concise view of the problems discovered by the team,
- To share the progress of problem solving.
- To follow the actions identified by the team.
- To link the problem solving with higher organization levels.
Challenge Goals:
- Create NC Flows and Manage Problem Board screens are the most important
- Need some way to navigate easier around the site (beyond just the main navigation) for example using page breadcrumbs
- Moving betweens steps needs to be easier: Previous buttons or clicking on steps in the timeline to go to that step
General Requirements
- This application is going to be a responsive web application. Keep this in mind in your approach.
- New ideas for fixing existing problems
- New design to improve the user experiences for all users
- When you create icon/graphic, make sure they use vector shape format.
- Rethink the overall UI design and fix any UX issues as you see fit
- We are NOT looking to just take what is currently there "clean it up". There are big improvements needed throughout for the UI/UX.
- Make the application as a whole better looking and more usable
a). Screen Sizes:
- Laptop/Desktop Screen Size: 1280px(w) × height up to your design
- Mobile Screen Size Standard Portrait : 375px(w) × height up to your design
b). Design branding, colors, typography.
- Important: Client likes the white colored theme for header/navigation, Stick with that in your design.
- Other design element color palette is up to designer
- Fonts is up to designer
d). Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: tgerring@topcoder.com & lunarkid@copilots.topcoder.com
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Downloadable Files
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6dVlKUWJ0UXNMZTA
This folder contains of these following assets:
- Application Flow Screenshots (Check the screenshots to let you understand the application flow)
- Airbus Logo
- Mockup-Design for Create New NC
Submission Requirements
For all pages below please check the provided “Application Flow Screenshots”.
1). Home Page
Screenshots: refer to all 01-*.png screens flow
- Important: Client likes the white colored theme for header/navigation, Stick with that in your design.
- Design how main navigation look
- Search input and Language options need easy to access
- Use Fusion Charts API for generate all data on homepage. Feel free to explore any possibilities
Report Box
- There are 3 Gauges need displayed on page
- There’s D Steps legend boxes as indicator to solve the problem/Track the process/ workflow.
- D Step range is from D1 to D8
My Action
- This My Action box need serve as Notification area or To Do list when NC assigned to user.
- You can also move as an icon to the header.
- Suggest how My Action design should look and feel
Top 10 as a Customer
- Display Top 10 customer list as table format
Top 10 as a Leader
- Display Top 10 leader list as table format
Aircraft Program
- User select dropdown to select the aircraft
- Aircraft image placed on the left side
- After that user see bar chart for NCs escalated to Maturity Group & NCs not related to Maturity Group
Non Aircraft Program
- Non Aircraft program = Aircraft parts
- User need able to select from both dropdown
- There are 2 chart need displayed on page
Note:
- From main menu navigation, there are 2 submenu when user hover on Create New NC:
-- Create New NC with Work Order
-- Create New NC without Work Order
2). Create New NC with Work Order
Screenshots: refer to all 02-*.png screens flow
- This Create New NC displaying wizard step on top of page
- Green colored step means Complete
- Yellow colored step means In-Progress (partially complete)
- On the left sidebar there’s aircraft information
- Display General Information with photo image
- Also on some aircraft type user can see Priority boxes
- User need able to collapse/expand the left sidebar
Steps 1 (NC Detected) - NOT REQUIRED
- Initial form for NC information
Step 2 (NC Described) - NOT REQUIRED
- Describe NC is very important. Need complete information to reduce questions for following steps
Step 3.1 (Immediate Containment) - NOT REQUIRED
- Give you a replacement or temporary solution so you can keep working
Step 3.2 (Global Containment) - REQUIRED
- Assigns who will solve the issue, What, who, where, when, how, how many, why sub-steps for Description
- There are collapsible content for Team, NC Description and Immediate Containment
- Match data for each collapsible content based on screenshot
- Print button need easy to access
- Recreate how the form element look and feel for input, radio, checkboxes etc
- Need clear styling for active and disable form element
Team
- Match table list content based on screenshot
Immediate Containment
- User need able to select some dropdown option
- Need able to view all Action detail fields information
NC Description
- NC title placed on top of section
- There are sub tab navigation for What, Who, Where, When, How, How Many and Why
a). Sub-Tab What - REQUIRED
- Display data for Detailed Information box and Information about the standard
- On the bottom make sure the action buttons show different styling for required actions needed
b). Sub-Tab Who - NOT REQUIRED
c). Sub-Tab Where - NOT REQUIRED
d). Sub-Tab When - REQUIRED
- Display text box, datepicker, and input field for this section
- Think about how tab navigation flow works
d). Sub-Tab How - NOT REQUIRED
e). Sub-Tab How Many - NOT REQUIRED
f). Sub-Tab How Why - REQUIRED
- Display text box for this section
- On the bottom make sure the action buttons show different styling for required actions needed
Step 4 (Root Cause Analysis) - NOT REQUIRED
- What type of problem it is
Step 5 (Corrective Action Plan Defined) - NOT REQUIRED
- Correct plan depending on that particular type of problem. Define the plan
Step 6 (Corrective Action Deployed) - NOT REQUIRED
- Once plan is complete. Deploy
Step 7 (Preventive Action Plan) - NOT REQUIRED
- Make sure issue will not happen again. Capture notes
Step 8 (NC Eradicative) - NOT REQUIRED
- NC will be closed
3). Create New NC without Work Order
Screenshots: refer to all 03-*.png screens flow
- Important: Client need this page to display as single screen like client “Mockup-Design”
- Refer the existing flow from the application screenshots.
- Search for Work Order Number placed on top
Aircraft Information
- Add toggle button
- There are some fields need added before trigger search button
Material Information
- Add toggle button
- There are some fields need added before trigger search button
Photo Gallery
- This is contains the Gallery slider
- Create Stop Process and Alert button
NC Defect Code
- Match fields like screenshot
- User need able to browse the image
- Create NC button placed on the bottom of page
4). Manage Problem Board
Screenshots: refer to all 04-*.png screens flow
- We need you rethink and redesign the SQCDP design at the top
- This is a "progress" tracker for each are represented by
S = Safety
Q = Quality
C = Cost
D = Delivery
P = People
- Each section (S, Q, C, D, or P) is divided into 52 segments that represent 52 weeks in a year.
- In each week, if the maximum NC limit for the S/Q/C/D/P is crossed, that part of the image (belonging to that week) will be marked as Red. Else it will marked as green.
- We need to rethink the visuals of this to make it more user friendly, easier to understand what is happening, make it easier to develop, etc.
- Think through better graphs, visualizations, etc. to represent the same concept and data.
- Need to maintain "Monthly" and "Weekly" views for the calendar
- There are "actions" on specific dates of the calendar. You can think of these like "events"
- The most actions that will even be present on 1 day is 5 actions
- The user is able to see details and information on the action as well as "Approve", "Reject" or "Comment"
- We need to see what happens when the user clicks on these icons. Does it open an overlay/ modal?
- Would be nice to be able to see more than 1 action on a date at a time
- Ability to click and view All of the actions for a specific date.
- This might open a "day" view, an overlay with all the actions, tooltip, etc.
- Think through the best UX for this
- Also need to make sure the user can still access the 3 icons for each action (Approve, Reject, Comment)
Target User
- Airbus Internal Employees
Judging Criteria
- How well you REDESIGN Airbus - NCM Application into brand new feel and look
- Follow best practice of Responsive Design Patterns.
- Cleanliness of your graphics and design.
- User Experience
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 Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in either Adobe Photoshop/Illustrator/Sketch and saved as editable layer
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.