The Gloverlay

The Gloverlay is a global help layer that can be summoned and dismissed at any time to educate clients on terminology and functionality on a popular online brokerage platform.

MY ROLE

I created workflow and entry point explorations based upon defined requirements, as well as the visual and interaction design.

THE WORK

One of the primary functions of the Gloverlay was to introduce users to new features on the site after a major redesign. On the first login after the new changes took effect, users were presented with a simple modal that gave them the option to explore the new features, or dismiss the message.
After launching into the tour mode, modules on the page are isolated, allowing explanatory text to be featured to the side. Elements within the module remain interactive – we took care not to remove the ability to use the actual UI, agreeing that this would diminish the educational effectiveness of the experience.
This "isolation mode" approach is also versatile, because it allows the UI of the module in question to be replaced with other educational content such as video or tutorials. Another major goal of this project was to create a mix between general investing/finance education, and education about the UI.
The Gloverlay has a handful of entry points – contextual tooltips as new users interact with the various modules, as well as a link in the upper-right of the screen that launches the experience at any point.

THE PROCESS

EXPLORING EDUCATION PARADIGMS

Upon setting out on the project, we new the general goal – create a global overlay that helped clients learn about finance and the UI of the trading platform. Past this, there were two key questions that we narrowed our focus on answering: How "guided" of an experience should it be, and how linked should it be to the underlying content. With this in mind, we created a document to present to the client that presented several different options:

We ultimately decided on the "point and shoot" paradigm – It provided the most flexibility in maintaining a connection between the educational content and the actual UI, and versatility in presenting other types of educational content as needed.

From this point, we turned our focus to exploring different entry points. This was a key point to figure out, because we needed to strike a balance between discoverability, and not frustrating users who already knew what they were doing.

We ultimately decided to have the Gloverlay be advertised the first time the user logs in, but then be relegated to non-intrusive, dismissible tooltips and a upper-right link in subsequent visits.

SUMMING IT UP

Ultimately, this project was an excellent exercise in how to present complex educational content in a way that isn't overwhelming and to where the user absorbs and retains the information. Most importantly through this experience, we established a direct connection between educational content and the actual content on the page – a new and exciting paradigm for financial applications, which are highly prone to confusion and frustration even with standard educational material.

SEE MORE OF MY WORK

Check out my work for Daily UI: a collection of interface visual design & animation exercises