Hello

My name is John Farrell MacDonald. I am a full-stack web developer with a broad perspective and skill set, working with code, images, and words to craft digital experiences that convey meaning that is difficult to just say.

Projects

John’s recent work

eLead Lightbox Plugin

A WordPress plugin funneling e-leads to ImproveIt360 CFM.

Visit Website

The Challenge

DataLink SEO, a WordPress site builder, needed a specialized form for their client RC Energy Solutions. Several interacting forms would funnel prospects into their ImproveIt360 CRM, which is built on the Force.com platform.

  • A call-to-action button that integrated an input field within the button that led to an input form in a modal.
  • Form input going to the CRM.
  • A solar-energy calculator form that would both email the client with an estimate and post data to the CRM.

The Strategy

Rather than place code in the (Divi) child theme, I planned a plugin with custom PHP, JavaScript, and styling.

The Execution

Using SASS and a Gulp/Compass build environment, the plugin was created with a number of PHP classes for form processing. A number of rounds of testing were needed with both test and live interface to the ImproveIt360 backend.

The Result

The site was released to the client with the plugin in play. See the calculator at https://rcenergysolutions.com/solar-panels-san-diego/.

Stretch Zone Website

A WordPress site for a new franchise

Visit Website

The Challenge

My client was opening the first of several planned fitness gyms in Southern Califoria—franchising Florida-based Stretch Zone. Opening day was three weeks away, and he thought some digital marketing might add to Stretch Zone’s direct mail campaign advertizing the opening.

The Strategy

I planned a WordPress site with the lead-form landing URL on the direct mailer.

The Execution

Since time was short, I created a child theme of ElegentThemes Divi theme and built the site using assets available at the corporate site, http://stretchzone.com, rewriting and editing content as needed. The Contact Form 7 plugin was used to gather lead information for those interested in a free stretch.

The Result

The site was up when the mailer went out. The site’s digital marketing campaign was instrumental in the opening that generated 50% more revenue than any of other Stretch Zone franchise.

jfmacdonald.com

My portfolio website.

Visit Website

The Challenge

Needing a website to showcase my web development projects, I selected the static-site generator Hugo for its speed, its content architecture, and its ease for me, a developer, to build and maintain a brochure website that did not look like every other. I also needed a contact form — an added challenge for any “static” site.

The Strategy

I planned a single-page design generated with HTML templates using flat-file data. The background was to change as the site visitor scrolled or navigated from section to section. PHP would be used for the contact form.

The Execution

I developed custom PHP to process the contact form and JavaScript to manage background transitions and preprocess contact form input, using both JavaScript and PHP to validate and sanitize input. I used a SASS preprocesser with selected Zurb Foundation components for styling. To use semantic classes in the HTML markup, Foundation styles were applied through SASS mixins and extends. Node.js, Gulp, Bower, and Composer were employed for front-end builds, and Git used for source version control.

The Result

This site!

Glaciers

A website and copywriting to support client Bering Sea Productions independent short-film Kickstarter campaign.

Visit Website

The Challenge

The client planned a Kickstarter campaign to fund the production of a short film based on a short story by author Ryan W. Bradley. It was the client’s first in a series of independent films to be produced by the film company, which she was just starting. She was seeking help with the screenplay—she needed a narration for a fictitious but believable television documentary that would play in the background—as well as help with the project in a variety of other areas, among them a website to support the campaign. She had an arrangement in place with a graphic designer for a logo, illustrations, and other design needs. To keep the budget within the reach of a Kickstarter budget, the project needed to be completed in less than six months so that lower-cost resources that would be available during the summer months could be used for production.

The Strategy

After collaborating on the screenplay, I offered to create and host the website BSP would need to support the Kickstarter campaign. I was then in the process of moving my sites from a shared host to self-managed virtual private servers on Digital Ocean and could host the site securely there at low cost.

Though a blog was not planned, I proposed to use WordPress to minimize the cost of maintenance and anticipated changes in the future.

After receiving material from the graphic designer, I prepared some site mockups in Sketch, them met with the client to review and hash out design ideas.

The Execution

I prepared a low-cost, 512MB Ubuntu 16.04 server on DigitalOcean with Apache HTTP Server, Postfix, MySQL, PHP7, and WordPress and secured it with a Let’s Encrypt SSL certificate. I took advantage of the JointsWP starter theme, based on Zurb Foundation, to build a custom theme for the project.

The Result

The site was deployed on schedule, just prior to the start of the Kickstarter campaign. The Kickstarter campaign was successful and the project is underway.

Fur Ball Campaign

A website and print marketing collateral promoting San Diego Human Society’s 2016 Fur Ball gala.

View Website Prototype

The Challenge

The San Diego Humane Society hosts a Fur Ball gala annually to raise donations in support of their work with animals. The gala is highly regarded in San Diego society and draws significant support from the community. Funds are raised through ticket sales, through sponsorships, and through live and silent auctions. The society asked Digital Art Center students to prepare and present designs that would help promote the gala and other fund-raising campaigns. They had selected a flamenco theme for the 2016 gala. Design elements needed to be appropriate for the tone and style of this year’s gala and appeal to its audience.

The Strategy

With the understanding gained from a kick-off design brief, I chose to design a logo for the event that could be adapted year-to-year to different gala themes along with illustrations reflecting the current flamenco theme and use them in three different products promoting the event:

  • a website to promote the event targeting the event’s audience
  • a sponsorship opportunity brochure for potential sponsors
  • a formal event invitation to be mailed to potential attendees

Examples of print collateral from prior years were available, but a promotional website had not been previously used other than the BidPal website, which was active during the gala. After considering what value a separate site might bring, I planned to pitch a promotional site that would call visitors to action: to buy tickets, to donate for the auction, or to sponsor the gala.

The Execution

A website was designed by first creating a wireframe, considering how visitors might interact with the site, then an example site implemented directly in HTML and CSS using the Bootstrap framework.

Inspired by the typeface Lust Script Display, I created a hand-lettered logo with space for a theme-specific caption. Using Adobe PhotoShop and Illustrator, I created an illustration of a dancing woman and dog, each dressed flamenco style.

The invitation was designed as appropriate for a formal affair, such as a wedding or Fur Ball, and designed to fit in standard size envelopes. For ease of use and cost, the prior year’s sponsorship package was redesigned with a table presenting benefits of each package clearly in a compact form. I prepared print samples of the invitation and the sponsorship package for presentation to the humane society.

The Result

I enjoyed the opportunity to present my project to San Diego Humane Society representatives, who received the designs and sample collateral with enthusiastic commendation.

YMCA Website UX Design

A UX-based redesign of a local YMCA website.

View Project

The Challenge

Challenged in a Digital Art Center class to apply UX principles to a website design, I selected the San Diego YMCA website for my project. My wife and I had been exploring the site to see if excercise classes of interest were available when and where we could attend, but were not finding reliable information and had concluded a phone call or visit to the facility would be needed.

The objective of the redesign was to

  • increase participation of those using the website
  • reduce costs by reducing the need to ask a human

The Strategy

After creating a design brief, creating personas and user journeys, and studying the site in some depth, I planned a design that would

  • simplify website navigation
  • replace outdated information in linked PDF files with current online information
  • allow users to initiate participatory actions online rather than in person
  • follow YMCA style guidelines

The Execution

After creating four personas to represent YMCA website users, I selected two of them to work out specific user journeys. A detailed study of the existing site for a local Y led to probable pathways through the site navigation and outcomes. I then prepared design mockups using Adobe Illustrator and Photoshop for a home page and the set of pages needed to exhibit the redesigned user journeys.

The Results

The designs were presented to the class, who received them with knowing smiles and appropriate accolades. No animals were harmed in this study.

About

John’s Story

When a teen, John told his grandfather that he wanted to be a writer or a physicist. Granddad scoffed and said, “Do something practical.” John studied physics in college, then did something practical—became an engineer (who occasionally wrote). Engineering led to programming and physics fostered an inquiring mind. Then the WWW invited John to the craft of digital storytelling.

In 2015, John left his role as a chip design-automation software engineer at Qualcomm to pursue web development full time. To strengthen design skills and connect to the web design world, he enrolled in the Graphic and Web Design program in the UC San Diego Extension Digital Art Center while pursuing freelance engagements.

Currently, John is developing, deploying, and managing WordPress sites for small businesses.

View Resume

Contact

Please provide your name, email address, (optionally) website URL, and message. Your information will not be shared with anyone.
  * required entry