Here at Fluid, we love the iPad. We love all the possibilities it presents, and all of the amazing types of innovation it makes possible. Fortunately for us, our clients at Craftsman share that view. Coupled with a DIY ethos and a drive to do something really different, we went about designing and building Torque, the first shoppable iPad magazine for Craftsman.

Fluid’s guiding principle as a company is that content, community and creativity together drive commerce. With Torque, we put that belief into action by creating an experience that took the best of Craftsman’s vast amount branded content, added in their highly engaged community of DIY’ers and brand enthusiasts and transformed it into a richly interactive, fully shoppable iPad magazine.

The list of innovative things we did for this app is pretty comprehensive:

• Almost all content within the app is actionable in some way. Whether it’s shopping, signing up for the Craftsman Club, engaging with the brand on Facebook and Twitter, following along with DIY projects, or accessing exclusive videos and articles, the content leads the way
• Using an updated version of Sears eCommerce API, we enabled users to add products to their cart right from articles and content within the app, then checkout seamlessly on craftsman.com
• Live video streams directly from the Craftsman Experience studio, and the app alerts users when the stream goes live
• Social media streams are universally accessible, giving every interaction a potential
• Blurs the line between editorial, branded content and eCommerce
• Content is streamed into the app via a CDN, allowing easier updates without having to release full updates into the app store

How Fluid designed it
Fluid started the discovery process by first auditing all of Craftsman’s existing content as well as their upcoming campaigns and initiatives. We then created an editorial structure and content flow for the app, which is actually much more like creating a magazine for print than creating an “app.”

After nailing down the table of contents, Fluid worked out all of the possible user interactions. This included everything from basic page behaviors all the way down to multiple content interaction scenarios. As we worked on the interaction design and started merging it with our editorial structure, we began brainstorming ideas for an editorial voice and identity. Fluid presented one naming option to Craftsman: “Torque”. Craftsman promptly trademarked the name.

We then began the process of breaking the editorial structure apart into smaller chunks to work on. For content that already existed (like the step by step projects), Fluid redesigned it to fit into the edgier, grittier, DIY-inspired look and feel of the app. For content that needed to be created or expanded, Fluid designed those sections from scratch and provided clear direction and guidance to the Craftsman marketing team so that they could start writing those remaining sections – the most notable of which are the Top 100 and Mystery Car Vault. Our process continued on iteratively until the content for the entire experience was completely fleshed out.

How Fluid built it
On the UX and visual design side, Fluid began prototyping very early on in the creative process. In some of the very first designs presented, we used video layers in Photoshop and exported the files as quicktime movies so that the client could immediately see how both the look and feel and the interactivity worked together.

On the technology side, Fluid’s developers immediately started testing different options for build and eventually settled on using a combination of HTML 5 and Javascript. Structurally, Torque was set up in a way that makes content updates achievable without having to push an update to the app store. All of the content, from videos and images to text, is served via an Akami CDN. In other words, much of the content doesn’t actually live “inside” of the app, so the initial download is very fast and all of the content loads on-demand.

In order to make sure that the eCommerce layer worked seamlessly with Craftsman’s existing system, Fluid worked with Craftsman’s technology team to create new API’s that allowed Craftsman’s “Quick View” to be displayed within the app. Adding items to a cart was seamless via the UIWebView (in-app browser), and checkout was handled by craftsman.com. Once the app was in working order, the entire tech, creative and ux team all spent time working together to test for bugs, optimize, and refine the experience. The final handoff was to the Sears Mobile team, who then submitted the app to iTunes for approval. The app was approved in one weeks time.

Why we think it’s cool
Opportunities like this are rare. Fluid got to create, name, design, and build a branded, shoppable iPad magazine on the hottest technology platform in existence for one of the most well-respected brands in the world. At Fluid, we believe strongly that experiences like this – the ones that merge content, community and creativity in delightful and innovative ways – are the future of eCommerce and brand engagement. We were honored to work with a legendary brand like Craftsman and their very talented marketing team to create a cutting edge product that their consumers are thrilled about.

I had the pleasure of attending the Adobe MAX 2011 conference in Los Angeles this year as a featured speaker, and Fluid was selected to appear in the keynote address for our work crafting customer experiences for multiple devices across channels, from web to kiosks to mobile phones and tablets.

(more…)

This post is co-authored by Art Director, Cat Lee.

We are proud to announce that Wag.com launched as the the 3rd installment to the Quidsi empire of brands. Very much like Diapers and Soap.com, one of our biggest challenges was to strike the balance between a boutique shopping experience with the convenience of a superstore. This positioning is unique to Quidsi and for the 3rd time, gave us a set of parameters to reach further and outdo ourselves in creating a fresh new experience.

Brand Experience

Making a digital brand from scratch is the type of project that we love to tackle. The challenges lie in materializing a brand into a personality where our audience would be able to fall in love with. We first cast a wide net of ideal shopping experiences and through a highly collaborative process, whittled it down to the core of your neighborhood pet store.

With it’s warm and friendly nature, the design shines through giving Wag a truly unique positioning that no other brand in the category can compare. The design values a homespun, whimsical and quirky flair, making it an ideal destination for our modern pet lovers. This is a place where we know how important your pet is to your family.

Close attention to detail was key in making the ordinary interactive elements bring forth the personality of Wag. The scalloped awning housing the global navigation was the perfect metaphor for the mom, pop, and pet storefront. To ensure the brand message carried through to the finest of details, we developed meticulous visual systems for the many working pieces of the site:

• Category color coding
• Typographic styling
• Banner treatments
• Photography selection

Last but not least, where would a brand be without it’s logo? The mark of Wag features a prominent logo type with a clever flicker of a happy tail. We custom designed the logo to not only stand alone as an individual entity but to represent the Quidsi family of brands.

Challenges & Innovations

One of the main challenges for the team was re-imagining the organization and hierarchy for a typical shopping site. Instead of designing an all inclusive navigational system for a single pet store, the Quidsi team pushed Fluid to think of Wag.com as six boutique pet stores within one super-store. In addition, we were challenged to support the shopping errand of a typical customer that owns a single pet.

This paradigm shift inspired Fluid to develop a two tiered organizational and navigational system. The top level navigation supports switching between ‘Pet Worlds’ while within a pet section an additional navigational system supports the shopping catalog for the selected fury friend.

In addition, the team had to rethink about the structure of a typical ecommerce home page experience. Instead of showcasing products and categories that speak to the entire super store, the team designed the home page to serve two main purposes:

• Provide customers with an immediate understanding of Wag’s value proposition of free shipping, excellent award winning customer service and a breadth of product offerings within multiple pet categories.
• Act as a spring board that allows customers to quickly and easily dive into a specific ‘Pet world’.

To support this pet focused shopping experience an in-context search menu was developed allowing customer’s to quickly and efficiently find products that are relevant to the pet category they are currently browsing. For example, while shopping in the Dog specific section of the site, the drop down menu within the search box is set to ‘Dog’ by default. A search for ‘bowl’ returns all bowl products that are specific for dogs. If the search results are too narrow for a customer, they can easily and quickly expand the search criteria by either selecting a different animal or all of Wag.com.

Finally, for those who want to spoil their loved ones or find that special gift; Fluid elegantly created a unique curated section called the ‘Pampered Pet Boutique’. This area of the site promotes specialized products in sets displayed in a beautiful editorial grid. Customers can easily browse the collections and purchase from a simple to use quick shop. And if these items don’t pique the customer’s interests, the full list of boutique items is at their disposal.

In short, this was another great opportunity to collaborate with our partners at Quidsi to push the envelope in terms of brand and user experience. A great challenge with great results.

Once a week, the XD team at Fluid New York explores offline experiences outside the confines of our studio. We think it’s important to take a step back from the digital world and approach design holistically,  experiencing physical manifestations of brands in person. This week, we walked through New York’s SoHo shopping district to see how branded offline experiences relate back to digital spaces and vice versa.

The borders between physical and digital are further being blurred as traditional brick and mortar retailers are laying stake in the digital space. Mobile computing is nearly ubiquitous and instant access to information is almost at everyone’s fingertips. In addition, the attention span of people have become shorter and this poses a challenge to brands. Brand consistency is key to communicating to your target audience and in today’s fast paced retail environment, there’s no room for error. A marketing message that runs astray can have a huge impact on business.

During our outing, we’ve noticed many retailers doing great things with new technologies and some not so great. There has been a recent trend with stores using tablet computers to allow their consumers to browse through their product catalogue within store. It’s a static and passive experience that most of the time, does not engage the customer. Some of the problems with this technology are:

• The technology does not tell you where to find items in store.
  
• Proper QA testing of the app wasn’t performed. The app crashed many times while browsing.
  
• It may not be inline with your brand aesthetic. If your brand has a gritty, industrial feel to it, placing modern, shiny tablets throughout the store takes away from the overall brand experience.
• While the “cool” factor may be there the fact of the matter is that it can alienate the consumer, especially in tablet form.
• You cannot replace good old customer service with shiny tablet device. There is no substitution for face to face human interaction.
  
• Instead of focusing on the products in the store, your consumers are fixated with trying to figure out how to navigate through a mobile experience.
  

To conclude, always keep the end user in mind when designing an experience and remember that he/she comes first and the technology follows. With new technologies being released daily, it’s easy to lose sight of who you’re designing for. As Experience Designers it is our responsibility to make the transition from physical to digital as seamless as possible for users and the focus should be getting to know the end user and their technological needs and wants and then finding the technology that suits them. The tablet computer will not be the the answer to elevate your brand and increase conversion and raise customer satisfaction. There is one trait that successful brands all have in common:  Their solid dedication to Customer Service. When designing, think of ways to design user experiences that enhance customer service and engagement.

Last week’s XD Study Hall* brought New York’s Experience Design team to the MFA Design + Technology Thesis show at Parsons School of Design. The show included an array of projects within interactive art, motion graphics, musical interfaces, fashionable technologies and many other inspirational pieces. The team spent a few hours exploring projects, engaging with the designers and simply just getting inspired. More info.

Here are a few of my favorites:

Interfaces for visual music composition
Ryan Raffa

Self Assembling Emergency Housing
Manuel Rueda Iragorri

Radial
Daniel Ward

*XD Study Hall – In the spirit of collaboration and inspiration the XD Team meets weekly off our computers to explore NY and SF. We observe and discuss trends, ideas and all things design.