Advice on a mobile friendly UX


First of all, any help with this is hugely appreciated; I’ve been rolling this problem around in my head for quite a while now and I think I’ve hit the point where I’ve just thought about it too much and the same solution keeps cropping up.

I’m trying to translate a horrible way of cataloging the location/status of items in properties into a web-based experience rather than using PDF’s in this awful way:

Name, Location 1, Location 2, Location 3, Date Found, Status

At the moment people fill out these PDF’s that are then input into an SQL table. Obviously, this is ridiculous and restrictive.

So far no matter how many different ways I try to approach it i keep coming back to just having a page to select “location 1” followed by a subpage for “location 2” and a third layer for “location 3” (with PHP so they’d all be the same file ?location1=&location2=&location3=) and a little bit of javascript to add a new set of fields in the current location.

There has to be a better way of doing it though, some way that would allow me to add new “locations” without dropdowns of submenus or having a big list of location options sitting above the actual items.

Again, any and all advice is hugely appreciated.


This is what I have so far (ignoring the hideous font choice)


Can you describe what the user is trying to accomplish on this screen? What’s the goal? That might help.


Hello, Thanks for the reply!

The goal is to allow someone to move around a property and report on the status of devices so we can keep a catalog of devices and their status’ on a particular property and a history of each device.

It helps keep track of how well maintained the devices are and identifies anything that needs to be repaired.

I’ve iterated on my current layout like so:

So, someone would login to the app, select the property they’re on from a list then find this menu. As they move through the property they’d be navigating through the “location” menu then adding any new devices or reporting on the status of existing devices.

So, if I wanted to check on the status of someones phone in the ground floor library:

Select “Ground Floor” from the first set of locations, “Library” from the second and see if the device already exists, If it doesn’t; add it and report on the status. If it does simply select it from the list and report on its status.

There are 7 different categories of device and there could be 50-100 devices in each building.

Hopefully I haven’t just muddied the waters more so, I can picture how I think it should work but from a UX point of view, i want to make it as clean and user friendly as possible.


Not totally sure I get all of it, but I’ll do my best. :slight_smile: I am assuming this is an app?

So the bottom, where you have the i icons, that should be the main navigation for the app and not filters. You would usually show a filter by using a filter icon that then opens an overlay that the user can choose from.

You may be making it more complicated by having the devices and the locations on the same screen. I would have the devices on one screen and the locations on the other.

Does that make sense? I’ll see if I can do a quick sketch…