The Project

All of these events are listed on comsol.com/events, but the old events calendar was, well, old. It was stylistically dated, and did not provide robust enough search or filtering features for potential attendees - who were often looking for events pertaining to their specific physics area, or a specific geographical area - to find the training event that was right for them.

I was tasked with creating a new design for this site section from scratch, one with a more modern style - to match recent redesigns of other sections of comsol.com - and more user-friendly search and filtering functions. This calendar would be designed and built in conjunction with another project - led by a colleague - to also rebuild the internal tool used by sales and marketing staff to create events in the system. This tool would give them the ability to customize the content of event landing pages, so the calendar design needed to be flexible enough to meet the varied needs of offices all over the world, but still keep the event landing pages neat and uniform across event types and languages.


One of the biggest challenges of this project was one that I was well-acquainted with from my work at Lycos - creating page templates that are forgiving when populated with custom data by users who may not be web or design savvy. In this case, it was the Sales and Marketing teams (not just in my office, but in other offices all over the world) who would be populating the event content in the CMS. Some types of data would have set ways in which it was displayed - date/time, location, registration form, speakers - while other data was a mix of fixed and more customizable text - workshop schedules and the main body text of the event pages. In general, pre-set text blocks were to be used in the main content area but users *could* enter text and markdown in the CMS, so the landing pages had to be ready for whatever our internal users could throw at it.

The crux of making this work was simple on the face of it - typography. Our event staff couldn't add images, but they could throw whatever paragraphs, headers, lists, or links into the main body of the page they pleased. By making sure the base typographical styles were legible and clearly defined, we could be reasonably assured that if non-standard content was added on the backend, it would look good and fit in with the rest of the site on the frontend.

Another concern was localization. These events are held all over the world, in many different languages, and the design of the event cards (right) in the calendar was precise - I was needing to fit a good bit of information into a relatively compact space to provide a quick enough overview to entice the user to click through to the landing page. Too much information, and it's overcrowded. Not enough information and the user becomes frustrated at clicking through to events that end up not being suitable for their needs.

So, with a compact, information-dense design, we had to be careful that each element could accomodate the data of varying lengths and formats from each country. For example: event titles are long in English; when translated into Russian, they're even longer. It took a good bit of trial and error with real data to find the right text styling and character limits for the title area so as not to obscure the image too much while still making the title read as one of the most important data points.

On the user experience side of things, the most important aspect to get right was the search and filtering of events. As mentioned earlier, one of the biggest issues with the old system was poor filtering - users could filter by region/country, language, and event type. So, a user looking for a Heat Transfer Workshop in Austin, TX would have to filter for USA, Workshops, and then scroll through a long list of event titles set in rather small type with sub-optimal spacing between lines, and hope they found one near Austin related to Heat Transfer.

In the new system, I setup a two-step filtering process. At the top of the page is the option to select the event type - Webinars, Training, and Special - and in the sidebar users can further sort by location,distance, date, time, language, physics discipline, and specific topic area. In a separate area of the page, users can then sort these results by date, event name, or location.

It was brought up partway through the project that many users were not clear on the differences between our event types - These were going to be the very first criteria the calendar asked users to filter by, so we needed to make clear the features of each. The solution was to add a comparison block describing the features of each type of event, located right below the event type filtering options at the top of the page.