OnScreen Web App
Platform training made easy

OnScreen allows any trainer or subject matter expert to create contextual step by step walkthroughs that help end users become platform experts.

OnScreen’s mission? Digital Transformation. Teams implementing complex platforms often work against tight deadlines and are short on resources. Onscreen increases project success rates by improving user time to proficiency and reducing training development and support time.

I led my agency’s partnership with OnScreen to design a platform that made creating and consuming guided walkthroughs simple for everyone. With OnScreen, employees can learn new tools by focusing on what is important: completing whatever tasks they have been assigned.

OnScreen is a web app accompanied by a browser extension that sits overtop of enterprise platforms like SAP and Salesforce. The interface needed to be both minimalist and visually engaging to ensure clarity throughout. To achieve this, my team and I developed a modular system of components that can appear and disappear as needed. This system blends crisp typography and generous negative space with unmistakable calls to action, effectively lowering the barrier to entry.

Image of a figure sitting at a laptop on a white table, viewing the OnScreen platform

A guide that guides itself

Through frequent user testing and an iterative approach, we engineered an intuitive experience designed for seamless navigation, ensuring users could effortlessly interact with the product.

UX Strategy
Content Strategy
Information Architecture
UX/UI Design
User Testing
Art Direction
Visual Design
Creative Direction
Motion Design

The Challenge: Achieve efficiency for everyone

OnScreen’s audience encompasses a wide range of individuals, from subject matter experts in specific corporate procedures, to newly-hired employees getting accustomed to new operations. Regardless they all have a unified goal: Learn the tools they need to get their jobs done, without having to first master the learning software.

Detailed designs of OnScreen's browser plugin panel, showing all of the pre-recorded guides available to the user

The Solution: Watch, Do, Teach

Think about how you learn any new operation: First someone shows you how it’s done. Next, you are asked to complete that task yourself. And finally, if you can turn around and teach that task, you have truly mastered it. Our design for OnScreen follows this same educational approach by guiding users through the actual tool they need to learn.

By contextualizing the process and allowing individuals to complete real tasks as part of their training, we increased comprehension while decreasing the amount of time required for employee education.

Detailed designs of various buttons and icons used in OnScreen's plugin and web application

The Outcome: Effectively helping students become masters

In close collaboration with the OnScreen team, we created an extensible toolkit that allows their training tool to adapt to any platform and educational context. The design is approachable and intuitive, reflecting OnScreen’s mission to more quickly overcome the hurdles that adoption of digital tools often pose to employee productivity.

Close-up view of OnScreen's recording toolbars
A view depicting the design of OnScreen's recording device over top of a website
A view depicting the design of OnScreen's recording device over top of a website

Simple recording of any action on any website

With OnScreen’s browser widget, recording a flow is as easy as navigating to the desired destination and hitting the Record button. OnScreen will handle the rest.

A view depicting the design of OnScreen's recording device over top of a website with the recording "step" tooltip, outline panel, and edit panel visible
A view depicting the design of OnScreen's recording device over top of a website with the recording "step" tooltip and edit panel visible
A view depicting the design of OnScreen's recording device over top of a website with the recording "step" tooltip and edit panel visible

Follow recorded guides with ease

As if by magic, relevant guides automatically appear on their corresponding sites when the OnScreen browser plugin is installed. Select a guide and the walkthrough automatically begins.

A view depicting the design of OnScreen's recording device over top of a website with the panel open which displays all of the individual steps which have been captured through the recording process
A view depicting the design of OnScreen in walkthrough or "guide" mode, showing the relevant guide tooltip.
A view depicting the design of OnScreen's recording device over top of a website with the recording "step" tooltip and edit panel visible

Organize and manage recordings through the dashboard

Like a digital help desk, the Dashboard serves as a centralized hub for guide creators. Edit, assign, link, and tag, all from a single location.

The design of the desktop screen which lists all of the guides a user has recorded, and the user currently in the process of assigning a selected guide to another user
The design of the desktop screen which lists all of the guides a user has recorded, and the user currently in the process of tagging a guide with the appropriate tags given that guide's content

Create conditional logic and process mapping

For more intricate processes, or those involving multiple paths, guides can be linked together based on context, or the result of a particular use case.

The design of the desktop screen in which a user is defining some conditional behavior for the guide which they have created
The design of the desktop screen in which a user is defining some more detailed conditional behavior for the guide which they have created
The design of the desktop screen in which a user is confirming some conditional behavior for the guide which they have created

Assign guides to individuals and groups

Guides can be created and sent to individuals as one-offs, or collected in association with particular job functions such that groups or departments within an organization can all access the same walkthroughs.

The design of the desktop screen with a modal visible where the user is currently in the process of assigning a selected guide to another user
The detailed design of a modal in the OnScreen platform where one user is adding another, new user
The detailed design of a modal in the OnScreen platform where one user is assigning another user to a group

Find yourself needing help? Request a guide

Save the trouble of sending personal emails, and simply request a guide for a particular destination with just the click of a button.

A view of the design of a desktop screen within the OnScreen platform where a modal has appeared thanking the user for submitting a request for a guide
A view depicting the design of multiple states of the panel which displays all of the individual steps which have been captured through the recording process

A more productive workforce, quickly

With a clean, and efficient new training platform, OnScreen helps its partners accelerate their onboarding processes with lower costs. And, because OnScreen guides teach within the context of the actual platform they are training, employees are instantly more productive.

The scaleable toolkit has helped OnScreen rapidly roll out its service to additional platforms including SAP and SAP Ariba, and will support further growth as the platform adds support for additional commercial products.

With ease and efficiency as its guiding principles, OnScreen each individual trained with the platform is a potential advocate for further adoption.