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!

Authentication! What a hassle!

Self-Hosting

Integrations

Customization

Conclusion

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.

Five years ago, without consciously trying, I would have noticed if a coworker was taking a break, feeling extra chatty, or looking hyper-focused. I got to choose whether to respond and how I might build rapport by responding (I’m sure I didn’t always get it right). Now that more of the Viget team works from home than in an office, I feel a loss. I have less awareness of other people's states of mind and fewer chances to demonstrate my interest. I need to learn new ways of connecting. 

I took notice when Adam Grant recently posted about pebbling: 

Sending memes, links, and videos to others isn't trivial. It signals that you're thinking of them and want them to share your joy. It's known as pebbling, based on penguins gifting pebbles to potential partners. Pebbling is an act of care. Every pebble is a bid for connection.” 

Grant acknowledges that the term "pebbling" comes from penguins, but he also uses the phrase “bid for connection,” which I associate with John Gottman. Gottman is a well-known psychologist who has researched marital stability and relationships. His work provides insights into how small interactions, or "bids," play a crucial role in building strong relationships. 

Gottman defines a "bid" as any attempt from one person to another for attention, affirmation, affection, or any positive connection. A bid can be as explicit as saying, “I had such a hard day,” or as random as saying, “Did you see the size of that red bird?” The impact of responding with interest (turning toward) or ignoring or dismissing (turning away from) significantly influences the quality of the relationship. A simple, “Tell me what happened,” or “What? No, I missed it!” can foster closeness and trust. Silence or something like, “Here we go again,” will spark feelings of neglect and distance.

Gottman's research is widely cited and has impacted my understanding of relationships.  I'm interested in bids for connection at work, particularly as our work environment has changed dramatically in recent years.

Connections at Work

Finding the right balance of work and non-work is a central challenge for most of us as we navigate demands on our time and energy. I generally hope work is a small enough part of a person’s life that they have time for many other things, but also that their work environment is engaging and meaningful enough that they enjoy it. I hope friendships emerge at work, mostly through collaboration or out of the gaps between responsibilities. 

As remote work has become commonplace, I find it’s harder to foster connections than it was before. The lack of proximity, and therefore organic social interactions, makes it harder for me to know my coworkers and be known by them. I’m not advocating for returning to offices. I’m noticing that after working with people for years in an office, I knew them better – their nerves before a presentation, their ability to set new people at ease, their grandma’s soup recipe, their knack for deadpan humor – and that made my life better. While many of my coworkers collaborate with each other daily through pair programming, design critiques, or iteration planning meetings, my work on a small People Team has always been less collaborative. For me, fewer organic in-person interactions means fewer interactions of any kind at work. 

The decline in ad-hoc opportunities for connecting impacts us all differently, but I am particularly interested because an aspect of my role at Viget is to nurture a strong company culture. For us that means a culture where we do excellent work, learn a lot, support each other, and – yes – make some friends. I’m looking for ways we can adapt our employee engagement efforts to the new work environment and evolve how we cultivate alignment.

The concept of "bids for connection" seems useful for understanding the building blocks of connection and, over time, friendships. As a mostly remote company, I want to be sure we’re asking: How do people make bids? How do others respond to them? What parts of the work environment encourage us to turn towards a bid? 

Bids While Distributed

There needs to be “space” for these interactions to happen across a distributed company, and we need to notice what is working and why. One opportunity for bids to play out is in recurring meetings. At Viget, we try to be efficient with our time, but we also build in time for informal interactions.  

Daily Stand-up Meetings

The discipline and project teams that do daily stand-ups are careful to keep them brief. These meetings need to be reliably quick-paced in order to fulfill their purpose. Still, without sacrificing efficiency, these meetings can spark strong bids for connection. Sharing work updates in small, daily increments encourages people to open up about specific elements of their progress. The specificity allows for connection in ways that broad strokes do not. Hearing someone say, “Progress was slow, but I’m finally done with the feature,” I might respond, “Oh, good.” But hearing someone say, “If I don’t figure out how to debug this API integration by noon, we need to update the launch timeline," gives me a chance to be curious, helpful, and invested in something very specific. 

Weekly All-Hands Meeting

Every Friday, our whole company meets for about an hour. The first 15 minutes are deliberately set aside for informal conversations and sharing, which mostly happens over Slack. We often play music or show a live stream of something noteworthy, like an eagle’s nest, to which we can react. Someone might share where they were when they first heard this song. Someone else might reveal they are an experienced falconer. The whole company gets a chance to see or hear these things, and while only a handful may react, we are all building shared awareness and memories.

Monthly Team Meeting

During a team meeting, a small group of same-discipline-peers comes together to talk shop, share lessons learned, or bond. These meetings allow for exercises that don’t scale to a whole company – like getting feedback or planning progress – and over time, certain activities can become team favorites. A monthly “rose, bud, thorn” or an annual “sharing circle” ritual prompts people to share in ways that otherwise might feel too awkward or vulnerable.

Another way to make and respond to bids for connection across locations is on Slack. Different kinds of Slack channels offer different kinds of opportunities.

Interest-based Slack Channels

At Viget we have channels like #woodworking, #sewing, #starwars, #hot-sauce, #gardening, #home-improvement, and many, many more. These types of channels allow people to go deeper than they might in more general channels. You know you’re talking to like-minded people, so why not dive fully into your opinion on robot vacuum cleaners?

"Random" Slack Channel

In our #random channel, I’ve seen everything from a heads up on free Firehouse subs to a recommendation for an estate planning system. The responses vary, too – sometimes they spark day-long conversations. At a minimum, posts will get a smattering of emoji responses and the impact can be significant. For example, a post might get a sympathetic :heart: but then a couple :same: or :it-me: come in and before you know it, there’s a subset of coworkers who realize they share the same rare phobia. I also think a share in #random can signal, “I’m between tasks. I’m open to distractions right now,” and folks can follow up with a DM.

Project-Specific Slack Channel

In channels where everyone is working on the same project with shared goals, stresses, and deadlines, we might see bids that build momentum. A PM might post something in the morning to encourage the team to rally behind a tough deadline. A designer might post mid-week, acknowledging the drudgery of certain tasks, implicitly giving everyone else permission to do the same. A developer might be slowly building a little arsenal of inside jokes and call-backs over weeks, dropping a note at just the right time to get others laughing. Someone might turn one of those jokes into a custom emoji that lives well beyond the project timeline and every time that inside-joke-emoji gets used, it's a bid for folks who worked on that team to recognize each other and reconnect. 

Recognizing Bids

We all grew up learning in-person social norms and have a mostly shared understanding of what’s considered warm, polite, stand-off-ish, or rude in the workplace. Now that we’re distributed, we may need to learn to recognize new signals and define new norms. 

A bid is an action that invites connection, but sometimes the action is so small, we might not notice it or realize it has potential value. Understanding the concept of bids can help us notice them and respond with more awareness. 

If we train ourselves to see bids for what they are and respond accordingly, we may get more mileage out of the limited impromptu interactions we have as remote coworkers. Actions like responding to an open-ended question in a Slack channel or acknowledging someone’s request for help during a meeting go a long way. Each response builds trust and camaraderie, even if in tiny doses. When a comment or question is ignored or dismissed, the negative effect is compounding; that person is less likely to reach out again.

Adam Grant said sharing memes and links are a way to invite someone to share in your joy.  At a distributed company, “bids” take a lot of different shapes, but they all communicate things like, “I am here,” and “let’s work together,” and “you can trust me.”

I’m encouraged to think we already have some infrastructure in place at Viget to support remote bids for connection. I’m excited to work with Aubrey Lear and others to find ways to evolve that infrastructure. We’ll continue to hire people who want to develop friendships with coworkers and who are willing to take personal responsibility for making and turning towards bids. Together, we can make sure Viget remains a great place to work as the workplace continues to evolve.

When Viget was founded in 1999, Andy and I used the title “Founding Partner.” We were founders of the business and also committed business partners. Within a couple of years, we switched to more specific titles: Co-Founder and President (Andy) and Co-Founder and CEO (me), but “business partners” was always the key structure.

We divided responsibilities of leadership, delivery, and operations in ways that optimized our different strengths and weaknesses. Key decision making has always been a collaborative process, with healthy debate between the two of us. I know some incredible solo entrepreneurs, but for us, having a partner to lean on, leverage, and grow with has been not only rewarding, it’s been essential to Viget’s longevity and success.

Also key to our success has been a founding principle of hiring incredible people who share our values and vision, value longevity and lasting relationships, and take pride in their work and careers. As they’ve joined, we’ve shared the opportunities and responsibilities that come with running a healthy business. Empowering others to lead key parts of Viget has taken us further than we’d ever gone otherwise.

Being owners and partners in the business has always been a privilege, an honor, and, at times, a stressful burden. When things go well – clients are happy, the team is gelling, the finances are solid – I’m filled with pride, satisfaction, and calm. When things aren’t going well – projects are sideways, turnover seems contagious, and the metrics point in the wrong direction – I’m filled with anxiety, frustration, and self-doubt. In either scenario, having a partner to navigate the waters with has been vital.

In recent years, three key areas of our business have matured thanks to the overall strength of our team and especially strong leadership. Our sales and marketing systems, tools, and strategies have fed a much more predictable revenue engine with great clients. Our client delivery processes and best practices have helped us consistently deliver value for our clients with more clarity, less risk, and better results. Finally, through some very challenging years in our industry, our culture has grown stronger and more adaptable, still centered on meaningful human connections at the core.

These three business areas have been led by Zach Robbins (sales and marketing), Kelly Kenny (delivery), and Emily Bloom (culture). They are the pillars upon which all other aspects of the business are built. These leaders have truly grown up with the business, having joined more than 13, 14, and 17 years ago, respectively. Their impact first as individual contributors, then managers, and eventually strategic leaders has been immeasurable.

Viget is coming up on a major milestone: we’ll soon eclipse 25 years since our founding on December 27, 1999. As Andy and I looked out at the next decade and beyond of our business, expanding our partnership became a clear goal. Embracing additional partners to not just lead their area of the business but to weigh in on all major decisions would help Viget continue to mature into the business we believe it can be. We saw an opportunity to invite others into the deep water of business partnership – the good, bad, and ugly – so that our shared decision making can be sharper, more insightful, and more strategic in the years to come.

At our fall retreat last week, we announced that we're welcoming Emily, Zach, and Kelly as partners at Viget. They’ve each been here for more than half of Viget’s history, each shaping Viget into what it is today. As partners, they’ll have even more influence as we take Viget into our second quarter century and beyond.