PDF (10MB) here

John Stavropoulos [email protected]

MobileAvailable upon request

Websitewww.jstav.com

Shanti BhavanTEDxDelicious TVNike FoundationCookbook IllustrationsCookbook CreativeDavid BowiePhotographyPhoto ShootsNY YankeesBrooklyn NetsThe History ChannelSocial Media AdsAvril Lavigne MangaLogosNASANettmediaCool SentryFisherspoonerWebsitesRolling StonesSarah McLachlanIllustrations




f Code: CSS

f Code: HTML

f Code: JavaScript

fManagement: Agile

f Software: Basecamp

f Software: Photoshop

f Testing: Usability

Skill: f Creative Direction

f Design: Brand

f Design: Graphic

f Design: Information

f Design: Interface

f Design: User Experience

f Design: Web

Overview:Shanti Bhavan (SB) helps children, the poorest of the poor, finally break the cycle of poverty. SB is one of most success-ful organizations in truly making long-term impact.

Challenge: fDesign a mobile app for SB sponsors.

f Show existing sponsors the value they help SB create.

f Show potential sponsors how they can become part of that value.

fMake SB more than just another statistic to be measured and compared.

Solution: f Customize visual interface to individual sponsors, featuring the children they have helped.

f Show and link SB’s growth to sponsor behaviors. Focus visuals on classes, graduates, and graduates’ success after SB.

f Built interface around interfaces the average sponsor is already accustomed to. Sponsors are busier than most and often use mobile apps while distracted or multitasking. Minimize interface elements, make photo rich, reinforce themes to direct attention via icons, make the majority of the interface grayscale so that colored notifications stand out.

Shanti Bhavan – App




TEDx – Presentation

f Software: Illustrator

f Software: InDesign

f Software: Word


f Software: PowerPoint

f Software: WordPress


fWriting: Editing

f Design: Graphic

f Design: Presentation

fManagement: Brainstorming

f Photo: Retouching

Overview:Shanti Bhavan (SB) helps children, the poorest of the poor, finally break the cycle of poverty. SB is one of most successful organizations in making true long-term impact.

Challenge: fDesign a TEDx talk to communicate SB’s unique value.

f SB is relatively unknown and perceived as relatively expensive. Potential backers suffer from donor fatigue.

f Statistics that measure nonprofit success can skew short-term, making cheaper alternatives seem more desirable, even if they may be less successful long-term.

Solution: fHumanize SB via Amrutha’ story (see images above) to emotionally connect with donors.

f Put cost per child into perspective (less than a Starbucks Latte). Back up SB’s success with data and results.

f Showcase SB students earning jobs, teaching other children during their vacations, and sending money back home to immediately uplift their families from poverty.

f Engage donor’s imaginations and relate SB’s challenges directly to their personal lives.

f Re-contextualize popular nonprofit buzzwords: sustainable and impact. With over 1.4 billion people living in poverty, is it sustainable to keep churning kids through a system that does not work? What’s the actual impact for those children and their future?




f Code: HTML

f Code: JavaScript


f Photo: Retouching







Delicious TV – Creative


f Design: Brand

f Design: Graphic


f Design: Interface

f Design: Print


f Design: Web

f Code: CSS

Overview:Delicious TV is a cooking and lifestyle series featured on PBS. Delicious TV offers not just recipes but the facts, delights, and challenges of the vegetarian lifestyle. To many people the art of easily preparing great vegetar-ian food still remains a mystery. Delicious TV dispels the mystery and makes eating healthy…delicious!

Challenge: fDeliver cookbook rewards to Kickstarter backers in a format that best suits their daily use.

f Research shows backers utilize a great variety of devices to access recipes. Everything from traditional print media to phones, tablets, and laptops across multiple platforms and screen dimension.

f Reach as many platforms as possible while minimizing costs and production time

Solution: f Responsive design and data driven InDesign print templates that load the same content as the HTML5 apps.

f Extensive Usability Testing to confirm that the User Experience matches user expectations.




f Photo: Photography



f Software: Excel


f Software: Keynote

f Software: Final Cut


f Testing: Field



f Contract Negotiations

f Design: Game

f Design: Graphic




fManagement: Project

fManagement: Strategy

fManagement: Team Building

Overview:Design games in Ethiopia for Girl Effect on behalf of the Nike Foundation to help hundreds of adolescent girls (ages 10-19) help themselves.

Challenge: f 4% Ethiopian girls finish school.

f 59% rural girls marry before 18. 21% have no friends.

f 50% of girls believe “husbands beating wives is justified”.

Solution: f Focus on helping girls directly. Even only one extra year of secondary school boosts girl’s wages by 25% and girls reinvest 90% of their earnings back into their families.

fDesign games that help Ethiopian girls practice: 1. Building trust with other girls, 2. Speaking out against violence, 3. Financial literacy, and 4. Teamwork.

fGames must 1. Be easy to learn and spread, 2. Not rely on literacy, 3. Focus on local play culture, 4. Use locally replaceable parts, 5. Support optionally discreet play.

f Extensively field test 20 games with over 100 girls directly in the field in Ethiopia.

Nike Foundation – Games










f Design: Graphic

f Design: Illustration

f Design: Print


Overview:Step by step illustrated cooking instructions for Vegan Eats World and Viva Vegan.

Challenge: f Cookbooks are still popular items purchased via traditional physical retail. How can we attract customer’s divided attention browsing crowded book shelves?

f Surveys show customers feel text instructions alone don’t always do enough to teach them how to make recipes.

Solution: f Studies prove that visuals are more likely to attract a customer’s attention than text alone. Photos are the number one way to grab attention while browsing but with more cookbooks filling their pages with photos we needed an advantage to stand out. Thus we included illustrations that both increased the number of visual elements available to browse but also allowed us to quickly communicate our own unique style.

fWhile instructional videos are the best way to address customer confidence, not all of our potential audience has access to the relevant technologies in their kitchens. These illustrations help win customer trust that enough information has been provided that they can replicate the recipes with minimal effort and great success.

Cookbook – Illustration





f Photo: Retouching




f Software: Excel

f Software: Word




Skill: f Creative Consultation


f Design: Graphic


f Design: Print

f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript


Overview:Provided creative consultation for six best-selling cook-books for Perseus Books: “Vegan Eats World”, “Viva Vegan”, “Vegan Cookies Invade Your Cookie Jar”, “Vegan Pie In The Sky”, and “Vegan Cupcakes Take Over The World”.

Challenge: fMake the Vegetarian lifestyle approachable, easy, and fun.

Solution: f Focus on the positive to lower barriers of entry and increase accessibility from the visual style to writing and every element of production.

f Remove negative elements or anything that might be perceived as preachy.

Result: f These books helped created a new cookbook market selling well over half a million copies.

f In addition to frequent 4 and 5 start reviews, these books are also beloved by celebrities including Jessica Alba, Michelle Obama, and Alicia Silverstone who help spread the love and raise awareness.

Cookbook – Creative





f Photo: Retouching

f Software: After Effects



f Software: Final Cut



f Design: Graphic

f Design: Video

f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript

Overview:Designed David Bowie’s official online presence working hand in hand with David himself.

Challenge: f Create a compelling interface that bridges David Bowie’s personal life, professional life, and fans.

fDesign an interface that reflects David’s unique but ever-changing style from all eras of his career.

Solution: fArchitect a contextual metaphor around the themes of space and time that subtly shifts section to section to reflect David’s ongoing evolution.

f Conduct usability testing directly with David and fans.

Result: fDavid was so in love with the website he became a regular contributor interacting personally with fans and eventually organized a member-only live performance.

f The site featured chat rooms, archives of chat transcripts, fan-submitted links, and an extensive gallery of member-produced content. Many submissions featured commentary from David.

fDavidbowie.com was named Yahoo’s “Artist Site of the Year” and won multiple awards.

David Bowie – Web




Food Photography

Skill: f Photo: Retouching

f Photo: Styling


Overview:Customers are increasingly media savvy, aware what Photoshop is (which has now become a verb), and inter-ested in products that feel as real as possible. Thus, food photography must rise to the occasion to earn potential audience’s trust.

Challenge: f Take beautiful food photos of real food, no tricks, and nothing artificial.

Solution: f Photos are of food made 100% from the original recipes.

fWhile Photoshop was used, we restricted it to lighting, minor blurs and sharpening, and cleaning up scratches and artifacts.

fNo actual photo retouching on the food itself.

fGreater emphasis on color, composition, and lighting to sell the food in the best possible circumstances while remaining true to the recipes themselves.





f Design: Graphic

f Photo: Photography

f Photo: Retouching

f Photo: Styling


f Software: Premiere / Final Cut

Overview:Photo shoot for author photos, marketing, and websites.

Photo Shoots





f Design: Graphic

f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript

f Photo: Retouching

f Photo: Styling





Overview:Created the official online community for New York Yan-kee fans. Including an app for choosing stadium seats featuring the ability to preview what games look like from your selected seat via 3D animation.

The website was designed to appeal to younger internet savvy fans while also capturing the franchise’s rich his-tory as remembered by older fans. Nearly every element was programmed and designed to work with frequently updates via multiple outside data feeds.

NY Yankees – App






f Design: Graphic


f Design: Video

f Code: CSS

f Code: HTML

f Code: JavaScript



f Photo: Retouching

f Photo: Styling




f Testing: Field

Overview:Built presentation software, templates, and animations to assist the Brooklyn Nets (then the NJ Nets) sales team pitch sponsorships and partnership programs. The presentation was driven by an app we also developed that allowed any staff member, regardless of technical experience, customize most aspects of the presentation via a simple step by step form. This allowed the sales team to tailor each presentation to the specific prospec-tive client with ease.

Brooklyn Nets – Presentation






f Design: Game

f Design: Graphic


f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript





f Software: Excel




Overview:Designed game for the History Channel as a way to ad-vertise shows for their upcoming Heavy Metal month.

Built the game system from scratch to fit the History Channel’s specified target audience. Quickly prototyped the system using Excel scripting to save time without committing to full development before all details were in place and approved by the stakeholders. Game was specifically engineered to encourage repeat play as you could compete against other users, save your car, buy upgrades, and customize your look and feel.

Heavy Metal 500 was a success, played by well over 100,000 users and appealed on both an emotionally level (cool graphics, sounds, and special effects) and on an analytical level (fun math to min max in an attempt to compete and score highest on the leaderboards).

History Channel – Game





f Design: Graphic

f Photo: Styling



Overview:Social Media ads designed to promote products and services. Additionally, we experimented with a variety of images, formats, and styles via A/B Split Tests to deter-mine the right mix of variables to best achieve each ad’s individual goals. Data collected confirmed commonly understood social media statistics:

fArticles with images gain 94% more views that those without.

f 40% of people will respond better to visual information than plain text alone.

Social Media – Ads




Skill: f Art Direction

f Design: Graphic

f Design: Video

f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript






Overview:Directed creative strategy for Avril Lavigne’s Make 5 Wishes, a manga style comic book. In addition to the print comic (written by Joshua Dysart, art by Camilla D’Errico), we designed companion animated motion comic books in After Effects to be sold via USB sticks at Avril Lavigne concerts and distributed over mobile devices across international markets. In tandem with the international strategy, we worked with Avril to record soundtracks in multiple languages to comple-ment each market.

Avril Lavigne – Manga





f Design: Brand

f Design: Graphic

f Design: Print

f Design: Web




Overview:Logo designs for apps, websites, and the “Homeland & National Security Law Review ” for Thomas M. Cooley Law School.

Logos






f Design: Graphic

f Design: Video








Overview:NASA wanted to Increase the public’s awareness and understanding of the International Space Station (ISS), explain how the ISS fits into the context of human space flight, relate the ISS value to people here on earth, and give people a reason to return to the site for updates on the space station.

Solution: f Show the human side of NASA missions: life in space and the people behind the spacesuits with shared hopes and dreams working together for a higher common goal.

fDesign incorporating clean gridlines, codes and diagrams, and fonts with a tech edge to contrast and give focus to the more human elements, including the ability to browse via images of human faces.

fA “Personal Space” area featuring portraits of astronauts and profiles of their daily lives.

f Complimentary video documentary.

NASA – App





f Design: Brand

f Design: Graphic

f Design: Interface

f Code: CSS

f Code: HTML

f Code: JavaScript





Overview:Proudly co-led Nettmedia, an award winning design studio, as its Creative Director.

f Supervised teams of sixty designers and art directors to create Websites, DVDs, Apps, and Games.

fHired and mentored teams of designers, publicists, developers, producers, brand managers, and marketers.

f Cut costs by 15% via staff training and intern programs. Significantly increased productivity and reduced employee turnover by empowering staff to make decisions and take responsibility.

Nettmedia – Web




Skill: f Design: Graphic


f Design: Video

f Photo: Retouching





Overview:Updated Cool Sentry’s sales presentation design and motion graphics based on usability testing we oversaw.

Cool Sentry – Presentation





f Design: Graphic

f Design: Interface

f Design: Video


f Photo: Retouching





Overview:Designed interface to reflect Fischerspooner’s unique mix of 80’’s electronica bliss transported into 2000’s electro, while capturing the atmosphere, energy, and sexiness of their live performances.

Fischerspooner – App





f Design: Graphic

f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript




Overview:Designed, developed, and directed creation of hundreds of websites for a wide variety of clients spanning Music, Sport, Law, Government, Fashion, Museum, Nonprofit, Publishing, and TV.

Including: Atlantic Music, Chevy, Dave Matthews Band, Delerium, Dido, Enrique Iglesias, For The Kids – VH1, Foreigner, Iman, International High IQ Society, Jars of Clay, Landing Pages for Sony/BMG/Universal/RCA, MADE Studios, Micaela Rossato Photography, Moby, Model-ing – Colin Egglesfield, Museum of Modern Art – MOMA Builds, Nelly, NerdNYC, Nettwerk, New York Restoration Project, Promethean Asset Management, Rolling Stone Radio, Roswell, Sarah Mclachlan, Stone | Rosenblatt | Cha – Law, The Barenaked Ladies, Vegan Latina, Whitney Museum of American Art – Bitstreams, etc.

Websites




Overview:Designed The Rolling Stone’s official online presence. Website was integrated directly into Ticket Master so you can purchase special member only package deals.

Rolling Stones – Web


f Design: Graphic

f Design: Interface

f Design: Web

f Code: CSS

f Code: HTML

f Code: JavaScript










Overview:Directed Sarah McLachlan’s Mirrorball DVD and Kiosk interface. We created Mirrorball using recorded foot-age from 35 shows and crafted the design to highlight Sarah’s live performance while remaining true to the established ethereal mood surrounding her music and angelic voice.


f Design: Graphic

f Design: Video

f Photo: Retouching





Sarah McLachlan – App





f Design: Graphic



Illustrations

Documents

PDF (10MB) here