Boosting user engagement via seamless workflows and addressing data security concerns.
INTRODUCTION
What is Layerpath?
Layerpath empowers B2B product, sales, and marketing teams to create impactful, shareable demos in minutes. Record your screen, explain the steps, and Layerpath automatically transforms it into a polished step-by-step guide or video – seamlessly integrated with a Chrome extension.
Project Scope
Following a kick-off meeting and initial research, our 3-week remote UX/UI sprint focused on streamlining Layerpath's user experience for first-time users, specifically the sign-up to project sharing journey.
Tools
Figma, Figjam, Google suite, Optimal Workshop, Maze, Procreate, Pen and Paper
WHAT DID I DO?
Project Lead
I led a team of 3 other UX/UI designers in-
Alignment & Strategy: Facilitated client meetings, drafted the project scope, and ensured team alignment on project goals.
Research: Led user interviews, usability testing, and affinity mapping. Defined problem statements, HMWs, and a new user flow.
Ideation & Design: Conducted ideation workshops, facilitated feature prioritization, led a design studio to sketch MVP user flows and collaborated on mid-fidelity and hi-fidelity screens.
Testing & Iteration: Conducted usability testing at all design stages (low-fidelity, mid-fidelity, hi-fidelity) and outlined project next steps and future goals.
PROJECT BRIEF
We tackled user acquisition challenges presented by the founder:
A 50% drop-off occurred between signup and downloading the extension.
Additionally, users with the extension are not creating or sharing demos.
the problem
Our proposed solution tackles user drop-off with a demo automation tool featuring built-in data protection capabilities. This directly addresses user needs for efficiency, data security and streamlined workflows.
The Solution
High-fidelity testing confirmed the success of our design, with users rating it highly usable (4.8/5) and likely to use (4.6/5), reflecting its perceived value and intuitiveness. These strong results prompted the client to implement the changes on their live website, demonstrating the solution's effectiveness in a real-world setting.
For the latest website, click here. Since its deployment, the solution is being monitored to gauge its impact, with further updates and refinements likely made by the client to build on the foundation we created.
Impact & Implementation
GETTING TO KNOW THE USERS
User interviews
To understand our target audience, I interviewed 6 product managers & marketing professionals. I delved into their motivations and needs for creating demos, explored their current methods, and identified challenges they encounter throughout the process.
I believe that demos are crucial to ensure clients fully understand the product's capabilities.
I need customization tools to cater to diverse audiences and deliver targeted presentations.
I currently rely on screen recording which requires tons of editing for clarity. This manual process is slow and inefficient.
For effective communication, I need flexible sharing options.
THE EXISTING PRODUCT
Usability Testing
We conducted usability tests with the existing product, collecting both quantitative and qualitative data throughout the user journey. This allowed us to identify areas where users encountered difficulties.
2 out of 4 users struggled with downloading the extension. Recording and editing proved challenging for almost all. Why, you ask?
Home page
Onboarding after sign-up
During the Recording
Editting post recording
IDEATION & FEATURE PRIORITIZATION
Prioritizing Goals
Drawing on user research (usability tests & interviews), we brainstormed solutions to tackle both:
1. User goals- raise awareness and address privacy concerns about the extension and a seamless user experience.
2. Business goals- increase extension downloads and user engagement.
How Might We provide product managers with a user-friendly tool that simplifies the creation of interactive product demos while ensuring data security?
OPPORTUNITY
After we ideated, we employed an impact-effort matrix to prioritize user needs and define achievable goals for the remaining 2 weeks (until presentation/project deadline).
We conducted task analyses of 3 competitor demo tools focusing on sign-up to project sharing process.
IDENTIFYING OPPORTUNITIES
All, except Layerpath, address privacy via a footer link, but none do it prominently on the homepage.
Arcade offers clear recording controls (start/ pause/ stop) and recording area indication.
Most offer public and restricted sharing options for created demos.
Supademo is the only platform with a post-recording tool to redact and crop sensitive data.
DESIGNING
Because we were redesigning the user journey to enable extension download before signing-up we chalked out a new user flow.
User Flow
USABILITY TESTING
Yes we did! We conducted moderated usability tests via Maze on our low-, mid- and high- fidelity designs.
Did we test this?
Users valued a demo automation tool like Layerpath.
Users appreciated the transparency regarding the Chrome extension download.
Lack of visual clarity, due to limited fidelity, led to user confusion with start/stop recording. Future tests will incorporate verbal instructions for key tasks.
Data redaction and restricted sharing features were well received- average likelihood of use: 4/5.
The user interface didn't provide clear confirmation that recording was in progress.
ITERATION
Homepage:
Clear CTA raises Chrome extension awareness and enables pre-signup download.
Prominent privacy policy link eases data sharing concerns for professionals seeking workplace approval (also to be incorporated in the new header's Resources tab).
Streamlined onboarding: Informative videos on homepage & dashboard replace lengthy post-signup process.
Downloading Extension:
Previously, users couldn't download the Chrome extension until signup, creating a signup and extension download hurdle.
Now, they can download first, reducing friction and building trust before signup.
Creating a Project:
Clicking "Create a Project" reveals a clear "Start Recording" button.
Three clear and concise instructions appear upon initiating recording, ensuring users understand the process.
A red border highlights the screen area being recorded for user confirmation.
During recording, a real-time step counter next to the Layerpath icon displays the captured steps. The Layerpath extension icon serves as a central hub for pausing or stopping recording through a user-friendly dropdown menu.
Sharing a Project:
Users can protect sensitive information with a redaction tool and a crop tool empowers users to adjust the recorded screen area.
Users can grant restricted access with view, comment, or edit permissions only to specified email addresses for enhanced confidentiality.
TESTING HIGH-FIDELITY
High user ratings- 4.8 ease of use, 4.6 likelihood of use, confirms our design’s intuitiveness and perceived value.
Though resource limitations prevented immediate measurement, client adoption paves the way for future analytics to quantify the download CTA's impact on extension downloads and user engagement.
NEXT STEPS
During testing our high fidelity prototypes, we bridged the gap for the missing onboarding videos by providing verbal instructions.
However, users requested interactive tutorials early on for better feature comprehension. In the future, we will take high priority to provide pre-signup access to these onboarding tutorials.
Currently, all users utilize ‘Enhance with AI’ to populate text in videos and guides similarly. Looking ahead, we envision AI as a creative assistant, automatically customizing slides based on user signup data they provide at the “tell us about yourself” page.
Working on this project with Vinay from Layerpath was such a rewarding experience. I’m so grateful for the learning experience and to have taken the lead on this project, all the way from strategy & research, ideating and turning in the final deliverable.
It was tempting to overhaul the entire experience from the start. However, user research revealed a simpler solution: clear communication of the Chrome extension and a pre-signup download option. We implemented this through a straightforward call to action in our design.