We just celebrated 24 years of Viget. That’s two dozen years! This year, our Spring TTT in celebration of “Viget24” was a virtual extravaganza. We’ve put on a lot of virtual events over the years. Some with really strong themes and swag bags; some that focus on simple, meaningful time together; and others that let us enjoy learning something new as a team. Regardless of the rest of the experience, a key component of all of our virtual events is joy, achieved often through intentional levity. We think it’s important to laugh together! We see laughter as a way to expedite connection, and connection leads to rapport which makes us better at collaborating — and in turn leads to more quality products for our clients. 

Experimenting and iterating is a critical way we try to continually get delight right. We’re pretty pleased with one of our experiments from Viget24 that we called “Lovely Spring Day”.

A Lovely Spring Day

As we were brainstorming for this TTT, we thought about how to throw some joyful levity pizzazz into the pieces of our virtual events puzzle that have become pretty standard. How do we add lots of delight without adding lots of time to the action-packed schedule? We zeroed in on the virtual backgrounds we’ve been creating for every event — they add a layer of specialness. Of place. This isn’t any old virtual meeting. This is a TTT! 

Another key consideration for our team is figuring out creative ways to tie in inspiration from our industry and our work. AI has been an obvious contender —  we’ve discussed it and tied it in to some extent for the past several TTTs. But this time, we wanted to see how we could use AI for delight — marrying it with virtual backgrounds felt obvious. And so, a ”Lovely Spring Day” was born. 

The TL;DR is that we generated custom virtual backgrounds for every Viget employee that encapsulates their “ideal spring day.” We then played a 15-minute guessing game where people tried to guess who the background “belonged to.” Then, people had access to the full folder of AI-generated virtual backgrounds to look through. Vigets could then choose the background that spoke to them most and set it as their background. 

Read on for more on how we put this together!

Pre-Event Survey

To support all of our TTTs, we send out thoughtful pre-event logistics surveys 2-3 weeks before the big day. The survey lets us know where folks are joining from (where can we send their activity + snack packages?) and gives folks a chance to provide input on how the People Team can help folks enjoy and be present for TTT. This time, we also snuck in three questions, just “for giggles.”

• In one sentence, describe your ideal spring day.
• List three things that spark joy.
• What color do you think suits you best?

We did not share why we asked these questions. Sneaky, sneaky! When it’s low-key like this, the element of surprise is often a quick way to level up the delight.

Asking for a Friend

With rich data in hand about what makes people happy in spring, we were ready to generate the backgrounds. I was stoked! I’ve been experimenting with ChatGPT for some time, so it was fun to be able to use the DALL-E 3 side of OpenAI’s GPT-4 model. 

Who knew Prompt Engineering would be part of my role as a recruiter-who-helps-support-TTT-planning? I played around with a couple different prompts to generate these background images. Ultimately, my goal was to create backgrounds that were meaningfully different from one another but still felt good (i.e., something you might feasibly want to set as your virtual background and nothing freakily AI, like uncanny valley hands).

Here are the prompts I landed on that got me to our set of virtual backgrounds:

• Please generate an image (dimensions of a virtual meeting background) that encapsulates the vibe of a day with [ BLANK ].
• Please generate an image (dimensions of a virtual meeting background) that features [ BLANK ].

In the blanks, I wrote the things people included in their surveys. Those blanks were filled with everything ranging from dogs, cats, and friends to beverages, specific temperatures, yard games, carbohydrates, hammocks and more! Sometimes, I’d include a detail I knew about that person myself, even if it wasn’t in their survey. Yes, I occasionally editorialized for both clarity and whimsy! This was for delight purposes, but also helped serve my goal of having the backgrounds be “meaningfully different from one another.” It’s amazing how many people’s ideal spring day is as simple as having 1) moderate temperatures and 2) no pollen!

I generated 55 images. Throughout the process, DALL-E nailed it. I only needed to regenerate 2 or 3 images with clarifiers (and only because they included AI-specific outliers like disembodied hands). Huzzah!

Here are some of my favorites, along with their prompts in the captions. Can you guess who they belong to?

IRL

Ok, so for the actual activity we had the images ready to go in a private Google Folder. I took twelve of the images and put them in a very simple deck. I shared my screen, introduced the activity, and invited people to guess who they think each image belonged to in Slack. It was so fun seeing people throw out guesses and then narrow in with any verbal hints I gave!

Each image took about a minute. Then, we shared access to the Google Folder, gave folks a couple minutes to choose a background that called to them (their own image or someone else’s), and set it as their background. It felt like a magical moment to witness people finding and resonating with their own image or delighting in the ridiculousness of their coworkers’. We saved about 5 minutes for this piece, which felt right.

The whole Lovely Spring Day activity took just over 15 minutes! It was a perfect way to transition from a long meal break into our next grouping of content. And, we got to see the different backgrounds throughout the rest of the meeting.

Oh, the humanity!

I think this activity was successful for a couple of reasons.

1. People laughed! 

2. People felt seen. Some of these backgrounds were incredibly on point. Some of that was due to key folks having well-documented interests and a Slack-Famous Dog. 

But some of it was due to the People Team knowing about our people — our coworkers — beyond the sentence they wrote in. This uniquely human involvement helped me call an audible as needed and tweak prompts slightly to make the backgrounds feel even more relatable.

3. We could commiserate about our eventual AI overlords. (Did you notice that I say “please” in my prompts?!) Listen, Viget has plenty of practical, healthily skeptical people who are dubious about AI. GenAI is not always a fun, lighthearted thing. But using it in a fun, lighthearted way to do something it’s really good at was a nice use case and thought-provoking exposure even for people who are not into it.

4. We could see where we all align, and where we differ! It was amazing to see just how many people love picnics, covet their caffeine, and appreciate a bike ride. It was also cool to see some unique folks who simply crave a rainy spring day, or some beloved Buc-ee’s. What a rich tapestry of individuals — literally!

In the fast moving and constantly changing landscape of web development, codeless solutions like Webflow and Squarespace have emerged as an alternative to more traditional development. These platforms allow users to design and build websites through intuitive visual interfaces, and are viable solutions for many use cases out there. 

For the past several months, I've been working as a frontend development support specialist alongside one of our talented designers, Blair Culbreth, who is managing a large, established Webflow project. Here are my candid thoughts and impressions from this experience, along with some critical considerations for those looking to integrate Webflow into their own workflow. Spoiler alert: while Webflow has some impressive strengths, it also comes with limitations that can be both unexpected and frustrating at times.

What Webflow Does Really Well

Small Team Efficiency

Webflow truly shines for smaller teams or products, especially those with limited resources. For a team that’s just a single designer or a small development crew, Webflow can help lower the technical debt involved with getting a website to production. By mitigating some of the more complex aspects of development such as responsive design, cross-browser compatibility, and hosting, teams are able to focus on other aspects of the site. This makes it a strong option for startups, freelancers, or small businesses looking to create professional-grade websites efficiently and effectively without the necessity of a developer.

Animation Tooling

When I say professional-grade websites, I’m talking about more than just functional designs. Webflow has some fantastic animation tooling making it incredibly simple to build rich, full-page animations and interactions without ever touching a line of code. Users can create scroll-bound animations or interactive moments of joy all from the comfort of a relatively simple and straightforward GUI. Through the use of animation keyframes, you can elevate a static site into something that feels modern and expensive. Heck, I could even see using the animation tooling itself as a prototyping tool for design handoff in a more traditional web development process. This ability to easily add sophisticated animations allows smaller teams to produce polished, dynamic websites that rival those created by much larger teams with dedicated development resources.

Documentation & Education

Beyond its design capabilities, Webflow also stands out for its educational impact. The platform offers incredible documentation that covers core frontend principles, effectively bridging the divide between design and development. Through simple, digestible, and intuitive videos and written documentation, Webflow equips designers with knowledge that shores up many concepts and intricacies of web development.

Working with Webflow provides designers with numerous takeaways they can apply to future projects, including those outside the realm of Webflow. The platform educates users on HTML structure, CSS styling properties, and responsive design. This deeper understanding of web development makes designers more versatile and effective in their roles and inherently benefits communication between designers and developers, as their thinking will be more aligned with one another.

Navigating Webflow’s Limitations

Class Styles

Webflow's class-based styling system is a standout feature, especially to those familiar with CSS. It allows you to bundle properties into classes and apply them efficiently across different elements, minimizing code duplication. When used effectively, this approach facilitates the creation of reusable styles and design systems; however, mastering it requires attention to detail, similar to working with CSS directly, which can be made challenging within the Webflow UI.

Due to the separation of pages and content in Webflow, tracking down existing CSS classes and applying styles consistently throughout a project can be challenging. Keeping track of which class names apply what styles can be a struggle. While Webflow offers a Style Manager to help organize and manage classes, it can be difficult to use for quickly identifying how styles are being applied across the platform.

Moreover, the inability to open multiple pages in designer mode at once presents a significant frustration. Without the ability to compare elements across different pages simultaneously, users may face challenges in ensuring consistency and troubleshooting design issues efficiently. This limitation may lead to a slower, more cumbersome workflow, particularly in larger projects where maintaining a coherent design system is critical.

Another struggle with managing styles within the UI comes in the form of applying styles to combo classes. Combo classes are when you combine multiple classes together to create a variation or modified state of an element. Inadvertently applying styles to a combo class when intending to apply a style for the base class was a common issue I found myself running into, highlighting some challenges users should be aware of, especially when getting more familiar with Webflow.

These challenges underscore the value of implementing a strong and consistent CSS class naming system, such as BEM (Block Element Modifier). Adhering to a standardized naming convention will help mitigate some of the challenges posed by Webflow's class-based styling system, but it does come with the added overhead of needing to learn a new class naming convention.

Preset Web Elements

Webflow provides users with a diverse selection of default web elements, ranging from simple divs to intricate lightbox elements, which serve as the foundational building blocks for websites. These preset elements occasionally impose rigid structural constraints. For instance, when attempting to create a tabs menu with a filter, users may encounter a problem with adding additional elements to the tab menu block. This restriction forces users to either conform their design to Webflow’s constraints or devise creative workarounds to achieve their desired functionality.

Navigating such limitations can be challenging, particularly when striving to realize a specific design vision. It may involve exploring alternative solutions or compromising on the original plan. Yet, as users gain familiarity with the platform, those limitations can be anticipated, allowing them to develop strategies to circumvent the constraints.

Custom Scripts

One of the most powerful aspects of Webflow is also one of the most challenging features to balance. It requires careful management to avoid issues like performance degradation and increased technical debt.  It’s incredibly easy to have a website get bogged down with bloat, especially when a larger team might be working on a project.

Webflow lacks a built-in feature to view all custom scripts at a glance, making it difficult to track and manage them. Maintaining a documented list of all custom scripts used in your project and detailing their purposes and locations can help mitigate this issue, but that’s a fair amount of overhead to maintain. Additionally, custom scripts do not function in Webflow’s editor mode, requiring a site deploy for testing and troubleshooting, which can be time-consuming. 

The ability to add custom scripts opens up a world of options, including third-party plugins and libraries that can expand Webflow's native features. Tools like Jetboost or Finsweet can help fill in the gaps, and are oftentimes worth the investment as they provide relatively easy-to-use integrations that will make for a better user experience.

That’s all to say that applying custom scripts to a Webflow project is not necessarily bad, but should be approached with considerations on how to mitigate technical debt. Here are a few suggestions to help with integrating custom scripts into your Webflow project:

• Maximize Native Features: Use Webflow’s built-in features as much as possible. If a design can be achieved with Webflow’s interactions and animations, avoid adding custom JavaScript.
• External Development: Develop and test scripts in an external environment to reduce time spent deploying and debugging within Webflow.
• Reusable Components: Save frequently used custom code as reusable components to simplify maintenance and ensure consistency across the site.
• Regular Audits: Periodically review and clean up scripts to ensure that only necessary ones are loaded, improving site performance and maintainability.

Mitigating Difficulty Through Teamwork

I started this article by mentioning that I recently served as a frontend development support specialist alongside our designer, Blair, on this project. Blair took on the primary responsibility of building many of the pages, and I want to share more about our collaborative experience. Webflow is as close as you can get to building a traditionally coded website without necessarily needing to touch code, but that doesn’t mean there’s no value in having someone more familiar with the technical side of website building available. From accessibility considerations to complex layout structures, a lot of time can be saved by having a developer serve as a pseudo consultant on the project.

On numerous occasions, Blair reached out to me to help set up more complex custom implementations that required JavaScript or weren’t coming together as expected. By being able to jump in and solve those issues quickly for Blair, she was able to focus on building out the other pages. Similarly, I was able to audit and review her work to ensure it was inclusive for all types of users.

There are various development tricks we can implement to enhance user experiences for visually impaired users. For example, hiding text specific to a screen reader to provide greater context is a technique that a designer might not generally think about or even be aware of, but a good frontend developer would know to include. By being involved in the building process, I was able to highlight and advise on such instances, ensuring our project was accessible and user-friendly for everyone.

Conclusion

Webflow presents a robust solution for web development, particularly for smaller teams or projects with limited resources. Its intuitive visual interface and powerful animation tools enable the creation of professional-grade websites without the need for extensive coding knowledge. Webflow’s educational resources also empower designers to deepen their understanding of web development, bridging the gap between design and development and fostering better collaboration.

Webflow is not without its limitations. The class-based styling system, while efficient, can be challenging to manage, and the need for site deployment to test custom scripts adds to both the complexity and time investment required to build a project. Despite these challenges, many of the difficulties can be mitigated through careful planning and teamwork. Leveraging native features, developing and testing scripts externally, and creating reusable components are all strategies that can help maintain site performance and manage technical debt.

Collaborative efforts between designers and developers can further enhance the process, as seen in my experience working alongside Blair. This teamwork allows for efficient problem-solving and ensures that accessibility and user experience are prioritized throughout the project. By combining the strengths of Webflow with thoughtful collaboration and strategic planning, teams can create dynamic, user-friendly websites that meet modern standards.

In recent years, as distributed work has become the norm, all-hands trips have become more commonplace. Even companies that have always done them now see their importance in a new light. They are expensive and demanding for everyone involved, but when they’re done well they can be incredibly impactful. Are you bringing your team together and feeling the stress of getting it right? Designing the time together takes strategic thinking, logistics planning, and the confidence to ask everyone to contribute to the event’s success.

Last week, we came together to connect, celebrate each other, and look forward to a bright future in our quarterly all-hands event we call Third Third Thursday or TTT. It was our first in-person all-hands event since May 2023. At Viget, we actively build our culture together. The responsibility doesn’t fall on just a few individuals' shoulders. Our events are successful because individuals show up, speak up, listen, and honor the limited time we have together in-person. This is evident in the chats over breakfast pastries, the all-in approach to competitions breakout sessions, and the peer talks and discussions throughout our events. This connection and camaraderie doesn’t just happen, we work hard to make it happen. 

Reflecting on last week’s event (and 7 years of other events), I want to share these five key planning tips to help you craft a successful event. 

Leverage your physical space to help achieve your event goals. This fall we had a smaller number of attendees and we wanted to encourage discussion throughout the event so we set up the room in large U shape to foster conversation. We also made the most of our exterior space, which featured a fire escape staircase, by hosting an egg drop competition. 

Over communicate, especially around when team members can expect breaks and when they can expect to be fed. As the event lead, I share my phone number multiple times ahead of and throughout the event. We also make sure to communicate in dedicated channels, including an event Slack channel for all attendees, a behind-the-scenes Slack channel for presenters only, and an event website. We share important key information like bus schedules and flight confirmations via email. In advance of the big day, we shared this slide with our team to both inform and inspire. 

Leave room for unstructured time and connection. Over the years we learned that some of the best discussions and a-ha moments come from chats over a meal or a snack during the “unplanned” parts of the event. Now we plan ahead for these, leaving ample time for unplanned, impromptu a-has. We think about airport Uber rides, charter bus rides, morning runs, evening board games, or late-night drinks and look for ways to grease the wheels of serendipity. This was especially important for us this fall since it had been so long since the last time we all gathered together. 

Look for ways to celebrate what is unique to your company. One pretty fantastic thing that comes with a quarter century in business is the community we’ve built along the way. We make a point to keep up with previous Viget employees who we proudly call our alumni. We love our alumni and enjoy recognizing their contributions to Viget. One way we do so is with annual picnics, which we host when the most current Viget employees are in town for an event. These picnics are often a great mix of reconnections and networking.

Find ways to surprise and delight. Think big and small. For example, this fall we put colored pencils and butcher block paper out during our meeting time. Our autumnal decor included blue(ish) and orange pumpkins (Viget colors!). We made a subtle callout to an internal project by serving french fries as our afternoon snack. And we surprised our team with Unreal treats for their bus rides home. The treats served as dessert and a means for us to introduce our next in-person event, our spring TTT, aka Viget25. 

Some companies advocate for all-hand retreats to be social and relaxing, but not “productive.” They tout a meeting-free event. At Viget, we see the meeting time as crucial because that is when peers share knowledge, reflect on their recent work, showcase client impact, and highlight new ideas and personal growth. Similarly, our co-founders reflect on Viget’s performance and share thoughts on the upcoming business direction. The meeting sparks genuine inspiration and creates a time for us to remember what brought us to Viget in the first place – to build world class tech in support of our clients. 

On the heels of a successful gathering, it’s time to start planning the next one. For our next event we’ll head to the Allegheny Mountains where we’ll leverage a unique and memorable venue, offer plenty of unstructured time for connection (with each other and nature), loop in alumni where appropriate, plan inspiring meeting content, enjoy many meals and treats together, and of course find ways to surprise and delight. 

Work-related travel isn't for everyone, but if you know someone who appreciates the idea of dedicated time to connect with and celebrate their peers, we’re hiring. And to all the culture champions and event planners out there, good luck with your next all-hands!