Anna Peter
Work
About
Resume
RealServ - Form Builder
PRODUCT DESIGN
INTRODUCTION
RealServ, a specialized workflow platform, helps real estate professionals manage transactions, meet deadlines, and maintain client communication with ease. By centralizing tasks, it allows users to track, prioritize, and complete their responsibilities efficiently.
As part of the RealServ 2.0 upgrade, we introduced the form builder—a feature that simplifies form creation and management by automating repetitive tasks. My role as the UX/UI designer was to craft an intuitive, user-friendly interface that seamlessly integrates into the existing system, enabling users to manage forms with greater efficiency and ease.
MY ROLE
Research, Business Analysis, Conceptualization,
Product Design, User testing
THE TEAM
2 designers, 1 product manager, 12 engineers
TIMELINE
September 2023 - December 2024
OVERVIEW OF THE DESIGNS
Formbuilder with active forms
Form builder interface for new users
Creating a new form with three options to start with
Form builder interface for creating a form from scratch
Templates
Form builder interface for creating/editing a form element
Pop-up for setting the properties for the form element
PROBLEM STATEMENT
RealServ lacked a self-service form-building solution. Users were dependent on manual form creation or required assistance from support teams, which caused delays and frustration. This not only increased personnel costs but also hindered the efficiency of real estate professionals who needed a faster, more intuitive way to create and manage forms. How might we design a flexible, user-friendly form builder that enables users to create, manage, and automate forms independently while seamlessly integrating into their existing workflow?
THE PROCESS
WHO ARE WE DESIGNING FOR ?!
Core Users
Transaction Coordinates, Operations Teams Leads & Client Facing Roles
1. BUSINESS CONTEXT: UNDERSTANDING THE NEED
The conversation about adding a form builder to RealServ started not with a clear request, but with a growing frustration: “Everyone’s asking for it. We need to fix this.”
KEY ACTIONS
-
Discussions with product owners to understand the priorities and goals.
PO
“If we can introduce ready-to-use templates for common forms, it’ll create immediate value and drive adoption. That’s something we should deliver early.”
PO
“We want a tool that fits seamlessly into RealServ—not something that feels bolted on. This needs to work as part of the larger workflow.”
PO
"The priority is clear—streamline collaboration. Teams should be able to create, edit, and finalize forms without back-and-forth or manual errors."
PO
"This feature needs to be intuitive but robust enough to scale for complex workflows. Think automation but keep it user-friendly."
2. USER RESEARCH: UNDERSTANDING THE USERS
In a fast-paced project like this, user research has to strike a balance between depth and speed. We spoke with 10+ RealServ users - transaction coordinators, team leads from operations and client-facing roles. Instead of formal interviews, we had 20-minute calls to ask pointed questions about their pain points and daily workflows.
“Updating forms are such a pain. By the time we’ve finalized one version, another team has already made changes.”
“I just want to stop recreating the same forms every time. A good template system would save hours!”
“I waste so much time trying to find the latest version of a form. It’s buried in email threads half the time.”
But we didn’t reinvent the wheel. The product team already had a repository of user complaints and feature requests collected from tickets and feedback surveys. These were a goldmine for identifying recurring problems and patterns that aligned with what we were hearing in calls.
Dependency on non-
integrated tools
Users relied on external tools or spreadsheets to create forms, resulting in inefficiencies, data inconsistencies, and a higher risk of errors affecting critical transaction records.
Limited scalability &
customization
Existing tools couldn’t support dynamic forms or handle diverse business needs, forcing teams to compromise or rely on workarounds.
Delayed collaboration &
Approval processes
Sharing forms for review or approval was cumbersome, often requiring email exchanges or manual uploads, which slowed down time-sensitive transactions.
-
Defined key design goals
Centralization
Eliminate silos by unifying form creation, editing, and management within RealServ.
Collaboration
Enable teams to work on forms in real-time, eliminating version conflicts and manual back-and-forth.
Efficiency
Simplify adoption with ready-to-use templates and automation, making repetitive tasks faster while enhancing the overall user experience.
Integration
Embed the form builder into RealServ’s workflows to eliminate disruptions, enhance usability, and drive effortless adoption.
3. DEFINING SUCCESS METRICS
Before moving into design ideation, we needed to define what success would look like. Clear, measurable goals were essential to keep the team aligned and focused on a shared vision.
Active Users
Increase active form builder users by 20% within the first 3 months.
Feature Adoption
Achieve 70% adoption of the form builder within the first 6 months.
Efficiency Gains
Reduce manual form tasks by 40%, saving 2 hours per user weekly.
Collaboration Improvements
Improve collaboration by 50%, with fewer version conflicts and faster approvals.
4. DESIGN IDEATION
In the design ideation phase, the team and I focused on creating a seamless, intuitive solution. After discussions with the project architect and developers, we decided to leverage Form.io’s drag-and-drop builder, which automatically generates APIs - which was a huge plus for streamlining development and making the process more efficient.
The table layout maximizes information density and clarity for experienced users, while the "Create New Form" button allows for easy initiation of new forms, ensuring a seamless and efficient workflow.
Designed to avoid cluttering the interface with less frequently used options for enhanced usability.
FINAL OUTCOME
With the ideas from our ideation phase in place, I moved on to creating high-fidelity wireframes. These designs showcase the experience and functionality of the form builder tool.
Forms/Existing Users: Experienced users managing multiple forms need a clear, organized overview to locate, edit, filter or create forms efficiently. They rely on intuitive tools like search and filters to handle a growing number of forms without feeling overwhelmed.
Forms/New Users: New users exploring the form builder for the first time need a clean, approachable interface that encourages them to create forms effortlessly. Without prior data, they rely on intuitive prompts and clear options to get started.
The design prioritizes a clean, approachable interface that guides users effortlessly in creating their first form, minimizing confusion and offering a clear, engaging entry point for new users.
The "Create New Form" pop-up provides three intuitive options, offering flexibility and guidance to help users create their first form with ease and confidence.
Form from scratch: Users tasked with creating a custom form needs a straightforward, visual way to design and organize fields. They rely on the drag-and-drop feature to quickly add components, visualize the final layout in real time, and efficiently leverage Form.io components, all without requiring technical knowledge.
The workspace with a drag-and-drop side drawer where users can select pre-configured components and arrange them on a customizable canvas.
The left-side drawer with components simplifies form creation, reducing the learning curve for users of all technical backgrounds and ensuring an intuitive, easy-to-use drag-and-drop functionality.
In the form builder, users can easily add and edit components to create custom forms. They can drag and drop elements onto the canvas to design their layout in real time.
Users can immediately see how changes affect the form layout, minimizing errors. The real-time preview on the right confirms the changes before saving, ensuring the form meets their requirements efficiently.
The customization interface for a selected form component, enables users to configure detailed properties like labels, validation rules, and input formats, offering complete control over the behavior and appearance of the text field in the form.
Text field properties: Settings are logically grouped to streamline the customization process, allowing users to make adjustments quickly and efficiently. A real-time preview enables users to see the impact of their changes without leaving the editor, reducing errors and enhancing usability by providing immediate feedback before applying changes.
OUTCOMES
The final design seamlessly integrated the form builder into RealServ, simplifying form creation for new users while empowering experienced users with advanced customization. Early testing showed improved task completion rates and positive feedback on the intuitive interface.
Efficiency Gains
Real estate professionals reported saving an average of 2-3 hours per week by using drag-and-drop components and pre-designed templates.
Collaboration Improvements
Teams experienced a 45% reduction in version conflicts and faster approvals, significantly improving the form review process.
User Adoption
Within the first 3 months of release, active usage of the form builder increased by 25%, surpassing the initial goal of 20%.
TAKEAWAYS
By focusing on immediate needs while preparing for future growth, the team was able to deliver a solution that met user expectations and laid the foundation for continuous improvement. Here’s what stood out:
Prioritizing a functional MVP allowed the team to deliver on time and ensure early adoption. This approach provided users with immediate value while leaving room for exciting features down the road.
Start Small, Think Big
Design for Scalability
The design was crafted with a future-proof mindset, ensuring that advanced features could be integrated seamlessly without overwhelming users at launch. This strategic foresight minimized the need for extensive rework as the tool evolved.
Leverage User Feedback
Early conversations with users revealed their pain points and expectations, which directly shaped the design. By focusing on their input, the final tool became more intuitive, practical, and aligned with their real-world workflows.
WHAT’S NEXT?
Looking ahead, the form builder will keep evolving, shaped by user feedback. New features like conditional logic, real-time analytics, and expanded templates are on the way, with closer alignment to RealServ workflows. As we gather more input from users, each update will refine the tool, making it even more useful for real estate professionals.
Previous Project
Still curious?!
Built with passion, precision and hot chocolates
© 2025 ANNA PETER