How AirPods made me learn no-code in one Sunday afternoon

Imagine this: Your company is launching a new no-code builder. You’re the Project Manager, and your task is to get your team to test the product and give feedback within a week. How do you get your team involved?

Let’s pause for a second so you can cook up a plan 🍳

Got it? Perfect.

Most managers will ask team members to volunteer as Beta testers. While this works, it might not attract a variety of testers. For example, the HR manager might be too busy hiring people and think: “I don’t need to know no-code, I’d rather focus on my to-do list.” Fair enough.

That’s why when Ycode needed testers, the product team referred to one of the oldest tricks in the book: a contest with incentives. They knew that people were much more likely to participate if they could detect personal gain.

This technique totally worked on me.

This is the story of how I, Megan (Content Writer at The Remote Company and Ycode beginner) learned the basics of no-code in one Sunday afternoon—having an absolute blast!

The Ycode movie page contest

“Win a pair of AirPods”, it said on a slide, as we gathered in the virtual Zoom room to hear more about Ycode’s progress.

“We can win AirPods for real?”, someone asked in the chat.

The answer was yes, and I was intrigued.

Not because of the AirPods (expensive technology and my slippery hands often equals a short-lived romance). But because I loved the idea of showcasing my skills, potentially winning the contest and having less than a week to do so. Challenge accepted!

The Ycode contest was simple: design a web page. A straightforward goal made even more compelling by the topic, “the page needs to be about your favorite movie or TV show.”

Our team loves to discuss movies (we even have a Slack channel about it), so many were excited to build a site while also learning more about their favorite characters and plots while doing so.

The week after, all pages would be presented in our general Slack channel where everyone could vote for their favorite creation by adding trophy emojis (multiple votes allowed).

3, 2, 1… build!

For my favorite movie, I chose Save The Last Dance (you may judge). With its 6.2 IMDB score, it’s certainly not a masterpiece but it is the only movie I watched over, and over again (mainly to copy the dance moves, which, in hindsight weren’t all that).

Before we get into the how-I-built-this part, let’s start with a little backstory.

I know a thing or two about designing websites. In the early 2000s, I created websites (like this one) by slicing my own Photoshop web designs and embedding iframes (don’t judge me, my teenage self didn’t know any better). Later I learned basic CSS to customize my ThemeForest-bought templates on WordPress.

But that’s about all my technical knowledge.

So when I first opened the Ycode builder on that Sunday afternoon, I entered unknown territory. Luckily I was equipped with a basic manual and Ignas’ (our CEO) words: “Databases are great for things like cast members *hint hint*.”

To start my project, I picked a template.

Templates are always a nice start. Not to use that exact design, but to learn a new program. You can click on all the elements, see how things are connected and explore settings.

Once I had an idea of how no-code works, it was time to build. Since the competition was to show what you can build with Ycode, I wanted to incorporate as many diverse elements as possible. The most exciting one being…

Collapsible block

When seeing how the collapsible block worked, I figured it’d be perfect to show the evolution of the actors. The block heading could be the actor’s name, and once unfolded, the visitor could read more about their acting journey. Here’s how I created it (using that database tip from Ignas).

Step 1. Create a Database and fill the Application Data with the cast member information.

Step 2. Add a Collapsible block and connect it to the database data in the Settings tab on the right-hand side.

Step 3. Ta-da! All the data is automatically connected for each cast member.

With a workable menu, I already felt a lot more confident in my no-code skills! Next up was the header element.

Header video divider

There’s something about adding video or image elements that span the entire width that instantly make you go from “hobby designer” to “oh, I’m a designer-designer”. Especially when you move the container below up just enough to overlap the imagery.

To create the video snippet, I used Kapwing’s online editor to trim and crop. After uploading the video in Ycode, I added the settings: Mute sound, Loop video and Autoplay.

Interactive elements (and a splash of color)

In my original setup, I stuck to mostly black and white. This what my boxes looked like at first.

Sure, it looks decent but also, YAWN. When Save The Last Dance released (2001), websites looked like this. So for the sake of nostalgia, my page needed some color.

How I made the black-and-white boxes pop:

1. Cropped out faces in Photopea (free browser Photoshop) and added them in the boxes, then moved them upwards

2. Added backgrounds to the different boxes

3. Changed font colors to white

4. Added radius

5. Vertically changed the positions by using the Transforms > Move function

After that, I experimented a few more hours with different designs until I felt like my page was polished enough to have an actual chance of winning.

Voting time: Ycode website entries

After six days, it was finally time to reveal the participating entries! To everyone’s surprise, there were entries from a variety of departments. Designers and developers participated, but also people from customer support and marketing.

Many of us were no-code newbies when we started, yet we managed to create really good-looking, professional websites in a matter of days (or even hours).

Some of the Ycode website contest entries:

1. Brigita (Support) created a Haunting of Hillhouse page

2. Sarunas (Designer) created a Breaking Bad page

3. Alberto (Support) created a Toy Story page

4. Jessika (Partnership Manager) created a Grey's Anatomy page

And the winner is…

I need your help one more time: What department do you think the contest winner works in?

Marketing?

Development?

Maybe support?

Or HR…?

The answer is: Legal!

Our Legal Team Lead, Marta, won the contest with her interactive Fight Club website! 🏆 With 44 trophies and 4 Fight Club emojis, she was the undeniable winner of the Ycode contest.

Marta being the winner was not only epic because she deserved it, but also because when your company’s in-house lawyer wins a no-code competition, it pretty much backs up the fact that everyone can create amazing sites and web apps with Ycode. *mic drop*

Learning from this experience

Where do we begin? On a personal note, I finally got around to learning the basics of no-code in one afternoon. It’s been a long-overdue to-do and one that would have still been on my list if it wasn’t for this challenge. Also, I didn’t expect to create a page that made me go: “Whoa, I really did that.”

For team Ycode, it was a great way to quickly gather user experience stories, bugs and issues. It also gave the team an insight into Ycode’s possibilities, limitations and improvement points. With a calendar date that says “Launch on January 31st,” they needed all the feedback they could get before the big release—and through the contest, they received 80+ new feature requests!

And finally, as a company, we learned how creative ideas can help get your team involved. This contest inspired professional growth and brought people together, both during the process (helping each other and answering Ycode questions) and after (us raving about the different movie pages). Plus, once again, we were in awe of the talented people within The Remote Company!

So yeah, many of us were lured in by the idea of winning a pair of AirPods, but we all walked away with knowledge and learnings that were so much more valuable.