Open Evening & Interactive Map


Peter Symonds College run two Open Evenings a year for prospective students and their parents, where visitors can see everything that the college has to offer.

Open Evening includes not only the opportunity for visitors to visit individual courses and the lecturers concerned but also attend talks by the Principal, see live music from student bands and view demonstrations of sport and enrichment activities.

The local colleges compete actively with regard to recruiting students, open evenings often take place on the same nights and many adverts can be seen in the local press.

Peter Symonds College were looking for something unique in the sixth form/Further Education sector and decided that an app would set them apart from the competition.

The Brief

The overall brief was to create an interactive web application to engage both student and parent visitors with a view to boosting visitor engagement and recruitment. It should also:

Show a full course prospectus

Show information about talks and presentations

Allow students to create ‘My Visit’ by picking the courses and talks that interest them. Include a page that gathers everything together in one place.

Show everything chosen on a detailed interactive map – every course, talk, presentation and point of interest on every room, floor and building in the college!

Be so easy to use, that users don’t even think about it

Provide a survey to get user feedback if improvements are necessary

Be something that no other college has

Be an app but not require an app store login or sign up

Have very few code dependencies so that the app is very small in size and users get a lightning fastest experience

The Solution

Between 2017 and 2020, I was solely responsible for the design, creation and maintenance of the Open Evening web app.

Open evening app landing page on mobile phone

The app achieved it’s objectives by:

Utilising my combined experience in graphic design and web development to build a part designed/part coded SVG interactive map

Being a single page progressive web application (PWA) coded in React it gave users a lightning fast experience

Being a PWA users were not hindered by needing to sign up to an app store

Interactive map on mobile phone

Drawing the map was a long process and I created every single room, building, staircase, etc. in Adobe Illustrator. The layers were then processed and edited as SVG layers and made interactive using React based Javascript.


The app had over 1000 users on each Open Evening and boosted visitor engagement and recruitment.

Environmental science subject details

Feedback from users:

‘It was very useful when I looked around the college and helped me find out even more about the subjects.’

‘Easy to organise visit for the subjects we wanted to see.’

‘Easy to access and really good user experience.’

Feedback from PSC Senior Management:

‘I think it’s fantastic – really easy to use and so helpful.’

‘This is so good!’

Map also Utilised for the Student Handbook and Taster Days

The map proved so popular and useful for open evening, that I then created additional implementations that integrated with the Symfony PHP framework so that the map could highlight rooms and buildings in the Student Handbook and as part or Year 10 and 11 Taster Days.

Interactive map on ipad

If you would be interested in a similar project, then please: