Web & Mobile Survey Tool for Schools and Parents
A fully integrated school-led survey tool that streamlines student data collection, improves engagement, and replaces inefficient third-party solutions.
What
Web & Mobile app
Tools
Figma, Mural
Industry
Education
What I bring to the table:
As the UX Designer on this project, I worked closely with my Product Manager to research, define, and design a solution that met both user and business needs. My contributions focused on:
Leading user research
Conducted internal interviews and usability testing to uncover gaps in parental engagement.
Synthesising insights
Analysed research findings to validate user needs and inform key design decisions.
Mapping workflows & system needs
Created user flows, journey maps, and design explorations to assess feasibility and ensure a seamless user experience.
Designing an intuitive form-builder
Created a user-friendly experience tailored for non-tech-savvy school staff, ensuring ease of use and accessibility.
The problem
Schools needed a centralised way to collect, manage, and analyse student data, but existing solutions created disconnected workflows, inefficiencies, and security risks. Without a dedicated tool, schools relied on Google Forms, Microsoft Forms, and third-party survey tools, leading to scattered data, manual processing, and compliance concerns.
The lack of integration resulted in:
Fragmented workflows
Schools manually transferred responses across platforms, increasing errors.
Low engagement
Parents hesitated to engage with forms outside the school’s ecosystem.
Security & privacy risks
External tools didn’t meet school compliance needs.
Research & insights
To understand the need for an integrated survey tool, we conducted usage analysis, internal research, and user surveys.
User behaviour
Schools were increasingly using Google Forms to send surveys, highlighting a missed opportunity to keep engagement within the Schoolcomms ecosystem.
Support cases & requests
Schools frequently requested a built-in form feature to streamline student data collection and reduce manual work.
Gap analysis
By reviewing school workflows and challenges, we identified a clear demand for a centralised, secure, and easy-to-use survey tool that aligned with existing school systems.
These insights confirmed that an in-house solution could streamline workflows, improve security, and enhance engagement.
Key findings
No built-in survey tool within the platform
Through research and internal workshops, we identified that schools relied on third-party tools for surveys, leading to fragmented workflows and security concerns. This highlighted an opportunity to design a native solution that simplifies survey creation, sharing, and analysis—all within the platform.
Survey processes were inefficient for staff
School staff faced time constraints, manual data entry, and tech skill gaps, making third-party tools difficult to use. To address this, we prioritised a low-friction experience that would require minimal training while integrating seamlessly into existing workflows.
Hypothesis: What we expected to solve
Based on our research, we hypothesised that an integrated, school-led survey tool would:
Improve efficiency by reducing reliance on third-party tools.
Enhance usability by simplifying the survey creation process for non-tech-savvy users.
Increase engagement by keeping surveys within a familiar platform.
By defining a clear hypothesis, we established key assumptions, guided the design process with focused objectives, and set measurable criteria for success. This approach ensured that our solution addressed real-world needs while allowing for data-driven refinements throughout development.
Competitor analysis & internal testing
Competitor analysis
To assess existing survey solutions, we compared Google Forms and SurveyJS, focusing on usability, integration, and accessibility.
Google Forms
Simple and user-friendly but lacked integration and school-level control.
SurveyJS
Powerful and flexible, but overly complex for non-technical users.
Why external tools fell short
Manual processes, steep learning curve, and limited validation options made external tools inefficient.
Key takeaways: What we prioritised in our design
We prioritised ease of use over advanced complexity, ensuring a streamlined interface for non-tech-savvy school staff.
Built-in integration was a must, eliminating reliance on third-party tools.
Internal testing
To complement our competitor analysis, I conducted an internal user testing session using a Mural board with two real-world school scenarios. Support and Sales team members were asked to create surveys replicating the typical challenges faced by schools using external tools.
Participants highlighted usability frustrations, complexity in logic features, and the need for better integration. These insights reinforced our design approach, prioritising ease of use, accessibility, and integration.
Bellow:
Insights gathered from internal user testing feedback.
Research conclusion
Initially, we considered integrating a third-party solution to accelerate development. However, while feature-rich, these tools were overly complex and risked frustrating users, leading to increased support needs.
Through thorough discovery work, we confirmed that a custom-built form builder was the best solution. By aligning with existing user patterns and prioritising usability and integration, we ensured a seamless, intuitive experience that reduces friction, improves adoption, and enhances overall user satisfaction.
Define
Defining the solution
With a clear understanding of user needs, we moved into defining the structure and functionality of the survey tool. Our goal was to create a straightforward, efficient experience for school staff while ensuring the design aligned with existing workflows.
We started with a See-Do model to map out the user journey, but as development progressed, additional wireframes were created to provide clarity for stakeholders and engineering. This phase ensured that every interaction was intentional, reducing complexity while maintaining flexibility for future improvements.
User priorities
Using our research insights, we identified key priorities for our primary users—school staff. These priorities shaped our information architecture and feature set, ensuring a simple, intuitive experience from the start.
Since ease of use was critical, we focused on core functionality first, with the intent to expand features in future iterations.
Feature Prioritisation: MoSCoW Workshop
To define the Minimum Viable Product (MVP), I facilitated a MoSCoW workshop with stakeholders, aligning on core user needs while balancing feasibility and impact. This process ensured we focused on the most critical features for a successful first release.
This process ensured we focused on the most critical "Must Have" and "Should Have" features, delivering immediate value while keeping the scope realistic for a first release.
MoSCoW method
Must have
Could have
Should have
Won’t have
Key MVP features
Simple interface: Fast and user-friendly form creation.
Customisation: Schools tailor forms to their needs.
Visibility Controls: Schools manage publishing and access.
Data Analysis: Export results as spreadsheets.
Autosave: Prevents data loss in busy school environments.
Defining the experience
See → Do
At this stage, I facilitated collaborative workshops with development and product team to define the user interface and interaction flow for the new feature. We used the See → Do methodology, a lean approach rooted in Object-Oriented UX (OOUX), to structure what users see and what actions they can take on each screen.
The goal was to create a process that encouraged participation from all team members, regardless of design expertise. By focusing on structure rather than visuals, I aimed to make it easier for non-designers to contribute meaningfully. However, during the workshop, it became clear that See → Do was more beneficial for design decisions than for cross-functional alignment. While it provided a structured way to map interactions and define component usage early, the team still required more detailed wireframes to fully grasp functionality, leading to an additional design step.
Bellow:
Early stages of the See → Do workshop.
Wireframes
After the See → Do workshops, I created low-fidelity wireframes to further define layout, structure, and interactions.
These wireframes served as a bridge between See → Do and final designs, allowing stakeholders to visualise workflows and engineers to anticipate technical constraints. However, in hindsight, this step could have been streamlined, as iterating directly in high fidelity would have saved time without sacrificing clarity.
Bellow:
From design to publish: One of the user flows created as part of this project
Future me retrospective: Rethinking low-fidelity wireframes
Looking back, I realised that low-fidelity wireframes added little value in this project and actually slowed down the design process. My initial goal was to skip this step and go directly from See → Do to high-fidelity prototypes, leveraging the existing design system and component library to maintain consistency.
However, the team requested detailed wireframes, which meant spending extra time refining layouts at a low-fidelity stage—time that could have been better spent iterating in high fidelity. In hindsight, jumping straight to high-fidelity designs would have:
Saved time by eliminating unnecessary rework.
Kept iteration focused on the final experience.
Still provided clarity for devs and stakeholders.
Going forward, I’ll advocate for bypassing wireframes and focusing solely on See → Do and high-fidelity when a strong design system is in place—ensuring efficiency without sacrificing team alignment.
Final design
The goal of the final design was to create a user-friendly, efficient, and scalable module that seamlessly integrates with both the school and the parent facing side. To achieve this, I followed four key design principles:
Follow the established Figma Library
Ensured design consistency across platforms, fostering familiarity and simplifying usability for schools and parents.
User-centric design
Every decision was guided by research, addressing user needs and optimising workflows.
Keep It Simple “S'il vous plaît”
Kept interactions straightforward and accessible for varying technical abilities.
Scalability & integration
Designed for long-term growth while aligning with existing business strategies.
Design approach
My design approach was guided by two key principles: modular foundation and enhanced user engagement, ensuring a scalable and intuitive experience.
Modular foundation
The system was designed with flexibility in mind, leveraging a component-based structure to maintain consistency across screens. This approach streamlined development while allowing for future scalability.
Designing for user engagement
The interface was structured to promote ease of use and intuitive interactions, aiming to reduce friction and encourage engagement. By focusing on clarity and accessibility, we intended to create a seamless experience that would support user adoption.
Side note: Advocating for a strong Design system
I strongly believe that a well-structured design system is essential for creating scalable, user-friendly products. As a designer, I don’t see it as a limitation but as an empowering framework—one that removes unnecessary decision-making, allowing me to focus on usability, functionality, and problem-solving rather than pixel-perfect alignment.
In this project, I followed Atomic Design principles, structuring components from atoms to organisms, ensuring reusability and consistency across the platform. I advocate for designers and developers to build, contribute to, and trust their design system, as it strengthens collaboration between both teams, speeds up workflows, and ultimately results in a more intuitive user experience.
Ok, back on track: Atomic design
To maintain consistency and efficiency, I structured components following Atomic Design principles, breaking them down into:
Atoms
The smallest UI elements, such as buttons, input fields, and icons.
Atoms
icons
input field
Option 1
trigger
options
Option 1
action
Add new option
Above:
Example of an atomic component used in the design system.
Molecules
Combinations of atoms that form functional groups, like a search bar or a dropdown menu.
Molecules
edit-mode / default
Option 1
edit-mode / selected
Option 1
edit-mode / filled
Option 1
edit-mode / hover
Option 1
edit-mode / validation
Option 1
This field is required.
view-mode / default
Select an option
view-mode / validation
Select an option
preview-mode / closed
Select an option
preview-mode / open
Select an option
Option 1
Option 1
Option 1
Above:
Example of a molecule combining multiple atomic components.
Organisms
Larger, reusable sections composed of molecules and atoms, such as form builders and dashboard panels.
Organism
Add title
This is a description
Select an option
Option 1
Option 1
Option 1
Add new option
Required
Above:
Example of an organism composed of molecules and atoms.
By structuring the design this way, I ensured scalability and reusability, allowing the system to evolve without unnecessary redesigns. This approach also improved the handoff process—streamlining development while enhancing usability for end users. With a clear structure in place, developers could work more efficiently, and visual consistency was maintained across the platform.
Bellow:
Example of reusable components used in the design system for this project.
High-fidelity prototyping
Form builder: creating & managing surveys
Following insights from the See → Do workshop, I translated user flows and low-fidelity wireframes into high-fidelity prototypes, integrating all essential components into our existing Figma Library. This interactive form builder empowers schools to create, customise, and manage surveys efficiently.
What is it?
A streamlined form creation tool designed to simplify survey-building. Schools can explore various question types, structure forms with ease, and reorder elements for flexibility.
MoSCow priorities
Validation
In a ‘Three Amigos’ session, we collaborated across disciplines to refine the validation approach, balancing usability and technical feasibility. After testing real-time validation and full-page validation, we implemented automatic validation triggered upon exiting edit mode, ensuring users receive immediate feedback while reducing form errors.
Bellow:
Built-in validation system that highlights input errors in real time, guiding users to correct mistakes effortlessly.
Logic menu: simplifying conditional logic
Our research showed that configuring logic for survey questions was a major pain point. To address this, we developed a logic menu, enabling schools to create rules that dynamically adjust form flow based on responses.
What is it?
A visual rule-builder that allows schools to guide respondents through customised survey paths with conditional branching.
MoSCow priorities
To maintain a clear view of the form’s structure while configuring logic, the question toolbox and logic menu were integrated into a fixed side panel. This ensured users could always see the form layout and logic side by side, whether they were adding questions or defining conditions, reducing confusion and improving efficiency.
To visually distinguish primary and dependent questions, I used a two-colour system: green for primary and orange for secondary. This improved scanability and user comprehension. This visual distinction improves comprehension and streamlines user interaction with the conditional logic system, making it easier to follow question dependencies.
Primary question
#44BC87
Secondary question
#FCA311
Settings & publish: controlling form visibility
Schools needed flexibility in deciding who could access forms and whether they were public or private. To address this, we designed a publishing system that let schools control availability, permissions, and messaging.
What is it?
A flexible publishing system that allows schools to manage form recipients, define visibility settings, and streamline communication.
MoSCow priorities
Drafts: saving work without interruptions
To prevent data loss and support a seamless workflow, automatic drafts save progress in the background, allowing users to pause and resume anytime.
What is it?
An auto-save system that ensures drafts are securely stored, letting users edit, manage, and restore past versions when needed.
MoSCow priorities
School Gateway
To support seamless communication between schools and parents, we developed a parent-facing interface as part of the School Forms. While our primary focus was on school staff, this integration ensured a complete experience, allowing parents to easily access, complete, and submit forms.
Fast & easy
Designed with busy parents in mind, this central hub provides quick and intuitive access to all school-related forms.
Simplicity is key
A streamlined list view highlights essential information at a glance, including submission deadlines and form availability.
Forms history
A secure archive of submitted forms allows parents to review past submissions, ensuring accuracy and easy record-keeping.
Following the same design principles used for the school-facing side, this interface prioritises efficiency and clarity, ensuring a seamless and intuitive experience for parents while aligning with the existing design system.
Design refinements: evolving the user experience
Throughout the design process, I refined key areas based on internal feedback and iterative testing, ensuring a more intuitive experience within project constraints.
Improved information hierarchy – I adjusted layouts to prioritise key actions and reduce cognitive load. Labels and field groupings were refined to improve scanability, helping users locate and complete tasks faster.
Enhanced form interactions – Input behaviours were fine-tuned to clarify required vs. optional fields, improve validation messaging, and reduce friction when navigating forms.
These refinements were key to delivering an intuitive experience while balancing technical and business constraints.
Delivery
Spoiler alert!
The module development was cancelled
While the project reached final design and was in development, a strategic shift led to Forms being deprioritised in favour of other initiatives. Despite this, its potential was recognised, and there were plans to revisit it in the future.
Final touches: preparing for development
Review with stakeholders & finalise designs
I presented the latest high-fidelity prototypes to stakeholders for feedback and approval. Stakeholder feedback, along with internal testing insights, guided refinements before finalising the designs for development.
Handoff to development
With the designs finalised, we prepared detailed documentation and assets to support a smooth handoff, ensuring the development team had all necessary specifications.
After the snap: the road not taken
Quality assurance
Ensuring the implementation met design standards through close collaboration with the development team.
Launch & monitor
Conducting user interviews and tracking key metrics to validate assumptions and improve usability.
Enhance MPV features
Iterating based on feedback and expanding functionality to address evolving user needs.
Key takeaways
Refining my process
This project, despite not reaching full development, was pivotal in sharpening my design approach. It reinforced the importance of deeper user research and competitor analysis, ensuring a more user-centric foundation for future projects.
Streamlining workflows
Breaking the design process into clear, goal-oriented stages proved essential. Moving forward, I’ll prioritise high-fidelity prototyping with structured workshops like See → Do, ensuring efficiency while keeping teams engaged.
Personal growth
Navigating an unfinished project taught me resilience and adaptability. I’ve learned to embrace the design journey itself—valuing the learning, collaboration, and problem-solving that happen along the way, rather than just the final output.
👆 Back to top