iStrategyBlabs

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.

Content Strategy: Tips for a User-Friendly Web Experience

Conetnt Strategy Feature Image

As part of our eternal quest for knowledge and glory here at ISL, we hold a regular internal series of staff-led professional development classes known as Battle School. It’s serious business.

Recently, I had the pleasure of leading our troops through a course on Content Strategy – thinking about how we approach our web projects systematically, and help guide our clients and projects to greatness through excellent web content that fulfills both business and user needs.

The presentation covers high-level basics like defining content and content strategy, and gets deeper into the details like processes and page tables (which we refer to as Page Guides, for those of you who are already initiated).

A few key highlights you might not expect:

No shortcuts! Your create-content-quick-and-easy scheme is useless.
Goals: Useful web content must meet user needs and business goals.
Less, not more! You think more content is better? It’s not. Read why.
Content creation gets you half way. See how it all comes full circle.

What do you think? Leave a comment, or tweet us @iStrategyLabs to give us your take.

Vine: ISL Favorites from Brands and Fans

Twitter-Vine-iStrategyLabs-Blog

If you’ve been paying attention lately, you’ve heard of Twitter’s new video sharing platform, Vine – a mobile-only app that lets you record and share 6-second video clips edited on the fly, in an incredibly fun and unique way. It combines the best of photo, video, stop-motion, and our favorite — animated GIFs.

Here’s how it works:

Sign into Vine with Twitter and that’s it, you’re ready to record. With Vine’s custom camera, video records when you tap and hold on your phone screen. Take your finger off the screen and Vine stops recording. The simple, real-time editing lets you create everything  from simple 6-second un-cut videos, to more complex stop-motion clips and animations.

How brands are using Vine:

Across all industries, from food to gaming, brands have used Vine to foster online discussion with their fans and even tease new products. Here are a few great examples :

GE: It’s Raining Data

Gap: What shoes do you plan to wear with The 1969 Skimmer?


 

Rolling Stone: Guess Who’s on the cover


 

Nintendo of America: Check out what you get with the Wii U ZombiU Deluxe Set


 

Bacardi: #SixSecondCocktail


 

A few of our personal favorites:

People have been shooting and sharing Vines non-stop since the service launched this past January.

Some cool Vine spin-off apps include Channel 6, ”a personalized channel of videos posted to Vine” (type a search term in the bottom left corner to sort and filter). Similarly, All Around the Vines pulls together a collection of Vine videos you might like based on category and tag. Here are a few of our staff favorite Vines:


- @Corbett3000  
 


- @eshutt
 

-@EmilyTav
 

Best of both worlds:

We worked with our client Embassy Suites to get them on Vine and create their #FirstPost to promote the delicious breakfast you can expect when you stay at an Embassy Suites hotel.

With all of these fantastic Vines in just over a month, we can’t wait to see what comes in the near future from fans and brands alike.

+++

All-star interns Ryan Horgan  and Zach Khan contributed to this article. 

Behind the Scenes – Rackspace Home Page Web Redesign

Rackspace Homepage Web Website Redesign iStrategyLabs Blog - 960x360

When we set out to redesign the Rackspace homepage, we knew we had to do something special — with between 1 and 4 million visitors a month, the site gets a lot of attention. We knew our approach to the homepage design could have a huge impact on how the company is seen on the web.

Our first take was to focus on showcasing specific hosting products and take customers straight to the purchase process for their development needs, with the question: “What do you want to build?

Through our creative process, it became clear that pairing specific hosting products with case studies of companies who use them was the best way to both explain the products and show how they’re used, especially by recognizable and trusted brands like NASA, Under Armour, and Six Flags.

The stroke of genius came when our design team added a mouse-over feature to display technical diagrams behind the case-study website, that show how the hosting products work. In our concepts, the homepage shows beautiful case studies overlaid on technical diagrams that can be easily understood by typical users and serious rackers alike.

Below, our designers Scott and Mike work on early wireframe iterations:

IMG_0326

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 1

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 2

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 3

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 1

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 2

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 3

Rackspace Website Homepage Redesign Cloud Concept 1 - iStrategyLabs (dragged) 4

IMG_0332

IMG_0334

 

Rackspace Website Homepage Redesign Concept 4 - iStrategyLabs (dragged) 1 - 1

Rackspace Website Homepage Redesign Concept 4 - iStrategyLabs (dragged) 1

Rackspace Website Homepage Redesign Concept 4 - iStrategyLabs (dragged) 2

Rackspace Website Homepage Redesign Concept 4 - iStrategyLabs (dragged) 3

Rackspace Website Homepage Redesign Concept 4 - iStrategyLabs (dragged) 5

Rackspace Website Homepage Redesign Concept 4 - iStrategyLabs (dragged) 5

After refining our concepts collaboratively with Rackspace, the final designs began to emerge:

IMG_0330

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Round 1 - 2

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Round 2 - 2 - crop

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Round 2 - 3 - crop

Initially, we worked to keep the designs as simple as possible.

The designs focused on an attractive visual paired with a Rackspace hosting product, and small design touches like added color on mouse-over to highlight certain features. Later, we added the computer screen with a simulated screenshot of the case-study website, to add the technical diagrams that show how each featured hosting product works.

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Final - 7

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Final - 9

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Final - 5

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Final - 6

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Final - 3

Rackspace Website Homepage Redesign - iStrategyLabs - ISL - Final - 4

The new Rackspace homepage is a bold, beautiful look at Rackspace’s core products, paired with case-studies of real ways to use them.

We loved working with Rackspace and are proud to have the project in our portfolio. We can’t wait for what’s next in the open cloud.