Designing the 97 Bottles mobile experience proved to be a unique challenge. We had a beautiful desktop product, but how would it work great on a mobile device? After all, mobile is not about retrofitting a site for a smaller viewport. It’s about crafting a compelling user experience for the mobile audience and extending the brand.
Stripping it down
The first thing to do was sit down and understand the user context . When you’re out at a pub there are certain things you want and and they need to be easily accomplished so you can get back to that frothy brew. Keith spent a lot of time out in the wild with the site and was able to dig in. With his knowledge, I was able to quickly learn what was needed and what I could strip out.
Setting the framework
Now that I understood what was needed I was able to quickly create wireframes for the mobile site. I could have easily bypassed this step but by doing these kept me focused on the user interaction. I didn’t want to overlook anything that was essential to the mobile experience and saw where elements could be reduced or removed entirely.
Another advantage is that we wireframed the interactions. Kenny and I were able to make sure things were going to be possible before we got into development. This saved us a lot of time and frustration down the road.
Extending the brand
The design proved to have it’s own challenges as well. The desktop site had already been out in the public for some time and people were familiar with the brand and how the site’s interactions. There were some changes to functionality, to accommodate the mobile context, and it was up to design to bridge the gap between experiences.
Thankfully Tom had given me some great tools to work with from the desktop site. I was able to easily reuse elements, some in new ways, to keep the experience consistent between the two sites. There are differences between the two, but the mobile definitely feels like it’s part of the desktop site and not a new thing entirely.
Setting it free
SXSW served as a great way to field test the site and figure out if there were further things we needed to do for the mobile site. There are a few things that we learned that we are working on addressing but those changes will come later. For now it’s time to set it free to the world at large.
Fantastic mobile iteration of the site and job well done! One thing i’m running into with the site is that I am unable to get back to the desktop version of the site. Even when I go to http://www.97bottles.com it redirects my browser back to the mobile version, but interestingly enough it takes me to http://97bottles.com (sans www) which displays the mobile version. (safari 4 and FF3)
Wasn’t sure if this was a problem in the detection script or if your using the device atlas detection. Otherwise great site and thanks for sharing the process with us!
job we’ll done kevin
Hey Kevin, just wanted to congratulate you on your success with the 97 Bottles mobile site, very simple and easy to use framework.
Great site! It’s a sort of review site that makes the overall stuff very interesting to people. Plus the fact that your readers can easily follow you even with the use of their mobile phones.