Wall Street Journal Online Campaign
- Wall Street Journal Online Ad Campaign
Created for Sway - When The Wall Street Journal came to Sway, their online advertising did not match their website, nor did it match the much-publicized redesign of the print version of the paper. When users clicked on a banner (which was rare, as the call-to-action was difficult to see), they would land at a site that looked completely different from whence they came.
Sway established a visual vocabulary that could be used for all online marketing initiatives that tied in with the look and feel of the actual product. Sway also focused on creating a visual hierarchy for the information presented. These changes dramatically increased click-throughs and conversion for the paper. This campaign ended up significantly increasing online subscriptions. 
Description
When The Wall Street Journal came to Sway, their online advertising did not match their website, nor did it match the much-publicized redesign of the print version of the paper. When users clicked on a banner (which was rare, as the call-to-action was difficult to see), they would land at a site that looked completely different from whence they came.
Sway established a visual vocabulary that could be used for all online marketing initiatives that tied in with the look and feel of the actual product. Sway also focused on creating a visual hierarchy for the information presented. These changes dramatically increased click-throughs and conversion for the paper. This campaign ended up significantly increasing online subscriptions.
Sway established a visual vocabulary that could be used for all online marketing initiatives that tied in with the look and feel of the actual product. Sway also focused on creating a visual hierarchy for the information presented. These changes dramatically increased click-throughs and conversion for the paper. This campaign ended up significantly increasing online subscriptions.
Fields
Advertising, Art Direction, Interaction Design
Date
2011
Other Projects
-
TED 2011 GE Electric Vehicle Presentation
This project included researching and designing a series of images that visually showcased salient facts and figures about the future of electric vehicles. These images were showcased as part of a presentation at the TED 2011 conference, and promoted GE's new WattStation smart grid electric vehicle charging station.
2011
Design, Graphic Design, Creative Direction
-
WiserCare Web-Based Health Care Product
This Web Application helps consumers understand complex medical decisions. Developed with a team of medical specialists, the WiserCare product provides a web-based process for helping patients with a range of serious medical conditions make optimal treatment choices based their unique clinical factors and history .
2011
Information Architecture, User Interface Design, Creative Direction
-
T-Mobile Wearable Communication Prototypes
These were a series of wearable hardware prototypes designed to test various methods of providing ambient awareness and social connectivity to users in real time via the mobile network. A number of different interation modalities and scenarios were explored. Rapid prototype iteration was used to refine a number of concepts into high-level product concepts and demos presented to CXO-level stakeholders.
2011
Engineering, Interaction Design, Programming
-
Medlock Ames Website Packaging
This rich Brand Identity + Web Site foster visceral consumer interactions with the the Medlock Ames product on and offline A die-cut label is used as both an icon and window into the soul of the product. This sense of rolling liquidity that mirrors the landscape from which the product is derived, is then elegantly, interactively animated within the website.
2011
Web Design, Web Development, Interaction Design
-
Levi's Touchscreen Retail Kiosk
Based on an enigmatic, animate interface design that consumers couldn’t resist touching, this in-store Touch Screen Kiosk was a huge success. The entire interaction began with a single, amoeba-like mobile drop of liquid moving randomly around the screen. When touched, this liquid icon splashed out into the kiosk interface, providing shoppers with a fantastical yet physically intuitive interaction that made them forget they were dealing with a computer.
2011
Interaction Design, User Interface Design, Programming
-
Desktop Farming Initiative Interactive Promo Mailer
Sway was launched in June of 2001 at the start of the recession and right before September 11. (I've always liked a good challenge.) Sway decided to develop promotional materials that demonstrated that when the going gets tough, the tough get growing!
Thank you for your interest in Sways Desktop Farming Initiative. Enclosed you will find one Desktop Farming Sphere, a fully functional biosphere that has been optimized for growing agricultural staples on the desktop. Directions for the assembly and planting of your Desktop Farming Sphere can be found online at http://www.swaysf.com/growThe Sway Desktop Farming Sphere was developed to help feed hungry office workers in times of economic uncertainty. This self-contained ecosystem can provide much-needed nourishment and dietary fiber – not to mention a renewed sense of self-esteem and personal autonomy – using less than 4 square inches of desktop real estate. The Desktop Farming Sphere is a beacon of hope for professionals everywhere, reminding them that while the current economic climate might seem frigid, spring is, in fact, just around the corner.Sway is an interface design studio. Sway develops creative strategies for using new technologies to enhance the interaction between brands and their consumers. Weve helped cultivate business growth for companies like Levi Strauss , Red Herring and Wells Fargo.If you are interested in growing your business, or know of anyone else who would benefit from a little desktop farming, please e-mail us at grow@swaysf.com. 2011 Entrepreneurship, Interaction Design, Creative Direction -
Ryanwolfe.com Site
Flash-based portfolio site for Ryanwolfe.com. Viewable at http://ryanwolfe.com/ryanwolfe
2011
Interaction Design, Programming, Creative Direction
-
HiNT Health Care Decision Support Application
This Web Application helps the insured populations of large employers and major health insurance companies to get individually tailored health care solutions. I headed creative and technical direction on the development of this unique, web-based application.
2011
Creative Direction, Interaction Design, Web Design
-
Apple Customer Service Training Software
A fun design used for this Training Software at Apple customer support training centers worldwide. This software helped new employees coming from a range of technical backgrounds to get up to speed on a their new jobs quickly and easily.
2011
Creative Direction, Interaction Design, Information Architecture
-
An Anatomical Study of a Moment in Time and Space
An Anatomical Study of a Moment in Time and Space elegantly combines technology and biology with the natural rhythms of the seasonal cycle in a metaphoric exploration of what it means to be alive - in a moment, and across a lifetime.
2011
Architecture, Installation Design, Fine Arts
-
Red Herring Media Site
After conducting a study,Red Herring found that most advertisers and media planners were usually familiar with one Red Herring media product or publication, but not with the full range of properties available. They wanted to create a new media and advertiser-specific site where they could bring the multi-faceted nature of all of their disparate properties together under a single brand.
A unique UX design solution was developed to address this problem. The Red Herring Media Site showcases the three main media platforms-magazine,web site and events at all times. When a user is interested in information related to a specific platform, the screen area allocated to that platform increases, while the othertwo platform areas shrink, but never disappear. This way, even when a media planner comes to the site to find rates for the magazine, the notion that Red Herring has other products with a similar demographic available as part of a buy is always being reiterated. Swirl followed this site launch with a large online advertising campaign. 2011 Creative Direction, Interaction Design, Web Design -
Thread Recruiting Identity
Thread is a San Francisco-based recruiting agency that specializes in senior and executive creative talent for large agencies and Fortune 500 companies. This identity helped launch the agency, and was carried over to the website and additional collateral materials.
2011
Design, Branding, Icon Design
-
Study for Lit From Within
Lit From Within explores what it would be like to carry the world inside ourselves; to be able to give energy
and life to the world around us, instead of merely taking these things from our environment.
The resources needed to survive can be physical in nature, like energy or food; socially or emotionallybased,
rooted in caring for those around us and they for us; temporal, providing us a sense of rhythm and
place in time. We need all of these things to live. Our dependence on the world around us to provide them
is a defining human characteristic and one we share with all life. This dependence can be quite
uncomfortable, even scary, since it forces us to acknowledge that we are at the mercy of a world that we
can never entirely control, or even minutely comprehend. With all of our technical acumen, we still fail to
fully understand so much of the world in which we live. How do we live in balance with this thing called
Nature? There is a general sense that we are increasingly putting at risk the natural resources we depend
on and there is no simple answer to how to best modify our collective behavior in order to find a proper
balance between the environment's needs and our own.
Lit From Within explores what it might feel like to define the world not as what is "out there," but what is "in
here." To be autonomous. To be truly beautiful. To be complete.
Technical Description:
Horsetail is segmented in a manner similar to bamboo and grows in clusters. Utilizing this natural segmentation, seven LEDs are embedded (vertically from base to tip) in one stalk in each cluster. These embedded LEDs are individually controllable. The "level" of light emanating from each plant can be animated and faded up or down in real time.
The computers attached to each plant that control the light levels are networked together and the aggregate effect is like a liquid solar tide, flowing like waves across this botanical landscape. The "height" or level of this light starts low, peaks at midday, and then falls again in the evening - emulating a solar tide that mirrors the tracking of the unseen sun outside of the darkened room. Proximity sensor are mounted at entry point between the rows of plants, so when users walk in between, they generate waves of light that flow out across the landscape.
Each plant has a custom-designed circuit board that contains an AVR microcontroller, a multi output dimmable LED driver, networking hardware and assorted peripheral components. Broad spectrum white LEDs are surgically embedded into the stem of each plant. Fine enamel-coated magnet wire connects each LED to the circuit board, turning each stem into a rough volumetric light display. 2011 Fine Arts, Programming, Engineering -
Study for a Perfect Storm
“Study for A Perfect Storm” by Ryan Wolfe creates a visually and viscerally believable natural environment that blurs the parameters of a technological virtual experience with reality. In this participatory installation, the viewer's presence is the catalyst triggering a storm to blow across a quiet field of bamboo. The installation generates a more intense storm on its screens the longer the viewer wills it by remaining watching. The viewer has an active role in perpetuating the fantasy of rustling, silhouetted stalks gaining momentum as wind rises across a series of monitors that act as windows onto this familiar yet fantastical world.
Video's inherent limitations as a medium of documenting events - that even while being recorded are inherently already moments past - are redefined in “Study for A Perfect Storm”. In this new media installation, Wolfe introduces a modern enhancement of present tense emergent video. Developing new applications for existing technologies, Wolfe engages custom designed, internal and external mapping/spatial systems that break conventions. Original video staged and shot in his studio provides visual components for an installation that transcends its footage to be a mechanically engineered, virtual reality installation. The next evolutionary step in materializing an auxiliary reality, spectators are further drawn into becoming an integrated part of the videotaped world as they view it on the screens. “Study for A Perfect Storm” gently embodies an artist's ability to create a completely fabricated platform that empowers a viewer with the latitude to accept an alternate reality as their own. 2011 Fine Arts, Video Arts, Interaction Design -
Gaylord Hotels Site Redesign
The Gaylord Hotels web sites were completed under Ryan's leadership at Sway, in partnership with Gaylord's advertising agency, and a development team from Fusion Productions.
Gaylord Hotels is a family of resort and convention centers with properties in Orlando, FL, Nashville, TN, and Grapevine, TX. Prior to working with Sway, each property had developed its own web site, at different times, with different functionality and different looks. TBC Advertising, the agency of record for Gaylord Hotels, asked Sway to integrate these disparate sites with the look of a new umbrella brand advertising campaign they had developed.
Before the re-design process began, Sway was presented with several restrictions from Gaylord's technology provider, Fusion, who was pre-contracted to handle back-end development. The existing site architecture for th Orlando property was to serve as the site architecture for all of the properties, without any changes permitted. The basic layout of the page and dimensions of navigation and header areas were also pre-determined. Despite these constriants, Sway was able to design an interface that met the technolog providers specifications, while simultaneously addressing some of the usability issues present in the existing sites.
Sway's new design clearly distinguishes and prioritizes different types of information. Before, the interface mixed different types of content together. In order to maximize navigability,the new design divides the page into four key interface areas, each with a different objective. The top of the page enables the user to easily identify which sub-section of the site is being viewed, the lower left enables users to jump to other properties' sites and the right column enables users to find content related to what is being viewed in the main body of the page. The interface also presents key actionable information (such as numbers to call for reservations or links to buy tickets online) in aconsistent location on every page.
The new design leveraged some of the key elements of the advertising campaign, but translated them for best effect online. The advertising treatment also included a beveled gold bars for headlines, and parchment paper backgrounds, two effects that don't transition well online. Sway's clean design is clearly consistent with the brand look created by TBC but medium-appropriate. The result is a high-end, polished site consistent with the state-of-the art facilities and luxurious accommodations that Gaylord Hotels offers. 2011 Creative Direction, Web Design, Interaction Design -
MasterCard Destinations Travel Portal
MasterCard's continued objective is to get members to use their MasterCard more often. One way this objective is met is providing members with card-use incentives. Sway was tasked with presenting these incentives in a consolidated platform, packaging them together in a way that provided some meaningful context for their use. The solution was MasterCard Destinations, a travel portal.
The architecture and design had to account for the fact that content was being aggregated from a variety of sources, and that much of this content was originally developed for disparate purposes. In other words, the design had to create consistency where there had been none, and ensure that users had a cohesive experience (as opposed to feeling like the site is just a bunch of stuff thrown together). In addition, because the Destinations site was essentially part of the larger MasterCard site, the design had to complement the existing look and feel, but still stand out as a separate promotion. Sway's solution achieved it all, and thousands of offers have been redeemed by travelers using their MasterCard. 2011 Information Architecture, Interaction Design, Web Design -
Branching Systems
description
2011
Architecture, Exhibition Design, Visual Arts
-
PlayNet Music Station
PlayNet Technologies developed location-based, networked, entertainment systems. PlayNet targeted the hospitality industry with video games and music stations to be placed in bars and hotels around the country. Ryan helped design and produce these next-generation jukeboxes that redefined how consumers experienced music in public.
The Music Stations not only played music, they also provided information about the artists, a list of tour dates, coupons for upcoming album releases, and more. The Music Stations were designed to provide a more robust music experience for consumers and merchandising opportunities for the labels. While old jukeboxes were about making 25 cents a song. Music Stations were about selling CDs and more.
The Music Stations were also designed to take full advantage of the benefits of networked connectivity. No longer did people have to go out into the field to change records in jukeboxes. With the Music Station music could be pushed out from a central office. Music could be tailored to different locations based both on what users in that market were listening to, as well as on what the labels wanted to promote. Ryans work on the PlayNet project included devising the initial specifications for the software,managing database design, designing information presentation and overseeing hardware development. 2011 Information Architecture, Product Design, Interaction Design -
State of Maryland National Road Travel Site
The Historical National Road web site was designed by Ryan during his leadership of Sway.
The primary goal of the Maryland Office of Tourism and Development is to get travelers to spend more time in Maryland and to spend more money while they are there. To this end, one of Marylands new initiatives is to educate potential tourists about all there is to see and do along The Historic National Road, the Nations first federally funded highway that runs for 140 miles through the state. TBC Advertising, Marylands agency of record, asked Sway to develop a web site that helps get users excited about traveling The Road.
The primary challenge Sway faced was how to dimensionalize the road as a tourist destination when few people are actually familiar with it, In addition, the database of information about The Road that was available was structured for use by phone operators - not for use on a travel site. Because the Office of Tourism and Development is a government agency, the interface also needed to comply with Section 508 federal accessibility
guidelines.
Sway met these challenges by designing a unique layered interface that pushes all key content and functionality to the surface of the site. This makes it immediately apparent that there are lots of trip options along The Road. Users can initiate a search, browse restaurants, jump to trip ideas, check events, etc. from any page on the site, without having to drill down to a page dedicated to that feature.
The interface also recognized that consumers use travel sites to find things they didnt previously know existed. To aid this discovery process, Sway re-packaged the existing database structure so that content could be accessed in multiple ways; the same restaurant might appear in a search by city, by cuisine or within a Trip Idea. To comply with Section 508, Sways design made careful use of standards-based HTML layouts, JavaScript-independent page functionality, images and text in interface design (especially for active interface elements), proper document type and HTML language tags, and universal ALT tags for all images, and more.
Another objective Sway addressed was designing the site so that it could be easily used as a template by other Maryland scenic byways, not just the National Road. Without knowing anything about those byways, Sway achieved this by leveraging the color palette from Scenic Byways books and maps, and by ensuring the site required a minimal amount of original content creation. The site draws heavily on content in Marylands database of everything that exists in the state – Maryland can simply change the geography from zip codes along the National Road to zip codes along another scenic byway and the site will be populated with completely new content. 2011 Information Architecture, Interaction Design, Creative Direction -
Pneuma Biometric Telematic Installation
Pneuma is a large sculptural Biometric+Mechatronic Installation that links artist and artwork in real time. Breathing and heartbeat are measured, sent via custom software and hardware over the mobile network, and then kinetically manifested in the sculpture in real time.
2011
Fine Arts, Engineering, Design
-
Yahoo! Music Ads for OgilvyOne
Yahoo! MusicA series of novel online ads created for Yahoo! Music and Yahoo! Mobile. Cramming compelling experiences into small ad placements, these ads used algorithmic animations to keep file size down while providing interactive dazzle .
2011
Interaction Design, Web Design, Advertising
-
SeeChange
See Change Technologies, a spin-off of APL Logistics, provides logistics professionals with web-based supply-chain information. The SCT system not only tracks product across carriers of all sizes and all modes of transportation all over the world,it also helps optimize supply chain networks by reducing costs and accelerating productivity. As a new company in a competitive category, SCT needed a web site to support their efforts to generate qualified sales leads.
The primary challenge was how to explain a technically complex product to a stressed-out, overworked target. The interface developed addressed this challenge in two ways. First, the information architecture prioritized product information over all other site content; executive bios, press releases, etc. were relegated deeper within the site so as not to compete with communication of product benefits. Second, in addition to providing a textbook definition of the SCT offering, imagery and copy were employed to creatively describe the problem SCT solves. Lines such as 'What if the little engine that could can't today?' and 'A 15 ton needle sitting in the wrong haystack' indicated an understanding of and empathy with prospective clients'situation and provided some personality for SCT.
Not only did the interface developed provide a concept that could be leveraged for other communication materials such as sales collateral, it was also designed to incorporate additional information and functionality over time and be easy for SCT's internal web team to maintain and adapt for use in other countries. 2011 Web Design, User Interface Design, Creative Direction
