Gecko RSVP Page Redesign

One of the key features of Gecko Engage is the event booking functionality. Universities and colleges can embed event booking within their Gecko Form, which allows students to register for events, such as open days or campus visits.

Once a student is booked onto an event, they receive confirmation and their ticket in the form of what we term, an RSVP page. The RSVP page allows institutions to check into the event in conjunction with the Gecko Scan app.

There were a few issues with the first iteration of the RSVP page:

• The layout didn’t work all that well on mobile, and the general look and feel was lacking. Mostly, the user experience was a fairly frustrating one.
• The QR code required for checking in wasn’t prominent enough, slowing down the entire process of scanning a student into the event.
• Students couldn’t view which sessions they had booked.

The first steps

As part of a wider team, we mapped out the key functionality of the RSVP and identified 3 key areas - primary functionality (QR code, event title, name of student and time & date), secondary functionality (booked sessions) and supplementary functionality (cancel event booking, add more sessions, add guests, add to calendar). This was an important task as it now allowed me to see what was most important and design accordingly.

Look & feel

The first task I looked at was the general design of the RSVP page. I figured that this would lay a solid foundation for specific feature requirements.

One of my first observations was that the existing page wasn’t very responsive, a key flaw given that students would be checking into an event via a mobile device. We all agreed to a stacked layout, which would flow according to the pre-determined functionality importance.

In terms of design, we wanted a slick looking page - one suggestion was to style the page like an event ticket. Sections are divided by dashed borders which represent the perforations on a physical ticket, corners are rounded and fonts have been brought inline with our newly created style guide. These subtle design elements greatly enhance the page and give a much more professional look.

QR code

On the existing page, the QR code was small and not prominent, which was causing issues at the event registration. Students would open their email and have to scroll/pinch zoom before presenting to the event staff. A simple fix was to ensure that the QR code come first in the new stacked layout. By doing so, it means that regardless of which device a student is using, the code appears within the viewport, eliminating any need for the user to ‘search’ and cause delays at the registration desk.

Session management

Many events are made up of sessions, and one major flaw with the existing page, was that the user had no way of viewing or editing which sessions they had booked. We agreed that managing sessions fell under the secondary content bracket. Accordingly, we implemented a session management section within the RSVP.

With space being at a premium, we opted to show only the most important information for each session - the title, date, time and status. The user can click on a session to find out more information should they wish.

Thoughts

The redesigned RSVP page has led to higher student engagement, meanwhile event support staff have provided our product team with great positive feedback - generally, check in times have decreased, which keeps event registration flowing. All in all, we have greatly enhanced the user experience in what was quite a quick and simple win for Gecko.