Introduction

I got introduced to a project where I have to create a responsive app for field engineers for one of the biggest American multinational corporations. This project allowed me to gain an in-depth understanding of the day-to-day activities of field technicians who travel to multiple power plants to install and fix the issues.

To comply with my non-disclosure agreement, I have omitted and obfuscated confidential information of this case study. All the information in this case study is my own and does not necessarily reflect the organisation's views.

Business Goal

This project's primary goal was to build a field service digitised application and get rid of paper-based forms used by field engineers. The proposed solution is device agnostic, used by a field service engineer to manage their work by viewing their assigned job cards, accepting and completing the pending tasks. The app should also share the real-time visibility of field activity for the operations team's field technicians connected with the office in real-time, enabling material and time tracking, recording of job details, as well as on-site payments.

My Role & Process

In this project, from the inception until the implementation, I worked closely with stakeholders and the project team, doing research and ideation, understanding the user's requirements, their tasks, the context of use, and creating concepts wireframes, visual designs and clickable prototypes which are user-centric.

Methods & Tools

I have conducted User Interviews, created Personas, User Journey, Site map, Storyboard, creation of task flows, Visual designs, Usability testing, Iterate, redesign, asset creation, redlining, and document.

Design tool: Sketch, Photoshop & Adobe XD.

Process

Like most projects, we started off by gathering the requirements, conducting a workshop with the stakeholders to understand the business requirement, project scope, and estimated timeline. After gaining substantial clarity about the overall project, I started collecting user requirements keeping design thinking as a guiding principle. I started gathering an exploratory qualitative data to understand the underlying reasons, opinions, and motivations of the field engineers while performing the tasks in the field. In addition to that, to know the long-term user behaviour and experience, I have conducted a diary study to get contextual knowledge.

Use Case

After analysis from the data and business goal, we have prioritised a few use cases to kick start the ideation and design process.

A. The mobile app keeps the field technicians connected with office in real-time, enabling material and time tracking, recording of job details, as well as on-site payments.

B. view the Job cards in-app results in reducing hours of non-productive time. 

C. The location-sharing feature in it helps the office staff to assign the right tasks based on location and availability.

D. The field service engineer wants to view the job details with the situation of the issue and customer information. 

User Personas

As we arrive at the defining phase of the design thinking in our project, based on prioritised use cases, we have to synthesise the research and findings from the first phase to guide the ideation phase.

Flowchart

While creating the flowchart, we have considered target users' goals and objectives, defined in persona as a reference.

Story Board

As we all know, a picture is worth a thousand words; when a series of images are collectively used to narrate a story, the entire team could easily relate and empathise with the characters who have real-life challenges similar to theirs. Based on the project context, we have created the storyboard to capture the attention, provide clarity, additional background, and inspiration to the stakeholders & team to find a better design solution, and take action. The storyboard below is about a particular user story, which includes a caption, description of the user's environment, the state of the user, and the device that they are using to achieve their goal.

Site Map

The site map's design is to define the site's overall structure and user navigation with a good understanding of the functionality and breadth of the field engineers' day-to-day work activities, by including all the essential features for field officers to finish their job by seamlessly.

Rapid Prototyping

The concept sketches were the representation arranging of UI elements and layouts and balancing information hierarchy in a simple meaning full manner by focussing essential tasks of the field officer's pre and post-task completion.

Whiteboard Brainstorming

I have conducted a whiteboarding exercise with stakeholders to narrow down the points for critical and sophisticated features. With several iterations, I have arrived at the refined idea, which got validated by the users (Field officers) and approved by the stakeholders.

High-Fidelity Wireframes

With the solid clarity about the user's tasks and expectations, I started creating numerous iterations of the wireframes and got them validated to arrive at the polished and meaning concept.

Annotations

Putting annotations is essential to make the team understand the reason behind different design elements. For this instance, the annotations below are about the design of the DEBRIEF flow behaves.

Usability Testing

Considering the project scope and feasibility, I have planned Usability testing in three different phases-design phase, building phase, and launch trial, to refine and fine-tune the concept. In this task, I have asked five field officers to complete a few scenarios using the app to evaluate and validate the functionality and usability of the product, before I get into the visual design.

Visual Designs

After the concept validation, I have started designing HI-FI mockups based on the proposed solution using sketch and import into Flinto to create a clickable prototype. The idea of this UI is to stick with the organisation's visual and brand guidelines and create two themes: modern, clean, and delightful.