Laserfiche | Page Builder
The goal of the page builder product is to modernize how Laserfiche customers can create surveys, forms, and web pages.
Our team took in thorough feedback from current customers and identified our survey and form builder as a key product that needed an uplift. Our goal was simple: To create a seamless and intuitive designer with a minimal learning curve. This case study covers the product life cycle.
My Role
The previous survey builder
Pain points:
Disruptive field settings
Cumbersome IA
Difficult customization
Linear form layout
I led the User Experience (UX) and and User Interface (UI) design for this project. My main point of contact was with the technical product manager (TPM) as well as the software engineers. Our whole team often collaborated on designs and requirements through planning and backlog grooming sessions. By utilizing the Agile development methodology we were able to create an MVP product within 7 months. The product was released in mid 2020.
My Responsibilities
Revamp the canvas interactions for survey and form building
Research and provide recommendations on the micro-interactions of survey building
Identify a more intuitive and seamless method to change field settings
Update the Information Architecture and UI for customizing themes and styles
Ensure the new tool adheres to Laserfiche branding
Research
Early research included internal audits of the current survey tool and addressing usability issues as well as key feature gaps in comparison to competitors. During this phase, I wrote a user test that asked testers of survey and page builder competitors to run through their software.
I needed to learn:
What they liked and disliked about their software
What were critical features they had to have
How they accomplished tasks such as copying, pasting, and deleting fields
How would they customize their theme?
Did they prefer to use UI options or keyboard shortcuts to multi-select fields?
What was their thought process when building a page?
This was a massive deep dive that proved to be extremely valuable for the team moving forward.
Competitive screenshots showing layouts and features related to date/time fields
What fields, elements, and blocks will we support?
Through internal audits, user research from current users, and competitive research, we began to understand the table stakes. By sharing research with the Scrum team and collaborating with my product manager, we honed in on key elements and fields we needed to support.
Questions from one of my usability test scripts
Early wireframes of canvas micro-interactions
This wireframe references how users can move individual fields, multi-select fields, and how fields interact with each other in hierarchies. These micro-interactions were designed with our user be leveraging user research. In addition to these micro-interactions, sketch wireframes were used for determining the Themes IA, canvas layout, and field rules.
Collaborating with the Scrum team
Mockups and Prototypes
When it comes to creating designs, mockups can take varying forms. For this project I created a fair amount of low and mid-fidelity designs. Rather than using Balsamiq, I leveraged gray scale designs and communicated this with the team to ensure there was no confusion on the state of designs. When it was time to move to high-fidelity, it was easy enough to leverage the selected mid-fidelity files and update them using our design system.
Design Shares
Often times I will share designs with my team during pre-planned meetings. I’ve found it’s just as important to share with developers as it is to share with fellow designers. Not only does it help me understand the technical limitations of what can and can’t be done, but it also gives me the opportunity to share key research and get them involved in design thinking.
Test, iterate, test, iterate
Validating Designs
Since this project started with the intention of creating a brand new experience for the user, testing the designs was critical. I leveraged UserTesting.com and Optimal Sort both internally and externally to ensure we were creating the right solution. After testing was done, the next step was to analyze the data and synthesize findings for the team to view. The goal was to provide valuable information in these sessions that result in actionable recommendations to help better the experience and shape the product roadmap.
Before & After
Before: Field settings blocked the canvas and did not utilize real estate to the right side of the page
Before: Theme customization was a huge pain point due to the nesting of elements. It was a common complaint from customers.
Before: Field rules were tied to the global navigation which confused users
After: Field settings were moved to a right pane which kept clarity on the canvas. Additionally adding a right pane matched a common pattern found in other page builders.
After: We got rid of the nesting experience and added a simple accordion along with a restructured IA of every customizable setting. This experience tested extremely well with users.
After: Field rules were added as a local navigation element in the right pane. Users could now see any rule changes in real time on the canvas.
UX Reviews & Outcome
Pictured to the right is my TPM and couple QA engineers. This was taken during a QA mobbing session where the page builder was tested for technical and UX/UI bugs. Most of the time I will perform UX reviews by myself. In these instances I will check the product vs. the design specifications across different browsers and running through different test cases. Additionally, I will sometimes leverage QAs or other UX and UI designers to get a fresh pair of eyes on the product.
The page builder released after final usability testing sessions at Laserfiche’s Empower conference in February 2020. It tested extremely favorable with our users - many users couldn’t wait to get their hands on the product. During one test, one participant actually cried out of joy. She stopped mid test and told me, “You have no idea how much time this going to save for me. I wear multiple hats and writing CSS and Javascript is not one of them. The way you made the canvas a grid experience where I can click, drag, and resize fields is going to be a game changer.”
The product released shortly after the Empower conference and had an 85% adoption rate from our cloud customers. The product turned out to be a game changer for our users.