Hetairoi Field Service App Design Challenge

Welcome to Hetairoi Field Service App Design 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

Round 1

Mobile
01) Dashboard
02) Questionnaire flow

Desktop
01) Dashboard

Round 2

Mobile
01) Dashboard
02) Questionnaire flow
03) Review and Send

Desktop
01) Dashboard
02) Create / Manage Questionnaires
03) User/Engineers management
04) Jobs management
05) Reports
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 develop a more satisfying user experience (UI/UX) 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 
• Best practices for Web-Based App
• 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 our specific questions are formatted and responses required presented to engineers so that responding becomes more intuitive and error free.
• There’s a preference for graphic or visual representation of questions where feasible (see ideation winners)
• Less driven by text-based traditional form dialogues; 
• Ideal would be a question / per frame / at a given time to give more of an engaging experience, without clutter. (See ideation winner)

CHALLENGE FORUM
If you have any doubts or questions regarding challenge requirements, please ask in our challenge forum.

OVERALL REQUIREMENTS

• App focus is a post-job questionnaire
• Web app admin UI:
  • Job screen; 
    • Show meaningful information about job questionnaires
    • Job statuses, engineer / job information, stage of completion 
  • Engineer questionnaire management;
    • Ease of use, intuitive interface

Mobile:

• Modern Intuitive UI for engineers to experience
• Not overwhelming
• Use modern UI elements where necessary to make the interface and interactions engaging

Web application admin interface:

• Focused on customer report and feedback;
• Change and adapt the list of questionnaire options on the app;
• Changes made (by admin on web app) should be reflected on live (mobile applications) immediately.
• Backend: Take the pain away and seamlessly integrate the backend
• A solution on the device linked to the architecture to redefine the questions / and adapt the UI to meet business needs as they change. (Like in Visio)
• If we change something on one, it changes for everyone

Structured notes: 

• Every ‘form’ action is recorded against a structured note system that determines what the next question should be. Some forms might just be 10 questions, others might be up to 80 depending on user response.
• The note reports the equivalent information relating to the action taken by the engineer.

How complex are the question types:

• Nested Questions (with multiple sub questions)
• Multiple Choice, Single Select
• Multiple Choice, Multiple Select
• Reference Visio to see questions we expect to see on the app

We need a UI to cater to:

• Mandatory outputs
• Optional outputs
• Relationship Dialogue with sub questions and related questions.

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?
• Ease and integrity of translation from Visio to the mobile UI.
• 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.

MOBILE
Important: Please check provided design direction, we provided 3 design direction option with feedback from customer in each. Merge the ideias following the feedback.

01) Dashboard

• Assigned Jobs
• Status of questionnaires
  • New, In progress, Completed, Submitted

02) Questionnaire Interaction 

• Engineer select a job on their dash board after fix, to close the job, mark questionnaire as complete & submit.
• Please check questionnaire flow in Visio and Doc files.

03) Review and Submit Questionnaire

• Options to review as replies
• Button to submit, the app need works  offline too, so if any errors return when try to submit need show option to “Try Again” or option to “Auto Sync” in background.

DESKTOP
01) Dashboard Page

• List of engineers
  • Name
  • Phone/Email
  • Status (Working, In Field, …)
  • Quick actions buttons (Assign new job, see jobs, …)
• Latest questionnaires received
• List of available jobs

02) Create / Manage Questionnaire

• Create templates
• Add sections, fields (set fields type)
• Set steps (pages)

03) User/Engineers management

• Add/Remove
• Assign to a Job
• Check details, jobs assigned, questionnaires sent, …

05) Jobs management

• Add/Remove
• Assign to Engineers
• Set questionnaire template

05) Reports

• Reports about questionnaires
• Jobs completed with or without questionnaires

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
- Use our logo in your design (attached in the documentation)
- We provide a screenshot of our other system with 3 colors (blue, white, and gray) as your References!

TARGET DEVICES
- Mobile and Web-Based Application
- Desktop: minimum 1366px Width with Height adjusted accordingly
- Mobile: 750px x 1334px (iPhone 6+)

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 Files
- 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