Calibration_Header.jpg
 

Calibration Check Points

OVERVIEW
With Sticky by Tobii Pro, you can collect eye tracking data by utilizing a person’s webcam instead of specialized hardware. This newer technology made eye tracking more accessible but came with new methodologies and technical limitations that researchers were unfamiliar with.

The initial outcome was to increase the success rate of our customer’s experiments by designing intuitive UI with flexibility for both novice and expert researchers.

 

Lead Product Designer | Tobii Pro
Research, Information Architecture, Interaction, Visual Design, Testing, Support Documents & Videos.
Team of 1 designer & 3 developers
March 2018 - May 2018

 
 

 
 

THE PROBLEM
Due to the new and unfamiliar methodology that comes with webcam eye tracking, users were unsure how to setup their experiments to ensure they obtained valid data.
BUSINESS GOAL: Increase experiment success rates

THE SOLUTIONS
An intuitive user interface that succeeded to educate and guide users while creating their experiments.
Flexibility to solve the problems of varying complexity, it was important to consider the level of experience and needs of the various personas. Achieving that required the ability to create the experiment to meet Sticky by Tobii Pro’s technical requirements yet follow the user’s methodology.

THE CHALLENGES
Becoming the expert. It’s not possible to lead our users to success unless we were experts ourselves. Sharing knowledge between all team members was essential to find the best solution and work most efficiently - especially with a distributed team.
Preparing clients for the changes they did not request while knowing their frustration with constant updates. Who has time to constantly learn a new workflow? It was important to keep them involved and excited during the process.

 
 
Fig: Before and after of the design step with Calibration Check Points

Fig: Before and after of the design step with Calibration Check Points

 
 
Calibration 1.png


LET’S TAKE A LOOK AT WHAT WE’RE WORKING WITH…


The first step was to identifying what improvements would have an impact. By this time, a new design system was put in place to address usability issues that were reported in the past. Clients were happy but there was still an elephant in the room… calibration. Could someone remind me WHY is it there and HOW does it even work?

 
 
Calibration 2.png


EUREKA! WHAT WE DISCOVERED:


Calibration directly affects the usable rate of experiments. In addition, we also learned that no one uses it. Not a single soul. Interviews with clients, customer success managers, and the development team brought to light the fact that no one truly knew why, when, and how to use calibration during experiment setup.

 
 
Calibration 3.png


BRAINSTORMING OUR WAY TO A SOLUTION

As a team, we shared our knowledge. We A/B tested our hypothesis and saw an increase in usable rate once calibration was set correctly. Once we were confident in our own understanding of what calibration was and how it should work, an execution plan was set and put in motion. What an amazing team - I miss them.

 
 
Sketches_1.jpg
Notes from interviews and brainstorming sessions

Notes from interviews and brainstorming sessions

 
 

LO-FIDELITY WIRE FRAMING AND DEMOS

Meetings with the development team were held to review all wireframes. This ensured that all edge cases were covered and we were developing a solution that would make sense from a usability and technical standpoint. This included in-app onboarding and notifications, varying experiment setup requirements, warning messages, alerts, and other pages affected by these changes.

LoFi.png
 
 

HIGH FIDELITY USER TESTING

Collecting feedback on the intuitiveness was key to alleviate stress when introducing this update to existing clients. With a laptop and clickable wireframes uploaded to Invision, guerrilla testing would be held in the public spaces of San Francisco. Luckily, the responses were mostly positive and we were able to fine tune the wording.

HiFi.png
 
 

ALLEVIATING STRESS WITH CUSTOMER ONBOARDING

We understand that updates are necessary but cumbersome. It was extremely important to share the value and have our clients feel excited and prepared. Demo videos and help articles were produced and sent via marketing emails prior to the launch.

Watch the demo video here (Yes, that’s my voiceover!)

Learn Page.png
 
 

BRINGING IT ALL TOGETHER

Deliverables were prepared in Sketch and provided to developers via Invision (using Craft). Additional UI specifications were also written and provided as a Product Requirement Document. Open communication was key throughout the conception, design, development, and QA phases - and we were able to successfully ship the update within 3 months.

Bringing it Together.png
 
 

THE FINAL PRODUCT

After a three month process, we were able to successfully execute and ship a project that would alleviate users from the responsibility of calibration that would take many hours to learn and setup correctly.

 
 

 
 

THE OUTCOME
Experiments usable rates increased by and average of +5% with this single update.
Clients were satisfied with the results and expressed their relief that their workflow was not impacted.

WHAT I LEARNED
The importance and benefits of sharing knowledge across different disciplines to create better solutions.