Maurice Wingfield

Full-stack Web Developer

Web Bookmarking App

2014

  • Role: Application architecture and development
  • Client: Self-Initiated Learning Project
  • Platform: PHP, HTML, CSS, jQuery
View Site

CreationSoup is a tool that I actually needed at the time. By building it, I learned more about optimizing the architecture of an app to make feature development and maintenance easier. The structure of this project approaches the MVC model by separating page structure from content with templates and treating templates as a property of application views. Views are programmatically instantiated which allows them to be created quickly from a high level. New templates still had to be manually created/modified to accomodate the set of model parameters that a given view would present. This is where the system falls short of a pure MVC implementation; templates themselves are not programmatically defined. In the latest PHP-based iteration of the project, I was in the early stages of designing a system in which views would be defined by the model properties they needed to present and templates are derived from these view definitions.

CS was the first project in which I utilized data abstraction layer. RedBean ORM (Object Relational Manager) was a kind of magic to me. For the first time, I didn't have to design a database schema to support my application. The ORM made it possible to define application entities in the language of the app then store them without ever having to think about where each data parameter would go. This freed me to design a system that was flexible and could be extended with little effort.

CreationSoup is a php application which was originally developed on a shared linux hosting environment in a traditional LAMP (Linux, Apache, Mysql, Php) stack. Embracing the notion of leaning by doing, I took the opportunity to port the app to the Windows Azure platform. My concept of hosting was extremely simple. Not only that, the build process I was familiar with involved editing local files, copying them to a remote server via FTP, then refreshing a browser. Cloud computing required a new way of thinking about the development and deployment of a project.

Azure empoys IIS, a web server that I had no experience with to this point. Ultimately the differences over Apache were superficial and in the end, it gave me a deeper insight into the nature of a web server.

Having a bit of experience with git, I decided to host the project source in a git repository on Atlassian Bitbucket. The Azure + Bitbucket integration allows for continuous deployment; another new concept for me. All pushes to the main branch of this repository would be deployed automatically to my production server.

At the point I moved hosting to Azure, I made the transition from Windows to linux as a development environment. In paralell to the development of this app, I was learning node. After a week trying to get node working on Windows 7, I just picked up another laptop and dove into Linux. My previous experience with Linux was with redhat back in the 90's when just getting the OS installed was a baffling command line experience. The ubuntu installation by contrast was a breeze.

DreamTeam25 2014 Fund Raising Website

2014

  • Role: Design and Development
  • Client: Harlem RBI
  • Platform: Expression Engine, PHP, HTML, CSS, jQuery

Lessons

This project made clear the benefits of hooking into third party platforms. We integrated with the online payment platform using SOAP as well as the twitter and youtube REST APIs. New challenges with building cross-browser responsive designs, including pure CSS grid layouts, modals and forms.

I was contracted to help develop an approach and to implement the DreamTeam25 2014 fund raising website. The site would facilitate the annual giving campaign and syndicate messaging across social platforms. Qualifying donors are entered to win a day with Mark Texiera at Yankee stadium. In the past, 9 winners were chosen by Mark and Harlem RBI staff, but in 2014 the decision was made to open voting up to the public. The site would have to interface with the existing payment processing platform, identify qualifying donors, present donor pages with unique URL's and tack votes for each participant. Marketing opportunities included the donor confirmation email and pre-populated tweet buttons.

Harlem RBI 2013 Online Annual Report

2014

  • Role: Responsive Design and Coding
  • Client: Harlem RBI
  • Platform: static HTML, CSS, jQuery
View Site

Lessons

We were successful in striking a balance between cross-browser compatible responsive layout behavior and staying true to the designer's vision.

I was approached by the Communications team at Harlem RBI to build a mobile-friendly minisite that would bring the 2013 annual report online. The report had already been printed and a rough idea of the online conversion had been mocked up, so there was some design work to be done. Through wireframes and high fidelity mockups I presented a solution to flow content and transform the navigation interface for multiple screen sizes. I built out static HTML page templates using CSS media queries. Responsive text was achieved by building SVG images. Animated effects in the UI were accomplished with a combination of CSS transitions and vanilla javascript.

Tiny Giant Studio

2013

  • Role: Design and Coding
  • Client: Tiny Giant Studio
  • Platform: static HTML, CSS, jQuery
View Site

Lessons

Sometimes, the simplest presentation is best. For a project to succeed in addressing the goals of the business required taking away everything that wasn't showcasing the product and driving leads. This mobile-friendly static HTML site employs a simple and clean grid layout placing the video content up front for the visitor.

The Arnold Pinkney Project

June 2013

  • Role: Web Design & Development, Video Production
  • Client: Eduardo Romero
  • Platform: static HTML, CSS, jQuery
  • Video Production: Adobe After Effects CS6
View Site

Lessons

The focus of the design and functionality is about fostering community. The minisite would act in tandem with the project's facebook page by driving likes / follows and presenting the teaser video. This static HTML minisite puts the focus on the late Mr. Pinkney's contribution to the city, the region and the nation. Photographic content from Mr. Pinkney's own personal library added a human dimension but the self-produced video piece brought the site to life.

Corporate Website: Cleveland Division of Water Pollution Control

June 2011

  • Role: Design and Development
  • Employer: Cleveland Water Pollution Control Division
  • Platform: Wordpress, PHP, HTML, CSS, jQuery
View Site

Lessons

My first web project that was not self-initiated. I learned that organizations have drastically different goals for even a non-commercial website than individuals do. The project began with interviews across the organization and it quickly became clear that a deeper understanding of the business should always drive design. This Wordpress site features a custom-built theme. The site has run continuously since I left in 2012 and administration has changed hands twice.

James B Wilson

President and Founder
C.H.E.S.S. LLC

Maurice is very talented in the graphics and web field. He is able to focus in on a task, complete the task and deliver on time and within budget. I've worked directly with him and have seen his passion for the projects he's worked on.

Greg Clement

Founder and CEO
Realeflow

Maurice was incredibly talented when he worked with us at RealeFlow. It was eciting to see what he would come up withon each project he worked on and I am sure our paths will cross again and will look forward to seeing what we can do!

Dar Caldwell

CoFounder
LaunchHouse

Maurice Wingfield is an outstanding example of an entrepreneurial-minded creative worker. His creativity and ideas have added tremendously to many of our projects. Great team player. What sets him apart from many in the freelance marketplace is his ability to maintain a high level of creative output on several projects at once while balancing the creative, business and personal interests of all involved. Overwhelmingly positive addition to a team's culture.

Marc Majers

Senior User Experience Designer
Hyland Software

Maurice was a pleasure to work with as an web design intern at Cleveland Institute of Art. His creativity is soundly intertwined with his ability to collaborate. He works efficiently, pays attention to detail, and gives you his best effort on each project. I highly recommend Maurice as a web designer and hope to work with him again in the future.