Overview
Formstack - Advanced PDF Exports
Formstack empowers anyone to quickly and easily build custom forms without specialized skills or coding. However, to achieve the same level of customization once the data is collected, customers need high-level technical skills to stitch together third-party integrations.
As the only product designer on my cross-functional team, I was responsible for the end-to-end design process.
Key Takaway
Advanced PDF transformed the user experience for customizing exported documents, making the product more enterprise-friendly.
This project improved efficiency and elevated customer satisfaction. This project was also the first project released after a design system redesign.
Role
UX Designer
UX Researcher
Team
Back-end Developer
Back-end Developer
Front-end Developer
Product Manager
QA Analyst
Deliverables
Competitive Analysis
Product Design
Requirements Definition
Stakeholder Interviews
Survey Design
User Research
User Testing
UX Microcopy
Problem Statement
How can we increase customization for PDF exports while maintaining the ease of use of the form builder?
The submitted page looks horrible. The exported PDF file looks even worse. I can’t believe it is not possible to even see my logo in the submitted forms. There should be a way to make it look decent. I can’t just print and hand a boring PDF to a customer.
– An enterprise customer
Research
Process
- Searched our ideas site for feature requests related to PDFs and created an affinity diagram to discover underlying themes and create questions for stakeholder and user interviews.
- Interviewed six stakeholders from Customer Experience, Sales, and the Product team.
- Collaborated with my Product Manager to conduct 23 user interviews in two weeks. The users interviewed had voted on PDF features, been referred by Customer Support or Success, or replied to my in-app survey.
- Investigated the pdf export functionality and pricing at eight competitors.
- Added findings from ideas, interviews, and competitive analysis to an affinity diagram to gain insights.
- Created a list of user stories and colllaborated with the product manager and lead developer to triage user stories into what we could tackle in 3 releases.
Fun Fact:
By using psychology, nudge techniques, and personalizing each email, I achieved a 100% response rate to my email invitations for user interviews. One participant, who was on vacation during our interview period, insisted on speaking with us the week he returned.
Research
Findings
My research showed that the feature should focus on:
Control
Customers can customize the fields that appear in the export and can add a logo to their export.
Style
The overall style of the export looks professional and modern with more efficient use of space, better page breaks, and maintains the information hierarchy of the form.
Integration
All fields are available to integrations making it easier for customers to set up since there is 1:1 parity.
Challenges
Innovating Under Constraints
This particular feature had a few additional design challenges. Early in the design process, it was decided that this would be the first project released in a new design system. Additionally a few days before handoff, it was decided that the customization features would be gated to a certain subscription level. The existing export feature was available to all Formstack customers.
Design
Final Design – Settings
For the settings, I implemented user-friendly design patterns I had already started on other settings pages, including:
- Just-in-time help with direct links to relevant articles, not just the general knowledge base.
- Progressive disclosure of settings to prevent cognitive overload.
Since this feature greatly increased the number of options, I added the ability to copy settings from a previous form. Due to memory constraints, this feature is limited to the last 5 forms a user exported.
Design
Final Design – PDF
For the actual PDF export, I focused on:
- Increased Scannability: Improved by increasing white space and maintaining the same information hierarchy as the original form.
- Streamlined Process: Eliminated extra steps by making metadata fields optional and ensuring all fields are available via API. These changes reduced the post-export manual work for customers.
Outcome
Learnings
Adapting to changing requirements: This project had two major last-minute changes: gating customization features and implementing a new design system. It underscored the importance of flexibility, and I was able to meet the design deadline despite these changes.
Importance of design systems: Implementing this project as the first to use a new design system highlighted the value of consistency, efficiency, and collaboration with the design and front-end dev teams.
Balancing user needs with business goals: The tier-based access to advanced customization features balanced user satisfaction with company goals.
Outcome
Customer Feedback
Positive Feedback: Out of 23 interviewees, three sent personalized emails expressing excitement about workflow enhancements.
One customer reported reducing their process steps from ten to
three.
Subscription Concerns: Two interviewees praised the updates but were disappointed they couldn't use them due to their lower tier subscription plans.
Post-Launch Sentiment: Two weeks after launch, customer
support tickets and the ideas forum showed overwhelmingly positive feedback. A few customers were unhappy about updating workflows built around the old PDF style.
Outcome
Impact
This project and my 3-month research on Formstack's enterprise readiness contributed to the acquisition of WebMerge and the launch of Formstack Documents.
During PDF user interviews, I found that many customers used WebMerge for the two most requested features we couldn't achieve without an infrastructure overhaul:
- Printing a blank form identical to the online form, providing a single source of truth.
- Exporting a PDF with data that matched the digital form's appearance.
