Responses by Peter Altamarino, head of technical direction; Laura Cortes, creative director; Alexandra Hook, art director; Ali Rodriguez, marketing manager; and Matt Walsh, executive producer, Jam3.
Background: Founded by Imani Ellis and the Creative Collective NYC community, CultureCon is the fastest-growing conference for creatives, entrepreneurs and young professionals of color. Built in partnership with Jam3 and Beyond 8, CultureCon @Home brought the conference to the global and virtual stage with a weeklong experience that ran from June 7th to June 13th, 2021.
Design core: The design is built upon two foundations: the bold ’70s-style graphics and the 3-D campus. These two elements and their marriage created the language we used to tell the story of CultureCon @Home. The site mirrors an IRL conference with stages to watch live talks, a chat that connects you to others, a personal profile and schedule, and virtual shops. These together create a world that users can explore at their own pace.
Favorite details: The 3-D campus. It was a challenge to create a space that reflected the dreams of the Creative Collective NYC, which felt aspirational yet grounded, but we are so proud of the end result. Also, the boldness of the design and striking a balance between content and bold type proved difficult, but we got to where it paid off.
Challenges: We didn’t want to go for a traditional long-scrolling website. Coming up with a solution that reflected the brand voice and aesthetic while ensuring we could deliver on time and within budget was definitely a challenge. The team did extensive research and iterative design until we finally arrived at the outcome.
Time constraints: We had limited time to develop the site and had to be extremely efficient with resources while delivering a high-quality experience that reflected the CultureCon brand. We couldn’t build something in 3-D and have it be dynamic, so we found a compromise in utilizing 2-D renders of 3-D models and using motion graphics in transitions to move from space to space, like into the “stage internal pages.” The design process and planning done by the team in 3-D and Figma was impressive, with every state described and adapted to all screen sizes.
New lessons: We definitely pushed the needle when it came to delivering a 2.5-D website. The hybrid presented a lot of challenges in terms of what we could and couldn’t do. The team also worked remotely across five different time zones, and that alone presented a huge learning curve in terms of how efficient and organized we all had to be in order to push the site live in time for the conference!
Navigation structure: While it took a long time to perfect, we created a system that supports exploration at the entry point of the site, mimicking the feeling of when you first arrive at a conference. We also embedded a number of smart navigation points in the site so that you would be able to get between talks and access vital information easily; that way, users’ conference experience would not be interrupted. On top of the main campus for exploration, the site has a navigation bar, a hamburger menu and calls to action that drive them directly to the necessities.
Technology: The front end of the website was developed using React. For UI motion, we used GSAP. PixiJS helped create the Campus. The back end and CMS were provided by MediaMonks’s Virtual Event Platform (VEP), which is a robust platform deployed on Amazon Web Services. The VEP provides all functionalities from the event schedule to the livestream to user profiles to the chats and polls.
Special technical features: The modern headless architecture enables us to fully customize the front-end experience and redefine the interface for virtual events. A lot of great engineering also happened on the back end and hosting side to accommodate a large scale of site users at the same time.