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.
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.
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.
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.)
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.
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.
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.
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.
