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.

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.

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)

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: 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: 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

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.

Nike: NikeStore.com

Website/ecommerce.

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: 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: 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: 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.

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.

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

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 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: 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

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.

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.

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.

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.

Experiments: Wild Spider

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

Visit demo.