1 of 29

PsodaJobs app

Will Donaldson

2 of 29

The product:

An app, designed towards the energy sector, where technicians can take job information from a fully planned and resourced project out into the field.

Project overview

Project duration:

2 months

3 of 29

The problem:

Currently projects are planned and resourced in isolated spreadsheets and drives, which are then passed manually from project managers to technicians out in the field.

Project overview

The goal:

To create a central hub of data so that project managers can plan and resource the project in Psoda (PPM tool), then that same information can be used in this new PsodaJobs app for technicians and project managers out in the field.

4 of 29

My role:

Lead UX designer and researcher.

Project overview

Responsibilities:

User research, wireframing, prototyping, usability testing and accessibility considerations.

5 of 29

Understanding

the user

  • User research
  • Personas
  • User journey maps
  • Empathy maps
  • User flow

6 of 29

User research: summary

The user research was mainly planned around a single persona who the app is targeting. This is the ‘crew boss’ or ‘technician’, who will be leading a team out in the field and using the app to receive and update information about the task.

7 of 29

Persona: Bill

Problem statement:

Bill is a crew boss who wants receive, edit and update information on upcoming jobs so that he can successfully complete and document the job process.

8 of 29

User journey map 1

9 of 29

User journey map 2

10 of 29

User journey map 3

11 of 29

Empathy map

12 of 29

User flow - examples

13 of 29

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Starting

the design

14 of 29

Paper wireframes

By sketching multiple wireframe concepts, I could create different visualisations of the same screen for usability testing.

15 of 29

Digital wireframes

I transformed all my paper wireframes into digital wireframes in Figma. I started to add basic functionality such as opening menus and dropdowns on click/tap.

Clear and easy workflow button to log the start of work.

Quick and easy button to plug into Google Maps

16 of 29

Digital wireframes

I created multiple versions of the main screens to show different ways of presenting and using the information.

Clear planner of the days tasks and travel time.

Offline capable app with clear options for a reload when in wi-fi range.

17 of 29

Low-fidelity prototype - examples

18 of 29

Usability study: findings

Usability testing was held on the multiple different wireframe prototypes to find what aspects of each prototype users liked or disliked.

Round 1 findings - examples

Saving a job functionality not needed as it doesn’t provide that much value

1

How do we add a job on the fly?

2

Round 2 findings - examples

Missing a search on the notes/files screen

3

Star icon for saving a job was not clear

1

Need to accommodate a large number of files and attachments

2

Don’t need the big search bar if it searches the whole calendar

3

19 of 29

  • Mockups
  • High-fidelity prototype
  • Accessibility

Refining

the design

20 of 29

Mockups

The large search bar on one of the original wireframes was moved into a small search icon in the user menu. This change came from feedback in the usability testing that the search would be used on more specific cases and not daily, so it is not needed on the main screen.

Before usability study

After usability study

21 of 29

Mockups

In the first set of wireframes, there was no way for a technician to add a job on the fly. For example, if something needed fixing urgently on that day. Based on that feedback an add (plus icon) button was added so that users can add a new task.

Before usability study

After usability study

22 of 29

High-fidelity mockups

23 of 29

High-fidelity mockups

24 of 29

High-fidelity mockups

25 of 29

Accessibility considerations

Included in app settings is an option to change the text size in the app. This is so that technicians can read important information if they have any sight difficulties. This also helps with increasing button sizes for when technicians are wearing big gloves.

A high contrast setting was also added to the app settings to help any users with visual impairments.

Animations (mainly on screen transitions) are able to be turned off for users that have trouble viewing motion.

1

2

3

26 of 29

  • Takeaways
  • Next steps

Going forward

27 of 29

Takeaways

Impact:

This project had a positive impact on Psoda as the initial intended customer loved the designs and concept so much that they agreed to sign up with Psoda. Once this customer gets their PPM structures built into the Psoda tool, this jobs app can be developed for real-world use.

What I learned:

In this project, I have learnt that communication is key. There was a slight miscommunication through the channels early on in this project around certain requirements. By quickly speaking up, these issues were clarified early enough not to impact the project majorly.

28 of 29

Next steps

This prototype has been handed off to the development team to begin work on once other dependencies have been met.

I will continue to work closely with the development team once they start work on this app.

Continuing to get usability feedback from the technicians and other stakeholders will continue throughout the development process.

1

2

3

29 of 29

Let’s connect!

Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.

Thanks for reading my case study for this project!

I would love to say hi and connect on LinkedIn:

https://www.linkedin.com/in/will-donaldson-52193b116/