The question.
Lots and lots of people love beer. And everyone’s got an opinion about it. Which is why the idea of creating 97 Bottles, a web app and online space for beer lovers to review, learn, and talk to each other about beer, was a no-brainer.
When we started working on 97 Bottles, the question was not should we execute this plan; it was how should we execute it?
The story behind the name.
Our discovery phase involved a huge brainstorming session. We spent a few hours coming up with as many names as we could, and dumping them on the page. Within a few hours, we had hundreds to choose from. One of these was “99 bottles,” a throwback to the old song, 99bottles of beer on the wall. It was good, and we threw it on the pile.
After we let the name sink in, though, it started to sound cliche. Plus, the domain was taken. We were almost back to square one when someone piped up: What about 98 bottles? Or 97? We clinched the deal with the concept that became 97bottles.com:
That’s 97 on the wall and two on the table, one for me and one for you.
This “story” was perfect for the community-oriented vibe we were after. Even better? The name was easy to say and had a decent (and available) URL. Bam.
Making it fun to use and easy to follow.
When it came to design, our number one priority was nailing down how a “typical user” would want to engage with 97 Bottles. What’s a typical 97 bottles user? Casual beer enthusiasts—not necessarily hardcore beer connoisseurs. We crafted the design for a more light-hearted audience, and focused on creating an experience that was fun and easy-to-use and follow above all else.
Another important part of the process was realizing we couldn’t be everything to everyone. We had to really narrow our focus and create a design that would interest a specific audience - and hopefully appeal to a more general one, as well.
The look and feel.
With the concept, name, and functionality in the bucket, we started right in on the execution of the site. We aimed for something warm, fun, inviting, beer-themed—and definitely not Web 2.0.
Beyond that, we worked to differentiate ourselves with a cozy, pub-like design that was more fun than serious. For the swarthy, salt-of-the-earth design inspiration we needed, we looked to the TV show Cheers and the chain of Pac NW bars, McMenamins.
After hammering out a few wireframes, we got into the nitty gritty design work. We incorporated wood textures, brought in little coaster-looking elements for lists and tables, and added some scuffs to give the site its well-worn, fundamentally non-web 2.0 look.
Creating a rough style system helped us carry the look we wanted through the entire site. We repeated elements like headings and styles throughout the site, which meant - thankfully - that we didn’t have to style every single element on every single page. Efficiency at its finest.
The Writing.
The idea behind the copywriting for 97bottles was pretty much the same as the concept for the design: It had to be fun, accessible, warm, and make the site easier to use. We followed some basic copywriting principals to achieve the feel we wanted:
- Make headers that offer a benefit and grab people’s attention
- Remember that web readers are scanners
- Make sure all the copy is DOING something (that is, pushing the reader to move to another part of the site or take a particular action)
- Be as clear, simple, as brief as possible
- Make people smile
The copywriting extended to every aspect of the site: from headers, to privacy policies and terms of use, little interactions, and error notices. From our perspective, the copy was just as important as the design in affecting the tone we wanted.
Custom Django Development.
Of all the components of creating 97 Bottles, development was definitely the most time-consuming, challenging, and instrumental in making the system what is today. The system is custom-built using Django, a high-level Python Web framework that’s known for encouraging rapid development and clean, pragmatic design. We’re very familiar with Django over at Blue Flavor (we even used it to build our own site, and we knew it would work well for 97 Bottles.
To flesh out the site and add functionality around our “domain object” (in our case, beer) we took advantage of several existing third-party Django apps. This gave us a lot of flexibility to craft a powerful, elegant design and feature set that we thought best suited our needs (and our users’ needs).
One of the most important of these features is a complex recommendation engine we built, that recommends beers to users based on not only their own tastes, but that of other users who we’ve determined to be similar to them. It’s a lot to account for, but Django handles it with aplomb.
Thanks to Django, we were able to get off the ground and running very quickly, and able to just keep iterating, rather than having to do monolithic releases (we’ve been using an agile development model).
Going forward
We think we’ve got a great thing going with 97 Bottles, and the process has been as delightful as it has been challenging. We’ve got lots of ideas for how to improve it with new features, etc. in the future - we’re excited to see where it will go!
Have a similar problem? Interested in our services? Tell us about your project, we'd love to help.
