We all need inspiration sometimes, whether that's in the form of other designers' work or their stories. Today we bring you a dose of both, in an interview with Ryan vonBergen, Creative Director at media junction. He and his team won the first COS Hack-a-Thon in March with their custom built event calendar module, backed by prolific COS developers with years of experience under their belt. This custom module incorporates clever usage of Google Sheets as a simple, editable database for users and has been built with loads of customizable design goodies.
Want your shot at glory? You're in luck because we just kicked off our second HubSpot COS Hack-a-Thon. If you've been looking for a venue to showcase your COS design and development skills, or a challenge to push yourself to the next level, look no further. Did we mention the chance to win some great prizes?
If you're newer to the COS, fear not—there is both a Beginner and Advanced division, with challenges to create unique custom modules that creatively push the limits. For more details, visit this page. Submissions are open now and entries close on Sunday, May 31, 2015 at 11:59 ET.
As you mull over ideas for your own submission, read on to learn about the inspiration behind Ryan's event calendar module and his nuggets of advice to designers newer to the COS.
The conversation has been edited for brevity and clarity.
Q: Why did you guys build the event calendar module? Was there a specific problem that it was built to solve?
We do a lot of work on the COS and get a lot of requests to make something for event management. We could do it in the blog, but it wasn’t great. When the hackathon came about, our designers and developers sat in a room and wrote a bunch of stuff on the board, and the thing we kept coming back to was an events calendar—something you could easily manage and just plug in and go. There was a lot of client need for it, so we figured, let’s take this opportunity to trick it out and make it cool.
Q: All of those requests you got—were they all asking for the same thing?
Not exactly, [our approach] was “how much stuff can we add to it” so we could then tailor it for the client need. If we need certain things or don’t need them we could take them out or leave them in. We basically wanted to create a kitchen sink.
Q: Since you’ve rolled the module out, how’s the response been?
Ironically enough, we haven’t had any clients asking for event calendars in the last couple months. But we’ve gotten some really good reception on just the landing page that’s been up, and a lot of good questions from people using it. We’ve got a few projects that are in the works where we’re definitely gonna use this thing. We’ve got it built, so it’s easy now—we have it in our repertoire and we can just drop it in. There’s stuff coming up [using the module], and we just haven’t had a chance to publish it.
Q: I want to talk a bit more about the process of creating it. You said that you guys went in a room, whiteboarded it out —then what was the next step?
From there, Dan, our developer, really took the reigns on it. He’s got a passion for hacking things and making things work in specific ways. We got a smaller team together and made a list of all the functionality that we wanted it to have and we were just brainstorming, trying to figure out how we could do that. Dan basically went off for a couple days, pulled everything together, then halfway through it, he came to me with what he had. I sat down, did some quick layout and user interface stuff and sent it back his way, then he added the gooey piece [to tie it all together]. It was pretty seamless from start to finish, and whenever he had a free moment he’d work on it.
Q: What was the timeframe for that?
We got the Hack-a-Thon announcement on a Wednesday, then brought it back and had a couple days to think about it on our own. We started on a Monday with the brainstorming, and by Friday it was ready to go.
Q: That’s awesome. I’m also curious about challenges in building it out, in terms of the implementation, or if there was anything unexpected?
Really the management side of it, being able to allow someone to easily maintain it. We thought about putting a bunch of custom modules in, but then the editor would get super long and hard to manage. I think that was a really big challenge, and we solved that by going to Google Sheets. We just have a spreadsheet where you can input everything and it’s like a lightning-fast update. That was another big thing, how can we make it really fast. We’ve got a lot of Javascript going on, so [we thought about] how we could really speed it up to make it super fast.
Q: Did you guys arrive at the Google Sheet idea pretty immediately or did you experiment with anything else?
I think it happened in the discussions because we weren't going to go through and build all this stuff in and have it not work—we had to get it right. I think it was Dan who said, let’s just use Google Sheets, and we can import all the data from there.
Q: That’s actually a big inspiration for this second Hackathon. The advanced division has to use a Google Sheet, integrated as a database. We thought that was a really clever use case. Is there anything else you guys have used that Google Sheet for?
We haven’t yet, but it’s definitely opened up the possibilities of some other things we could [use it for to] easily manage data entry and input it into a nice front end. We are planning a Sheet integration right now for a client who has a staff directory with over 100 contacts and bios and are excited to see the final result.
Q: You talked a little bit at the beginning about how you guys wanted to build it so it would be flexible, for different types of implementations. Is that mostly on the UI side? Can you talk a little bit more about the considerations you had in mind?
Yeah, I think a lot of it is on the UI side. One thing that’s not even on the landing page that you can do is toggle it to be either a list layout or a card layout. [We made sure to] put some of that stuff in where you can have a different front-end look. We built out a Sass file to make it easy to update all the styles. We’re just using Font Awesome for the icons to make it really simple to customize. The customization part of it was the probably the biggest thing we wanted to do just because we wanted to use it quickly and we want other people to use it and make it their own. I think for the future, we’d love to put an actual calendar view. That’s definitely something we’ve seen asked for, especially by clients like health clubs, that want to have that calendar view so you can see all the dates. That’s considerably more difficult, but it would be really cool to package that in there, or have a new [module] that just has the calendar view.
Q: Just out of curiosity, what was the biggest learning curve when you were learning the COS initially? Was it the interface?
The interface was pretty easy, I think the template builder was a little bit [of a learning curve]. Trying to get around Jinja or HubL, figure out what does what and how to implement it were the big hurdles. We were in the beta program for email and landing pages so we got an initial glimpse of that stuff. Also, the fact that HubSpot’s always iterating and changing and updating things. Sometimes that can be kind of frustrating but [there have been] other times I was like “Oh, awesome, they fixed that. That was something I was mad about for two weeks, but then they fixed it. Awesome.”
Q: Do you have any advice to people who might be new to developing on the COS?
Yeah, I think the biggest thing you can do is not be afraid to break things. Get in there and get your hands dirty. Just try stuff. I’ve been working with the CMS and the COS for about four years now, and the first thing the client would always ask us is, “Can we do that?” and the next thing [we would say] would be “Yes, we can do that,” even if we didn’t know if we could do that or not. Then the third step was “Okay, how do we do this,” and [we would] just figure it out and dig in there. I think that’s the best piece of advice you could receive when you’re starting on the COS—just dig in and figure it out—because once you start to figure it out, there’s a lot of really simple concepts that can be implemented to make really great websites. Once you start to wrap your head around some of the customization you can do with Jinja and the custom modules I think it will start to unlock in your brain.
