Comparison
This page provides a comparison of the old and new Setsumeikai registration flows.
The old flow was embedded on the page within an iframe, sourced from a server no-one had access to and was thus unable to be styled or otherwise modified. I replaced it with a React App using React Router to maintain state between steps in the URL, styled according to designs provided by the Art team and feedback from management.
School List
Mobile
Old
New
While some ability to filter the results existed in the old flow, it was difficult to see and limited. In the new flow there is a prominently displayed search box and one-click filters for each prefecture.
Desktop
Old
New
The previous flow didn’t use a large portion of the screen on desktop, and lacked information about the schools.
Because all the available setsumeikai were listed together on a single page, it was difficult to find the one you were interested in. The new flow improves this by requiring a school to be selected before displaying only setsumeikai for that school.
Calendar
Mobile
Old
New
The old calendar was just the desktop version crammed into a mobile screen, making the days very difficult to click accurately. It was also necessary to click on a day to know which setsumeikais were available for that day.
The current calendar makes all setsumeikais for the month visible at a glance and provides full-width, easily clickable links for each of them.
Desktop
Old
New
As with the mobile view, much more information is available to parents at a glance, without needing to click on a day. We are also able to easily display filled setsumeikai, giving the impression that they’re in demand.
Form
Mobile
Old
New
We added a requirement to accept the privacy policy prior to submitting an inquiry, messages to the parent depending on the time registered for and modernised the styling considerably.
Desktop
Old
New
As with the school list, we made better use of the available horizontal space now that the form is not constrained by an iframe.
Summary
Mobile
Old
New
Desktop
Old
New
The registration confirmation screen now utlizes the full width of the screen, making it more compact and easier to read. I also added code to trigger our Google Analytics on submission here, rather than redirects to the former inquiry ‘thank you’ page.
Setsumeikai Management
School and area managers can now create, edit and see attendance for setsumeikais at their schools from with the Event site, reducing the number of logins/bookmarks needed.
Inquiry Sheet
Desktop
Old
New
This page within the event site replicates the functionality of the corresponding Google Sheet, without the need to manually update the inquiry list. On this page inquiries will always be up to date when the page is loaded.
Attendance Sheet
Desktop
Old
New
Clicking on a setsumeikai name/time from the previous page takes you to this page, which shows the details of parents/children attending that setsumeikai.