Warning: implode(): Invalid arguments passed in /home/q2jbh94teh6a/public_html/wp-content/themes/semplice/partials/project-panel.php on line 28
Link Creation Studio

Link Creation Studio

Overview

HP's Link Creation Studio is a web application which enables users to connect printed material with a complimentary digital experience. This niche technology is known as digital watermarking. While similar to QR Codes, digital watermarks are invisible to the naked eye and can be embedded into any printed image. When scanned with the companion LinkReader mobile app, the user's device launches a related, immersive mobile experience.

Imagine scanning a textbook with your phone and being directed to further reading, interactive videos and links. This is the type of action that Link Creation Studio enabled. I designed the builder application which allowed users to upload images, watermark them and ultimately store and distribute them. It was designed to distill a pretty complex concept down and present it in a very user-friendly way. 

Details

Employed

100% Onsite

Web Application

2 years

2014–2015

hires_1hires_1

Primary Challenges

01

User Understanding of Complex Verbiage

02

Design for Emerging Technology

03

Consistent Design Between 3 Teams

THE CHALLENGE

Verbiage

As an emerging technology, labeling and verbiage throughout this application in a way that was relevant and understood by our new users posed a major challenge.

Grasping the core concept of the Link Creation Studio technology required our prospective users to understand some very unfamiliar terms including trigger, link and payoff.

GETTING TO WORK

I approached this initial challenge with extensive user testing and cross-functional brainstorming sessions with my team.

The initial design evoked notions of print and printing while I hoped to highlight the mobile and digital aspects. Iterative user testing revealed that the inclusion of an image boosted user’s understanding. Many users even asked to see a short video in my testing sessions for further understanding.

Extensive testing of this verbiage revealed the following:

  1. I needed to be clear and direct with what users can do on the website.
  2. High-level vague descriptions were causing confusion with users.
  3. Shift messaging away from the words paper and printing.
  4. Lead descriptions with digital watermark to shift focus away from QR codes.

Initial landing page wording & layout

Initial test results focused on QR codes and print

Adding a more direct and appropriate image along with tweaking the primary CTA message resulted in better user-recognition of the core watermarking technology.

Later, I worked with other designers to incorporate a video showing the scanning interaction itself. This video was a big hit with new users as seeing makes this concept much easier to understand.

Resulting layout and verbiage

Test results focused on watermarks

THE CHALLENGE

Design for New Technology

To build this experience for their own customers, users need to both create a trigger image and the complimentary mobile experience.

My interface design needed to clearly explain this process while also enabling an intuitive creation flow.

GETTING TO WORK

After sketching and post-it sessions with the larger team, I iteratively built interactive prototypes. These were designed with many different user flows in mind and were tested at the lowest possible fidelity. This enabled me to test a wide array of flows and ideas while still moving fast with my agile development team.

Each prototype was then validated in task-based user testing sessions which I conducted within our defined target audience. These sessions indicated that users succeeded most often when they saw a checklist of all items they needed to complete alongside their current progress in the larger creation flow.

Just a few of the many interactive prototypes tested

The final design solution consisted of a new creation user flow which incorporated a tabbed interface with a checklist. The final interface was validated through user testing sessions. New users were able to consistently complete the primary and secondary tasks related to link creation without any stoppages.

THE CHALLENGE

Design Consistency

Consistency in design and messaging between three geographically separate teams posed a challenge for my design team. We were building this web application across three continents including the USA, India and Brazil! 

In order to keep all designers on the same page and avoid rework when it came to simple interface elements such as buttons or form elements, I decided to create a living style guide for this project.

GETTING TO WORK

Through strategy and open communication channels, I managed to maintain a consistent design language across our three teams.

I did so by creating style guide documentation for this project. The documentation was accessible to each geographically separate team at any time and contained core elements of the web application including: color, typography, forms elements, and other core design patterns.

My defined strategy for a common style sheets

The final style guide was eventually published on our public web page and was tied directly to the Sass stylesheets. I personally wrote the base styles for this library, over 3000+ lines of Sass code which would dynamically compile into to our production code on a daily basis, keeping each team up to speed.

I've published a version of the style guide here:

http://raysensenbach.com/lab/lcs-styleguide/ 

Sample elements from the final style guide

link studio landing screenlink studio landing screen