Last week we ran our first remote hack day.
The team dived into building a BigCommerce app that would provide additional PageBuilder widgets.
Here’s a slightly longer video than usual that includes:
📞 How much fun it was to use gather.town
🧠 Running a remote brainstorming session with mural,
📽 And then I just have to give the floor to Kieran to present what the team built on the day.
And I quote “I think we’re all a big fan of widgets. So, hopefully we’ll be building a lot more.” 👍
Transcript
Last week, we actually had some fun at work. No, I’m kidding, we always have fun. Don’t @ me Jon. Now, but we did do something fun, we had a remote hack day. I’ve been involved in lots of different hack days in the past, but certainly not run one like this before. And so I wanted to share a little bit about how we did it from this tool that you can see in the background, gather.town to brainstorming to kick us off.
And then the demo day, or demo session at the end of the day. Now, gather.town is a place where you can sort of walk around in this pixel art style universe and join or leave different breakout rooms and virtual calls. This is much better than Zoom, where the host has to manage everything.
This actually allows people to navigate themselves. And once they sort of built themselves into teams could move out as a pair or as individuals. And then come back to the group. People seem to find it a lot of fun. It was different, maybe, perhaps not something you would do everyday, but particularly for these events, event style things, this is a really great tool to get over that barrier and make it a little bit more natural.
And we recognized also that we wanted to have some structure to the day. Many people hadn’t been involved in a hack day in the past.
And also, we run this as part of kicking off our big objective for the year. So it was a great opportunity to actually put a stake in the ground, get people together, get a headstart on what we want to achieve. And one of those things is actually getting more developers involved, understanding what it takes to build a BigCommerce app.
We recognized an opportunity there in the PageBuilder space, which is BigCommerce’s CMS tool that they launched, I believe it was last year. And you can extend it to add more widgets for merchants to use to build their designs and their pages.
So how we approached it. Once we picked our question of creating compelling and e-commerce experiences with PageBuilder, we broke out and just spent five, 10 minutes just by ourselves, thinking up ideas of what we could do.
And then brought it back together. Pooled all our ideas together, grouped related ones and talked them through until we got to the point where we had a good set of ideas and we can vote on what we wanted to work on. And then with that organized, we could naturally sort of break off into some front-end and back-end teams, assign each other work and get going.
At the end of the day, we ran a demo session, so half an hour just for the teams to share with the rest of the company, how we’d gone about it, what challenges we’d faced during the day. Obviously, there’s a lot of learning and new things. Things that aren’t going to be easy, things are going to go wrong.
And then show what we actually managed to achieve and what we’re looking to do going beyond. So I don’t think there’s a better way of me sharing that than actually just sharing a little bit of the recording of the company call, particularly of the developers themselves. So I’m going to share with you now a little bit from Kieran sharing the page widgets that we, or page builder widgets we built on the day.
We focused on general components that we see on a day-to-day basis on an e-commerce site and sort of speeding that process up not only for ourselves, but for an end user and allowing them control and visibility.
So as you can see a couple of examples, notice banners, obviously a lot more people are using them at the moment for stuff like COVID messaging. Store switches where whereby if we’re running sort of a multi-store instance on BigCommerce at the moment, where we’re running stores for different locales or for different regions we’re able to go and basically switch stores and access that through there.
USP bars, again, a very generic component that we use across all of our sites. The design of that doesn’t really change a great deal. It’s more a case of how many a user is adding etc. and countdown timers as well, which can be used for in this instance has been used for a banner to count down a sale.
This same widget could also be used for a product launch on a product page. So that’s the bulk of the generalized components, and then we spread out into looking at layout components that I know Dan has been doing a lot work on. So we got a couple of examples of that, both here and here where we’re basically able to give a client a basic layout and say, this is where text and images would go, go and fill that in. And it’s a nice way for the client to be able to go and add that content without worry of really breaking anything.
We’ve also got another one, if I move that one over, whereby we’re able to add a row of cards where the first card will always be the bigger image, and a client can go and add or remove more, and the layout will adapt to that.
So in terms of the actual admin side of it, and if I can find the right tab. We’ve tried to make this, the sort of, UI for this, as simple as possible for a user. There’s times where from a client point of view, the people who are using this and fill in these content blocks in on a day-to-day basis, aren’t necessarily the most technical.
And that’s where a CMS like PageBuilder comes in massively useful. So if you take, say a demo bar, for example, and a user is able to go and fill in the link where they’re expecting that link to go, texts for what’s going to be displayed and then also have limited control over what they can change. So, text, color, background color, etc.
And that’s sort of a really nice way to let them add their own sort of personal touch on the site, without it being restricted to sort of base colors or having to wait for us to go in, to go and change that and make it more personalized. USP is another good example whereby a user can go in and add and remove similar to the row of cards that Tom built.
So we’re able to, as I say, add and remove content, whether that be via text – save that so that it republishes – whether that be text or we can have links in as well. So, a use case for this could be reviews, whereby we have something like Trustpilot in the USP slider. and then we move on to sort of the more complex side of these widgets, which was the countdown timer whereby we’re able to set date and time of when this banner will count down to. And as a future enhancement on that, we’d be looking to once that timer has expired, then it would be hidden from the site and sort of the same vice versa – if your campaign hasn’t started, you can set a start time and it wouldn’t be visible until that point.
So, yeah, that’s mainly the bulk of what we’ve built and the same goes for editorial where the user can go in out all the texts that we want without having to worry about “ooh is the font size the same?” “Is it going to match the look and feel of the site?” We can give the end user sort of as much or as little control as they want, basically.
So yeah, I think we’re all a big fan of widgets. So, hopefully we’ll be building a lot more.
