Opera Lancaster

Advertising, Graphic Design

The Lancaster Opera has been around for over 50 years. Still, it remains largely unknown, especially among younger generations. A new marketing campaign is needed to raise awareness and to attract a new audience and yet be attainable with the available resources.

What we did:

Collateral design for current season, developed an event concept "Opera Tasting" to attract a new, younger audience, developed comps for an awareness campaign.

Event Concept

The Opera Tasting concept takes a cue from beer or wine tastings. It provides the curious with an opportunity to 'sample' opera music. In a one hour informal gathering that can easily be combined with an actual wine tasting attendees will be provided with some information about opera music in general, as well as with details about a performance of the current season. This will be augmented by individual songs or arias being performed on location. This provides a low-barrier opportunity to introduce newcomers to this art form and will increase visibility in the market.

Awareness Campaign

To reposition the opera in the local market and raise awareness of it's existence among a new audience a concept for a guerilla poster sticker campaign was developed that was true to the opera, yet lightheartedly played with some of the stereotypes typically associated withi it (such as operas being sung in foreing languages).

Collateral Design

For the 2012/2013 season a series of artwork for various collateral pieces was designed. Previously each play had a unique look, but lacked any kind of visual consistency, thus any brand recognition was lost. A new visual language was needed, that was recognizable and would stand apart from the crowd of busy, dark and abstract artwork.

HeatMapper

Programming

I was laying out a UX report for a client including a section on competitive analysis I had researched. This called for a number of heat maps to be created. Our findings were still under review and also included some soft metrics which made it probable that our rating system would change. Creating each map in Illustrator would have been cumbersome and time-intensive, plus the work would have been obsolete if the values had been changed. A generative solution was needed. So I set out to create HeatMapper

What I did:

Created a tool to quickly generate heat maps and offers control over colors and allowed for some flexibility in regards to my data source.

Input:

HeatMapper reads an SVG file as well as an CSV spreadsheet. The map shapes labels — in my case the US states — need to correnspond to field values in the spreadsheet, but the tool allows the user to choose the column or row that is applicable.

Processing:

HeatMapper creates a gradient with as many steps as there are values between the highest and lowest value in the spreadsheet. displays colored version of the vector map.

Customization:

HeatMapper allows the user to customize the colors at both ends of the gradient.

Export:

HeatMapper offers PDF and ASE color swatch export, ideal to continue work in Illustrator. PNG export is also available.

In the development of HeatMapper I used a more complex data source: historic birth rates in the communities of my home state NorthRhine-Westphalia).

Result:

The maps created using HeatMapper became part of our report and its presentation for the client. HeatMapper took a similar amount of time to develop as creating the heatmaps by hand, but it was efficient not only because it can be reused in other projects, but also because our rating system did change and required all maps to be redone, which only took minutes using HeatMapper.

HOPE International

UI/UX, Web Design, Web Development

HOPE International was non-profit with a growing support-base. This required a better communication platform. The existing website was not mobile-friendly and a separate mobile site had been developed as a stop-gap measure. This led to a variety of problems including mobile device users not being able to follow links from any email communication. At the same time the HOPE brand was evolving and the website needed a refresh.

What I Did:

I led the redesign initiative on the UX, Design and Front-end front. I created a CMS-friendly responsive CSS framework which allowed for rapid prototyping, but would also later allow content strategists and other marketing staff to easily lay out new content within the CMS without a real knowledge of HTML and CSS.

Research:

I conducted a competitive analysis of non-profit websites including their design direction, content hierarchy, navigational structure and naming conventions. Subsequently I devised a new navigational structure and content hierarchy.

Front-End Development:

I created a mobile-first responsive CSS framework that is CMS-friendly and in conjunction with the visual design provided design patterns that could easily be reused and applied to a variey of layout needs by even non-developers.

Design:

HOPE International employed a very earthy, rustic and dark design prior to the refresh. This had been effective in focussing on the hard work the organization does working to alleviate poverty in some of the most difficult places on earth. Visually this seemed to focus more on the problem of poverty rather than the hope the organization stands for. A lighter, more hopeful look was needed without completely abandoning the earthiness that had become a recognized part of the brand identity.

Roles:

UX: Requirements gathering, Information Architecture, Competitive Analysis
Project Management: Project lead
Front-End Development: HTML, CSS, Responsive Design, JavaScript
Design: Lead designer

Bravo Foundation

UX/UI

The Bravo Foundation empowers families and children to seek better alternatives in education. It partners with businesses who participate in Pennsylvania’s Educational Improvement Tax Credit program and provides scholarship funds to students of private schools. Due to the success of the program, the Bravo Foundation engaged with andCulture to build a Case Management System to streamline the entire processing workflow.

What We Did:

Research current process and devise a Case Management System that not only digitizes the majority of the process, but also displays information in a way that is true to the process and draws the attention of the user to the most important action items.

Research:

We interviewed the stakeholders and the soon-to-be users of this product, mapped the current workflow. In close collaboration of developers and UX we sought ways to streamline the process and require as few user steps as possible to go though the process.

Due to the visual nature of our clients we used wireframes in the requirements gathering process which proved to be very helpful and accelerated the project significantly.

Once the initial requirements were established I created wireframes for the entire tool. After each two week agile sprint, we presented our progress to the client and were thankful to have chosen the agile methodology, as we kept finding out additional bits of information and requirements that the stakeholders/users were unaware of in our initial discovery, but as they saw proposed features and functionality they realized that elements and steps were missing that were part of their routine, yet not part of their official task list.

Iterative wireframing became an essential part of our process and allowed us to much more quickly respond to changed requirements and still deliver on time.

The final product:

Roles:

UX: Discovery, Requirements gathering, Wireframing, Process mapping, Functionality mapping
Agile Project Management: Project owner

Neighborworks America

UX/UI

andCulture was hired by NeighborWorks America, a nonprofit organization focused on neighborhood revitalization and sustainable homeownership, to develop digital tool concepts designed to retain and increase its first-time homebuyer client base within its homeownership line of business.

With a network of 235 independent organizations across the country, developing a unified, technological solution that transcended geographical boundaries and business constraints was no small undertaking. After four months of extensive research and development, we presented a collection of short- and long-term recommendations—including two digital tool concepts—that would streamline NeighborWorks’ engagement efforts and provide the organization with a tech-savvy approach to serve its 4,500+ communities.

What We Did:

RESEARCHED. AND RESEARCHED SOME MORE.

This project began by conducting extensive research of NeighborWorks organizations, the homebuying process and existing technology trends. We visited multiple NeighborWorks offices throughout the country and organized interviews with first-time homebuyers and real estate agents to get a solid understanding of the organization, the homebuyer and the market.

Developed a digital engagement tool.

We developed two distinctly different tool concepts that would increase engagement between NeighborWorks and its customers and help first-time homebuyers prepare for homeownership. Both tools were designed to accommodate a mobile and desktop browser experience.

Roles:

Research: Competitive Analysis, Secondary Research, Technological requirements gathering.
UX: Led strategic development of the Muse concept. Design of High Fidelity Wireframes for user testing purposes. A/B user testing interviews.

Workshop: Icon Fonts - 2013 BarCamp Harrisburg

Speaking, Typography, Web Development

I taught a workshop at the 2013 BarCamp Harrisburg about custom icon fonts and their SEO-friendly use for icons, logos and inforaphics in web design and front-end development.

An example:

Germafont is an icon-font I created hat allows designers to esily create inforaphics with HTML and CSS without the need for scripting.

Hoppy - Beer App

UX/UI

Goal: Create an app that learns the user’s taste in beers and displays a local listing of beers that match the user’s taste profile. Create a visually engaging way to view and explore all available beer flavors. Allow users to search for beers, local or not, and get a recommendation on whether they will enjoy it or not.

What We Did:

We wrote user stories, ideated, mapped functionality and user flow, wireframed, designed and coded, prototyping rapidly.

App Flow Diagram

Wireframes

Design

Grid view for exploring beers by color and bitterness
X-Axis: Bitterness (less - more)
Y-Axis: Beer Color (light - dark)

Home Screen:

The home screen provides the user with the most essential information she needs to find a beer she likes. She can pick a local beer from the displayed list of local beers, or decide get a beer that matches her (in this case 3) flavor preferences — displayed at the top half of the screen — that may or may not be local. This screen can also be shown to a bartender to solicit recommendations.

The list of local beers is sorted in three categories:

• the beer flavor is very similar to established preferences (the user will probably like it).
• the beer flavor profile is somewhat similar to established preferences (the user may or may not like it).
• the beer flavor profile is strongly dissimilar to established preferences and/or matches the user's recorded dislikes (the user will not like it).

Swiping down on the home screen will reveal the navigation and search which provides quick access to beers that are consumed but are not featured on the home screen. This enables easy tracking and rating of beers.

Roles:

UX: Discovery, App Flow Mapping, Wireframing
Design: Screen design

MemSQL

Web Design, Front-End Development

MemSQL needed to transition their site from a small-scale recruiting tool to a high-profile touchpoint for high-value investors, coinciding with the public launch of their product—and they needed to do it in five weeks. Within days of launch, the new site saw more than 90,000 pageviews, thousands of downloads and dozens of enterprise-level sales inquiries.

What We Did:

Redefined the look and feel of the MemSQL brand, elevating its sophistication to match their revolutionary product and developed a robust and fast website that would withstand the high traffic that would come with MemSQL's launch press coverage.

Roles:

Design: Developed look and feel
Front-End Development: HTML, CSS, JavaScript, Wordpress, Carrington-Build, PHP

GoodData

Front-End Development

Two years after andCulture originally working with GoodData, it was time to revisit the site and evolve the brand to something a little more buttoned up. GoodData is a company committed to redefining the way business intelligence works, and they’re out to accomplish one thing: connect more business people to business data to help them make better business decisions.

The redesign came at a time when GoodData was repositioning how it sold its services. Bashes (business mashups) are GoodData’s new approach to BI and a new term that needed to be both explained and sold. That meant rethinking the story arc of the site and reigning in an abundance of content that had grown along with the business. Plus, it all had to be completed within a very tight turnaround for an industry show.

This new position in the market required new ways to talk about and visualize their products. A number of interactive graphics were developed to do just that.

Roles:

Front-End Development: HTML, CSS, JavaScript, Custom Interaction Elements

B+T Group

Front-End Development

B+T, a successful structural engineering firm, came to andCulture with a desire to unite two separate-but-related companies under one name. Selling to the telecom industry as both “B & T Engineering” and “BTE Management” was a bit convoluted for the growing Tulsa-based company. They sought our strategic advice on a solution—and then tasked us to translate it into a logical brand architecture and a compelling corporate identity including a new website.

One of the main goals of the website was to attaract new talent. The website therefore needed to be a compelling and innovative experience to position the new brand in the market and to reflect their identity and culture of innovation to potential employees. This required meaningful interactions, transitions and animations to support the bold look. We decided to create a seamless interaction experience by developing a Wordpress-based one page web-app that allows the user to effortlessly navigate the site without the need to load new pages, but while maintaining the ease-of-use of a Wordpress backend to manage content through custom built Carrington Build modules.

Roles:

Front-End Development: HTML, CSS, JavaScript, Wordpress, Carrington-Build, PHP

2012 Entrepreneurs Conference

Branding, Design, Front-End Development

The 2012 Entrepreneurs Conference needed a visual identity, collateral pieces and a web presence. This year’s theme is “Doing business in the new normal” and so the design should both appeal to the business sector as well as communicate the difference of “the new normal”. Invitations would be sent out and direct people to the website to purchase tickets. The website needed to be fully accessible on desktop browsers, tablets such as the iPad and mobile phones. A responsive approach was taken to accomodate the variety of screen sizes and ensure that all content would be accessible.

Roles:

Design: Logo design, event branding, visual aesthetic
Front-End Development: HTML, CSS, Responsive Design, Javacript

Pathways out of Poverty

Design, Front-End Development

HOPE International needed a website for their newly opened exhibit on global poverty. The website should resemble the rugged feel of the experience and display it visually without giving away too much of the actual experience. Since the exhibit and the work of HOPE International focusses on setting poor people on a pathway out of poverty, a bottom-up scroll and navigation was implemented to underline that narrative.

Roles:

Design: Visual Aesthetic
Front-End Development: HTML, CSS, JavaScript

Leap Forward - An award-winning leap day campaign websie

Design, Front-End Devlopment

For leap day 2012 HOPE International launched an online campaign to raise funds to support the poor in Congo. Asking people to regift the additional day they have been given, by donating one day of pay. The campaign is built around a video on http://leapfwd.us. A website had to be created that supported this call to action and allowed people to calculate their daily income. Two calculators were programmed and implemented on a responsive website, enabling users across devices to use the site.

A second part of the website is the stories page that showcases various stories of people that have been helped by the organization.

Following the metaphor of HOPE International helping the poor around the world leap forward, a world map was visualized. The countries HOPE works in were drawn on the map and green circles representing people helped by HOPE jump out and start leaping forward. The bottom of the screen features a selection of success stories that can be scrolled through and clicked to reveal the person’s story. Responsive implementation using jQuery and ProcessingJS and CSS3.

In 2013 the campaign has been awarded a PDMA Benny Award.

Roles:

Design: Visual Aesthetic
Front-End Development: HTML, CSS, Responsive Design, JavaScript, Processing.js

HOPE and Music

Concept, Design, Front-End Development

When HOPE was approached with a unique opportunity to co-host a concert with the African Childrens Choir in Atlanta, a microsite was needed. The concept of ATLANTA HEART AFRICA was developed and posters and other materials using the same look were created. The microsite allowed users to quickly access crucial information about the concert on any device.

Roles:

Design: Logo, Concept, Branding, Visual Aesthetic
Front-End Development: HTML, CSS, Responsive Design, JavaScript

Peter K Greer - Professional Blog

Concept, Social Media Strategy, Design, Front-End Development

When Peter K Greer, president and CEO of HOPE International started blogging, a unique design was needed to establish his voice in the blogosphere. Speaking to issues of leadership, adoption and development a the look had to be professional, yet unique. The color scheme and the use of the yellow square create a strong visual identity for the personal brand of Peter K Greer.

Roles:

Design: Concept, Visual Aesthetic
Front-End-Development: HTML, CSS, JavaScript
Social Media Strategy