Event Block: Initial Design

Caerus Karu
5 min readFeb 3, 2017

--

The day has finally come for one of the nation’s most prominent universities to reach out and upgrade their web services. In an age where being connected is one of many factors considered by prospective students and parents alike, a 21st-century web presence is now seen as a priority.

To that effect, we have been tasked with creating a fresh, interactive experience for Campus Services at Mystery University (a division of MingCo). We couldn’t be more delighted to have this opportunity. To represent the potential our firm has for their department, we are developing a prototype design project for one of their many services. In this case, we are focusing on event management.

There are often questions on college campuses: “what’s going on this weekend?” “when is that lecturer coming in from Harvard?” “where’s the food?” Most of these questions go unanswered, or live behind a wall of obscurity. Some universities try to use Facebook as the remedy, but even that solution is scattered amongst whatever group or individual makes the event, and excludes whatever population does not use Facebook.

The current view for the Tufts Events calendar (you need to scroll significantly just to get minimal functionality)

The above image is from a well-respected institution, Tufts University, and can be seen in full at events.tufts.edu. This example is not isolated, as many other universities adopt a similar model of obscurity and bad design. It is our goal to change this by adding a streamlined, engaging interface for discovery, exposure, and engagement with events on campus.

The new model

The model is simple: instead of prioritizing time, like in a calendar view, we will prioritize importance of the event in a highly visual manner. Instead of a single “Featured Events” section, which lists minimal events, our new view will focus on ranking all events. It’s most often that students looking for activities, or faculty looking for seminars/events, are interested in finding the big-ticket items on campus first and foremost. Our inspiration for this model is a popular news aggregation website called newsmap.jp. It uses a similar design philosophy to emphasize important news based on mentions on the Internet, but allows for users to filter and find specific news items more in line with their interests.

newsmap.jp aggregates news stories and presents them where size = popularity on the Internet

The above image might seem cluttered to the average user, so our goal is to refine and adapt this design to be more approachable and in line with modern design philosophies, like Google’s Material Design.

The initial, basic design behind our events view, emphasizing visuals above date/time

As you can see in the photo above, in the most basic possible exposure, the most popular event is seen front-and-center (figuratively). It is emphasized and prioritized, and shows all relevant details only when requested. Beautiful cover photos can help express information and draw the eye in, aiding event coordinators in attracting their audience.

Hovering over an event shows more detail about it, and allows people to click or share the event

When a user is more interested in the event, they will move their cursor over to try and interact with it, according to research from the University of Washington. Therefore we will add functionality to take advantage of this behavior, exposing more information only extending as far as the user’s interest. Hovering offers only marginally more information: they can see the cost, attendance, date/time, and they can share the event details with someone else. The final version will also include extras like location and any other information the coordinator wishes to prioritize. If they actually want to register, they will go through another level of interaction and click on the event. If the event is ticketed, they will be redirected to the ticketing interface, otherwise they will be asked to confirm that they are going/how many guests they will be bringing. If they don’t want to register, but express interest or save it for later, that functionality will be supported as well.

Registering for events is two clicks, with more options for event coordinators

Finally, managing events people have registered for could not be easier, with an integrated “My Events” page to collect all events with search capability. This page will also have functionality to store events people are only “interested in” instead of attending.

My Events page allows for easy management of events interested in and/or attending

So the experience for discovering events will hopefully be improved, can we say the same for event coordinators? We believe so. First, we believe that the new UI will help foster a reinvigorated interest in event discovery and attendance. We also believe that event coordinators will benefit from how configurable this system will be, allowing them to tailor their focus on specific groups. For example, professors can select categories for lectures, invite certain groups, and then gauge how much food to order for the event when the time gets closer.

A very basic, bare-bones example of how to create an event, without customization for categories, etc.

In terms of data representation for this system (design buffs, this is your cue to stop here), we intend to use Mystery University’s Single Sign-on Service (SSO) to manage authentication and user control. Our philosophy is such that anyone can create an event, and the website administrators can moderate and respond to claims of inappropriate events. This also means that we can get away with only storing bare-bones information on users, and instead prioritize the events. Our data schema reflects this, where we store a user as a unique number with their first and last name, and that’s it. We won’t be managing the ticketing system, either relying on an outside provider (dealing with money-processing can be such a pain) or using an in-house system if one should exist.

Our initial data schema, subject to change

Our above data schema helps model the information we value: users, events, attendance, and filter data. Our goal was to allow event coordinators to create flexible ways to tag their events, but this model still allows us to provide suggestions based on previous events, or most-commonly used tags. The events data schema may expand as we take a closer look at how finely they should be modeled to be as effective as possible.

In sum, we have an ambitious project ahead of us, with even more stretch goals like Google Calendar integration on the horizon. We’ll be updating again soon, and in the meantime comments are always welcome.

--

--