Portfolio

Web & App applications

School Forms

Portfolio

Web & App applications

School Forms

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

To seamlessly integrate a comprehensive school-led survey functionality into our parental engagement platform, empowering schools to gather valuable insights directly from parents, developing a stronger line of communication and collaboration within school communities.

To seamlessly integrate a comprehensive school-led survey functionality into our parental engagement platform, empowering schools to gather valuable insights directly from parents, developing a stronger line of communication and collaboration within school communities.

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!

Problem statement

Problem statement

How can we develop a user-friendly and feature rich module that enables our schools to build surveys, share them with parents and increase their level of parental engagement?

How can we develop a user-friendly and feature rich module that enables our schools to build surveys, share them with parents and increase their level of parental engagement?

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.

Quick & easy surveys build

Share with parents

Concept of drafts / save for later

Analyse parents’ responses

Forms widgets

Logic functionality

Higher

Lower

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

Google Forms

“The user needs to use drop down to select question (multiple choice is the default)”

SurveyJS

“I really worry about how complex the screen is for editing a question. There are so many clickable items on the screen. This doesn’t make it easy for users to create questions.”

“It does seem very feature-rich and I like the level of customisation, but I must admit that I do have concerns about the complexity of creating the form, and how schools will manage to do this (and the potential impact it may have on support)”

“Would need good training plan for schools as I don’t feel it’s that self-explanatory”

“If it were to be implemented as is, I feel it would take quite a lot of training initially to ensure schools knew what to do, as well as probably generating Support further down the line”

“I also see schools struggling with the Logic section. Although feature heavy, it’s difficult to use and understand at first glance. I didn’t appreciate the questions were called Question 1, 2 or 3 and not the actual question”

Google Forms

“The user needs to use drop down to select question (multiple choice is the default)”

SurveyJS

“I really worry about how complex the screen is for editing a question. There are so many clickable items on the screen. This doesn’t make it easy for users to create questions.”

“It does seem very feature-rich and I like the level of customisation, but I must admit that I do have concerns about the complexity of creating the form, and how schools will manage to do this (and the potential impact it may have on support)”

“I also see schools struggling with the Logic section. Although feature heavy, it’s difficult to use and understand at first glance. I didn’t appreciate the questions were called Question 1, 2 or 3 and not the actual question”

“Would need good training plan for schools as I don’t feel it’s that self-explanatory”

“If it were to be implemented as is, I feel it would take quite a lot of training initially to ensure schools knew what to do, as well as probably generating Support further down the line”

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

Spoiler alert!

Spoiler alert!

The module development was cancelled

The module development was cancelled

While the project reached the final design stage and development was underway, we weren’t able to reach full development due to a strategic shift. Even though it’s potential is recognised, the leadership team reallocated all company resources to prioritise other pressing initiatives, with the intention to revisit Forms for future development.

While the project reached the final design stage and development was underway, we weren’t able to reach full development due to a strategic shift. Even though it’s potential is recognised, the leadership team reallocated all company resources to prioritise other pressing initiatives, with the intention to revisit Forms for future development.

Green pastures:

Step 1

User testing

Conduct usability testing using high-fi prototypes to gather feedback from users and iterate based on received feedback

Step 3

Handoff to development

Prepare design specifications and assets for handoff to the development team. Provide clear documentation and support to ensure smooth implementation.

Step 2

Review with Stakeholders & finalise designs

Present the updated designs and prototypes to stakeholders for review and approval. Gather feedback and incorporate any necessary changes to finalise the designs.

Step 4

Quality Assurance

Work closely with the development team during the implementation phase to ensure that the designs are implemented correctly and meet the desired quality standards.

Step 1

User testing

Conduct usability testing using high-fi prototypes to gather feedback from users and iterate based on received feedback

Step 2

Review with Stakeholders & finalise designs

Present the updated designs and prototypes to stakeholders for review and approval. Gather feedback and incorporate any necessary changes to finalise the designs.

Step 3

Handoff to development

Prepare design specifications and assets for handoff to the development team. Provide clear documentation and support to ensure smooth implementation.

Step 4

Quality Assurance

Work closely with the development team during the implementation phase to ensure that the designs are implemented correctly and meet the desired quality standards.

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.

DJoão © 2024 // Take you for stopping by!

UX/UI Design is my personality, and cats.

UX/UI Design is my personality, and cats.

DJoão © 2024

Take you for stopping by!

UX/UI Design is my personality, and cats.

DJoão © 2024

Take you for stopping by!

UX/UI Design is my personality, and cats.

DJoão © 2024

Take you for stopping by!

UX/UI Design is my personality, and cats.

DJoão © 2024

Take you for stopping by!