QR SCANNER LANDING PAGE

A redesign that created a new product... and many soutions.

THE PROJECT

I was assigned a task to redesign a product for Convention Data Services. It was an onsite lookup and print webpage where registrants can scan their badge to enter an event. They wanted to add new functionalities like a mobile check-in feature and facial recognition, however the hardware was outdated and limited. Some clients suggested to build kiosks which are better suited for facial recognition. Others preferred tablets to cut costs on logistics and to offer a more efficient setup of hardware onsite. My objective was to come up with a solution that covers the needs of each client while maintaining a reliable desktop alternative.

Issues:

Outdated Images and UI

Typography needs some work

Webpage is not mobile friendly

Needs:

Modern UI with less clutter

Improved typography and alignment

Proper display on desktop or tablet devices

RESEARCH

Much of the creative content addressing scanners involved the user scanning a QR of a product, rather than having a QR scanned from their device or a printout. As much as we wanted something different, the concept of guiding the user on how to scan their confirmation email was still relevant, especially for those users who don’t fall under the millennial/gen-z age group. The problem here was how dated the assets were and the placement of said assets. iPhone 4S, pixelated scanner, and the perfectly manicured hand. We needed a makeover, so below are some of the concepts:

Some users had trouble utilizing the scanner onsite, while others forgot to printout or save their confirmation email.

We need a design that clearly addresses these issues with minimal guidance.

END RESULT

After deciding the UI elements to update, we went ahead and rebuilt the code to new standards. The graphic was converted to a Hero section which no longer has a “click me now” appeal and we added some nice CSS animation transitions to eliminate the “butchered hand” effect. We were able to add the new scan features and tested the UI on our tablet kiosk prototypes where they rendered to perfection. Overall the event services team were excited to see the much needed improvement and the prototypes are off to the developers for production! 

Check out the Prototype!