Martin Pear JCC Event Search
COVID related restrictions amplified the need for community centers to go virtual. We created a dynamic event search application that is used to present online content and provide visibility into entertainment options for those at home.
My Roles
Information Architecture
UX Design
UI Design
Personas & Action Statement
JCC Members with and without children who need an online solution for browsing virtual classes and events.
“Allison is looking for online yoga classes for teens that occur on Mondays or Fridays”
User Flows & Wireframes
After analyzing the available content and identifying which search filters were needed, I was able to begin wireframing and testing. The most challenging part of this project was creating a user experience that allowed for all the search criteria that was identified. Not only did we need a way to filter online events from in-person events, but we needed to break that down further into Activity Type, Age Groups as well as custom date ranges.
The first iteration of the event search included an expanding selection area. After testing, it didn’t seem intuitive for making multi-selections, and the “By Date” filter didn’t match the patterns for the rest of the filters. This wireframe showed events in one week increments, which looked nice at first glance, but didn’t leave much flexibility for the date search functionality.
After gathering feedback I decided to adjust the filtering format to use dropdown multi-selectors. This made the searching more intuitive and allowed users to see how many filters were applied. Adding a link to “apply filters” as well as a “clear filters” link really helped to smooth out the user experience.
In the final wireframe, I decided to simplify the search by removing the text box, and I decided to adjust the format for showing events grouped by day instead of showing only a week at a time. The quantity of events and the intention behind the date filtering options made this layout make more sense to the end user. Removing thumbnail images and adding a legend for the event format really helped to allow more content on the page at a time.
Prototyping
Once the wireframes were approved, I created clickable high fidelity prototypes. This is typically my favorite phase of a project because I get to use my visual design skills to bring the user experience to life. Sometimes this phase can even highlight areas for improvement in the UX, which I can take care of before sending it off to development.
Event Search Page
Event Detail Page
Responsive Layouts
Retrospective & Analysis
ROADBLOCKS
There were some issues between my proposed wireframes and technical roadblocks that eventually slowed the velocity of the project. For example, the first implementation of this event search did not allow an “or” search within filter types. Essentially, our action statement for the persona was not possible at the MVP stage. The additional development time pushed our timeline out a little, but largely didn’t cause any major issues.
Retrospective
Overall, I am pleased with the end result of this project and the customer has received positive feedback from the site users. I do have a concern with the format type “On Demand” that is included in the legend as an event format. I have since learned that these items can be accessed anytime and therefore don’t have a date/time associated with them. Because of this, they don’t fit within the format of this date-based lister. I would recommend removing that format and showing that content on a different page of the site, or possibly include a sidebar for On Demand content that contains similar tags to the search results.