Case Study: Oculid

Redesigning an Eye-Tracking Software Product

Lili Kindelhofer
7 min readApr 14, 2021
Source: Oculid

Time Frame: 2 Weeks

Intro

This following case study posed the final project for my UI/UX Bootcamp at Ironhack. I am immensely grateful that Oculid was willing to share their platform and resources with Ironhack for me to test my skills on a real life stakeholder project. The most challenging part about it was certainly getting familiar with the product and its complexity, though throughout the process I highly cherished the opportunity to work on a software that represents somewhat of a true prodigy of modern technology, giving me the chance to learn about potential obstacles that come with this kind of digital heavy weight, specifically for the user. Skepticism regarding the rapid spread of modern technological development and its merging into everyday life reflects in the general responses to products just like this one.

As a designer, I regard it as my obligation to sculpt digital products in a way that is clear, easy to use and relatable for the people who engage with it, translating complex matters into simple interactions and taking all possible factors into account when it comes down to communicating efficiently through a product’s visual design.

The Company

Oculid provides access to a platform to create remote, unmoderated usability testing for mobile devices. During the test, the app uses eye-tracking technology to gather information like gaze points, heatmaps, areas of interest, taps, and provide the researcher with a dashboard to analyze the results of the test per task, per user or aggregated results. Eye-tracking provides tangible data that can be used by UX researchers to get a sense of usability of a feature, UX designers to A/B test between different options, UI designers to test prototypes and marketing specialists to do product desirability testing. [1]

The Challenge

• Conduct user research to improve the app and/or the dashboard
• Increase the user’s trustworthiness and raise completion rate of the app

The App

Pain Points
(as communicated by the stakeholder)
• The calibration process is often unsuccessful because people don’t keep their position in place
• People tend to not finish the tasks
• People find the technology untrustworthy and therefore mistrust the app

User Research
Based on the information received, the research conducted aimed to gather insights on how to solve existing pain points, as well as to find further pain points to be solved through an improved design of the app. Since this project happened within the framework of an UI/UX Design Bootcamp course, classmates covered what was defined as part of the target group (being aspired UX Designers and Researchers) and so posed an optimal pool of people to test Oculid’s product on.

Findings
Having conducted qualitative interviews with eight classmates, there was a clear consensus to be found among the testers of the app. In order to make the app more trustworthy and for users to follow through until the end, it would require more

Consistency, Clarity and Simplicity

in the design as well as throughout the explanations of tasks. Certain pages were perceived as too overloaded and the icons were found to be unsuitable, as in reflecting too high of a level of playfulness for the actual purpose of the app and software.

BEFORE: Positioning and task-solving process as currently depicted in the app.

Design Solutions

AFTER: Redesign of problem areas shown above.

Taking the gathered information into account, the focus of the app’s redesigning process was to improve its usability through clear instructions, communicated partially linguistically, yet mainly visually.

• Redesigning the positioning process: entailed replacing the oval shape with a head shape frame and adding coordination lines for the user to know precisely where to position their eyes in order to make the calibration process more efficient
• Redesigning the task description: This area was perceived by testers as confusing and visually overloaded, which was solved by extracting the task instructions onto a separate page, followed by a clear and simple design for the task completion process itself
• Additional changes were implemented for the survey process. The gender option “diverse” was changed into “non-binary” and a “prefer not to say” option was added, as well as another age group option, in order to provide a more specific definition of the tester’s age group.

Style Guide

Results

A/B Testing
Having redesigned the app, the final result was shown to four colleagues that had engaged in the qualitative research process, for the purpose of A/B testing. The responses to the new design were as the main goal intended, very positive, saying that it now “made more sense”, that it was now “easier to navigate through the app” and that “the icons suited the overall picture of what eye-tracking software represents and what it wants to communicate in terms of solidity, professionalism and trustworthiness, better”.

The Dashboard

The second part of the product consists of a dashboard, available in desktop format only. This is the place where designers, researchers and marketing specialists review the data gathered through the app process and watch recordings of the user’s task solving with specific overlays displaying gaze points, areas of interest, a heatmap as well as taps.

Due to the time limit that came with this project, the general focus was on the redesign of the app, while simply touching upon sketching a new dashboard to showcase information clearer. The time spent on the dashboard was three days. A thorough redesign of the dashboard would take many weeks or even months of work, as it is a complex product that requires an in-depth process to optimise properly.[2]

Pain Points
(as communicated by testers of the product)
The research conducted with fellow aspiring designers brought a range of detailed pain points to light, regarding the overall design as well as content and missing error states, which pointed to the need for a thorough redesign of the dashboard. Since the main users of this platform are UX experts, so the argument of three people interviewed, it takes an improved usability as well as a more comprehensible information architecture and data visualisation in order for professionals to want to incorporate this product into their work.

• “The platform seems confusing to work with.”
• “It is very hard to understand the table.”
• “I would spend a lot of time trying to figure out what I’m seeing.”

User Personas

Since Oculid’s product consists of two platforms, two user personas were created to fit a scenario of the app and the dashboard. While the app poses the platform used by actual testers of various websites, the dashboard page is the place where gathered data is displayed and made accessible for researchers, designers and/or marketing specialists.

User persona for app
User persona for dashboard

Design Sketch Dashboard

BEFORE:

Dashboard: Page for creating a test as currently depicted on the website
Dashboard: Current Data Visualisation
Dashboard: Video display of the user’s task-solving behaviour

AFTER:

Dashboard Redesign: Overview of all tests created, with info about survey responses and completion rate.
Dashboard Redesign: Page after clicking on a specific test, including video of user behaviour and feedback box.

Conclusions & Key Learnings

• Self-explanatory design is not self-evident.
Besides possessing an eye for design, it also takes the continuous process of emphasising, defining, ideating, prototyping and testing to enhance a product’s usability and make it more user-friendly. Abstract thinking, problem solving and analytical skills are required in order to „think for the user“ and provide them with simple design solutions.

• The more complex a software is, the better off is the product with a simple design.
Complex technologies are complicated enough for user engagement to begin with. It is not the responsibility of the user to decipher and navigate through depicted information, but rather the task of the designer to find and create ways to communicate elaborate matters in an easily digestible way.

[1] Source: Oculid

[2] Despite the design process itself, this would have entailed the recreating of the information architecture, the creation and testing of a site-map, a feature analysis and throughout many more meetings with the stakeholder than were possible within the given timeframe.

--

--