JOHN F MACDONALD

Web code and crafts

Hello. I'm a web designer/developer in San Diego. I provide a full range of services to create and sustain successful websites.

  • Web design
  • Web development and deployment in WordPress and Drupal
  • Web hosting and server management
  • Content planning and editing
  • Photography

Projects

Recent work

Glyderm USA

A WordPress site styling update

Visit Website

The Challenge

Dallas-based Drupal agency LevelTen had a problem. Their client Glyderm USA had a WordPress website that hadn't been updated since 2014 and had been hacked. They resolved the security and hosting issue, but the client also wanted to update the look and feel of the site to reflect current branding—but didn't have the budget for a redesign. The site had more than a hundred pages with inline styling and a good deal of duplicated content. Further, the outdated theme and page builder were not functional in the current version of WordPress. A direct fix looked to be way over their budget. They asked if I could change colors and fonts in short order.

The Strategy

After auditing the site, I proposed programmatically altering the SQL database to update inline styling, relicensing and updating the current theme and plugins, then performing a final styling clean up in the theme and page builder settings.

The Execution

The updates were made as planned. In deploying the update on Pantheon, I discovered a basic incompatibility between Pantheon's dev-test-live site structure and the site's WordPress theme and some of its plugins. The methodology of pulling database from live to dev and deploying code from dev to live wasn't going to work here—the theme and plugins did not have a clean separation of code and data. To resolve this, I helped them set up a workflow where some content updates were made in the dev site.

The Result

The project was completed well under the limited budget.

Relationships at Work

A WordPress site redesign

Visit Website

The Challenge

San Diego based psychologist and speaker Debra Dupree needed to upgrade her website to better promote her business. The site content no longer reflected her business goals, the design was outdated, and her web guy had just taken a full time job in Maryland.

The Strategy

We initially planned for a graphic designer (a former classmate) to create mockups that I would implement in a custom WordPress theme. But with the content architecture unsettled, I choose a developer-friendly page builder (BeaverBuilder) to allow quick modifications using components that I would create based on the designer's mockups.

The Execution

I created a custom theme based on WebDev Studio's fork of Automattic's Underscores starter theme and a custom plugin to support custom post types. The theme incorporated several customized BeaverBuilder components.

Working with Dr. Dupree, I edited and created content for the new site.

The Result

The new site went live in September 2017. I maintain it, make blog posts with content Dr. Dupree provides, and make other content updates as needed.

Childrens Hospital LA Pediatrician Search

A Drupal 7 site enhancement

Visit Website

The Challenge

San Diego based Drupal agency Achieve Internet asked for my help in adding functionality to the Drupal 7 website for their client Children's Hospital Los Angeles. They were to add geolocation based search for pediatricians in their Health Network of doctors.

The Strategy

Working under the direction of an Achieve Internet lead developer, I was to implement the site enhancement according to the work order he had developed and the wireframes the client had provided.

The Execution

With a deep dive into the Drupal modules Views, Page Manager, and Panels, I added fields to pediatrician profile content types, added and configured a GMAP module interfacing to the Google Map API, created search views and display panels, wrote PHP code to implement hooks to get it all working, and styled elements in SCSS to conform to the wireframes.

The Result

The project was completed and launched under budget.

Digital Health Innovations

A WordPress site redesign (prerelase)

Visit Test Website

The Challenge

San Diego based Drupal agency Achieve Internet has a WordPress website Digital Health Innovations that had been created for them to promote Meetup events they were hosting as part of their marketing efforts. But the site performed poorly, and they wanted to add a blog. A redesign was in order, and they wanted to do that following the design and development practices that worked for them in their client projects.

The Strategy

With wireframes to be provided by their UX designer and guidance from marketing, I was to design and implement the site in WordPress and deploy it on Pantheon.

The Execution

I created a custom theme based on the Sage starter theme with a custom plugin to implement custom post types and functionality, then migrated the content from the existing site to the new design.

The Result

The new site is staged in Pantheon's dev and test staging sites. Deployment to live is pending a their next event.

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 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 California franchising of Florida based Stretch Zone. Opening day was three weeks away, and the new franchisee thought some digital marketing might add to Stretch Zone’s direct mail campaign advertising 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 (launch was three weeks away), I intially created the site using the Divi theme from ElegentThemes using assets available at the corporate site, http://stretchzone.com, rewriting and editing content as needed. Later, I reimplemented the site using the Sage starter theme with added support for a blog.

To support digital marketing efforts, I added Google Analytics and interface to the CallRail call tracking service I had set up. And, separate from the website, I created a small PHP app to interface to the ClubReady API, which service they were using to manage clients, and developed a prototype app to collect data from the website form submissions, call tracking services, and ClubReady.

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.

I am currently hosting and maintaining the site on a DigitalOcean VPS server.

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

My story

I am a web developer/designer 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.

My love of software began with the language C when I was a graduate student and continued with C++, Perl, and Python in a variety of engineering roles in the semiconductor industry. Focusing on chip design automation, I particularly enjoyed pleasing my clients—chip design engineers—with tools that worked well and allowed them to be more productive.

But enterprise software alone left my creative side itching, which I addressed in avocations of photography and writing. On a hiatus in 2009 from the chip industry, I discovered web design and continued that with side projects when I joined Qualcomm in 2010.

In 2015, I left Qualcomm to pursue web development full time. To strengthen design skills and connect to the web design world, I enrolled in the Graphic and Web Design program in the UC San Diego Extension Digital Art Center while pursuing freelance engagements.

Currently, I am designing, developing, deploying, and managing websites, most of them running WordPress.

View Resume

Contact

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