Challenge Summary
Welcome to "Hetairoi Field Service App Design Direction Challenge". In this challenge, we are looking for your help to create the best possible UI/UX for our ‘Field Service App’, which will be used by our field engineers to submit questionnaires after completing jobs.
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
01) Where you able to resolve the customer issue?
02) What did the End Customer report?
03) What did you find?
04) How did you resolve the … issue?
05) What was the cause of the problem?
06) What were the results
01) Where you able to resolve the customer issue?
02) What did the End Customer report?
03) What did you find?
04) How did you resolve the … issue?
05) What was the cause of the problem?
06) What were the results?
07) Confirmed with the customer (reported)
08) Confirmed with the customer (resolved)
09) Where you able to provide service?
10) Where did you provide the NTE?
11) Do you need to raise a TRC for additional work
BACKGROUND OVERVIEW
Hetairoi is a broadband company, their engineers are often sent out to fix specific issues around their broadband service delivery infrastructure, the app will help engineers to compile a report after each job, to be submitted to a web application portal. The portal will be used as an internal tool by the admin to review submitted questionnaires and collated data from field engineers.
CHALLENGE GOAL
The goal of this challenge is to generate ideas around a more satisfying user experience (UI/UX) for the form completion process for an application that allows field engineers to complete feedback forms after completing a task.
DESIGN CONSIDERATION
- Simple, Clean, Professional, and Intuitive look and feel
- Simplicity to find any necessary information
- Easy to understand the questionnaire flow from page to page
- Intuitive for the user; field engineers should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Consider how questions are formatted and responses presented to engineers so that responding becomes more intuitive
- There’s a preference for graphic or visual representation of questions where feasible
- Less driven by text-based traditional form dialogues;
- Ideal would be a question per frame or at a given time to give more of an engaging experience, without clutter.
CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=682096
OVERALL REQUIREMENTS
- App focus is a post-job questionnaire
- Modern Intuitive UI for engineers to experience
- Not overwhelming
- Use modern UI elements where necessary to make the interface and interactions engaging
Structured notes:
Every ‘form’ action is recorded against a structured note system.
The note reports the equivalent information relating to the action taken by the engineer.
Please ref. pdf file:
https://drive.google.com/file/d/1_zogol3wD6K40TZLvbxwlJGTW0owkUvE/view?usp=sharing
How complex are the question types (see pdf):
- Nested Questions (with multiple sub questions)
- Multiple Choice, Single Select
- Multiple Choice, Multiple Select
We need a UI to cater to (see pdf):
- Mandatory outputs
- Optional outputs
- Relationship Dialogue
Success Metrics UI/Prototype:
- Fit key information on main screen!
- Can the customer problem be highlighted in context through the process of completing the form?
- Can we re-educate the engineers to be more human and relatable to the customers, not just a job
- Bringing the customer into the process, and making the progressive nature of the application’s experience will be the key success measure of the application.
SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
Note: We just focus on questionnaires flow in this challenge provided in the pdf file.
Please ref. wireframe file:
https://drive.google.com/file/d/1QuxuLvITSUxzkF29qw1V7zS6r34yoNCE/view?usp=sharing
01) Where you able to resolve the customer issue?
02) What did the End Customer report?
03) What did you find?
04) How did you resolve the … issue?
05) What was the cause of the problem?
06) What were the results?
07) Confirmed with the customer (reported)
08) Confirmed with the customer (resolved)
09) Where you able to provide service?
10) Where did you provide the NTE?
11) Do you need to raise a TRC for additional work?
Important:
Keep things consistent. This means all graphics styles should follow a set pattern.
All of the graphics should have a similar feel and general aesthetic appearance
MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to contato@luizrrodrigues.com.br (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comments this link while you upload).
BRANDING GUIDELINES
- Typography is open to Designers
- We provide a screenshot of our other system with 3 colors (purple, white, green and yellow) as your References!
- Branding: https://docs.google.com/document/d/1uBexhLk0qfLGLCAiNvWs3sw9X0GJok8M8lBPpzpSM_Q/edit
TARGET DEVICES
- Mobile: 750px x 1334px (iPhone 6+)
- Portrait view
TARGET AUDIENCES
- Field Service Engineers
JUDGING CRITERIA
- Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 FILE
- All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
FINAL FIX
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) or modify overall colors
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. Let us know if you have any questions in the challenge forum!
Round 1
Submit your initial design for a Checkpoint Feedback01) Where you able to resolve the customer issue?
02) What did the End Customer report?
03) What did you find?
04) How did you resolve the … issue?
05) What was the cause of the problem?
06) What were the results
Round 2
Submit your Final Design plus Checkpoint Updates01) Where you able to resolve the customer issue?
02) What did the End Customer report?
03) What did you find?
04) How did you resolve the … issue?
05) What was the cause of the problem?
06) What were the results?
07) Confirmed with the customer (reported)
08) Confirmed with the customer (resolved)
09) Where you able to provide service?
10) Where did you provide the NTE?
11) Do you need to raise a TRC for additional work
BACKGROUND OVERVIEW
Hetairoi is a broadband company, their engineers are often sent out to fix specific issues around their broadband service delivery infrastructure, the app will help engineers to compile a report after each job, to be submitted to a web application portal. The portal will be used as an internal tool by the admin to review submitted questionnaires and collated data from field engineers.
CHALLENGE GOAL
The goal of this challenge is to generate ideas around a more satisfying user experience (UI/UX) for the form completion process for an application that allows field engineers to complete feedback forms after completing a task.
DESIGN CONSIDERATION
- Simple, Clean, Professional, and Intuitive look and feel
- Simplicity to find any necessary information
- Easy to understand the questionnaire flow from page to page
- Intuitive for the user; field engineers should never be left asking "what do I do next?"
- Easy viewing for pages that may be over overcrowded with information (eg. when hovering over an item will enlarge for easy viewing or similar)
- Consider how questions are formatted and responses presented to engineers so that responding becomes more intuitive
- There’s a preference for graphic or visual representation of questions where feasible
- Less driven by text-based traditional form dialogues;
- Ideal would be a question per frame or at a given time to give more of an engaging experience, without clutter.
CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum:
https://apps.topcoder.com/forums/?module=ThreadList&forumID=682096
OVERALL REQUIREMENTS
- App focus is a post-job questionnaire
- Modern Intuitive UI for engineers to experience
- Not overwhelming
- Use modern UI elements where necessary to make the interface and interactions engaging
Structured notes:
Every ‘form’ action is recorded against a structured note system.
The note reports the equivalent information relating to the action taken by the engineer.
Please ref. pdf file:
https://drive.google.com/file/d/1_zogol3wD6K40TZLvbxwlJGTW0owkUvE/view?usp=sharing
How complex are the question types (see pdf):
- Nested Questions (with multiple sub questions)
- Multiple Choice, Single Select
- Multiple Choice, Multiple Select
We need a UI to cater to (see pdf):
- Mandatory outputs
- Optional outputs
- Relationship Dialogue
Success Metrics UI/Prototype:
- Fit key information on main screen!
- Can the customer problem be highlighted in context through the process of completing the form?
- Can we re-educate the engineers to be more human and relatable to the customers, not just a job
- Bringing the customer into the process, and making the progressive nature of the application’s experience will be the key success measure of the application.
SCREEN REQUIREMENTS
For this challenge, we are looking for the below pages to be designed/considered in your concepts. The screen functionality details listed below are suggested functionality for consideration. Do not allow the suggestions below to impact the creativity of design. If there is a better way to accomplish the same goal, then feel free to take creative liberties.
Note: We just focus on questionnaires flow in this challenge provided in the pdf file.
Please ref. wireframe file:
https://drive.google.com/file/d/1QuxuLvITSUxzkF29qw1V7zS6r34yoNCE/view?usp=sharing
01) Where you able to resolve the customer issue?
- This screen will show up when engineers mark job as completed.
- Question is about if engineer resolved or not the issue.
- Customer’s original query is shown for context.
02) What did the End Customer report?
- Customer comment on top
- Engineer will able to do multiples choices
- Able to select type of fault Permanent or Intermittent
03) What did you find?
- Able to select multiple choices or *No Issue Found*
04) How did you resolve the … issue?
- This is a question about each item selected in the previous screen
- Able to select multiple choices or *Unable to resolve*
- Select between Primary Issue or Maintenance
05) What was the cause of the problem?
- Selection of cause of the problem from issues related in previous screens.
06) What were the results?
- Send Trimetrics / File Upload
07) Confirmed with the customer (reported)
- Show what issues customer was reported
- Show what issues engineer found
08) Confirmed with the customer (resolved)
- Show what was the primary issue resolved
- “I also resolved other issues”
- Customer need able to assign confirmation
09) Where you able to provide service?
- Questionari about if engineer was able to provide the service.
- Customer need assign bellow
10) Where did you provide the NTE?
- Place where engineer provide the services
- Multiple choices are allowed
11) Do you need to raise a TRC for additional work?
- Single selection
Important:
Keep things consistent. This means all graphics styles should follow a set pattern.
All of the graphics should have a similar feel and general aesthetic appearance
MARVEL PROTOTYPE
- We need you to upload your screens to Marvel App.
- Please send your marvel app request to contato@luizrrodrigues.com.br (Challenge Copilot)
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it with your notes/comments this link while you upload).
BRANDING GUIDELINES
- Typography is open to Designers
- We provide a screenshot of our other system with 3 colors (purple, white, green and yellow) as your References!
- Branding: https://docs.google.com/document/d/1uBexhLk0qfLGLCAiNvWs3sw9X0GJok8M8lBPpzpSM_Q/edit
TARGET DEVICES
- Mobile: 750px x 1334px (iPhone 6+)
- Portrait view
TARGET AUDIENCES
- Field Service Engineers
JUDGING CRITERIA
- Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness put into solving the problem
- The overall design and user experience
- Cleanliness of screen design and user flow
- Ease of use
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 FILE
- All source files of all graphics created in either Adobe Photoshop, Illustrator (Might need to convert it to PSD later), XD, or Sketch and saved as an editable layer
FINAL FIX
- As part of the final fixes phase, you may be asked to modify your graphics (sizes or colours) 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.