Category Archives: innovation

1 Website, 3 Awards, 7 Diamonds

By | awards, design, innovation, user experience | One Comment

It was Spring of 2012 and 7 Diamonds came to DO for a redesign of their men’s apparel website. They had a few things they wanted to see on the site, but overall they just wanted to freshen things up. Their main objectives included a site that was responsive, which would look great viewed on a monitor as well as a tablet, easy updatability to allow for multiple campaigns throughout the year and a high impact experience through the use of photos and video.

As the UX Specialist, I wanted to share with you some of the challenges, ah-ha moments, and considerations I went through in contributing to the redesign of 7 Diamonds. There were ups and downs but don’t worry kids, it had a happy ending.

Goals: Yes, responsive tiles and designing an overall responsive website is a challenge in itself, but our team wanted to go farther. We wanted to find a happy medium between stunning visual impact, smart functionality and laser sharp usability while also meeting business goals. Most of all we wanted to base all of our design decisions in sound reasoning.

User Goals
We defined two main user types early on: the Browser, who does not know what it wants before it gets to the site; and the Seeker, who is looking for something specific when they get to the site. We wanted to cater to both of these user types when they navigated the website because, after all, it is the user that has the power to make or break the success of a website.

Responsive Tiles 101 – The Homepage:

Old Home Page:

The Problem:
How to create a seamless grid that looks the same on any sized browser without holes or whitespace that lends itself to easily adding and taking away photo blocks. Additionally, the first block of the grid had to be 16:9 to facilitate videos and the grid blocks had to be an array of shapes and sizes in order to establish a versatile, lively arrangement rather than a bland “perfectly symmetrical” grid.

Possible Solutions:

  1. Perfectly even blocks…perfectly BORING! Next?
  2. Create 2 – 4 specific grids based on browser size. These grids would be pre-designed in each browser size state. The grid would then be selected based on the closest pre-designed state. This would require extra design time, and would not be scaleable or easily edited. In addition, this option would limit the amount of blocks available in the grid. We passed on this option too.
  3. Use JQuery Masonry to organize the grid. This plugin is smart enough to rearrange the grid blocks in way that results in the best fit and ultimately the least amount of holes in the grid. For the most part this plugin works fairly effectively but it will never allow for a perfect result.  This wasn’t our perfect solution either.

Result:
Our final solution was to build every block of the grid to be the same width. The video block would be double the width of a regular block in order to design with hierarchy in mind. While every block needs to be the same width, the height becomes the spice of life. Consistency in width allowed us to create visual texture, hierarchy and rhythm with the height of each tile. The roll-over movie added to that texture. The only issue to this solution is that when a user scrolls to the very bottom of the page, there will be some uneven whitespace. We were OK with this solution because the white space on the bottom was only visible below the fold and did not affect the overall user experience or hierarchy we were trying to accomplish. The white space or “holes” would never be seen when initially landing on the page, and that’s what matters.

New Home Page:

The Shopping Experience

Our goal was to create a shopping experience that lent itself to both easy browsing and impactful imagery with very clean interactions. We wanted to use responsive functionality to make moving through the categories a simplified and quick experience. We achieved this by making the product images a little smaller with the ability to wrap responsively depending on the users screen size. At this point the user is browsing and trying to pick a product. We wanted to facilitate that and we achieved that visual impact by showing a flood of product. To facilitate the “Seeker” user we added a drop-down filter for an effortless shopping experience.

New Category Page:


Old Category Page:


Product Page

Once the user moves on to the product page, we wanted to keep any purchasing decisions toward the top of the page and make them as clean as possible. In keeping in line with our goal for visual impact and simple interactions, we gave the most space on the page to product photography. If a user did want a magnified view, the photo zoomed to the entire imagery space and took advantage of scrolling functionality to view the whole image. To get out of zoom, the user just clicks the “x”. We felt that this was a great way to highlight the quality and craftsmanship of 7 Diamonds products.

New Product Page:


Old Product Page:

Shop The Look

The “Shop The Look” page was another interesting solution to design for. We knew we wanted a carousel of looks for the user to choose from but when a look was clicked on, we wanted to make it clear what products made up the look and to also… you guessed it, show big beautiful photography. We accomplished this by using the product image space that we defined early on to show the look, and the product detail space to show thumbs of the products, as well as a way to quickly purchase.

New Shop the Look Page:


Old Shop the Look Page:

“The Brand” Page

The challenge here was 7Diamonds had only a very limited amount of brand specific resources and at the time, this page was purely text based.  The goal was to create an intriguing page that informed the user about the brand in an engaging way. As a result, we created a layered parallax-scrolling page that is visually bold, interesting and informative. It was important to highlight the strongest point of 7Diamonds; the fine fabrics, the intricate details and the fashion forward lifestyle of the brand.

New Brand Page:


Parallax Tips:
• Heavy and precise communication between the developer and designer is vital.
• Try to design out a couple of stages of movement so the developer has an idea of where objects move and when they move relative to each other. It might be easiest to do this piece by piece. Show specific movements of individual groupings individually rather than trying to show multiple movements in one view.
• Experiment!
• Show the developer other sites that can mimic the type of movement and functionality you are trying to achieve.

Now I told you there would be a happy ending, right? Well, it turns out that some other people thought our design was pretty cool too and we got a few notable nods:

Awwwards Site of the day – September 8
CSS Winner – September 12
CSS Design Awards – September 2

Check out the final product at www.7Diamonds.com

Omni-Channel: Unattainable Buzzword or Guidepost to Success?

By | digital commerce, ecommerce, innovation, interactive marketing | No Comments

So you’ve got a client who has a strong multi-channel presence; they have brick-and-mortar stores, a strong ecommerce site that’s optimized for mobile, beautifully designed print campaigns, and a great social media strategy. Now, they’ve come to you to help them connect all the pieces, bring them to that next level integration,  get all the channels speaking to one another in a way that allows them to innovate and create a consistent and connected customer experience across all touchpoints.  You’re going to make them OMNI-CHANNEL!  First of all, pinch yourself, because you’re probably dreaming.

Unless your client is up on the latest trends and buzzwords, they probably don’t even know what “omni-channel” is —let’s be honest, we’re all trying to wrap our heads around it. Additionally, unless you’re dealing with a huge international brand, your client is likely a retailer with some strengths and weaknesses in terms of channels and consumer touchpoints. Some channels may be strong, some may need work, and some are likely non-existent.  These clients are probably more interested in strengthening their weaknesses than in taking on the daunting, seemingly unreachable goal of having all channels seamlessly connected.

In a recent, otherwise well-informed, blog post from bazaarvoice, it was stated boldly —literally in bold font — “Create a consistent consumer experience across every channel, now.”

Right now? That’s easy enough. Done!

The truth is, for most brands that just sounds impossible. If we keep talking about omni-channel in such grandiose terms, we’re going to miss the chance to start taking the appropriate steps needed to help our clients give their customers what they need and want.

Let’s take a step back. What is omni-channel retailing? And most importantly, how do you start helping your clients get there?

Omni-channel is basically an evolution of multi-channel. While good multi-channel retailers create consistent experiences for each of their consumer touchpoints, good omni-channel retailers are able to create single consumer experiences that include several touchpoints, even in a single purchase. For instance, Starbucks has connected their in-store loyalty program with their mobile application. Walmart is also heading the charge, now testing a new feature in an Arizona store which would allow customers to self-checkout with their iPhone. This adds to the many uses of the Walmpart app, which already allowed users to see what’s in stock in various stores, create shopping lists, check prices, etc.

The only way to create these experiences is for the (often completely siloed) channels to share information, and this can present some huge logistical hurdles.  It is important to remember though, that omni-channel didn’t start with the imperative for shared information.  It started with an imperative to create better consumer experiences, and it should continue to be about just that.

It may seem simplistic and reductive of me to suggest that you “start small” or “put one foot in front of the other,” blah blah blah. But in reality, even the largest, most innovative brands started that way.

Think of one interaction that your client wants their customers to have. Maybe it’s just allowing in-store pick-up for online orders.  Work with your client to connect the dots needed to allow this interaction. This alone will probably present several challenges, but at least it represents a clear benefit to both the retailer and the consumer. The retailer benefits from getting online customers in the door to possibly purchase additional items, while the consumer benefits from often free and/or expedited shipping.

Now, repeat with another desired interaction with a clear benefit for the consumer and the client. Once the proper information is shared and the basis is set, ideas that once seemed totally out of reach can actually start to happen.

“Omni-channel” might just be the buzzword of the past year, but the consumer expectation for this type of retailing is growing. As long as you keep it about the consumer and don’t get bogged down in trying to make it all happen RIGHT NOW, it is a lot more achievable that it may have seemed.

If you have any questions about beginning the transformation towards omni-channel retailing, feel free to contact us.

DO Intermingling at Interbike 2012

By | agency life, digital commerce, events, innovation | No Comments

Interbike is the bicycle industry’s premier event, bringing together 750+ companies representing more than 1,200 brands.

Digital Operative’s BJ Cook, Adam Levenson and Jamie Tuckey will be attending the Interbike Conference in Las Vegas next week.  Having ridden (and fallen) together on the rocky trails of San Diego, the DO trio is now taking that raw enthusiasm and applying it professionally to the cycling industry as it pertains to digital commerce and the Digital Operative team.

“Having just purchased my first full suspension mountain bike, it really opened my eyes to how disjointed the whole customer experience is within the bicycle industry. You spend hours researching online (visiting forums, reading reviews, watching videos) and then visiting countless local bicycle shops that it’s pretty overwhelming. We have a good opportunity to engage some key players in the industry and help create a truly holistic experience for the customer that doesn’t also just end at the purchase of the bike.” says BJ Cook, CEO.

While at Interbike, the team is looking to sit down with various brands and gain an understanding of the challenges they are facing.

If you are going to Interbike or are in the bicycle industry, drop us a line, and let’s intermingle at Interbike !

Introducing the New LaCantinaDoors.com

By | design, innovation, Uncategorized | No Comments

DO presents our latest website – LaCantina Doors. Based out of San Diego, LaCantina Doors  is a high-end folding door company that produces a variety of bi-fold doors in materials that range from aluminum to wood. The website is built on the ExpressionEngine CMS which is used to build information based pages, and has a section to manage an inventory of products.

Here’s the site LaCantina had before working with DO:

As you can see everything was changed, from the logo to the UX to the design. DO simplified the site by expanding the hero image across the browser and adding a slider to display different uses of the folding doors. The site navigation was also trimmed down to the necessities with emphasis on the more significant pages.  We designated the space below the fold to contain a quick view of projects and galleries with corresponding calls to action.

Additionally, DO utilizes a combination of JavaScript plugins and custom functionality to give the user the best experience possible. Some example of this increased functionality include:

  • The gallery which contains a custom slide show as well as specialized filters allowing the user to find the exact door that they are looking for
  • Video plugins showcase the latest press coverage for LaCantina
  • Interactive rollovers enable the user to find out more information (see image below)

We encourage you to check out our latest work and if you’re interested in website design or development opportunities don’t hesitate to contact us directly.

LifeProof makes front page news on the San Diego Business Journal

By | innovation, product design | One Comment

LifeProof, a DO client, was featured on the front page of the San Diego Business Journal this month announcing a new product launch. LifeProof has had a banner year so far, already doubling the number of employees to keep up with their rapid growth. Every month they are doing better and DO is proud to be working with them to help meet their goals.

LifeProof has sold over 1 million iPhone cases and CEO Gary Rayner is planning to reach over $1 billion sales by 2016. Because of the success with iPhone cases and great demand, LifeProof is releasing an iPad case later this month.

The iPad case (as with the iPhone case) protects from drops up to 2 meters high and is waterproof up to 2 meters below the surface. Imagine watching one of your favorite movies in the pool on your iPad or checking your email on a summer day from the beach.

The iPad case also features nüüd naked screen technology, which unlike many other cases does not allow for air to get trapped between the screen and the cover. The nüüd naked screen provides “uncompromising visual clarity and an intimate touch experience”, according to the article.

LifeProof continues one of its main beliefs that consumers want a slim but protective case. Rayner believes people pay for the slim design of Apple products and LifeProof extends that to their cases as well.

The iPad case’s suggested retail price is $129.99. It is available for pre-order on the website http://www.lifeproof.com/shop/cases/ipad-2/ or in retail locations nationwide http://www.lifeproof.com/distributors-and-resellers.

For more information check out the Article in the San Diego Business Journal Vol. 33, #28.

* Update on August 8, 2012.

Today LifeProof was featured on TechCrunch as one of the top 5 iPhone Cases to bring back to college this coming fall semester. TechCrunch points out that as LifeProof cases are waterproof, shock-resistant, snow-proof and dirt-proof – students won’t have to worry about those late night ragers with spilled beer, forgetting it in the ice chest or dropping your iPhone out of your dorm window. LifeProof has your iPhone covered!

To read the full article on TechCrunch, click here.

Street Art Appreciation

By | agency life, innovation | No Comments

Digital Operative's Own Street Art

As a company whose culture thrives on creativity, no matter if that is born of technology, marketing, design or pure business mind; we here at DO love to look outside of our walls for true inspiration. On this evening, while working on an international marketing program for a client, I wandered the streets of urban culture and artists. I was drawn into a labyrinth of laborious art across the globe. And I wanted to share it with everyone.

Part of what makes our digital agency so unique is our ability to derive inspiration from everywhere at anytime. It’s even a core interview question for all candidates. If you’re stuck just staring at awards websites, CSS galleries, Behance and others; you never truly get that raw creative inspiration that’s required to ultimately create one of those tremendous pieces you often see in the latter mentioned sites.

I was going to keep this thought to my team, but it’s best shared with all of our readers and those looking for something a little different, to help them DO.

Enjoy.

Google’s Tastiest New Treat

By | google, innovation | No Comments
The Ice Cream Sandwich OS or Android 4.0 was recently unveiled in Hong Kong on October 18. This new OS has been much awaited and there were high hopes for its new features.  Just a week before Apple released their iPhone 4S and its a hard act to follow. Although Ice Cream Sandwich hopes to close the distance between the iPhone and Androids, bringing Android OS to the top. Ice Cream Sandwich is expected to be the solution to many of the Android problems of the past.

Currently there are Android apps that only work on Froyo OS for mobile or only work on Honeycomb OS for tablets, Ice Cream Sandwich is supposed to cover both of the bases. Developers now have to create apps within the new OS, but in the long run this would be beneficial because it will run on either mobile or tablets seamlessly.

A new feature is included called “Android Beam” that uses Near Field Communication to share information when two devices are tapped together. This is the same technology that Google needs for the “Google Wallet” payment method discussed in a previous blog post. This should help them have more devices able to use Google Wallet.

Another advanced feature available on the Ice Cream Sandwich OS is the Face Detection to unlock your phone. The camera should be able to determine whether someone else is trying to get into your phone, however the live demo during the show was a fail so they may need to work on this a bit more.

Other minor changes from Android 4.0 include getting rid of physical buttons and including them on the screen, thus making the screen that much bigger. The creation of a new font called “Roboto”, which creators will begin to use on all Android OS. Matias Duarte, the Director of Android operating system User Experience described it as “modern, yet approachable and emotional”. There is the improved Gmail application. Improved voice to text tool called Voice Typing. Ability to edit photos with the provided “hipster” filters so you won’t need to download an app for it. The improved camera has “zero shutter lag” taking photos within a second.  Buckets, much like the folders in the iOS to gather and organize your apps. Also taken from iOS is the snapshot of the homescreen.

The first phone to be released with the Android OS 4.0 is going to be a Nexus Samsung Galaxy Phone, in November. Samsung has been the leader in Android phones and they continue this partnership.

At the end of the review, there are many great additions to this OS, many that have been awaited and a few surprises. But one of the major issue people are concerned with now that Ice Cream Sandwich is out is the question of updates for existing devices. How long will it take to update older devices? and which devices will not be able to receive this update? We’ll find out in the coming weeks. To stay up to date on topic like this and others, follow us on Twitter @digitaloperativ.

Google Wallet: Smartphones Just Got Smarter

By | ecommerce, google, innovation, mobile apps | 2 Comments

Google Wallet is one of Google’s newest creations has recently gone public for all to try out. This is an amazing innovation in the world of shopping and in-person transactions. Basically Google Wallet is a payment platform, where you wave your NFC (Near Field Communication) enabled cell phone over an NFC card reader and the whole payment process is taken care of in one tap. This removes the need for credit cards and as Google likes to put it “Make[s] your phone your wallet”. This platform also includes shopping history, loyalty cards, offers and allows you to have multiple credit cards within your electronic wallet.

In an ideal world this would be quite a useful tool, and safer than actual credit cards but we don’t live in an ideal world. Here are a few downfalls that Google is working on improving:

  • As of right now there is only one cell phone enabled with the Google Wallet – The Nexus S 4G from Sprint. It was built with the NFC card installed and will be updated with Google Wallet already installed.
  • So far only two credit cards can be used. The first is Citi MasterCard, and the other is a Google Prepaid Credit Card. At least with the Google Prepaid Credit Card you are able to transfer money to the card and do not need to get a new credit card to use Google Wallet.
  • You are limited by the locations where you can use this payment platform. Not every store has an NFC card reader – you might be surprised by how many do – but many mom and pop stores still only accept cash.
  • Not many stores have signed up to give offers or promotions. The “Offers” section within Google Wallet is pretty bare.
  • The “History” section does not provide much information about past shopping location, store, or amount spent. Currently, only displaying the time past purchases.

Google assures they are open to new partnerships and these are just the first steps toward making it the next big thing. More cell phones are now being made with the NFC card. Stephanie Tilenius, Google’s VP of Commerce noted, ”50 percent of smartphones will have NFC built into them by 2014”. More credit cards and banks are signing onto join Google Wallet. With the movement toward these types of payment methods stores and registers will need to be updated and get the equipment to allow their customers to pay however method they choose. Most of these goals will not be realized for a few more years if they actually do catch on at all. Just remember that you heard about Google Wallet from us at Digital Operative first, always at the forefront of technology and commerce.

Facebook of the Future

By | facebook, innovation, social influence, social media | One Comment
If you haven’t already heard or seen about the Facebook changes, then really what are you doing with your life? Actually living one? Not cool. Facebook is rapidly changing their look offering more features, and removing old ones. With these changes come complaints, confusion, and curiosity as to how these features work and how much of their information is going to be shared. Facebook engineers have been working on these changes for a while and on September 22, Mark Zuckerberg announced all of the upcoming updates that will slowly make their way to your account.

Here is a list of the major changes and their descriptions to ease you into the Facebook of the future:

Timeline
The new timeline feature has not yet been made public but is one of the biggest changes to come. This feature will basically turn your account into an online scrapbook pinpointing specific big events and showcasing them through pictures, statuses, or check-ins. An algorithm determines what is deemed as important, along with anything else you may want to check as important. You can also go back and fill-in old dates up to your date of birth if you choose. Zuckerberg described that currently Facebook does a good job of telling friends who you are now, but not what you’ve done in the past. This aims to solve that problem.

Cover Photo
A new look is coming to profile pages,  one of the new features you will see is the cover photo. This is just one large photo of your choice, at the top of your profile page. This gives the page a new fresher face-lift, slightly resembling a blog.

News Feed
The News Feed has been one of the current changes to your page. The “Most Recent” news feed has been pushed down to make room for “Top Stories” in which Facebook has an algorithm to find what news is most relevant and important to you. Although many say it is inaccurate and random, it just started and will take some time to get into full swing. The algorithm incorporates who you contact the most frequently, along with what has the most likes and comments among other variables. The goal here being if you don’t use Facebook very often or were away, the most interesting news from your friends would be the first information you see when you log-in next. The more frequently you use Facebook the more recent those stories are. Basing this idea off of a newspaper set-up, where the front page has all of the headlining stories.

Side Ticker
In contrast to the “Top Stories” feed which holds the important news, the side Ticker holds less important updates from friends. Updates such as involvement in a game, or liking a new page which are considered to be annoying news. However, you can already see the Ticker on your page and many find it in itself disruptive and distracting. Another issue to point out on the Ticker is you are able to click on and see friend’s comments to non-friends. Privacy issues must be re-examined to see how this can be prevented.

Open Graph
Open Graph might change the whole Facebook playing field. This allows people to share what they are doing and friends are able to join in. Say for example you are listening to a great new band, you share this on Facebook and a friend can join in exactly on the part of the song are you listening to. As if you were together. All of which can be done through the creation of new apps for Facebook particularly good for industries such as communication publications, music, videos, games, and lifestyle interests. With the new set of apps, you won’t even have to leave Facebook to explore them, they will be right inside of Facebook encouraging you to never leave the site with everything you might possibly want right there.

Permissions
Along with the new set of apps comes a new permission privacy setting, where apps only need to ask for your permission one time and never again. This is alarming to many users, and needs to be further looked into once the apps begin surfacing. Just keep in mind who you are giving permission to.

Now you have a little insight as to what is coming on Facebook; some good and some not so good features. How are these changes going to affect Google+? Will any of the features be altered or removed? Only time will tell, until then like our Facebook page to keep up with these changes and others at http://www.facebook.com/digital.operative.agency or if you have any other Social Media inquiries let your friends at Digital Operative help you out!

iPad Light Painting – Dentsu London

By | customer experience, design, geekery, innovation | No Comments

Making Future Magic: iPad light painting from Dentsu London on Vimeo.

I discovered the following project on Beeker Northam’s blog. She and her team at DentsuLondon partnered up with design consultancy BERGlondon to create a mini-series about capturing light from iPads and extruding 3D ainmations. This is the REAL stuff when it comes to the potential for consumer engagement in the future with so many devices gaining global penetration. magic rules.

Like what you see? Contact us for a quote. Get Quote