Interaction Design and Development

Charter.net

Charter

Technical architecture, business analysis, front-end development
2013-2016
While freelancing for Kenzan

Technology Stack

Production Teams

UX, design, and user stories by the Charter team.

Production by the Kenzan team:

Overview

For three years, I worked remotely with the Kenzan team on multiple parts of the Charter website. I spent my first year working on multiple features (such as architecting a Flash video player–Disney's and ESPN's API were using that platform at the time). The last two years of my contract were spent as Technical Architect of the transactional pages.

Refactoring an Existing Architecture

In the fall of 2014, Chris Sharon and I were tasked to refactor the transactional pages in order to enforce PCI-compliance. We would discuss an architecture plan, and I would experiment and implement.

As the project lived in a repository separate from the main project, we were able to leverage some of the technologies we were already using in the main project (NPM, Bower, AngularJS, Lodash). We also took the opportunity to move to Gulp (rather than Grunt) for task running, and to use Mocha (rather than Jasmine) for unit testing. We followed the git-flow branching model for versioning. We worked hard to extract any non-essential modules into external libraries. Whatever remained in the repository followed the John Papa Angular code styleguide and strict JSCS rules.

Once the first refactor went to production in the summer of 2015, Chris moved on to another project and I took the position of Technical Architect. By the first months of 2016, the Charter team had designed a new user experience for the payment flows. We were tasked to refactor a single payment flow into three different flows. For this refactor, Alan, Tomas, Craig, and Chris P. joined the front-end team.

Technical Architecture and Business Analysis

We were provided extensive and complex user stories. The project managers and I would analyze the features described in the user stories, and break them down into development tasks in order to assign work to the team. I tried to leverage skills and preferences as much as possible, so that developers would enjoy contributing to the project as much as possible.

Managing Libraries

When a project is this big and spans multiple repositories, it is smart to plan reusable components. During the refactor, I kept a close eye on components (services, validators, components, etc.) that could be extracted into a concern-oriented library. Each service that connected to a different endpoint would be hosted in its own repository (one endpoint URL = one services repository). I made sure that each library was well documented, had unit tests and required automated builds before merging pull requests. We followed SemVer closely for our internal libraries, making it easy to release versions.

Communicating with Wireframes and Flowcharts

Charter Website - No Balance Payment Flowchart

The development team was not often able to communicate directly with the UX/design team, I found it easier to prepare wireframes and flowcharts when needed to explain technical restrictions, or to implement patterns and methods.

Charter - Payment Page First Refactor Wireframes Charter - Date Picker Refactor Storyboard
First refactor (circa 2014) Date picker refactor planning (circa 2016)

 

All copyrights and products belong to their respective owners.