OVERVIEW
Formstack empowers anyone to quickly and easily build custom forms without any specialized skills or coding. But in order to achieve the same level of customization once the data is collected, customers needed to be complex 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.
OVERVIEW
Formstack empowers anyone to quickly and easily build custom forms without any specialized skills or coding. But in order to achieve the same level of customization once the data is collected, customers needed to be complex 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.
TEAM
Product Designer
Product Manager
Backend Developer
Frontend Developer
QA Analyst
Product Designer
Product Manager
Backend Developer
Frontend Developer
QA Analyst
TEAM
Product Designer
Product Manager
Backend Developer
Frontend Developer
QA
TEAM
Product Designer
Product Manager
Backend Developer
Frontend Developer
QA
CONTRIBUTION
Competitive Analysis
Product Design
Requirements Definition
Stakeholder Interviews
Survey Design
User Research
User Testing
UX Microcopy
CONTRIBUTION
Competitive Analysis
Product Design
Requirements Definition
Stakeholder Interviews
Survey Design
User Research
User Testing
UX Writing
CONTRIBUTION
Competitive Analysis
Product Design
Requirements Definition
Stakeholder Interviews
Survey Design
User Research
User Testing
UX Writing
PROBLEM STATEMENT
How can we increase customization for PDF exports while maintaining the ease of use that the form builder has?
RESEARCH
Process
- Searched our ideas site for feature requests related to pdfs and did an affinity diagram to discover underlying themes and to create questions for stakeholder and user interviews.
- Interviewed 6 stakeholders from Customer Experience, Sales, and the Product team.
- Collaborated with my Product Manager to conduct 23 user interviews in two weeks. Users interviewed had voted on PDF ideas, were referred by Customer Support or Success, or replied to my in-app survey.
- Investigated the pdf export functionality and pricing at 8 competitors.
- Added findings from ideas, interviews, and competitive analysis to an affinity diagram to gain insights.
- Created a list of user stories and worked with the Product Manager and Lead Developer to triage user stories into what we could tackle in 3 releases.
Findings
My research showed that the feature should focus on:
Give customers with more control over customization by allowing customers to choose which form fields are shown in the export.
Improve the style and format of the pdf by allowing customers to make their export look more like the form.
Improve the experience of using integrations by making all of the data collected available to our API.
RESEARCH
Process
- Searched our ideas site for feature requests related to pdfs and did an affinity diagram to discover underlying themes and to create questions for stakeholder and user interviews.
- Interviewed 6 stakeholders from Customer Experience, Sales, and the Product team.
- Collaborated with my Product Manager to conduct 23 user interviews in two weeks. Users interviewed had voted on PDF ideas, were referred by Customer Support or Success, or replied to my in-app survey.
- Investigated the pdf export functionality and pricing at 8 competitors.
- Added findings from ideas, interviews, and competitive analysis to an affinity diagram to gain insights.
- Created a list of user stories and worked with the Product Manager and Lead Developer to triage user stories into what we could tackle in 3 releases.
Findings
My research showed that the feature should focus on:
Give customers with more control over customization by allowing customers to choose which form fields are shown in the export.
Improve the style and format of the pdf by allowing customers to make their export look more like the form.
Improve the experience of using integrations by making all of the data collected available to our API.
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 higher education customer
DESIGN
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).
KEY OUTCOMES
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.
DISCUSSION TOPICS
Additional topics that I can discuss in a walkthrough of this project:
- How I worked with my fellow designers and the front-end development team to release this project as the first feature using a new design system.
- How I added new user flows for this gated feature.
- How I collaborated with the lead developer and the product manager to break down this feature into three releases.
- How this project and my 3-month research project on Formstack's enterprise readiness led to a company acquisition and a completely new product offering called Formstack Documents.
© 2023 Danita Delce. All rights reserved.
