A jQuery Event Program Guide

For BCIT's 2012 Open House, we built a jQuery site which included registration and contest entry forms, a full program guide with wayfinding (maps), display check-in, authenticated planner and more.

What I did:

  • business analysis & requirements
  • IA, wireframes & prototypes
  • project lead & testing lead

Analysis & Research

This project was necessarily low on research and requirements due to a very short time-frame. However, I have included it in my portfolio as it had some unique mobile features and represented a very intense and focused team effort. After some very quick research of event apps, we proposed a mobile/desktop experience using device GPS/maps for visitors to navigate and interact with the many events, amenities and displays in our Burnaby campus building locations.

Note: You can also see a very brief sample of the 2016 version of this on my WordPress page.

Scope

  • Sortable display listings with maps and voting feature.
  • Advance planner (save with Facebook).
  • Events and amenities listings with maps.
  • Advance online registration.
  • Open House Challenge display check-in contest.
  • Open House Live voting and social media feeds.

Interaction Design

Slider

L-R Open House 2012 sitemap & userflow, desktop and mobile landing pages. Click any for overlay.

I decided to do an interactive, medium fidelity prototype using Axure, including early wireframes. This allowed me to plan both desktop and mobile flows and interfaces using our standard site Chrome for desktop and j-Query mobile UI elements. I was able to reach a reasonably good approximation of the final product fairly quickly for client sign-off to avoid rework and development pain.

Slider

Axure mobile prototype screens ~ home, registration, displays filter list, single display, planner, check-in, social and contest entry. Click any for overlay.

Slider

Axure desktop prototype screens ~ home, displays filter list, single display, planner and check-in. Click any for overlay.

Iteration, testing & feedback

  • The client was involved in many design iteration sessions.
  • Using both staff and student testers, we tested all main mobile features on all major device types to discover browser/OS issues. Several of our internal team went around campus wayfinding and testing the GPS accuracy.
  • As this project was very content-heavy, there was a lot of back-and-forth client expectation and scope management involved for me.

If a picture says 1000 words, this video of the final product in action on an iPhone must have a lot to say.

Outcome

We didn’t get a lot of deep analytics and, unfortunately, promotion during the Open House event was very ‘in-person’ and paper-based. However, we saw a number of people using the mobile site to check in at the various displays with the PINs, and to vote for displays/events on their devices, but this didn’t translate to contest entries once the criteria had been met. As we encourage but don’t enforce advance registration, that saw little uptake as well. So, anecdotally, the application was being used, but the key conversions were typically not being hit on devices. Perhaps the best outcome was for my team. We gained valuable experience building specifically for mobile. A key learning was that none of us really wants to use j-Query mobile for major development.

Work Home →

Top