Introduction
Schoolcomms is an all-in-one web app platform designed to revolutionise school-parent communication.
School Gateway, available on web and mobile (Android and iOS), is the parent-facing extension of Schoolcomms.
School Forms is an in-house survey builder developed as part of a suite of parental engagement tools offered by Schoolcomms.
By engaging parents through surveys, the school can collect student data, obtain consents, and gather crucial feedback to inform decision-making and enhance student support.
Role
Solo designer through end-to-end process: discovery, design, user testing, prototyping and support through development.
Platform
Web and Mobile (android and iOS)
Project Goal
Process overview
As the only UX Designer within a cross-functional team, I collaborated closely with Product, Support, and Sales to gather user feedback and validate the module's relevance for the Schoolcomms suite. With the research in place, I employed the “MoSCoW prioritisation method” to define the MVP and prioritise user needs. Using low-fidelity wireframes and other flow defining methodologies, I ensured all critical requirements were addressed. Finally, I designed the final version of phase one which contained the main functionalities and the necessary deliverables to facilitate a smooth transition to the development phase, where I actively supported the development team.
Step 1
Discover
User research & define problem
Step 2
Define
Internal workshops & Lo-fi wireframing
Step 3
Design
Design final prototypes & feedback cycles
Step 4
Deliver
Phase 1 of development starts & Post MVP recommendations
Discovery
Our existing parental engagement suite lacks a dedicated functionality to capture and manage student data effectively. This limitation has been observed by schools, who resort to using an alternative module within our platform as a workaround for parent communication and surveys. This approach results in a poor user experience due to challenges in centralising data and analysing survey results.
In order to validate the need for the new module, understand priorities and flag possible pain points, we gathered user insights and ran workshops within our internal teams.
User surveys
Surveys were conducted to gather quantitative data and feedback to understand the schools’ interest in the proposed functionality.
Support cases & wish-list requests
We analysed support cases and wish-list requests raised to identify recurring themes and challenges related to student data management.
Sales & Training team input
We ran Assumption Mapping sessions with our internal teams, who have in person contact with schools, to understand their points of view on the new module.
New module time!
Challenges
No centralised platform for schools to build their own surveys, share with parents and analyse results
Through ongoing analysis of school requests and interactions with the internal team, we realised that surveys are a key method of parental engagement. However, those surveys needed to be designed using a third-party and shared via external links. Collecting responses is a time-consuming and poorly optimised manual process.
Schools staff is constantly busy and prone to distractions by students and other daily responsibilities
Accommodating staff with diverse responsibilities and technology skills was a core challenge in delivering a complete product without loosing it’s simplicity and practicality.
We weighed two possibilities: build our own product or integrate with an already established third-party that schools could start using quickly.
Hypothesis
We anticipate that implementing a tailored and school-led survey functionality within Schoolcomms will significantly improve the line of communication between parents and schools, creating a more meaningful educational experience for students.
Improved user experience
School staff is already familiar with Schoolcomms interface and will easily utilise the new module.
Centralised data
Survey data will be stored and analysed within the same platform eliminating the need for external resources.
Increase trust
Surveys will be available on the parent facing app, parents will be more likely to participate due to convenience and familiarity of the platform.
Improve app usage
Parents will be prompt to using the app more often. Parents will have effortless access to active and archived forms, improving the user experience and interest in app.
The hypothesis can be tested by:
A/B testing
Compare user feedback between current user journey and new proposed functionality (using prototypes).
System Usability Scale survey
This tool will enable us to quickly measure the usability of the module once developed.
Responses rate from parents
Analyse the number of responses and interaction received on each form.
Gather insights from the schools to compare results from before and after implementing the module.
Module usage
Monitor the usage frequency of the module using Google Metrics and the number of surveys created & published on School Gateway.
Track app usage
Within a realistic timeframe, monitor app usage before and after implementation, considering external influences that might affect results, like school holidays or events.
Analyse completion rates for surveys and if there was an increase on engagement with other modules.
Customer satisfaction score
Compare user satisfaction with data analysis before and after the module implementation.
Results analysis
With the green light for the new feature development, we initiated a comprehensive analysis of the previously gathered user feedback. This insightful process formed the foundation for designing a product that effectively addresses our users requirements.
As a school admin, I want to:
Collect student information
[contact details or dietary information]
Collect permissions
[take photographs or access to trips]
Gather feedback
[parent satisfaction or questionairs]
Logistics
[gift aid or absence requests]
Easily share with parents
[utilise School Gateway to share surveys]
Analyse responses in house
[generate reports & ability to download / print them]
Data visualisation
[utilise school Dashboard to better visualise data]
MIS writeback
[ability to import survey responses directly to MIS]
User priorities
Based on the insights, we were able to form a list of priorities for the common user. This helped us create our information architecture. Since simplicity was the main focus, we decided to start from a very basic level of functionality with the intent to build upon in the future.
Competitor comparison chart
At this stage we’re still entertaining the idea of integrating with another software. To determine the best third-party survey platform for our user’s needs, we shortlisted two options: SurveyJS and Google Forms. We developed a comparison chart to grasp each platform's strengths and weaknesses. Secondly, we also conducted internal testing, simulating a real-world school scenario to evaluate their performance.
Comparison chart
Internal testing
Following the initial evaluation, we conducted a rapid internal test. We build real-world school scenarios and asked members of Support and Sales teams to build simple and complex surveys using the two shortlisted third-party providers.
Testing feedback
Discovery conclusion
In conclusion, we realised that while both third-parties are feature rich and could address all user requirements, their level of complexity was also concerning for the team. Integrating one of these solutions would have facilitated a faster delivery. However, it would have also introduced a jarringly complex element within the Schoolcomms suite, potentially leading to user frustration and increased number of support tickets.
Ultimately we opted for developing our own forms builder. This approach allows for seamless integration with both the established design language and the user interaction patterns familiar to our existing users. By prioritising user experience and building upon established foundations, we aim to streamline the forms functionality and ensure a positive user experience.
Define
We defined the design goals based on users requirements and the teams feedback. The main goal was to design an user-friendly, engaging and efficient module, that will integrate seamlessly with both Schoolcomms and School Gateway.
Schools will be able to build their own surveys, publish them directly to School Gateway and collect responses from parents automatically back to Schoolcomms, where reports will be generated.
MoSCoW prioritisation method
Aware of the project's potential duration, we proactively selected an Agile framework. This enabled us to prioritise delivery of a Minimum Viable Product (MVP) to users rapidly, establishing a strong foundation for future enhancements.
To prioritise feature development effectively, we employed the MoSCoW method, enabling us to categorise functionalities based on their criticality and impact.
MoSCoW method
Some cards were removed due to company policy
Minimum viable product
Informed by user needs and priorities identified in the MoSCoW method workshop, I crafted minimalist designs that address the core functionalities. My focus was on 'Must Have' and 'Should Have' features for maximum impact.
Prioritised features for a speedy MVP:
Simple interface
Basic elements for fast forms building
Customisation
Enabling schools to tailor forms to their needs
Flexible Visibility
Schools control publishing timelines and access permissions
Basic Data Analysis
Spreadsheet download for initial results analysis
Uninterrupted Workflow
Autosave saves the form as a draft helping in case of external distractions
See - Do
At this stage, I facilitated collaborative workshops with development and product teams to define the user interface and interaction flow for the new feature. Employing the See-Do methodology, a streamlined approach based on the Object-Oriented UX (OOUX) framework, we maximised user-centricity while ensuring efficient collaboration. This lean framework eliminates visual distractions inherent to wireframes, presenting information as a clear, written list of screens and functionalities accessible to both design and technical team members.
Questions to answer on the sessions:
Visual cues
What information will the user see on each screen?
Interaction points
What actions will the user be able / have to perform?
Early team involvement resulted in invaluable recommendations and feedback, shaping the foundation for a user-centric and technically sound experience. This collaborative approach ensured alignment across disciplines, resulting in a refined solution that surpasses mere user-friendliness and extends to technical feasibility.
See-Do workshop
Initial stages of the workshop sessions
User Flow
To ensure intuitive user journeys, I began by mapping out user flows across various scenarios. This served as the initial step in identifying possible pain-points and optimisation of the product interactions.
Build a form - user flow
One of the user flows created as part of this project
Wireframes
Following the See-Do workshops, I began the visual design process by creating low-fidelity wireframes. This rapid prototyping technique enabled swift and efficient communication with both the development team and stakeholders. The wireframes offered a clearer vision of the interface’s intended layout and functionality.
Initially, we aimed to streamline the process and solely utilise the See/Do findings to create high-fidelity prototypes, however, the team expressed a need for a more detailed visualisation to effectively grasp the project's requirements.
Future me retrospective
In retrospect, further along in the project, I realised that this particular step could have been omitted. Initially, aiming for efficiency, I designed only components that directly integrated with the existing interface and complemented the Design System. While this streamlined certain aspects, it also showed gaps in showcasing the module's complete functionality and aesthetic vision. Developers and QA required pixel-perfect prototypes to grasp the intricate development requirements, while stakeholders asked for a fully interactive prototype to envision the comprehensive user experience of the new module.
Design
The core design goal for this project was to develop a user-friendly, engaging and efficient module that will integrate seamlessly with both Schoolcomms and School Gateway.
Follow the established Design System
To keep the user interface familiar and easy to use on both platforms, I followed the existing Design System, this not only builds trust and makes it intuitive for users, but also speeds up development.
Build only module-specific components
I followed the atomic design process, designing and documenting new components for the module's unique features, while still following the existing visual language.
Keep It Simple “S'il vous plaît”
Focused on clear visuals and intuitive interactions. Keeping in mind an engaging user experience but also adapting the module’s accessibility to users with varying technical abilities.
Create Form
The Forms Builder page is an one-stop shop interactive editor, enabling schools to create and explore various question types to better understand which one suits best their needs.
While still following the established Design System, we also wanted to explore a new navigation approach: the Wizard.
Introducing the Form Creation Wizard!
The objective behind introducing this new navigation component was to streamline the user experience by simplifying the process into a step-by-step guide. Our goal was to provide users with a focused area where they can effortlessly create and publish a form without the need to navigate through multiple screens.
Each step within the process includes its own validation, ensuring that users can only progress once all mandatory fields are completed, minimising errors.
Additionally, the preview functionality allows the user to visualise the form in the parent facing app, ensuring it is as intended. This empowers users to make adjustments before publishing, minimising errors and improving user satisfaction.
Atomic design
Design approach:
Two-step design approach
Step 1
Modular foundation
I created individual atoms designed for reusability across different components. This ensures consistency and reduces development time, which aligns well with Schoolcomms established minimalist approach.
Step 2
Enhanced user engagement
To enhance user experience, I wanted to push beyond the established design principles. I focused on integrating clever and accessible status indicators for each component, ensuring a predictable experience. This was achieved through the utilisation of pre-established semantic colours and iconography. Additionally, I established a clear font size hierarchy to effectively convey levels of importance.
The ultimate goal was to craft interactive and engaging components that not only modernise the interface but also significantly improve the overall user experience.
After completing the complex components, I prepared them for integrating into prototypes and development. The team then transitioned to a more modular design and development approach. Working this way allowed the product, design, development and QA teams to collaboratively track and test individual components throughout the design process.
Implementing this modular approach proved to be an engaging and methodical exercise. The collaborative process ensured comprehensive input from all teams, leading to an intuitive user experience, minimised errors, and facilitated faster development.
Validation for questions
During a “Three Amigos” session (developer, designer, and product owner), we evaluated two validation approaches: real-time validation as the user builds the question and full-page validation upon clicking the "next" button on the navigation widget. Ultimately, we opted for automatic validation triggered upon exiting edit mode, where the user clicks away from the individual question. This approach reduces errors by offering immediate feedback and targeted assistance, highlighting specific issues within each question for a more advanced user experience.
Logic menu
During the discovery phase, user research revealed the critical need for a simple and intuitive user experience when adding conditional logic to questions. To understand school needs, we conducted a quick survey. Backed up by these insights, combined with competitor analysis, I designed a streamlined tool meeting user requirements while ensuring ease of logic implementation.
To maintain a clear view of the form's structure while adding conditional logic, both the question toolbox and the logic menu were incorporated into a fixed side panel. This design decision ensures the forms-designer section remains constantly visible, regardless of whether users are building the form or defining logic. This approach enables users to visualise the form's layout and conditional logic simultaneously.
Additionally, a two-colour scheme was implemented, with green signifying primary elements and orange representing secondary elements affected by the primary ones. This visual distinction further enhances comprehension and simplifies user interaction with the conditional logic system.
Main element
#44BC87
Affected element
#FCA311
Extra design bits keeping the user in mind...
Publish
Allowing users to control form recipients was a key objective. We implemented a flexible system allowing schools to define forms as public (visible to the entire school) or private (targeting specific groups of school members). Our Messaging module seamlessly integrates with our new Forms module, simplifying communication for schools. This streamlined approach empowers schools to directly contact parents linked to the forms with follow-up questions or reminders directly within the platform.
Drafts
For the MVP phase, the draft functionality was designed to be straightforward. Forms automatically save in the background every couple of minutes, safeguarding against accidental data loss due to the system's security timeout. Users can easily access and manage drafts through a dedicated menu, allowing them to continue editing or delete them as needed. Future iterations beyond the MVP aim to enhance this functionality by introducing a step-by-step form builder, empowering users to save their progress at any stage and resume seamlessly when convenient.
School Gateway app
Prioritising focused development for the initial Minimal Viable Product (MVP), we focused on equipping schools with a valuable tool that addresses a critical gap in our product suite. Aligned with this goal, we recognise the importance of promoting parent engagement and actively support their role in their children's academic lives. Consequently, to holistically address the needs of both schools and parents, we conducted a targeted survey to gain insights into parents specific requirements for the School Forms module.
Fast & easy
Understanding that parents juggle busy schedules, we designed a streamlined central hub for all school forms, ensuring quick and easy access.
Simplicity is key
Simple list that allows parents to quickly understand crucial information about each form at a glance, including submission deadlines and whether it has limited availability.
Forms history
Maintain a secure history of submitted forms, allowing parents to easily check past submissions and make sure the information is still accurate.
Following the same design principles used for the school side of Forms, I created a simple interface for parents to easily access both available and previously submitted forms. This user-centric approach allows parents to complete, review, and submit forms efficiently, focusing on the core functionalities for the MVP.
Deliver
Green pastures:
After the Snap:
Step 5
Launch and Monitor
After product launch, conduct user interviews to make sure all requirement were answered.
Follow the steps to validate the hypothesis defined on the research phase.
Step 6
Enhance MVP feautures
Continuously iterate and improve the product based on user feedback and data analysis.
Key takeaways
Learning opportunity
Although the project itself wasn't finalised, this experience was instrumental in refining my design process. I identified areas where research could be strengthened, leading me to delve deeper into user needs and competitor analysis. This newfound focus has resulted in a much clearer understanding of the target audience and their pain points. While the final product may not have been fully built, the insights gained will inform future projects, ensuring a user-centric approach from the very beginning.
Project management
I discovered the importance of breaking down the design process into manageable sections: this allows for a clearer definition of each stage's goals and eliminates unnecessary steps early on. Moving forward, I'll prioritise collaborative workshops like See-Dos over low-fi wireframes, focusing my efforts on activities that demonstrably move the project towards its final form, keeping the team involved, ultimately saving time and effort.
Personal growth
This project proved to be a valuable lesson in resilience and adaptability. By experiencing an un-developed project, I've learned to separate project outcomes from personal failures. This experience gave me a stronger ability to adjust and move forward. Ultimately, I've come to embrace the design journey itself, valuing the learning and growth that occurs throughout the process, regardless of the final result.
