Experience Routing
UX Case Study
Introduction
Blue Bite uses NFC, QR code scanning technology to deliver engaging and unique web experiences based upon the item being scanned.
Brands want more! They want to be able to design multiple custom experiences that are tailored to a specifically defined user segment.
Think "language", for an example. An international brand may want to build custom experiences based upon the language setting of the device that did the scan.
This ability to identify a set of end users based upon a set of criteria ("device type" and "location"; for example) and deliver unique content currently existing in the product only via complex workarounds involving extensive knowledge of web technologies. So complex that brands would simply write out the rules they want and internal Blue Bite specialists would do the coding.
To bring this capability directly to the end user in a "self-serve" capability would deliver both tremendous end user engagement and new capabilities while also eliminating the high costs of internal Blue Bite specialists having to do this work.
Roles performed:
-
Led design and research efforts
-
Coordinated with all internal stakeholders to ensure all voices and needs are represented
-
Identify key areas of enhanced improvements and worked with PM to determine initial MVP feature set while also mapping out regular rollout of feature until complete
-
Conducting first end user usability test at Blue Bite testing with 10 users
-
Iterative design prototypes to drive towards optimal user experience
-
Scheduled revisits with users to determine end user satisfaction
-
Implemented tracking in code to capture key metrics to measure use
Related Links:
Experience Routing
A visual to aid in understanding Blue Bite's business model and how Experience Routing fits in.
Once a code is scanned, users have to be able to redirect to different destinations based upon the routing criteria.
Early Sketches
Just trying to capture the core use cases for Experience Routing in quick sketches.
This proved not very usable due to the old story of "too many clicks". The drawer proved to be a barrier.
We were tasked with bringing the data and UI rules together. This did present a scaling issue as can be seen in the image below.
We did learn a great deal in how we can use the collapsed state of a rule to communicate differently than the expanded view.
Branching Within Routes
This branching logic is common in most rule or filtering UI. It does raise the learning curve and intimidation factor for those less tech savy. Trying to never give in the needs of the "power user" branching UI was a strong desire for the product team to deliver upon.
The image gallery below shows how branching and additional logic adds complications.
Click thru image gallery to observe growing complications.
Add a first destination to your rule
Add new routing logic
Can get very messy. Definitely not for the novice user
Add a first destination to your rule
Driving Towards Consensus
Heavy user feedback testing from both internal stakeholders as well as with actual Blue Bite end users found the designs getting lighter in both presentation and functionality.
Branching was out and a return to a design with a collapse state as well as expanded. The two different states presented the opportunity to "roll up" the rules into easily consumed bullet points for quick understanding. When editing, the expanded mode provides the details and functionality the user needs.
Design Iterations
Testing proved the user pattern for identifying and creating rules were successful.
We needed to then understand what, if any, additional user education was needed.
This first screen tested as way too much!
Early "Welcome" screen
FINAL VERSION
A lighter welcome screen to engage and intrigue users.
Taking advantage of the form factor each presents to create an easy to understand read view (collapsed) and a work view (expanded).
Click thru interactive prototype below to Add Your First Custom Route