Work

WLS HTML Redesign | Verizon Wireless

The White Label Store is an internal Moxie name used to describe a series of stores built for Verizon that service consumers and businesses. The purpose of the store is really to be a test bed for Verizon to run large scale changes to see if they can move phones and services faster. The sites have been around for along time, and in this recent redesign which I took part in, we removed a lot of legacy business sites and an older Flex front end.

The sites are built using Microsoft's MVC 3 framework, which we selected because it closely follows many of our design requirements for how the site must function in order to run efficiently. We wanted to run as much of the site as possible in cache to increase performance, and MVC gave us the ability to segregate out partial views and and cache them with GET parameters.

Since the site's main goal is to complete as many cell phone orders as possible, I took a hard look at how the central Verizon purchase path is currently functioning and made some drastic design changes to reduce the number of clicks to complete an order. Verizon currently uses an overlay shopping cart assistant that walks consumers through the path as they add devices, plans, and equipment. We broke away by removing the overlay and putting the shopping cart in an expandable side cart, that has collapsable sections that can be enlarged for more detail.

After picking a device users next have to select a plan and some of the required features that have to be determined before they can continue. Once a consumer has selected a plan, the side shopping cart will update, and if they wanted to - they could select continue and go straight into the lower funnel to complete the order. By moving the required features onto this page, we were able to remove at least two more steps that the main site has as a barrier to completion. The hope is that an easier path with fewer clicks will help to drive completed orders.

One of the biggest challenges I faced with the shopping cart was how to associate phones with abstract items like plans. It's easier to make the association with accessories than anything else because accessories are physical items. The problem is that all phones must have a plan, and how could we associate multiple phones of possibly the same time, with possibly multiple plans of the same type? Since consumers could pick different options per plan per phone, it became important to create some sort of way to relate all of them together.

My proposal was the addition of unique colors for each phone/plan combination, that would be repeated throughout each section of the side shopping cart, and any time you were presented with multiple choices for each line. In the side shopping cart, a large orange line was added next to the phone graphic, which was to convey to consumers that any time they saw the color orange next to an item in the future, it must be related to that particular phone.

So in a family share plan, with multiple phones sharing the same line, it is possible to select different plan options for each. The colors tie all the choices together, and relate the phones back to the plan selections. An orange color plan item means it's for the orange phone.

To further the goal of driving completions, we moved non-essential features to another page off the main plans page, so consumers can add those if they so choose, but they aren't required. On the features page the selectable items are grouped again by line color, so it should be easy for consumers to understand which item they are selecting features for as they move down the list.

Finally the accessories page was moved off the optional features page, again as an option for consumers if they wanted to deviate from the fast track to phone purchase. Both the accessories page and the phone selection page both have a filter controller at the top to drill down to specific item types that consumers might be interested in. In an effort to reduce the amount of server calls, I created a client side filtering system that sorts the phones and accessories based on tags. As the filter items are changed, elements on the page are just shown or hidden. In previous implementations each filter change would trigger a server ajax call, and refresh the view with results. However by moving that to the client, we have faster sorting, and have possibly cut out dozens of unnecessary calls that otherwise would have gone to the server.

The forms portion of the purchase path was very easy to implement thanks to the fantastic work done by the Microsoft MVC team. In MVC 3 I was able to wrap our objects with Data Annotations that describe what the validation rules are, and using the Foolproof validation library, make some very complicated validation requirements. The best part is that with the Jquery validation system, the validation is completely compliant with the W3C HTML tag specification while being painless to users.

Go to the WLS Redesign Site Back To Other Projects

Spent | McKinney

The goal of Spent was to raise awareness about homelessness in Durham, North Carolina by creating a simulation where a player must survive a single month with only $1000. Throughout the game choices and sacrifices must made, all scenarios based on the challenges that many people face in reality each day.

The game is built on a set of modules that are loaded for each game day, with their content loaded in from an external xml file. Which modules players will get during their gameplay is random, and affected by the choices they make as they progress through the game. So while the overall messaging and style of the game remains the same, each play through should provide a unique experience.

I was brought on the project in the early stages of planning, and worked with the team on concepting the general idea of how the game should function. I also constructed an XML editor using Adobe AIR for the team to use to create the daily challenges. I first considered creating a CMS in .NET, but I ultimately decided to go with Adobe AIR. This made since because as the only developer on the project, I was able to share both the xml serializer class and game logic classes I wrote from the CMS to the game. As the job of the XML Editor was to enforce the logic of the gameplay while it was being created, the game engine was able to leverage the same system to enforce the rules while in play.

Ultimately the game has been a run away success for McKinney, currently it has over 1 million plays across 240 counties, it earned a Site of the Day from The Favourite Website Awards, and a mention in PC Gamer. This is all impressive because the site had no media of any kind driving to it.

Go to playspent.org Back To Other Projects

Join Starfleet Academy | Verizon Wireless / Nokia / Paramount

Join Starfleet Academy was a marketing initiative from Nokia and Verizon to increase awareness about the 2009 Star Trek movie. The site was built in a very short timeline, somewhere around 18 days. We built it using Flash in AS3, and the entire site was planned around tiered release of content. Games, exclusive images, and videos were all released in the weeks leading up to the movie.

I was involved in all parts of this site, from early concept all the way through development. One of our initial ideas was to design the games of the site around a storyline that paralleled old Star Trek episodes, and that might closely follow the movie premise.

Players would start off as cadets, and learn basic skills like repairing the ship in engineering, flying the ship as a helmsman, and fighting as a tactical officer. Nearer to the movie release we wanted to join the three experiences together into a single game that would combine all of the gameplay elements from the past training missions. This single game would be the "graduate" game, which would reward loyal site visitors with exclusive movie content.

I went so far as to create a working prototype to demonstrate to the clients how the final gameplay would work and how exciting it could be. The idea was the ship the player was in would be chasing one of the enemies from the movie, constantly dodging the shots of the ship it trailed as it closed the distance between them. Ultimately the concept was changed for several reasons. Paramount was very protective of what the new Enterprise would actually look like before the movie release, so a third person view of the ship flying was out of the question. We were also not allowed to show any other ships fromt the Star Trek universe, or create a new custom ship for our purposes. So in the end the game was changed to a first person view, flying through an asteroid field.

Being an all Flash site proved a challenge since SEO was a primary objective of the site to draw continual traffic. To get around the limitations of Flash not being very searchable, I developed a system to read content from the HTML files that the game swf's were embedded on. So effectively most of the actual site copy and content was present in HTML, just hidden and read by Flash for a more visually interesting experience. This kept content on the page in HTML for search engines to crawl, and drastically helped improve our SEO.

Go to the Join Starfleet Academy Site Back To Other Projects

Live Positively | Coca-Cola

The Live Positively Site was a site from Coca-Cola built to raise the awareness about its large number of public outreach programs. The site had a calendar of public events, and served as a collective information hub for all the programs by Coke around the country.

As the lead developer and architect on the project, I worked with other junior developers to construct the site using the Adobe Flex 3.0 framework. The site pulled in information using various .NET services calls that proxied information from an external Coke Server driven by its own CMS.

The site was very visually dynamic, and mimicked a scrollable parallax environment that users panned through as they visited different pillars of content.

The site was very successful, and earned an Adobe Site of the Day award when it was released. The initial release was more an experiment to see how the idea would be received, and due to the large amounts of favorable feedback on the project, Coke has since expanded the site to include much more content on both country wide and local events.

Back To Other Projects

Ant Tunnels | Personal

Ant Tunnels is a fun Flash game currently available on the Android Market built using the AIR for Android runtime. In the game, your character is an ant charged with the protection of his ant city homeland, Antropolis. At each level, your character must assemble a series of buried underground tunnels in order to warn Antropolis of incoming dangerous rain storms. Each level is timed, and achievements are awarded for completing the levels quickly. The project was a large undertaking, I built the art, the game code, a level editor, as well as a custom tracking system.

At the start of the project I knew that I wanted to create and edit levels as quickly and as easily as possible, so I built an editor in Adobe AIR, that constructs xml for each level using the game’s tile creative assets. Back in the game, I pull in the xml from the editor, and compile that in with the external library that contains assets used in both the game and the editor. The made it so I could build one single set of creative, which could be used in both the editor and the game. Levels could be quickly iterated and refined using this method.

I considered using Google Analytics for tracking, but being new to the Android Market, I wanted the ability to see in real time what my users were doing and how they responded to the game play. As a result, the best option was to construct a custom tracking solution. My tracking for Ant Tunnels consists of a simple WCF webservice, that my game posts to at specific game events. The data I aggregate is based on user game starts, level completion, and level repetition.

Overall the game has been very successful. Hours after my release the game had around 200 users, and a day later had over 1500. At the end of the weekend my numbers were well over 2200 and continuing to rise. Google reports that my active user percentage is around 68%, and according to my metrics I have between a 4-6% completion rate. What is also interesting is that only 13% of my users stay on level one, so the game is engaging at least enough to users to get past the first level. Ant Tunnels was also successfully able to stay on the appbrain.com top 10 hot list the first day it was released, and for two days was ranked number 1 on that same list.

Download Ant Tunnels Back To Other Projects

Moxie Frogs | Moxie Interactive

The Frog Surface App is an attract app that I built using C# and XNA 2.0 for Moxie Interactive. Attract apps are sort of like screensavers for the Surface table, when it is inactive for a certain amount of time it activates the app. Moxie is well known for its Poison Dart Frogs, so for their attract app I made a virtual tank of frogs. The frogs can be fed by a finger press on the table, and based on their AI some of the frogs will go after the fly and eat it.

The surface table is sophisticated enough to tell the difference between a finger press and a hand stomp, so I added a nice little easter egg where you can stomp the frogs into pieces! The program maintains a set number of frogs, so even if you squish half of them, new frogs jump on after a set amount of time..

Watch the video on YouTube Back To Other Projects

LESS Compiler | Personal

I use the LESS dynamic stylesheet language any time I code CSS, and I quickly grew jealous of the lack of support on the Windows side of the world.

For the WLS HTML Redesign, I decided to built a LESS GUI for my team to use which would wrap the dll available from http://www.dotlesscss.org/ and mimick a lot of the functionality available on Mac clients for LESS.

The way it works is you first select a single master .less file to bind to, then whenever any .less files change in that directory, it runs the compiler against the main file being watched. There are several options including minification, verbose error messaging, and instant compilation on demand.

When minimized, it moves to the system tray and shows compile errors in event bubbles. When in the system tray if you right click on the less icon, an option for forced instant compilation can be selected.

Right now the executable is meant to be added to each folder where you're working with less. In the long term, I'd like to make it a single program that can listen to multiple files.

Download the LESS Compiler Project Download the LESS Executable Back To Other Projects

Resume

Download Resume (.doc) Download Resume (.pdf)

Contact

All Fields Are Required. Your Name

Your Name Is Required.

Your Email

Your Email Is Required.

Your Message

A Message Is Required.

What Animal Is This?

Sorry that is incorrect.

The Picture Has A... Elephant Dog Cat Hippo