Mainteny is the maintenance service app for elevators and escalators in buildings. We have 3 types of apps based on the users;

• Service Manager web app. The user is the manager of technicians to control and book the technicians, including managing invoices and quotations. This app is what I show here.
• Property Owner web app. The user is ‘the customer’ of our users as the Service Manager. They own the building or are responsible for building management. They can see and monitor the progress and data of the technician, the units/escalators/elevator properties and also check the invoices.
• Technician mobile app. The user is the technician to checks their own schedules to repair or maintain units of the properties.

Problem:

Previously, we had an inconsistent Filter and Search bar layout placed in every feature of navigation and redundant UI library components. Also, the line colours on the scheduled booking are too thin to be seen.

What I did:

Design Improvement

When I was joining, Mainteny already had the roadmap and information architecture of these pages. I then collaborated with the Lead Front End Developer to standardise the placement of the top bar area, such as for Title Page, Profile, Filter and Search bar, status chips components, pagination style and also tabs.

The Schedule – Before (with a very thin line in colours)

Above is on the Employees page, but basically, the schedule format here is the same as with the Orders page

The Schedule – After (with thicker line)

I improved the schedule lines (the colours lines) to become thicker. So users can easily track the Order statutes with their eyes.

Trade-Off

Also, previously, we had Show/Hide of ‘Show Unassigned Orders’ with the checkbox, currently, I changed it to use the switch. We might have better solutions for this, especially after I looked around for some inspiration, but we need a fast and easy solution on a tight deadline.

I initiated the compilation of all the information architecture (IA) into the documentation here. Before this, Mainteny had a very rough IA, which did not describe the pages that were already fixed 👇🏼.

Link of IA

Also, collaborated with the team, I encouraged them to gather user feedback and decide on the prioritization based on team effort and user impact 👇🏼

Link to organized user feedback

< Back to Portfolio