Night Kitchen Website Re-Skin

Night Kitchen Website Re-Skin - Home Page
Night Kitchen Website Re-Skin – Home Page
Night Kitchen Website Re-Skin - People Page
Night Kitchen Website Re-Skin – People Page
Night Kitchen Website Re-Skin - Portfolio Page
Night Kitchen Website Re-Skin – Portfolio Page

Summary: What’s that old expression? “The cobbler’s children have no shoes.” The Night Kitchen website had been neglected for more than a few years, and needed a refreshing. There were extremely tight restrictions on time and technology used, so this was definitely a “re-skinning” and not a full redesign.

We wanted a new look for the Night Kitchen website that would encourage visitors to explore our stories, interactive projects and designs in depth. Our redesigned portfolio promotes a selection of recent projects which highlight NK’s engaging approach to interactive storytelling, which aims to provide transformative and meaningful experiences that connect with audiences.

Tech: Illustrator, Photoshop, Flash, Actionscript, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.whatscookin.com

Smithsonian’s NMAH ~ Educational Citizenship Website

Summary: Working in partnership with the Smithsonian’s National Museum of American History (NMAH) and the U.S. Citizenship and Immigration Services (USCIS) Office, we developed an interactive, multimedia-rich website that supports aspiring citizens’ efforts to pass the civics portion of the new USCIS Citizenship Test.

Using content from the NMAH collections and working with a consultant that specializes in teaching English as a second language, we created a flexible, progressively scaffolded learning environment through which students move through learning, practice, and test stages commensurate with their mastery of the question topics. Given that the interactive experience should appeal to learners for whom English is a second language, and that the civics test is conducted as an oral interview, voiceover narration and closed-captions are provided, and learners have the opportunity to practice responding to the audio prompts.

The framework contains 100 vignettes, 19 activities, and 32 zoomable object explorations, that help extend learning beyond merely teaching to the 100 questions on the test. Instead, using objects and documents from its collections the NMAH offers aspiring citizens a vibrant look at our nation’s history, the functions of our government, the rights and responsibilities of U.S. citizens, and the power of democracy. By providing context to the questions on the test, prospective citizens can facilitate their learning of complex facts and concepts, and draw a deeper connection to the significance of becoming an American citizen.

Stats
100 Historical vignettes
51 Interactive activities
15 Topic areas
1 Daunting test demystified

Awards
AAM EdCom Award for Excellence, 2013
IMA Award Best in Class for Government, 2013
IMA Award Best in Class for Education, 2013

Tech: Illustrator, Flash, Actionscript, XML, Photoshop, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.americanhistory.si.edu/citizenship

Smithsonian’s NMAI ~ Environmental Challenges Website

Summary: American Indian people have long thrived on, respected, and protected the environments that make up their homelands. Night Kitchen Interactive collaborated with the Smithsonian’s National Museum of the American Indian (NMAI) to create an educational website for use in classrooms, to inform younger audiences about the ways in which American Indian communities continue these efforts today.

To fulfill student and teacher needs, the site presents a media-rich, scaffolded learning environment with progress tracking and assessment features. Students watch videos, explore interactive activities, and answer questions along the way to gain deeper insights to the integral role the environment plays in the daily lives of American Indian communities and draw connections to local environmental issues. The culminating classroom presentation activity allows students to collect notes taken across the site into one central web-based planner.

The site was designed and built to be visually inviting and reflective of the rich design traditions and unique voice of each tribal community featured therein. The visual and UX design was crafted to create a learning environment that supports the storytelling traditions that are central to communities featured within the project. Feedback from NMAI and Smithsonian has been glowing.

Tech: Illustrator, Flash, Actionscript, Photoshop, HTML, CSS
Role: Lead Designer / Lead Flash Designer
Link: www.nmai.si.edu/environment/

SFMOMA Country Dog Gentlemen ~ Mobile Website Conversion

Summary: In 2009, with some of the 20th century’s greatest artists as inspiration, Night Kitchen Interactive created an engaging kiosk installation and website, bringing to life the works of Piet Mondrian, Jackson Pollock, Frida Kahlo and others. Roy De Forest’s colorful work acted as an aesthetic springboard, paving the way for vivid, lively animations. Each animated story reflects an individual artist’s unique approach, creating different extraordinary worlds to be explored. Performance artist Sebastienne Mundheim collaborated with Night Kitchen to craft the voices of two colorful canine characters from Roy De Forest’s work. With the dogs as guides, modeling behaviors of inquiry, this journey through modern masterpieces is reflective, whimsical, and insightful.

These stories and activities excite and inform young museum visitors, inspiring them to contribute their own creative responses to the museum’s website. Targeting children aged 6-10, a rare audience for modern art, this interactive experience engages younger museum visitors and their families with playful narratives and interactive activities. Each reinforces key learning points associated with an individual work and encourages visitors to share their own creative responses in a visitor-contributed gallery on SFMOMA’s website.

In 2011, SFMOMA was interested in adapting the existing Country Dog Gentlemen animations into an HTML5 experience, so visitors with mobile devices that do not support Flash can still partake in the enhanced rich-media experience. We implemented the main menu utilizing “responsive web design” techniques promoted by many of today’s most advanced HTML5 and CSS gurus. We used @media CSS queries in combination with Max and Min device-widths to create a single menu page (and CSS) with break-points that serve up different layouts and different graphics depending on the size and orientation of your device! It was really fun and exciting to be part of bringing this new technique to life while working to improve the museum and online experience for SFMOMA’s younger audiences.

Tech: Illustrator, Photoshop
Role: Lead Designer / Technical Advisor
Link: In-Progress

Open House Chicago’s Location-Based Desktop and Mobile Websites

Summary: The Chicago Architecture Foundation (CAF) needed to develop a website for its OpenHouseChicago (OHC) 2011 program, a free public event that provided people of all ages, backgrounds, and interests with access to many of Chicago’s greatest architectural spaces and places that are normally open “by invitation only.” The website needed to convey a celebration of Chicago’s rich architecture, history, and culture found in the city’s vibrant network of neighborhoods.

We built on the community and mapping platform of PhilaPlace to design and develop the OHC desktop and mobile optimized websites. Through the integration of two open source solutions – Google Maps and the CollectiveAccess collections management system – PhilaPlace supports a rich feature set that presents a mosaic of historical and contemporary records about sites within a particular area.

Designing over top a preexisting PhilaPlace framework, most functionality and UI restrictions needed to be understood and followed, along with a strong brand inherited from the Chicago Architectural Foundation. The result is a website that through the desktop and mobile devices conveys the richness of the content as well as its place within the larger organization and brand.

Tech: Illustrator, Photoshop, HTML, CSS
Role: Lead Designer
Link: myitinerary.openhousechicago.org

AIGA Philadelphia Chapter – Site Rebuild

Summary: Redesign and re-architect the static HTML and Coldfusion AIGA Philadelphia website into a full content managed Drupal website. The AIGA Philadelphia board wanted the new site to still visually tie in with the previous site’s color scheme, but were open to all other changes in content presentation and user interaction. The new site tries to bring consistency and user expectations into the forefront, while opening the back-end up to the board for more frequent and manageable updates. This new site is scheduled to be live by the end of the summer, 2010.

Tech: Photoshop, Illustrator, Basecamp, Dropbox
Role: Lead Designer / Information Architect / Project Manager
Link: www.AIGAPhilly.org

Philadelphia Tax Amnesty – Website and Online Media Campaign

Summary: Develop the online components of a full media campaign for the Philadelphia Tax Amnesty program. The website was designed to integrate the already developed brand system and create an engaging & informative web experience to promote program details as well as sign-up users into the program. In addition to the website, online banners were created in 2 waves. The first wave was in released prior to the program launch and provided basics about the program and it’s key beginning and ending dates. The second wave of banners went live on the program’s launch date and had an actionscript countdown clock alerting the user to how many days were remaining in the program. Additionally, for the street-crew promotions staff, a fully animated placard was created with a countdown clock that showed the Days, Hours, Minutes and seconds remaining in the program.

Tech: Photoshop, Illustrator, Flash, Actionscript
Role: Lead Designer / Flash Designer & Production
Link: www.PhillyTaxAmnesty.com