Hacking Upstatement

What we did during our summer hackathon, Tankathon 2016

Mike Swartz
Upstatement
7 min readAug 9, 2016

--

An annual tradition in our studio is the summer celebration we call Tank Day. It actually hearkens back to our college days at the student newspaper, a scheduling snafu led to an unexpected night off, and it was celebrated accordingly.

We’re a bit more deliberate than that these days, and for the past couple years have had our own Tank Day in July, taking the day off and cooking out, playing frisbee, and having a good time. But as the studio has grown over the last couple of years, we started looking for ways to do it a bit bigger, and really get something substantive out of it at the same time.

This year, Tito had the idea to take a longer time away from client work and have an internal hackathon. We carved out three days of a week away from client work, starting on Wednesday with some brainstorming, building, and presenting our ideas on Friday morning. We’ve done hackathons before, but with external groups and focused on different kinds of problems. But this year’s hackathon had just one theme:

How might we improve the Upstatement experience?

Using this prompt, we generated about 85 “how might we …” statements focused on everything from the bathroom decorating plans to ambitious software projects. We split into 5 teams of 4–6 people per team, and got down to business. Here are some of the ideas that emerged:

Team 1: The Upstatement Art Gallery

The Upstatement Art Gallery in our lobby, featuring work from people around the office including Holly Copeland, Katherine Rich, Scott Dasse, Regis Biron, Linda Gorman, Cameron Stewart, Emma Gardner and Kim Miller.

What’d your team work on? What was the inspiration?

The inspiration was how to bring our personal and professional work into our physical space. The solution started with us thinking about different ways to showcase work that typically we wouldn’t see — we thought about how to best display personal work from employees, and how we might incorporate our client work into that. We focused on the personal work for this exhibit, but think in the future, some projects may contribute to the gallery depending on the theme chosen.

A loop from the interactive site created by Scott, Linda and Regis. It responds to a physical input and has a generated soundtrack and visuals.
Kim Miller’s Sonic Screwdriver

Where might this idea go from here?

We hope this will be used to inspire well-curated exhibitions that pull works from our employees, family, friends, and community. We talked about having 4 exhibits per year, which would give enough time for work to be generated for specific themes and for the gallery operations and reception party to take place. For each exhibit, we’ll create an online gallery page that will be specific to that exhibit, and will have some sort of interaction with the physical gallery space.

Team 2: MeritBadges: Peer-to-peer mentoring platform

What’s Merit Badges?

Our group built a prototype for a digital matching tool that facilitates peer learning and mentoring relationships. You are able to log which skills you’d like to learn and which you’re capable of teaching. You’re then matched with others who can either learn along with you, mentor you or be your mentee.

We were interested in helping expose the potential for skill-building in the office. We were also concerned with the idea of adherence, and how we could make sure that the relationships created through the matching tool were successful and not just abandoned. The solution started as a much more fleshed out app that provided people with a homebase for their different learning relationships, as well as a full profile. We ended up only prototyping the matching tool because we felt that it was the most immediately usable and impactful component.

Team 3: Garbage Plate: Collaborative Ambient Interactive Art Doohickey

What’s GarbagePlate?

It’s a simple way for people to showcase inspiration, funny stuff, office jokes and announcements. A while back we had this pie in the sky idea of a way to just throw stuff up on any screen in the office, and our team delivered on that.

What was the problem or the inspiration? Where did the solution start and where did it end up?

The idea behind our product was something to display our inspiration in the office, as well as make use of the TVs in the space. There are a lot of ideas and inspirations being shared in Slack and in Snacks, but they are trapped in those spaces. We wanted a way to show the Upstatement personality in our physical space.

Garbage Plate is built using Tumblr as it’s CMS. Tumblr has an excellent API that Emma was able to utilize to pull content into the site using Handlebars. Tumblr also has a Chrome extension which allows Ups-persons to post new inspiration from anywhere on the World Wide Web. Additionally, Tumblr provides an excellent default Archive to allow browsing of our inspiration on your own.

The team worked really collaboratively to come up with the idea as well as how it would be implemented. Mike, Matt and Kate worked together to come up with some templates for Ups-persons to use to add new fonts and color palettes to the site. Kate also designed the identity that we are using and a nifty animation for it. Andy worked on the display of the captions on the site and slide transitions with Emma. Mike also programmed the Raspberry Pi devices to run Garbage Plate on the TVs.

Design exploration in type combinations, colors palettes, etc. is often only seen in the context of a given project — if you’re not working on that project, you might not ever see the inspiration or sketching phases. Whenever you have a cool combination of type, color, pattern, photography, or illustration, Garbage Plate lets you share it with the office, regardless of whether or not it ever makes it into a finished project.

Team 4: The Upstatement Handbook

True to the “How might we improve the Upstatement experience?” prompt, we asked ourselves what common questions Upstatement employees have. We realized there are a lot of policies, information and general institutional knowledge trapped in various places. So we built a web handbook that made it easier for new and current employees to learn about Upstatement and answer some of their commonly asked questions.

How’d you build it?

It was built as a website, Jared, Nathan and Mike Burns wrote the code and defined the features and technical solutions, Emily built the content and the presentation, Qusai helped design the website and helped define the features and interactions.

UpScouts: A reward system for pitching in around the office

What is this?

Upscouts of America: A system for tracking and rewarding kitchen chores. Chores are weighted based on level of effort to complete. The Upscout with the most “chore points” at the end of the week is recognized at the Monday company stand-up and given a merit badge.

We created a system for weighting chores and tasks, and awarding people for completing them. We also imagined ways that this idea could expand to include other things we value, like sharing knowledge or making Upstatement better in other ways.

There’s also a physical component and “gamified” aspect that should add a little competition to the mix.

It’s a wrap!

These couple days were really great, and it was awesome to see everyone working together on fun stuff that’ll continue giving back over the next year. Happy summer!

--

--

Mike Swartz
Upstatement

Principal, Creative Director at Upstatement.com. Artist, guitarist, maker and breaker of things.