iStrategyBlabs

Experience the Redd’s Apple Launcher!

ReddsSetPic

As an agency that appreciates a good beer every now and then, getting to work with MillerCoors, and Redd’s Apple Ale specifically, was a dream come true for us.

Redd’s Apple Ale is the beer for those looking to branch out, so when approaching the project, we knew that the sky was the limit. So we thought, “What if you got to throw apples in a bar like in the commercials?” Then, like an apple to the head, it hit us. What if to help launch Redd’s Apple Ale, we let users literally launch Redd’s with an 80mph apple launcher and a fully-stocked bar just itching to be destroyed, and what if we let users win prizes while destroying it? Thus, our Redd’s Launcher was born…

PLAY IT HERE, LIVE, RIGHT NOW!

redds.email

In almost no time at all, we had a fully-functional (only slightly terrifying to have in the office) Redd’s Launcher that was able to be controlled via an internet connection.

But we wanted to make sure this experience really satisfied the desire to destroy a bar, so we spent weeks imagining, designing, and building our very own Redd’s Apple Ale bar; it had everything from a 15-foot lit-up Redd’s sign to a pool table to a moose head on the wall. Then, we threw bullseyes all over it, letting eagle-eyed users get the chance to win prizes for their great shots.

4

But while all of that is great on its own, we wanted to branch out even further with the idea. “What if we added a bunch of special activations throughout the 12-day experience?” So, and I don’t want to give away any spoilers, we made sure that each day of the event was overloaded with anything and everything users might want to see hit with an 80-mph ball, making sure that this experience is just as enjoyable for those waiting to take control of the Launcher as it is for the user launching. Adding in things like live user-voting and a Twitter display, we’ve guaranteed that.

Get your trigger fingers ready for 12-days of non-stop destruction, brought to you by Redd’s Apple Ale.

ReddsSSPic2

ReddsSSPic

Behind the Scenes – Simply Gifted Marketplace and Merchant Widget

1 - Simply-Gifted-iStrategyLabs-960x360-958x360

When we worked with Simply Gifted to build a new online gift card platform, we knew we needed to create an incredibly easy product for small businesses to create and sell online gift cards, and for customers to purchase and send them to friends.

Leveraging existing APIs, we followed our process of IA/UX, design, and development to create a beautiful, intuitive service to buy and sell gift cards, with full analytics and tracking for Simply Gifted to continue to monitor and optimize the platform.

What we produced is quite possibly the easiest way for small businesses to create and sell gift cards — and the best way for customers to find and purchase them on the web. Here’s a quick look at the finished product, and the process of how we produced it, below:

2 - Simply-Gifted-Marketplace-iStrategyLabs-ISL-1-2


IA/UX

Widget:

We started by creating wireframes and user flows of the entire set-up and purchase process for business and customers.

We worked hard to make the platform as easy to use as possible, simplifying the user experience and removing every obstacle possible.

IMG_0331

Scott, our design-lead on the project (above), works on early wireframe concepts.

The merchant website widget was designed for simplicity and ease of use for both businesses and customers:

simply_gifted_wireframe_v3_print (dragged) 4

 

simply_gifted_wireframe_v3_print (dragged) 6

 

simply_gifted_wireframe_v3_print (dragged) 7
Marketplace:

The gift card marketplace was designed to be equally simple, and easy to browse. Website visitors can search, customize, and purchase gift cards for local businesses across the country:

 

simply_gifted_wireframe_marketplace_v2_print

 

simply_gifted_wireframe_marketplace_v1_print (dragged) 1

 

simply_gifted_wireframe_marketplace_v1_print (dragged) 2

simply_gifted_wireframe_marketplace_v1_print (dragged) 4

 

simply_gifted_wireframe_marketplace_v1_print (dragged) 5

Revisions:

We went through a robust feedback process during IA / UX to ensure that all functionality was accounted for up front. It all turned out great:

 

Feedback  - Marketplace Wireframe (dragged)

 

Feedback  - Marketplace Wireframe (dragged) 2

 

 

Design:

After wireframes were complete, we took to adding a beautiful design to compliment the functionality.

IMG_0325

IMG_0335

16 - Simply-Gifted-Widget-iStrategyLabs-ISL-4 17 - Simply-Gifted-Modal-iStrategyLabs-ISL-4 18 - Simply-Gifted-Modal-iStrategyLabs-ISL-6

 

Development:

After designs were polished, we dove in to code the fully functional Simply Gifted platform. We meticulously tested our code to make it flawless for the Simply Gifted launch.

IMG_0328

What emerged is quite possibly the easiest way for businesses and customers to create and buy gift cards online.

20 - Simply-Gifted-Marketplace-iStrategyLabs-ISL-1-1

For businesses, creating and selling gift cards is painless – and the typical hassles with merchant set-up and payment processing are removed. For customers, it couldn’t be easier to browse and find gift cards for great local businesses and buy gift cards for friends.

It was a pleasure to work with Simply Gifted, and we’re excited to see how the future of online gifting develops as we continue to be a part of its evolution.

Behind The Scenes: Douglas Development Website Redesign

Douglas Development Website Redesign - iStrategyLabs - Behind the Scenes Blog Post

When we set out to rebuild the Douglas Development website (project detail) from the ground up, we were excited to be working with one of the most well known developers in the DC area.

With a stunning property portfolio and a national reputation as a leader in redevelopment of historic properties, we knew we would need to build an online property that would compliment their physical property portfolio and beautifully showcase their work.

We quickly uncovered that the most important aspects of the user experience would be to easily find properties and contact a leasing agent to arrange a tour of the space.

We designed a stunning property showcase with the user in mind. Large photos are the centerpiece of the site, with easy options to find and download property information, location maps, news and more. On mobile and tablet devices, task-oriented features are prioritized to enable easy navigation and use on the go.

Here are a few of our favorite features of the site:

Fully responsive design

Douglas Development Website Redesign - iStrategyLabs - 600px - CROP

The website is built to handle a wide range of uses, from full corporate presentations at the Douglas Development headquarters, to mobile users looking for directions to a property tour. At the website’s largest size, property photos are in the spotlight. When it scales down to mobile (and tablet) through the responsive design, task-oriented features are prioritized, allowing you to quickly pull up the property map and directions to get to your tour of the space on time.


Homepage carousel with parallax animation

Douglas Dev Homepage Website Redesign iStrategyLabs

Look closely at the homepage and you’ll see that the big, beautiful building photos are complimented by moving clouds and sky. The perspective is meant to emphasize the subtle details and character of the architecture, and leads you into the website wanting to see more.


Easy search and sort property filters

Douglas Development - Website Designs v3 - Approved - iStrategyLabs - 3-26-13 (dragged) 2 copy - CROP

Look for properties by type, availability, and location. If you’re looking to lease a commercial or residential space in the DC area, there’s no easier way to find it than on the Douglas Development website.


Easy options to schedule a tour

Screen Shot 2013-05-07 at 3.08.03 PM

Learn more about the property, and find the perfect space. After you’ve found the perfect space, scheduling a tour with one of Douglas Development’s leasing agents is only a click away.


Map embeds with custom branding

Douglas Development - Website Designs v3 - Approved - iStrategyLabs - 3-26-13 (dragged) 2 600 x 600

Easily find property locations and directions to site visits. On your way to a site visit, the easiest way to get there is to pull up the Douglas Development website and get Google Map directions directly from the property profile.

Social media integration

Douglas Development - Website Designs v3 - Approved - iStrategyLabs - 3-26-13 (dragged) copy CROP

See behind-the-scenes photos from construction through completion on Twitter. Want to see what’s happenning behind the scenes at Douglas Development year-round? Check back regularly to see fresh photos on Twitter from property sites around town.


Custom content management dashboards

Screen Shot 2013-05-07 at 4.03.30 PM

We designed custom page templates and dashboards to make content entry and updating a breeze. If the front-end couldn’t be easier to navigate, the back-end couldn’t be easier to manage. We customized the CMS in WordPress to give Douglas Development all of the tools they needed to keep the website looking great, and up-to-date.

We’re thrilled to have worked with Douglas Development on this project and have the opportunity to showcase work by one of the leading companies in the DC area.

Ben’s Chili Bowl: A Whole New Website For Half-Smoke Heaven

Screen Shot 2013-04-01 at 9.49.47 AM

Screen Shot 2013-04-01 at 11.27.19 AMWhen I first heard that I was going to manage Ben’s Chili Bowl’s website redesign, I was ecstatic. As one of the rare D.C. natives in this city, I’ve known about, and loved, Ben’s since I was a young kid. As I got older, I began to learn about Ben’s historical legacy and the cultural impact it had on the U Street neighborhood and DC as a whole. Whether it be as a pre-jazz club dining spot during the “Black Broadway” days, a safe-haven during the 1968 riots, or a stalwart cornerstone that helped keep a neighborhood alive during the early 80′s, Ben’s is, as Mayor Adrian Fenty once said, “one of the greatest treasures in the District of Columbia…[it's] the soul of a neighborhood and the pride of our city.”

When we were tasked with modernizing Ben’s website, that legacy was in the forefront of our minds, and during an exploratory trip to the Bowl (that included a few half-smokes and chili fries, for research purposes), we remarked at how visually stimulating the Ben’s Chili Bowl experience is, whether it be the famous mural, the charisma of the building itself, or the overwhelming amount of photographs of famous patrons tacked to the wall, Ben’s is just as much a feast for the eyes as it is the stomach.

ISL was fantastic in that they created a site for us that perfectly captures the classic look and feel of Ben’s, but in a clean, up-to-date and fully functional package.  We can now display pictures of each menu item, tell our story in a visual timeline, blog about the latest happenings at Ben’s, and sell our products to everyone in the U.S. in a visually stunning way.  Thank you ISL!

Nizam Ali

When designing the site, ISL designer, Scott Simpson, wanted to “give it a vintage, 50′s diner theme, but incorporate more modern aspects as well. There is a deli-paper style, vintage americana in terms of the signage.” Our goal, in essence, was to capture the character of Ben’s while giving it a 2013 facelift. Scott relates, “It’s such a unique place. I wanted to use a lot of large, full-screen images to get across the feel of being at Ben’s because the only way you can really get that feeling across is to see it and experience it.” Our wireframes reflected that kind of concept well.

 

bcbwireframes

For those perfect large, full-screen images, we reached out to Joshua Cogan, an award winning photographer whose work has been featured in the New Yorker, Washington Post, GQ, Travel Channel, and Discovery Channel and whose Masters in Anthropology showed us he understood the importance of capturing the nuances of a culture.

The color choices and typography reflected Ben’s existing scheme and were influenced by old-school vintage diner menus and signage. However, as a nod to modernity, the navigation icons were hand-drawn by iSL designer Mike O’Brien in order to highlight the kitschiness of the restaurant as well. That modernity is also shown in the layout of the page. Scott admits, “The blog and the timeline are my favorite pages because the content floats on top of everything, and it’s an interesting way of laying things out.”

Screen Shot 2013-04-01 at 9.47.09 AM

What truly helped modernize the site, though, was the work of our Dev team. ISL developer Megan Zlock describes, “We wanted to make the homepage responsive so that people trying to get to Ben’s (even if they weren’t exactly coherent) could get the information they want, especially the location and hours (even on mobile) without any difficulty.”

The true test for the Antimatter team, though, was the incorporation of the Ben’s Chili Bowl store, one of the most popular features of the site, and a huge source of income for Ben’s. For this part of the project, we worked with UltraCart, and made sure to focus strongly on the user experience, specifically how things would transition from WordPress to UltraCart and back again seamlessly.

Screen Shot 2013-04-01 at 9.48.22 AM

The final product is a website that we are incredibly proud of. It was unbelievably exciting to work with such an established piece of DC culture, and we consider it an honor to collaborate with the Alis and the rest of the Ben’s Chili Bowl team.

Screen Shot 2013-04-01 at 10.19.18 AM

 

bcbmobilehomepagebcbmobileoptionsbcbmobilemenu

 

 

 

 

DoubleTree by Hilton iPad App: A Digital Concierge

dt_blogImage_960x360

Architects dream of building sky scrapers. Writers dream of writing novels. ISL Designers & Developers? They dream of building iPad apps.

The platform is uniquely seductive for one simple reason: an app is a hermetically sealed, self-contained universe. A universe where (nearly) all variables are known, and under the creator’s control. And there is nothing we like more than control.

So, when DoubleTree by Hilton brought us their “Home & Away” iPad app, nearly one year ago, with clear instructions to “remake it entirely,” it was quite literally a dream come true.

Our only caveat? We wanted to build it in iOS6 before it officially launched. Using this new software would allow us to take full advantage of a number of novel features, including: grid layouts, enhanced maps and share sheets.

Armed with these insights, iSL set out to design an iPad app that could serve as an efficient, highly functional travel assistant — one that would improve the experience of being “on the road” in a very real way. It was clear that building something aesthetic was not going to be enough: this had to be a workhorse of an app.

In iOS 6, Apple provided the UICollectionView class which allowed us to build all kinds of great interfaces. For this app, we chose a straightforward layout and used a traditional, scrolling collection view. We were putting a lot of information in each collection view cell, so we did not want to make the layout itself too confusing.

The concept is simple though: tell the app which bank, gas station, coffee shop, pharmacy, rental car, etc. that you, as an individual, prefer, and the app will effortlessly map your brand preferences around your hotel. The app also allows you to connect to @DoubleTree on Twitter to voice your feedback.

Fairly quickly, it became clear that the map was the star of the show. We wanted to highlight the hotel location but still provide relevant details for the users surroundings. One of Apple’s most contested decisions in iOS 6 was to switch to using their own maps solution, moving away from Google. While opinions may vary, it allowed us to really bring to life the map and info displayed within the app. In addition to the in-app map, we also included the ability to get directions to any location of interest. With one click, you are into the built-in Maps application with turn-by-turn directions.

And thus, version 2.0 for the DoubleTree by Hilton’s Home & Away iPad app was born (iTunes Download): 

DT4DT5DT1