Fotofeedback

Professional Photography Review Service

E-commerce Mobile UI/UX Web Application

ff-01

We conceived, designed, and built Fotofeedback as a way to connect amateur and aspiring photographers with professional photographers. You can hire one of our 30 (and growing) expert photographers to review your work and give you personalized written and spoken feedback.

The site is a complete custom build, utilizing the Code Igniter framework, along with a couple standard authorization and database migration libraries. We capture and convert audio in real time (using both Flash and mp3/ogg files).

ff-03

We draw from the collection of completed reviews to populate the home page of the public site, delivering actual samples from past reviews. In order to help prospective customers find the best fit in terms of reviewers, we have a simple-to-use, but comprehensive system to recommend the best reviewer for any given project.

ff-02

Great feedback from great photographers — they’ll give your image a voice.

Sign up todat at fotofeedback.com

New Hazlett Theater

Content Managed Desktop and Mobile Sites

Content Management Mobile

nht-04

When we were approached to work on the New Hazlett Theater web site, we jumped at the opportunity. All of us knew the space, knew of the great artists that performed there, and were immediately full of ideas for a new site.

We knew it had to be about the events. That’s the heart of what the theater offers to the community. We needed to give visitors a fast and engaging way to find out what’s playing, when it’s playing, and ways to get tickets. The design iterations all involved some calendar-as-primary-interaction concept, eventually landing at what you see here. To emphasize the events, the interior page headers all include upcoming events.

nht-02

With staff dutifully maintaining the site, the content is continuously changing and the site is kept fresh. Using extensive sharing and analytic tracking, we are building a very complete picture of how folks are using the site.

When we turned our attention to the mobile site, we wanted to cut right to the chase. Lead with — and exclusively focus on — events. Add some location and contact info. Mix in a dash of analytics. And serve.

Find something to do at New Hazlett Theater this week: newhazletttheater.org

nht-05

nht-01

Creations by Cicci

Online Dance Costume Catalog and Store

Content Management E-commerce UI/UX

cicci-01

We’ve been working with this third generation family business for nearly a decade. What started as a modest B2B web site with meager e-commerce capabilities has grown into a comprehensive 700+ item catalog with multiple images and video previews of the costumes. The site is publicly viewable, but only pre-approved customers are able to see prices and place orders.

cicci-07

cicci-05

Not only have we built the customer-facing site, but also the complimentary administrative site where costumes are loaded, prices and sizes managed, and orders and customers processed. We’ve integrated with their legacy order fulfillment application and built transaction and site performance reports to monitor the site’s efficacy and usage.

cicci-08

cicci-03

The most recent site redesign, which ushered in videos and large images for every costume, included single costume and new spread-based layouts. These layouts were more elaborate containing multiple costumes and combinations in a single image.

Our challenges were to extend the system’s architecture to group items by style, family, and color without completely breaking the existing site; without having to restructure and reload all of the data; and without breaking the legacy system integration. And we did. In fact, we took it a step further and programmatically added related items and links to matching guys costumes — rounding out the catalog’s functionality.

cicci-06

Being so in-tune with the workings of the business (and being able to take a comprehensive approach to the site and underlying data) allowed us to optimize as much of the process and building as possible, keep the costs down, and resulted in a more complete, engaging, and effective experience for the customer.

The proof? Traffic and sales are up year-over-year since we launched.

ciccidance.com

Off The Wall

Odd, unsettling, humorous and hard to explain encounters with a range of live art.

Campaign Marketing Mobile

otw-03b

For the 13th edition of the Andy Warhol Museum’s performance series, we designed and delivered a mobile-optimized site that tied in personalized and sharable HTML emails, a fluid responsive site, and a hidden interactive element that allowed the visitor to distort the images on the site — matching the aesthetic used on the printed promotional materials for the series.

We wanted to promote sharing of the event information. So for each event listing, we crafted a corresponding HTML email complete with event details, image, and the same visual styling as the web site.

otw-01b

To measure the site’s effectiveness, we captured all user behaviors on the site… from basic things like page views, to more complicated actions like link sharing via email or Facebook, when a shared link was loaded, and even when the distortion feature was found and used. We basically tracked every link click, button press, and user interaction — so the Warhol could get a sense of how engaging the site was for visitors, and to measure the effectiveness of any other communications they had driving folks to the series web site.

Visit the site at warhol.org

otw-02

B.M. Kramer & Company

Industrial Pipe, Valves, and Fittings Supplier

Marketing Parallax

bmk-01

Starting with the concept of a horizontal scrolling site — already atypical for this industry — we pushed the concept farther and combined sequential photos shot in the B.M. Kramer building and combined them into large background animations. Moving through the site produced a very realistic video-like parallax effect.

On the technical end of things, the size of the images, the number of frames, and the number of movies proved to be a challenge when trying to optimize and preload the site. We crunched down the files, added some still frame placeholders, and preloaded as much as we could.

To illustrate what scrolling through 11,000 pixels looks like, we created a 14 second (high-speed) tour of the site.

For all of your Victaulic grooved fittings, visit bmkramer.com

Terra Design Studios

Landscape Architecture Design Studio

Content Management Marketing Mobile

terra-01

As their business grew, Terra needed a new site to reflect the personality of the staff, feature their work prominently, and offer a mobile version that could be used for impromptu presentations of their portfolio. They wanted a home page that spoke to the themes of their work and presented it in an simple, understated, and elegant manner.

Their commissions list — showing their geographically and thematically diverse work — needed to be dynamic so they could add and edit projects over time. That became the foundation of the redesign and re-architecture. But soon, they understood they could (and wanted to) manage the staff pages, news items, and basically everything on the site themselves.

We knew the site and content management system was working out for them when Sadie and Tuesday were given their own pages!

Visit the site at terradesignstudios.com

terra-03 terra-02

Stream Academy

Cyber Charter School

Content Management Marketing

stream-01

Working with one of our favorite creative agencies in town, we built the Stream Academy site and customized a set of tools to manage the content. We also researched, selected, and eventually mirgated the student enrollment applications online.

We had some fun with the shapes and background on this site. We drew and animated the background as canvas elements. Then we added more canvas animations on rollover to each of the polygons on the home page. Using some custom WordPress integration, we gave the client the the tools to manage the callouts and news items on the home page.

stream-02

The final product (streamacademy.org) is a pretty sharp and non-traditional WordPress site.

Smash

A Day in the Life (MMS Photo Gallery)

Mobile

smash-03

We we’re excited to get the chance to work again with Smash Technologies, one of the premiere SMS and MMS vendors. This time, we joined them to create a site that captured “a day in the life” through pictures. The content is populated when participants send pictures from their mobile phones via a SMS short code.

A moderator reviews all of the incoming images and approves them for display. The responsive site has desktop behaviors like rollovers and lightboxes, but then boils down to the essentials for the mobile phone viewer — creating a continuous stream of images perfect for the smaller touch screens.

We added intelligent sharing features so individual images can be shared and loaded automatically. To measure overall site usage, which images are the popular images, and which are share most, we added extensive behavior tracking.

smash-04b

Sagewell Partners

Disability and Life Benefits Consulting

Campaign Marketing

sagewell-01b

Working with their art director, we helped Health Care Benefits communicate their name change to sagewell via an HTML email campaign.

We also created related templates for events announcements and RSVPs, and another for a monthly newsletter. Armed with the templates, we offered a concise MailChimp training session and they were off and running. (We ♥ MailChimp.)

RFG Survey Association

Federal Regulatory Compliance Registration

E-commerce UI/UX Web Application

rfgsa-02

Our first engagement with this regulatory association was to connect a content management tool to their public site.

A year later, when they wanted to move registration, enrollment, and billing for their newest program online — they came to us. We built and successfully deployed that site. Then it was time to roll out the system to their remaining and longstanding regulatory programs.

By allowing participants to register and enroll online, we offloaded and automated the data entry and validation. We replicated all of the accounting calculations and program roles digitally and gave the association the ability to issue invoice and accept payments online. To monitor participation and payments, we integrated reporting tools and built a dashboard view.

rfgsa-01

photo technique

Inspiring photographers for more than 30 years

Content Management E-commerce

pt-003

This was a complete ground-up design and development project. The folks at photo technique had specific ideas and requirements of what they wanted and needed for their site — and a substantial backlog of content to publish online. Our job was to give them a platform to load, edit, and generally manage the articles, images, and contributors. They also needed an online subscription manager and a content paywall.

pt-005

We solved this all with WordPress, several key plugins, and custom development. Every issue is now offered in print, as a digital download, and online. And every subscriptions includes web access. The site also contains content not found in the magazine and encourages readers to explore the magazine by showing related articles and issues.

pt-004

Since it’s a photography magazine, we wanted to keep the visual content as fresh as possible. The site automatically updates the header, primary navigation, and even the store as articles, images, and issues are loaded.

Subscriptions are up, feedback has been incredibly positive, and we’re regularly adding new features to the site.

Learn a new photographic technique at phototechmag.com

pt-001 pt-002

PPG Industries

Seasonal Greeting Responsive Site

Marketing Mobile

ppg-01

Annually, PPG produces a digital card they send to employees and customers around the world to celebrate the holidays. This year they wanted to embrace the mobile world — e.g. the multitudes of device sizes and absences of Flash.

Equipped with an office full of phones, tablets, laptops, and a sound equipment, we recorded an original audio track with a member of the Pittsburgh Symphony, crafted a responsive forest, and engineered a night sky complete with meteors (a.k.a. shooting stars), and added key frames to synchronize the music and animations.

See the dove at ppg.com/happyholidays

M2M Project

HIV testing information from Pittsburgh AIDS Task Force

Mobile

patf-01b

The overall campaign from PATF for this project included billboards, web advertising, a SMS campaign, and a web site. We delivered the Flash ads and the desktop and mobile sites.

Their goal was to give men a safe and confidential place to find information about HIV testing, substance use and safe sex. The web site communicated this, offered contact information, and a inquiry form.

We took the desktop site and created a landscape and portrait version for mobile phones, retaining the clean and graphical nature of the site.

Visit or m2mproject.org text FNDOUT to 76274

McKesson Trade Show

Trade show calendar and appointment scheduler

Content Management UI/UX Web Application

mckesson-03

For Parata Systems and McKesson Pharmacy Systems we built a trade show calendar and appointment scheduler web application.

The site allows registered trade show attendees to log in and make requests for appointments with the participating vendors and departments. Those requests are forwarded to the administrative staff who book appointments using the system to manage the allocation of resources including the sales representatives, rooms, and time slots.

The admin view includes an overview, showing capacity per time-slot, linking to a more detailed view to inspect and edit existing appointments. There are data exports to use for attendee confirmation messages and reporting.

mckesson-02

mckesson-01

The Common Plea

Restaurant and Catering in Downtown Pittsburgh for over 40 Years

Marketing Mobile

cp-03b

This Pittsburgh establishment decided to embrace the mobile crowd, engage with social media, and start their own blog. We responded with a design reflective of their restaurant atmosphere, rich in content, and featuring current images from their top-tier catered events.

We built the site with content management tools for them to maintain the various locations, menus, and service offerings.

We also created templates with dynamic headers that gave them the power to refresh the large images on the site with new and engaging images throughout the year.

When you’re ready to make a reservation, ask for Thom commonplea-restaurant.com/

cp-02

Chatham University

Micro Sites to Promote Individual Majors

Marketing

chatham-01

Working with a creative agency and Chatham University we helped design and build a series of micro-sites to promote several of their undergraduate and graduate majors. The experience delivers rich content created just for the sites including two videos and a gallery of images. On one site, the image gallery was accompanied by an audio track and auto-advancing slides.

The site was originally designed for the iPad and other touch-based tablets, but we extended the interactions and layouts to be responsive and support desktop browsers.

The structure/layout of the site was include both vertical and horizontal position of pages with all navigation controlled via scritping.

View Interior Architecture www.chatham.edu/leapyear

chatham-02 chatham-03

Axis Communications

Trade show touch-screen kiosk

Campaign Marketing UI/UX

axis-01

Working with an industrial designer and utilizing a touch screen overlay on a 42” display, a series of library table-like kiosks were constructed for a large international security trade show booth. We used a web browser in full screen mode and no keyboard to create the experience.

The content of the kiosk site was submitted via web forms for approval by the Axis partner vendors. We used a WordPress form management tool to collect the text, images, and documents from the vendors. Axis reviewed and approved the content, which was then released to the kiosks.

Visitors to the trade show could view and request documents. Periodically the site would send email, with a link to a personalized download page, for each visitor who requested information.

axis-03

Axis collected analytics on all of the visitors, their requests, and which documents were downloaded. In this way, they could measure the efficacy of the kiosk for themselves and their partners. We created several custom reports to individually share the interaction counts with each partner.

Factory Direct

Exhibition Site for 14 Contemporary Works

Marketing Parallax

factory-01

The warhol’s unique exhibit of contemporary international artists who created new works during residencies and collaborations with Pittsburgh-based factories. Building on the manufacturing theme, and reflecting the space in which the show was housed, we worked with an agency to create this horizontally scrolling site.

The entire site is experienced by traveling left-to-right through the warehouse. As you pass by stalls, artist profiles move by on the conveyor belt, lights turn on and off, and garage doors hint at opening. Clicking on artists initiates a robotic arm animation, picking up the artist and placing them in the rafters next to a statement and their corporate partner.

We’ve included a (very fast) 15 second example here to demonstrate the site behaviors and interactions.

View the exhibition site www.warhol.org