Web-based Content authoring tool
Complete redesign of a content authoring tool for immersive training
My role
Senior Director of Design
Team
2 Product designers,1 product manager, 8 engineers
Context
This tool is utilized by Strivr's internal content creation team and customers to build VR training content with no code, which is then deployed to headsets for enterprise learners
Key takeaways from this case study
Propose building a new tool
Get the Green light from leadership
Lead Implementation strategy
User and Stakeholder Research
After extensive user research with our content creation team and customers, and discussions with stakeholders on operational challenges, we identified our personas and distilled their pain points into these four key areas.
Familiarity
Users are confused by an unfamiliar interface and inconsistent interaction model.
Control
Users need collaboration or the ability to review content directly
Forgiveness
Rigid workflow makes it really hard to try new things without consequence
Access
Only works on powerful windows machines
Case to Leadership team
Given the unusable interface, slow progress from a rigid workflow, limited features, and Windows-only deployment, a complete redesign was the best solution for better scalability and broader reach. To justify this, I presented a plan to leadership and stakeholders for quickly achieving feature parity and scaling efficiently.
We created design mockups to guide discussions on how the tool would benefit both users and the business, along with an implementation plan to reach those goals.
Key highlights of the presentation to Leadership
Node-based
Web-based
Implementation plan
UX design and iteration
The key issue we had to solve for to ensure scale, was the ability to build fast and have the ability to expand the tool based on known and unknown feature requests coming in.
I proposed a node-based solution because it achieves a number of things other solutions may not:
1. Minimal UI changes when new features are added
2. By combining different nodes together, users get more than the sum of the parts, adding more functionality
3. Faster development, with clear ownership of nodes by engineers
4. Easier to maintain the interaction model as new features are built, since they all follow the same node connecting interaction
Before testing, we needed to ensure that the nodes could match and surpass the current tool’s capabilities. We collaborated with internal users to recreate existing content using clickable prototypes in the new node-based system. We then discussed how this approach could support additional features.
After a few iterations, our design was validated, and users were excited about the ability to experiment easily and non-destructively, allowing them to be more creative and explore new ideas freely.
Implementation plan and alignment
To meet the tight deadline, we had to be resourceful. I collaborated with engineering leads to source UI libraries for the two key parts of the interface: the panels, which organize different sections of the app, and the node interactions for adding, moving, and connecting nodes.
For the backend, I proposed that each engineer take ownership of a specific node or feature, allowing for faster, parallel development. One engineer focused on the frontend, handling the UI and micro-interactions.
This approach had 6-7 engineers working on backend features while design finalized the UI with another engineer. Connecting the frontend to the backend became easier, as the functionality was consistently structured.
UI and front end development
We divided the design efforts into two parts: visual design, which closely followed our brand style guide, and interaction design, which was the team's primary focus.
The centerpiece of the tool was the node editor, where content is created. Nodes needed to be easily identifiable (using icons and color-coding), easily managed (through grouping and batch editing), and easily replicated (with user-generated presets and Strivr-provided templates for common use cases).
Micro-interactions were key to streamlining workflows and reducing errors. For instance, users could connect nodes by dropping the connecting line anywhere on the node, not just the small input circle. Additionally, shortcuts for actions like adding, connecting, disconnecting, deleting, and grouping nodes were introduced to help power users build content more quickly.
Results
Users loved the ability to mix and match nodes to push their narratives and achieve more engaging experiences
"It’s incredibly cool how the playback nodes and playback phases work so that we can intelligently structure playback sequences for branching experiences! “
“Spatial layout makes branching a breeze and I know exactly where all my nodes are flowing”
Due to a more intuitive interface, customers were able to build experiences without our help. Support calls dropped by 70%
"Creator is the best tool out there for VR content creation. it's a fantastic tool!"
Production times dropped by more than 70%, due to a visual interface, ability for customers to quickly test out ideas, and preview content
Learnings and improvements
We released a modern tool that has all the features of the old one along with key new features that improved content, and we did it in a quarter of the time it took to build the first tool. The team and I are very proud of that.
Given more time and resources, we could have pushed this tool even more. Here are some things I think we could have improved:
Pro user micro interactions
Visual Design
Collaboration tools
My key contributions
As a design leader, my role was to guide the team and ensure that my proposals were implemented. This involved aligning stakeholders, validating designs with users, and creating space for engineers and designers to prioritize the project to meet the deadline. It required strong communication and interpersonal skills, along with a clear vision and a solid implementation plan.
Increased Velocity
Web-based