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.
John’s recent work
eLead Lightbox Plugin
A WordPress plugin funneling e-leads to ImproveIt360 CFM.
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.
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.
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.
I planned a WordPress site with the lead-form landing URL on the direct mailer.
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 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.
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.
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.
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.
A website and copywriting to support client Bering Sea Productions independent short-film Kickstarter campaign.
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.
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.
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 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.
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.
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.
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.
I enjoyed the opportunity to present my project to San Diego Humane Society representatives, who received the designs and sample collateral with enthusiastic commendation.
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
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
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 designs were presented to the class, who received them with knowing smiles and appropriate accolades. No animals were harmed in this study.
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.