Hi! I'm Peter Cole, a developer/designer from the San Francisco Bay Area. I like to create innovative experiences for the web, mobile, desktop, audio/video, social networks, retail and other forms of multimedia and digital marketing.

I currently oversee front-end development for apple.com. My team worked on the launch of the Apple Watch, the iPhone 6 and 7, iPad Air 2, Macbook, Macbook Pro and many more. I championed and oversaw the mobile optimization of apple.com that started during the Sept. 2014 apple.com redesign as well as the integration of the apple store ecommerce content into the main marketing site.

Prior to Apple, I was the Director of Creative Technology for Innocean where I helped build a digital practice. With Hyundai as our largest client, we created experiences for a variety of platforms that blended video, HTML5, 3D, mobile applications, and integrations with services from Google, Facebook, Twitter and others. Before Innocean, I spent about 4 years as Technology Director for R/GA, where I worked on interactive projects for Nike, Microsoft, Verizon, HP and others. At R/GA I was involved in the design and development of new products that combined the desktop, web, mobile and social (including Nike FuelBand). Prior to R/GA, I was the Director of Creative Development for AKQA, San Francisco, where our clients included Nike, Microsoft, Xbox, Target, The Gap, Visa and others. While there, I helped Nike, Target and the Gap launch their first mobile experiences; worked on Nike's first Global website and campaign, for the Olympics; created one of the first SMS-controlled kiosks for Palm; and I always tried to push the limits of the browser for projects like Xbox 3 Halo, and Nike Presto.

In in my free time, I created LaunchBx (beta), a web-based product to help small businesses connect with their customers. It includes a real-time, in-context content management and publishing platform for mobile, desktop and social networks. I also created Groovable (in alpha), a tool for helping people collect and organize their online shopping and research.

The primary tools I use include HTML5, CSS3, JS/jQuery, PHP, MySQL, ActionScript 3, Gulp, JSON/XML; GIT/SVN; audio/video, and lots of APIs from different services (Google, Facebook, etc.)

Please email me if you want to say hi!


  • Apple.com

    I currently oversee UI development for apple.com. I get to work with some of the most amazing developers, designers and thinkers to create beautiful and engaging experiences that are seen by the whole world! I've been lucky to have worked on the launch of the Apple Watch, the iPhone 6, iPad Air 2, Macbook, Apple Music and more. My team works closely with the design team, from the start, creating prototypes for user interfaces and motion designs, and ultimately, we build the final work that goes live on apple.com. As well, I championed and oversaw the mobile optimization of apple.com that started during our Sept. 2014 redesign. This effort optimized apple.com for mobile and tablet devices.

    Visit the site.

  • Find Your 7
    Hyundai: Find Your 7

    Responsive Website and Facebook Application. Dynamically Generated Video.

    Challenge: Create a mobile-first experience that extends a TV spot to the digital/social arena. The Super Bowl is the most social event of the year, with an audience that watches across multiple screens, usually with their friends.

    Solution: A responsive, mobile-first, HTML5-based experience that lets people draft their own “dream team” for a chance to go to next year’s Super Bowl. A custom algorithm looked at the frequency of Facebook friend interactions, educational background, activities and interests to create the ideal team. This data was then used to create a custom, dynamically-generated video to introduce the user’s dream team.

  • FIFA
    Prototype: Twitter-Driven WebGL Interface

    WebGL/three.js, Twitter App.

    Challenge: How to show the passion for your team via Tweets. The team with the most Tweets will have their team color the most prominent in the visual experience.

    Solution: I built a Twitter app that searches for Tweets for each FIFA team (eg. #arsenal). This data was then used to power various visualizations, including a 3D WebGL experience (using three.js), an iOS Native App and a physical device (a prototype built using arduino.) The team with the most social buzz, "passionate fans," would trigger the light for that team's color to turn on and pulse on the arduino board. Each 3D shape within the web experience represents a live tweet (for the prototype, I had to cache the results for performance sake); clicking on a shape will bring up the Tweet associated with that shape. For the prototype, I added in graphics for some Tweets that didn't have them.

    Visit the site. (Requires WebGL)

  • FJ App
    Foot Joy: FJ Clubhouse

    Native Mobile Application. Prototype, User Research and Validation Phase.

    Challenge: Provide a mobile utility for the existing FJ Golf community (currently limited to desktop.) Create new ways for community members to meet, often while traveling, and to share golf tips specific to FJ courses. Grow community membership and have FJ viewed as a forward-thinking, technology-savvy brand.

    Solution: Integrated elements of FJ's existing community into a concept for a native mobile application that focuses on the ability to Play, Meet and Share. During our initial discovery and design phase, we created quick prototypes to show the flow and potential features for the app. We then brought the prototype to the golf courses, and put it into hands of potential users to explore. We captured their feedback and used it to refine our application features and user flow.

  • Off the Grid SF
    Off the Grid: offthegridsf.com

    WordPress Website. Email Newsletters.

    Off the Grid began in June of 2010 with the idea to group Street Food vendors together to allow neighbors to connect with friends, and families to reconnect with each other. Currently Off the Grid operates 23 weekly markets in the greater bay area, and works with over 180 vendors weekly.

    Challenge: Redesign and build for OfftheGridSF.com, using WordPress as CMS. Create new look and feel, branding and clean-up existing interface. Integrate with existing services and allow for easy maintenance and quick updates by non-technical staff.

    Solution: Redesigned website, logo and other branding; created a custom WordPress template for Off the Grid SF website and new designs for their email marketing. Also consulted on tools for streamlining their current CRM workflow.

    Visit the site.

  • Microsoft Surface
    Microsoft: Launch of Surface Tablet

    Responsive Website and Online Advertising.

    Challenge: "Top Secret"" project to create a digital launch strategy, including a new website, as well as social media-related content, for the launch of Microsoft's first tablet hardware: Surface. Required that we integrate with existing Surface brand and products (their original table-top devices). We had to design and build most of the experience without knowing what the product looked like, until the last few days prior to launch.

    Solution: Designed and built a responsive website that lives on surface.com. We established a plan for content migration and a CMS, and we synced-up with the Windows 8 launch strategy (also led by our R/GA team in San Francisco). We launched at exactly the right time: during the press conference announcement for Surface.

    Visit the site.

  • Nike Fuelband
    Nike: FuelBand

    Website, Native Mobile App.

    Challenge: How to bring the Nike+ platform to a larger audience of non-runners.

    Solution: Created a wearable technology that tracks the regular activity that a user does throughout the day, and equate that to calories using "NikeFuel" (points). The R/GA tech team in San Francisco built the original prototype for FuelBand - using Android technology to start, to prove out the idea. We then continued on as part of the larger production team to build the final mobile app and website, as well as to test the full experience.

    Visit the site.

  • Nikestore
    Nike: NikeStore.com


    Challenge: Create a website framework that supports interactive experiences ranging from marketing promotions, videos and product demonstrations to online applications (NIKEiD) and e-commerce. Allow high customization and let users “see, touch, feel” the product in real-time. Transform current Flash-based website into HTML(5).

    Solution: Rebuilt entire front-end in HTML (from Flash). Created robust framework of reusable design patterns and components that allowed for maximum flexibility in design, quick updates and direct integration with back-end. Created applications that made the experience more than just browsing shoes: NIKEiD is an online application that enables the user to design their own custom shoe.

    Visit the site.

  • hp.com
    HP: HP.com

    Website Redesign.

    Challenge: Redesign HP.com from the ground up. Integrate social applications as well as many existing HP systems and services. Create a tighter and more unified UX that allowed for animation and full-scale graphics. Maximize SEO and allow for easy content updates.

    Process: Iterative process with tight integration between ID, visual design, creative technologist, who would create prototypes and/or motion studies of the experience prior to production development, and the HP engineering team.

    Note: R/GA's work is no longer live. Screenshot here shows the design that we created and launched in 2011.

    Visit the site.

  • Tacobell.com
    Tacobell: Tacobell.com

    Website, CMS and Online Advertising.

    Challenge: Redesign and rebuild tacobell.com from the ground up. Recommend CMS, tech stack, architecture, workflow, hosting environment and maintenance and support. Integrate with existing databases and services. Allow for quick updating of key content areas. Reduce use of Flash.

    Solution: HTML-based website using R/GA's custom CMS2 content management system.

    Visit the site.

  • Outbid
    Outbid: Online Real-time Auction

    Product Design. Mobile, Web and Facebook Apps

    At R/GA we created a new product from scratch for a new online auction company: Outbid. We designed the logo and branding, product strategy, UX, visual design and all front-end and iOS development. On the technical side, we integrated our iOS and web application with Outbid's proprietary, real-time auction engine, and a new back-end service layer.

    Visit the site.

  • Outbid
    Target: Gift Finder iPhone App

    Native iPhone Application.

    Had fun with this one. This was Target's first iPhone release. We wanted to do something for the holiday season and take advantage of the iPhone's ability to recognize a user shaking it (accelerometer). The Gift Finder app makes innovative use of the iPhone’s built-in accelerometer by selecting gift ideas at random after entering information such as gender and age range. Gifts are presented via a snow globe-style interface, activated when the user shakes the iPhone. The Target Gift Globe application is free and designed to help shoppers make gift decisions for their friends and family in a very fun and entertaining way.

    Visit demo.

  • Halo Believe
    Xbox: Halo 3 Believe

    Website and online advertising.

    Challenge: Create immersive website to support the release of Halo 3. We filmed a camera fly-through of a life-size diorama (recreating a battle scene from the game). We wanted the user to “be inside the scene,” to explore every detail; to scrub through the fly-through (video) without requiring full video to download.

    Solution: The fly-through video file was too large - we couldn't use it. Therefore, to allow the user to start interacting right away, we draw each frame from the video into Flash (creating a buffer to account for the play head forward and backward). To account for performance, each time a frame was changed, the old one was destroyed from memory. The result was a smooth experience that loaded quickly and allowed the user to move forward and backward through the experience. It was not actually video - although it looked like it. It even fooled the CTO of Adobe, who showcased it during the Adobe MAX conference as an innovative use of web video.

  • Microsoft In-store kiosk
    Microsoft: In-store Kiosk

    Desktop Application.

    Challenge: Design and build an in-store kiosk in WPF (Window Presentation Foundation), to show off the features of the new Windows Operating System, Vista. Because Vista was not yet released at the time we were designing and building the experience, we had to develop for an OS that we could not test on. The experience would ultimately live in stores like Best Buy, and needed to support multiple languages

    Solution: For our experience, we recreated the 3D panel UI that was signature of the Vista OS.

  • Nike Genealogy
    Nike: Genealogy of Speed

    Website and Outdoor experience.

    Challenge: Demonstrate Nike’s rich, 40-year history of products. Trace the history (the “genealogy”) starting with the first “waffle” shoe. Show and maintain complex relationships between products, their assets and their “siblings” in the family tree. Allow for outdoor experience.

    Solution: Created dynamically generated family tree of Nike products. Entire interface was driven by database of products and drawn to screen at runtime - including the animation, colors, copy and visual effects - all showing the relationship between each product in the genealogy.

  • Nike Genealogy
    Nike: Presto

    Website and online advertising.

    Challenge: Promote the Nike Presto Shoe. Highlight the fun, artistic vibe of the brand that blends elements of street art.

    Solution: This one was a lot of fun. I had been experimenting with the ability to record a user's actions in the browser - specifically, recording an art performance: painting, playing with shapes, colors, etc. I also created the ability to playback the recording and save it to a gallery for others to see. I had done some prototypes in Flash, and we ended up using this concept as inspiration for Nike Presto. In 2004, this was an innovative first and went on to win a D&AD award.

  • Palm SMS-Controlled Kiosk
    Palm: SMS-Controlled Kiosk

    Outdoor/Physical application and accompanying website.

    Challenge: Demonstrate the features of the Palm Treo to users of any smart phone.

    Solution: Built a giant Palm Treo, using a LCD screen and a computer, and placed it inside bus shelters and other outdoor locations. Users could interact with the giant Palm by texting codes from their own smart phone. Our system intercepted the text message and routed it back to the correct location where the Palm would respond.

  • Photo Gallery
    Experiments: Dynamic Photo Gallery

    I wanted to create a fun, interactive way of sorting though a gallery of photos. This experience loads photos dynamically from XML (either flat file for from web service). On rollover of thumbnail, animates up to larger image. On-click will bring up the full-size image

    Visit demo.

  • 3D Glass
    Experiments: 3D Glass

    More of my experiments with 3D animation(at a very high frame rate!) Rollover to interact with the shards of glass coming at you!

    Visit demo.

  • 3D Glass
    Experiments: Recording Art Performance

    This experience uses spirals and flowers as base shapes to generate art in real-time. Press RECORD to start recording your piece. Press PLAY to have your painting performance played back for you - you can even save it and share it with friends! This was the inspiration for the Nike Presto website.

    Visit demo.

  • 3D Glass
    Experiments: Wild Spider

    Drag and drop the points of each line to create a new spider. Click to change it's color.

    Visit demo.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21


Currently in Beta, LaunchBx is an easy-to-use, web-based platform designed for restaurants and small to mid-sized business that need a quick and simple way to manage digital communication across mobile, web and social networks. Instead of having a dozen different tools to learn and manage, or having to hire costly resources to create and maintain digital executions, LaunchBx gives control to the small business owner, in one single interface.

At the core, LaunchBx is a content management and publishing system that solves the problem of having to keep multiple digital destinations up-to-date: business owners no longer have just a single website to maintain, but now, must send content and messaging out to a multitude of digital channels and different devices - often in real-time speed.

Set-up just takes a few minutes. From there, a business owner can add custom logos, images and content to create an entire website and/or create various embeddable widgets, such as a restaurant menu, or menu of services/products, by simply uploading a Excel file. LaunchBx automatically parses the Excel file, and other uploaded content, and converts it to a beautiful design that scales across mobile, table, desktop and can be used as a stand-alone widget inside Facebook or WordPress.

I designed and built the entire platform myself - from scratch. It is built on top of the LAMP stack, with the MVC framework CodeIgnitor. Responsive HTML5, javascript/jQuery, CSS3 is on the front. It includes API integration with several Google web services (Maps, Fonts, Calendar, etc), Facebook, YouTube, WordPress and others coming soon.


Currently in Alpha, Groovable is a suite of tools to help you organize your online research and shopping. When you're ready to make a new purchase, chances are you are doing research by collecting information from a variety of websites, social networks, email and probably YouTube as well. It can be a nightmare to keep track of all this content, across multiple emails, spreadsheets, bookmarks and Facebook posts. Groovable gives you a single place to store all of your research. A user submits content he/she finds online, groovable automatically organizes it into a simple-to-use interface.

Currently, a user can submit content in a number of ways: (1) directly through the groovable interface, (2) via the groovable Chrome Browser Extension, (3) via Facebook, (4) via email, which would include services like ShareThis as well as native email and email widgets that are included on sites such as YouTube, etc. When content is submitted through email, as user can use the email subject line to tell groovable where/how to organize the content.

I designed and built the entire platform myself - from scratch. It is built on top of the LAMP stack, with the MVC framework CodeIgnitor. Responsive HTML5, javascript/jQuery, CSS3 is on the front. I created complex email parsing solutions to support the ability to submit content via email. There are many API integrations with services from Facebook, YouTube, WordPress and others coming soon.

OOTO Conference App

Challenge: Allow a group of people to share ideas, photos and communicate with their colleagues back in the office, while attending a conference. When the event is over, package-up all the learnings into sharable presentation.

Solution: OOTO (Out of the Office) is an iOS App (Android version coming), that allows teams to create "events" and invite attendees. Then, while at the event, the photos and notes taken by the attendees automatically get tagged (with user, event, date, location) and added to the group feed. After the event, users can view stats, including the number of posts (by user, date, day, presentation); hot topics; summary of key ideas; a slide-show; and download a PDF of photos, notes and stats.

My colleague, Derek and I designed and built the application and had our initial user test/launch at SXSW 2013. We are currently adding new features.