Bookmarks
A feature that lets frontline.io users save any digital-twin view and reopen it instantly
SUMMARY
A shared-bookmark feature that lets any user snapshot a digital-twin view and reopen it with one click, turning complex equipment states into reusable shortcuts
GOAL
For content creator roles: Cut lengthy re-setup times and rebuild user trust
For training & support roles: Increase usage of the digital twin
ROLE
Product designer (Research, UX/UI design, interactions, user testing, handoff) in collaboration with developers, QA and customer success
CONTEXT
frontline.io empowers users with zero 3D experience to transform heavy CAD assemblies into interactive digital-twin models, enabling service engineers, trainers, and content creators to easily animate procedures and deliver guided support on any device- no 3D expertise required.
As the platform’s sole product designer, I frequently speak to customers and collaborate closely with customer success to keep on improving the platform.
During these meetings I started hearing comments regarding repetitiveness, time consumption and even loss of work.
PROBLEM
-
Content creators repeatedly worked to achieve a specific state for 3D model animations, needing to redo the process daily.
-
Instructors appreciated the digital twin for training but with inconsistent, time-consuming setups, they were hesitant in integrating it in the training process in a more substantial way.
-
Service support experts found it too time consuming to utilize the digital twin during live support calls.
"Each session requires setting up the state of the machine manually. It just takes to long in call that you want to be as short as possible."
"It is hard on large machines to search every time..."
"Recreating a similar state multiple times a day severely disrupts my workflow and productivity."
"I try to do as many animations as possible in one sitting, because I know I will lose my setup the next time I come to it"
"A procedure doesn't allow me to teach a dynamic training class where I can jump between views of the digital twin, depending on where the students take me."
PROPOSED SOLUTION
I believed that bookmarks were the best way to eliminate both:
1. Constant re-setup work, that was frustrating content creators and undermining their trust in our platform
2. Time barriers that prevented deeper digital twin integration for training and support teams.
DESIGN PROCESS
Core capabilities (MVP)
Before diving into the design, I focused on building the foundation for the new feature I envisioned. I wanted to make sure the feature truly addressed the problems the users were having. I identified the following as essential components to include in the first version of the feature:
-
State Capture: Save the complete state of a digital twin view within seconds
-
Quick Access: Jump instantly to any saved state without manual navigation
-
Updating: Easy editing of existing bookmarks whenever needed
-
Personal Library: Build a personal collection of frequently used views
-
Public Sharing: Make bookmarks available to specific roles or the entire organization
Problem
Daily re-creation of the same 3-D state wastes minutes and breaks creative flow.
Capability
State Capture
Quick Access
Updating
Reasoning
One-click save, one-click return; if the geometry changes you just “Update,” never rebuild.
Trainers avoid the digital twin because set-up is inconsistent and slow.
State Capture
Quick Access
Public sharing
Instructor stores the canonical training views once; can be reused on demand in any class and shared to other Instructors.
Support engineers can’t afford the setup overhead during live calls.
Everyone struggles to remember niche views they like and might need to use later.
State Capture
Quick Access
Public sharing
Personal library
Support engineers store the frequently used assemblies once; can be reused on demand in support calls and shared.
Personal bookmark shelf allows each individual to easily save and access the views they deem important to them.
User Flows
I mapped specific user flows early on to optimize task transitions, user friction and cognitive load.
Creating a bookmark
UX considerations
-
The flow requires minimal clicks, allowing users to efficiently complete bookmark creation with just two straightforward steps ("New Bookmark" → "Done")
-
Error prevention- System blocks bookmark creation during animations to prevent invalid states
-
Immediate feedback- Instant visual confirmation on creation. Bookmark appears in list.
Making bookmark public
UX considerations
-
Role-aware context menu: all bookmark editing and sharing controls appear in one place only for authorized roles, streamlining decisions and minimizing cognitive load.
-
Users have precise control over sharing, with options clearly articulated (e.g., "Everyone" toggle and specific roles checkboxes), preventing unintended sharing.
-
After completing the sharing action, instant visual feedback reassures users that their action was successful.
Screen Designs
-
Zero-state cue- “My Bookmarks (0)” + “ New Bookmark” button teaches first-time users what to do next, preventing dead-end frustration.
-
Role-based tabs- Clear “My” vs. “Public bookmarks” mirrors mental model of private vs. shared content, building trust about visibility
-
Floating panel- Keeps the 3-D workspace visible so creators can confirm they’re capturing the exact view, avoiding context loss
-
Inline rename field, auto-focused- lets users label the view instantly, eliminating extra clicks and speeding workflow
-
“Bookmark added” confirmation- immediate feedback that the save worked, rebuilding trust in the platform
-
Instant search box- type-ahead filtering lets users find the right state in seconds, avoiding long scrolls
-
Bookmark count in tab- gives an at-a-glance sense of library size
-
Persistent “+ New Bookmark” CTA- enables quick capture even when the list is long, keeping flow uninterrupted
-
“Update to current view” action- lets users refresh a saved state in one click, eliminating the old rebuild-and-replace routine.
-
“Make public” toggle- promotes easy sharing without leaving the list, encouraging knowledge reuse across teams.
-
Role-based checklist- lets users grant access only to relevant groups, preserving sensitive data while enabling collaboration
-
Clear dual-CTA footer- blue “Make public” as the primary next step, red “Cancel” as an easy escape hatch, preventing accidental exposure
-
Visual cues (star, blue link)- show favorites, your own shared views, and others’ at a glance, preventing confusion
Testing
One list vs. tabs
1st Iteration
-
One list containing both private bookmarks and public bookmarks. Differentiated by an icon indicating if the bookmark is public.
2nd Iteration
-
Different tabs for "My bookmarks" & "Public bookmarks"
Decision reasoning
-
Clear labeling of tabs improved accessibility, and made the system more intuitive, especially for lower level roles.
-
Two separate lists decreased visual complexity, allowing users to quickly scan bookmarks without additional cognitive overhead of interpreting icons.
-
Most of the time users needed just one of the lists, depending on the task at hand, and separating the lists reduced the amount of time needed to find the bookmark they needed
Search mode
1st Iteration
-
Full search mode covers "new bookmark" button, tabs and window controls
2nd Iteration
-
When focusing on search, the field will expand to cover only the new bookmark button
Decision reasoning
-
Initially I decided, that on focus of the search field, the whole bookmarks window will "Convert" to search mode in order to reduce clutter and focus the user on the search action
-
After feedback, it was apparent that the ability to switch between tabs while maintaining the search term that the user already inserted was important
-
Moreover, there were situations where the user wanted the ability to move the bookmarks window location while still focused on the search
REFLECT
Impact
Service experts at a flagship customer now open a bookmark on 9 out of 10 sessions. no more manual camera hunting.
Analytics revealed that content creators are now using the animation builder more frequently and less intensively, indicating renewed trust in the platform.
A company conducting a POC with frontline.io noted that the feature was a key selling point during their demo to senior management.
Personal takeaways
Through this feature, I deepened my understanding of how seemingly small UX improvements can dramatically transform user workflows. The feature wasn't just about saving views- it was about addressing fundamental challenges in complex digital environments:
Empathy in Design: I learned to look beyond surface-level interactions and understand the deeper cognitive load users experience when navigating complex 3D models.
Detailed User Flows: I gained a deeper understanding of how powerful a design research method user flows can be. They revealed hidden friction points that weren't apparent in initial designs and helped me eliminate steps.
