Rob Barton | November 22, 2013

Cayman agency builds big app. Welcome to Storipass.

Around about this time last year, we were invited to do some mobile work for a client who dominates the attraction photo business. We put together an all-star team here at BB&P and also worked with the very talented folks from the clients team – shout out to Pete Stickler – who handled the back-end and API development.

In a nutshell we created a responsive mobile site called storipass – A revolutionary story creation tool for attraction photos.

Here are a few things I think are worth sharing about the process.

Starting strong – a journey of discovery
Like any good project, we started by spending time in-person with the client team. We heard from every team member about their workflow, challenges and desires. We used the design studio methodology, the KJ technique, and did some one-on-one interviews, among other things. After a very productive couple of days, we had a great sense of what we could do to create an amazing experience, that would not only be easy to use, but also valuable for our client to win new business.

Discovery_research1

Discovery_research2

Discovery_research3

User-experience and design
Armed with a comprehensive understanding of the clients business, and brimming with ideas on what to create, we set about working on the overall IA, UX and brand, making sure we were capturing the right tone for the experience. The project was unique for most of the team insofar as it was a start-up tech project funded but the client rather than a VC. We needed to simultaneously create a completely new brand architecture, name the product, and craft the skeleton of the experience.

storipass_web_ui_sketch

The design process for this project was one of the smoothest I’ve been through recently, and a lot of that is due to Simon Barwick, our Creative Director. One of the first things Simon put together for us was what we called a “design care package,” a collection of fonts, color pallets and vector logos. Gordon Candelin complemented these with texture libraries, button styles, animations, interactions, and visual patterns, and—tada!—a style tile that made the lives for the digital team very very easy.

Since we’re in a post-“full-comp” era, we knew we needed to be thinking more high-level about the visual style. Naturally, we turned to creating some element collages. After a few iterations, we ended up with something like this:

storipass_web_ui

It was at this point, however that things got a little rocky. We were running the project like a start up. Albeit without actually testing our design methodologies on users. Instead, the core team (including the client) were shown weekly iterations of the designs, and asked to comment; we would return to our studio to iterate – a classic build, measure, learn loop. Problem being, it’s difficult to do this with abstract concepts on a flaky GoTo Meeting screen share. After several weeks of thinking we were all on the same page, turns out the client was thinking something completely different! Cue breaks-on, and the amazing PM skills of Ryan Schwartz to get us all back on track. We ditched the start-up methodology and swiftly moved to Agile.

Because of this hiccup we were significantly behind schedule. We were forced to move in to a tangential design and build period. At the start I was slightly uncomfortable with this, although, as time past it became clear, actually this is how digital design really ought to be done. Because of the “design care package” and the skilled work of Gordon who truly understands both interaction design and the wizardry that goes on behind the scenes, it allowed everyone to be less concerned with “finishing” what they were doing individually and more focused on their respective medium. This made for a significantly faster and more iterative process. When everyone on the team is doing the same thing and working the same way within their own respective disciplines, you’re on the right track.

Testing the system
Architects will often make both blueprints and 3D renderings because it helps to round out the picture of a) how an edifice is built and b) what it will become. However, they also know that there’s nothing like visiting the actual construction site.

We ended the visual design process by creating a few full pages, not because the client asked for it, but, like architects, because we wanted to make sure they fit together nicely. All this happened in tandem with architecture and development work. By starting early with an in-browser build (our construction site) that slowly adopted more and more of the art direction, we found that it was much easier to have appropriate discussions at the appropriate times. We all had the same picture of what we were making, and once we got there, it wasn’t a surprise to anyone. It’s what we imagined all along.

All together, having an open-minded client that was willing to trust us with process allowed us to move really quickly and not waste time on anything frivolous. The collaboration between two great teams makes for an awesome product that we’re all really proud of.

With the application now live in San Diego Zoo, the challenge has become one of customer acquisition and retention through marketing, training, data mining and analytics. Bring on the next attraction!

storipass_iPhone

Rob Barton

Head of Interactive + Principal