Virtual Welcome Fair 2020

During the coronavirus pandemic, less than a year into my employment, there was a massive increase in the website requirements as almost all of our services began operating online.

As part of our new student arrivals period each September, we would usually host a Welcome Fair that more than 5000 students visit over the two day on-campus event. In 2020, this instead became a Virtual Welcome Fair that received over 100,000 total views in two days, with more than 200 stalls for visitors to explore.

Background and Back-end systems

Arrivals conversations began during June/July when the University was making decisions surrounding returning to campus in the new academic year – which was a very hard prediction given the pandemic. As an organisation, many staff were on furlough at the time and it was clear that we would be both under-resourced and potentially unable to produce a physical fair given the likelihood of social restrictions.

When discussions turned to virtual solutions, many very costly enterprise-standard ideas were tabled but then I had an initial idea to utilise an existing system that allows student groups to upload content to their website page. I suggested we ask our systems provider to provide groups with some additional upload options and I created a few proof of concept pages by integrating existing systems with both an SVG “stall” design and a normal flex-grid page but using CSS and background images to make it look like an exhibition space.

Our back-end systems provider Students’ Union Management System (SUMS) instead produced a Fairs Event expansion over the summer months with integrations into the Student Dashboard, our student facing portal for the management of student groups. The system allowed me to produce a variety of upload fields that would allow groups to direct upload content to their stall. When I received the API and documentation, I met immediately with our Back-End Developer and also liaised with the SUMS Developer responsible for creating the module. This was to break down any barriers immediately so as to reduce any potential issues arising within our very short timeframe.

Virtual Welcome Fair

The Virtual Welcome Fair was an interesting experience as I was initially working with the Graphic Designer on the UI/UX side whilst simultaneously not having an actual system to test and build on until early September.

Through excellent collaboration, we produced a firm set of guidelines for stalls based on a 1920×1080 stall split into three columns, in a quarter/half/quarter arrangement. Unfortunately, Chrome didn’t release native aspect ratio control until January 2021 though, but so long as the images were the correct ratio then the illusion of the stall was maintained. There were padding tricks to maintain aspect ratio before this but with an open upload

As we had to produce a set of guidelines to provide our commercial partners so they could design their stalls in advance of development this really set our plans in stone.

Stalls

The stall development eventually ended up as a complex series of IF functions, questioning whether there was content in fields and what to do if not, to display specific graphics or colour schemes and also a check to see if stalls were labelled as “premium”, which unlocked extra stall features.

Whilst writing this code I heavily commented each area of complexity as I understood from the start how complicated managing over 200 different stalls from a single template was going to become.

Responsive behaviour

Responsiveness was a challenge and in the timeframe I settled on using an entirely different mobile layout instead of collapsing the desktop version, but still reliant on the same IF functions.

I reached this decision as I wanted more control not just over column order but also the order of all the elements within them. Although such responsive classes exist within Bootstrap, meeting both device compatibility targets and maintaining good aesthetics for them all suggested two unique layouts would be a more manageable solution within the short turn-around time.


Posted

in

, ,

by

Tags: