A Case Study of Two Open Houses

I thought I’d take a slightly different approach with these versions of the same event, four years apart. In both cases, the project scopes were very similar. The big difference was, in 2012 there was a great deal of upfront interaction design and IA, experimentation and hand-coding of features such as wayfinding, registration, check-in and other features. Whereas, in 2016, with a little plugin customization by our developer, I put together most of the responsive site myself in WordPress, taking a fraction of the man-hours to do it, and ending up with arguably a better experience. It helped that our client decided to trim the check-in and contest features this time around.

I’d suggest reading through both versions to see the difference in design and output, but you can just jump to the 2016 WordPress version if you’d like.

2012

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.

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

Application / user flow for mobile and desktop
  • Mobile home page
  • Registration
  • Display listing
  • Filtered displays
  • Individual display
  • Check-in tracker
  • Planner authentication
  • Contest entry
  • Open House live

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.

I’ve included a comp of the application/site flow for both mobile and desktop above, while just below that and to the right, you can see UX design comp slideshows for each of the sites. Unfortunately, the Axure prototype is no longer available online. If you simply want to see how the mobile version looked and behaved, the demonstration video below is ideal.

  • Desktop home page
  • Display listing
  • Filtered display listing (full details)
  • Map page for displays
  • Check-in tracker
  • Planner

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.

2016

What I did:

  • theme customization
  • site build
  • display filtering & registration form interaction design
  • project & client management
Desktop Homepage
Desktop display filtering

Analysis & Research

It had been four years since BCIT’s last Open House. We built the Open House 2012 event site in jQuery, with two different versions for mobile and desktop. For 2016, the scope included some registration forms and basic static content, but needed to have a robust, filterable event display guide with campus maps/wayfinding.

Similar to 2012, this project was low on upfront analysis, but this time it was because of having a better idea of what we were doing and the decision to leverage some fairly slick WordPress plugin-ry. There were also other gamification (neartuit) and wayfinding features of the live event, which the site had to accommodate and promote.

Scope:

  • Sortable display, entertainment and amenity listings with campus maps/wayfinding.
  • Events and amenities listings with maps.
  • Advance online attendee, volunteer and school tour registration.
  • Responsive (mobile-first) design.

This site made use of Gravity Forms for registration, while the filterable event guide was a highly customized implementation of The Events Calendar plugin by Modern Tribe.

While this event has now passed, you can still visit the site for now.

Top