Phy Platform Product UX/UI

The Phy Platform was built as a unique CMS to give marketers contextual remote control of what people see when they scan QR codes, NFC tags, web links, and Bluetooth beacons. I was the principal product designer in charge of making it easy for users create/update content and see how their campaigns performed.

Phy Platform Product UX/UI

Yes, I know it says BKON at the top of the screen. It's okay. Phy was BKON before the name change. Phy was a better representation for the platform that helps people remotely manage Physical Web beacons, NFC tags, and QR codes.

Phy Platform Product UX/UI

This is a small part of a long screen of components I designed for the platform. In addition to the basic form fields and switches, you can see the on-screen mobile preview. Users could enter an Open Graph Title and description, upload an Image, and see an instant preview of what users would experience when a beacon, QR, or NFC tag was scanned.

Phy Platform Product UX/UI

On this screen, you can see my notes for developers. I probably didn’t need to get this granular with them, but it helps speed the process sometimes by pre-answering questions.  

You can also see the UX for multiple “events” stacked on the right. As those event lists grew, the Tips and Tricks for users would slide down, out of view, to make room for more events.

Phy Platform Product UX/UI

Since most users would be editing content on their phones, I designed an intuitive upload and cropping tool for images that didn’t require a mouse. (These screens were responsive.)

Phy Platform Product UX/UI

Users could have many “touchpoints” (beacons, QR Codes, or NFC Tags). In this list, users can see the status (on or off), the type, the unique ID, the custom alias, and the destination name and URL (where it takes the user), along with the battery life (if applicable). When tapped, they could see a quick view graph of activity over time and the total number of scans, with the last time the touchpoint was scanned.

Phy Platform Product UX/UI

Custom metrics views were essential because of the wide variety of audiences and use cases. While some data may be useful for retail, warehouse inventory data would require administrators to have a completely different dashboard. For this reason, we made a drag-and-drop interface with the ability to easily combine and calculate or add notes and edit reports.

Phy Platform Product UX/UI

In the detailed views of individual touchpoint metrics, users could record or view notes for a touchpoint on a given day, see averages, and even see projected data for future dates based on machine learning. Or, rather than the graph view at the top, users could see everything in a table view and choose which touchpoints to compare.

Phy Platform Product UX/UI

This is a comparison graph that shows results for 4 touchpoints over time. In this screen, the user is hovering over one touchpoint to focus. The purple and yellow dots along the bottom represent notes that have been left. These could have been left to highlight a particular sale or another time-related event worthy of note.

Bar graphs aren’t for everyone. Sometimes, you may be in the mood for some zig-zaggy line graphs.

Phy Platform Product UX/UI
Phy Platform Product UX/UI
Phy Platform Product UX/UI
Phy Platform Product UX/UI
Phy Platform Product UX/UI
Phy Platform Product UX/UI
Phy Platform Product UX/UI
Phy Platform Product UX/UI

How can I help you?

Does your brand need a bit of a pick-me-up? How about your sales presentation or that big investor pitch? I can help. My brain is wired to find order in chaos. Call it a superpower if you like.

-->