Microsoft Tag
These are a few creation flow images from the Microsoft Tag program. Microsoft Tag was Microsoft’s “souped-up” version of a barcode app that has since been discontinued.
The four-color variation of Microsoft's ‘High-Capacity Color Barcode’ had 8 color triangles, but a custom Tag using color dots allowed a company’s logo to occupy the entire background, making it infinitely more engaging for users and a big brand win for customers.
My goal was to keep text to the absolute minimum to let the design shine and make it easy for users to navigate around the program and quickly succeed at their task.
First tab in the Tag creation workflow. Final design had 43% less words than initial design.
Second tab, with a new friendlier name: “Tabs” instead of “Triggers”, the developer’s preferred word.
Classic Tag was the first of four options, and together with the Black & White Tag, was the easiest to customize next to the QR Code one. One-word labels for the UI elements gave this option an at-a-glance design.
I’ve chosen the “Customized Dot Tag” to demonstrate how a company would customize a Tag, which was often done for promotional materials and marketing collateral to engage customers. Like in the Tags tab home screen, only the most necessary text was included.
The text was tested along with the design and we exceeded the target metric of less than 10 minutes to customize a Tag. The usability expert thought they should hold a separate card sort exercise for our users to see what we should name the various Tag options as well as the customize buttons. After the first usability test was conducted using paper prototypes, not a single user recommended changing any text.