Science centre safety web app

DiscoverDefineIdeatePrototypeValidateDevelop

Understanding the problem

I was approached to find a solution to an old problem of the facility, which is reporting issues through a [UNOR]. UNOR is a form that has to be filled in order to report an issue.

Due to the size of the facility is a hard task to maintain an issue free environment, also leaving issues unattained may lead to potential accidents, which eventually leads to a significant financial loss for the organization.

More specific:

  • Employees don’t have a review mechanism, track issues or keep a history log.
  • System very old fashioned
  • Reporting issues is a time-consuming process that most often employees neglect to do.
  • At the end of each year, data is gathered to produce a pdf file with all the issues of each month.

UNOR – Example

Design Goals

Based on the findings from interviews with staff across the organization, I defined the design goals as follows:

  • One single source to organize the data and reports
  • Reduce the effort in data collection
  • Raise awareness of the new system
  • Create a modern interactive UI
  • Reduce the time needed to report an issue by having a quick submission form with minimal fields to fill
  • Empower supervisors to take care of any related issue in their department by giving an average rating to the building based on the issues reported and how many of them are resolved.
  • Specific dashboard for the facility moderator to oversee each issue
  • The system will act as a portfolio, heavily image-based, so it has to load fast by compressing images.

The solution

Having a unified reporting system is critical to prevent accidents, inform employees, and keep a history track with before and after content.

I used lighthouse accessibility tool and successfully passed the web app tests with high score

Fully responsive for every screen

Design process

 

Interview

To understand the problem in depth I started interviewing my department and then random departments picking one employee that has reported issues in the past. This way I would have an overall idea of what are the needs and current pain-points.

After each interview, I would synthesize the major findings and note them down.

I gathered my data after interviewing 15 employees with distinct titles and 4 building supervisors who have the responsibility to take care of the issues presented by UNOR. From the insights gathered it was revealed that 60% of the employees avoided reporting issues because they don’t know where/how-to, they don’t want to go through the hassle to submit a form with multiple fields which is time-consuming.

The key facts I had to take were:

  • Time-consuming – so everything had to be done in less than 3 clicks
  • They don’t know where – more exposure required.
  • How? – The new system has to guide the user by being informative, without huge amounts of text, probably a tooltip guided interactive system.

Flow model

I drew a flow model to understand how the system should perform and to identify the merging and breaking points. This helped me to gain a better understanding of the entire process.

LoginMapBuildingsProfileBuildingReport issueSearch issueSelect issueUpdate detailsRate issueAdd after picView detailsSearchReport issueView detailsSelect BuildingSelect BuildingNotificationNotificationNotificationNotificationNotificationNoYesSort issuesExport PDFView detailsView issuesView dashboardDashboardLog outLog outUser admin

Wireframing, from low-fi to high-fi

I usually love drawing my initial ideas on paper first before I move to any tool.

I walked through the design catered to their needs by sending links to key people involved in the project through Adobe XD / InVision.  After each feedback session, I incorporated the changes.

Sample of initial wireframes and UI designs

Typography, Colors, and Icons

BoldLine

Development & MVP

After every design being accepted I jumped into development mode. I took each design and started coding the templates focusing on responsiveness with HTML5, CSS3, Javascript while collaborating with a PHP backend developer on Github / Bit bucket repository.

We pushed the web app live quickly in order for key employees to have something to use in order for me to gather further insights and tackle every bug and design issue from the beginning.

This way the product continues to grow and expands on functionalities.

Final stage Metrics & A/B testing

I was more than happy with the ending result, but my research never stopped. I run A/B testing with key employees by installing a tracking tool like HotJar in both the main domain and subdomain to track users’ online behavior on smartphones and desktops.

After one month of usage, I managed to gather significant stats that I could review and fix any leftover issues. Based on that I made a presentation to higher-up executives to decide and follow the most intuitive design in order to finalize it.

Old Design examples during testing

Facility homepage


Before / After 1

UKAEA - Facility Map Homepage

UKAEA – Facility Map Homepage

 

Before / After 2

What was achieved?

  • Efficient reporting CMS app
  • Building portfolio
  • Rating system & notifications
  • Increased safety and awareness throughout the facility
  • Intuitive modern UI
  • History tracking