HSE Checklist

The report documents the processes involved in the redesign of the HSE App. HSE App is an inspection checklist application that allows users to conduct inspections through a tablet or mobile phone.  This process took 4 weeks to complete, and it was designed for PDO.

‍

Process 👏

‍

‍

‍

Research

• Background research
• User interviews
• Heuristic evaluation

Define

• User persona
• Customer journey map
• Business and user goals
• User Flow
• High-level app map

Design

• Wireframe
• Visual mock-up
• Marvel prototype

Testing

• Usability testing
• UX audit checklist

Deliver

• Interactive prototype
• Visual mock-up
• Research report

Timeline

4 weeks

Tools

‍

‍

‍

1. Research 📑

1.1 Background research

To kick off this project, we conducted secondary research into HSE App and similar apps that allow its users to do inspections by providing checklist templates such as iAuditor, Insight, and GoAudits to familiarize ourselves with the project quickly. We also did an app audit of the current HSE app and web app to understand the current scope of the product better.

1.2 User interviews

We conducted several user interviews with the users of the HSE application to avoid the risk and expense of creating something users don’t want. We interviewed four users to find out what they think of the current app. The questions we asked were centered on various touchpoints. For instance, we asked questions related to:

• Problems they’re facing with the current app
• Their approach to solving technical problems they face
• Features they would like to see in the app

Key findings from the interviews:

100%

Would like to review their checklists before sending them out

100%

Would like to export their completed checklist to PDF

100%

Would like to access their submitted checklist alongside other inspectors checklists

75%

Want to upload more than one image

50%

Don’t understand the reminders feature

50%

Would like to have a third user with permission of creating and updating checklists

‍

The full report can be accessed from here: https://phazero.atlassian.net/wiki/spaces/PHA/pages/192446467

1.3 Heuristic Evaluation

The heuristic evaluation was conducted on HSE App and web app by utilizing a team of evaluators assigned tasks to complete on both platforms. Evaluators used Jakob Nielsen’s 10 Heuristic Principles as a guideline to provide feedback. The feedback involved analyzing each screen and identifying heuristic principles that complied or in violation throughout the process.

The full report can be accessed from here: https://phazero.atlassian.net/wiki/spaces/PHA/pages/196837377

After conducting user interviews and heuristic evaluation, we were able to identify common habits, problems, and pain points. Also, this helped us to identify our key persona; Ali.

‍

‍2. Define 📌

2.1 Persona

Meet Ali! He’s the user persona representing the common goals, behaviors, and themes among users that I identified through user research. As we got deeper in the process, it helped to have a visual reminder of the people we’re was designing for. We also created a user journey map to empathize with Ali's experiences before, during, and after interacting with HSE App.

‍

‍

2.2 Business and users goal

Next, we identified key business & user goals. We wanted to ensure the new features would allow both the client and users to achieve at least some of their individual and common goals. 

Business goals

• Develop a versioning system for the checklists. 
• Add an option for inspectors to flag checklists via the User Interface.
• Allow admin users to resend an invitation to an inspector if the original temporary password was lost.
• Build a new page for the Glossary.
• Build a reporting page that shows key metrics.
• Add an option to give a checklist a category on the create checklist form.
• Sync mobile application as soon as it manages to connect to the internet, without any manual prompting.

Shared goals

• Sync mobile application as soon as it manages to connect to the internet, without any manual prompting.

User goals

• Being able to review checklists before submission.
• Ability to export checklists in PDF.
• Use the app when there is no Internet connection.
• Ability to submit sections instead of the whole checklist.
• Have access to all submitted checklists.
• Have a third user with permission of creating and updating checklists.
• Allow users to upload more than one image probably 2-3 images. Users should be able to preview uploaded images before sending them out.
• Add ability to change the date and time of the inspection as checklist may be filled out at a later time (of course, one could create the inspection at the correct time and fill out the details later)
• Add functionality to calculate the inspection score based on questions answered with ‘yes’ as the proportion of total answered questions excluding the N/A.
• Remember the last used settings for Crew Name and Project Name so they do not need to be re-entered each time
•  Provide the name of the inspection and score, not only the project name and date

2.3 Information Architecture

After defining both user and business needs for HSE App, we prepared some task flows involving the new feature. These were merged and expanded, resulting in user flows. The goal was to show how users might interact with the new features as they move around the app.

‍

‍

After that, I made a high-level app map (or application sitemap) to show the current information architecture and where the new features would exist.

‍

‍

‍

3. Design 🎨

After defining the key pages and their content, we did some initial sketches exploring layouts for HSE App. The answers we received from the users were a useful reference at this stage since it’s important to consider user expectations and needs.

Guided by sketches, we created wireframes for the key pages of the website. 

Interactive wireframes can be accessed from here: https://www.figma.com/proto/EtWsAsDiKN9bQee5fuVToC/UI-Kit----60%2B-wireframes-(Community)?node-id=1%3A3055&scaling=scale-down&page-id=0%3A1

With the visual styles defined, we applied these UI design choices to the wireframes, creating high-fidelity responsive UI designs. In addition, we made a UI kit with all UI components and styles currently in use.

‍

‍

4.Testing 📱

With the UI designs, we wrote a usability test plan and prepared a high-fidelity interactive Figma prototype for remote usability testing. It was important to test whether our decisions around information architecture, content strategy, interaction, and visual design were easy to use by PDO inspectors. In other words, it was time to observe how users interacted with our designs and gather some feedback, then use that information to iterate!

Objectives:

• Assess the usability of the app.
• Observe how efficiently users can submit inspections
• Observe how efficiently users can navigate through the app
• Get feedback on the layout and visual design

Tasks:

1. Submit a Base Camp - Catering checklist report assuming you’re working on Natih (NH19) project and you’re a member of Crew A.
2. Imagine that you’re in the camp and want to view Recording Workshop reports submitted by other inspectors. What steps you’ll take to complete this task?
3. Set a reminder for yourself on the Base Camp Operation checklist. Then open your upcoming reminders.

4.1 Quantitative Results

We had 4 participants test the prototype (all four tests were remote)

4.2 Qualitative Results

Conducting 1-on-1 test sessions was a valuable experience because each session provided us with a wealth of comments and feedback about usability, layout, visual design, user expectations, and more. We gathered and organized several pages of qualitative findings in an affinity map to visually group and prioritize similar observations and feedback in a way that would help me zero in on the priority revisions to make to the UI designs and prototype

‍

Results 🪄

‍