I was tasked with combining Slack's Events and Webinars pages to create a cohesive, one-stop-shop for users to not only discover, but also filter through all of Slack's in-person, virtual, and on-demand events. I worked closely with designers, engineers, project managers, and stakeholders to come up with the layout, art direction, and filtering system for Events.
PROCESS
I worked with fellow designer Michael Belen to address these main tasks:
1. the homepage layout and variations of it depending on how many events would be featured in the hero
2. the labeling system that differentiated in-person events from virtual events as well as on-demand events
3. the filtering system and how users could filter for specific events based on industry and event-type
4. the color palette and how links and labels appeared on different background colors
5. the onboarding process for stakeholders with the finalized CMS on Wordpress
All designs were made for desktop, tablet, and mobile
Hero layout explorations and wireframes
HOMEPAGE
The goal of the homepage was to feature 1-7 events in the hero with 1 main event highlighted. We explored different variations of hero layouts including carousels and versions with no image. The final designs convey a simple layout system that adjusts based on how many events are featured in the hero. Our focus was on maintaining strong visual and typographic hierarchy as well as intuitive navigation.
Hero layout for 3-7 featured events
LABELS & FILTERS
It was important to come up with a visual key that differentiated between live virtual/in-person events and on-demand events (which are recorded past events.) The first step was to list out all event types and coming up with a label treatment and link CTA per event. Event types include live in-person event, live online event, live in-person and online event, and on-demand. Live events would have a label with the date and time whereas on demand events had a label with a play button. We took into consideration sizing and spacing of the text to accommodate for localization in multiple languages.
Event types and labels
Event types (Register/Live vs. On-Demand) and treatment for localization (ex. German)
For the filtering system, we divided it into 3 main categories: event type, industry, and topic. Once users made their selections, they would be led to a curated page with events based off their filters. We also designed a zero results page where no matches show up for the users' selections. In this case, the most recent live or on-demand events would be displayed.
Filtering system
Filtered 'Events for you' page
Zero results page
COLOR PALETTE
The color palette pulls from the main colors used in Slack's Resources Library. These colors are taken from Slack's secondary color palette and are used as background colors for all webinar photoshoots. We expanded on the color palette by adding 3 new colors (Berry, Moss, and GovSlack) as well as explored the art direction for how backgrounds should be treated when no image is provided for the event. Our main goal with choosing colors was making sure there was high enough contrast between text and background and that it passed web accessibility guidelines.
Background colors and label, text link, and button treatment
For a deeper look on how I help art direct photographs for webinars, check out my case study on Slack Photoshoots.
Background treatment for events without images. Shows an intersection of brand shapes, representing a collaboration of minds and ideas.
ONBOARDING
Once our design was finalized, we were tasked with onboarding event program managers on how to post their own events in the CMS, which is housed in Wordpress. This involved building out a deck that explained image specs and the upload process for content on Wordpress. Program managers would then be able to upload events onto the site efficiently and get them localized in multiple languages via Slack's localization team.
TEAM
Senior Creative Manager: Maria Gonzalez
Director of Front End Engineering: Drew McGahey
Designers: Alison Jeng, Michael Belen
Developers: Fayaz Ashraf, Sumit Lal
Program Manager: Abby Burch
Creative Operations: Wendy Kan