CAMP Community College

Goal

To completely relaunch their website from scratch with new branding and make their site look great on mobile devices.

Role

I worked as the project manager. I also was the sole web designer and front-end developer on the project. Lastly, I served with my coworker who worked on the back-end as a back-end developer to integrate the new CMS. I also helped the server administrator understand the needed hardware specs for the server and set up the full server stacks of Apache, MySQL, and PHP.

Homepage Before

As you can see, the previous version of their homepage felt very cramped. It also contained a lot of smaller-sized text. In addition to the design, we worked with the representatives from the college to make sure the new version of the site would also be much easier for them to edit through the Content Management System (CMS). Speaking of the CMS, the previous version of their site was built on WordPress. WordPress is great! It’s the most popular CMS in the world! In fact, this site is built on WordPress. However, I would never recommend it for a website that is expected to have over 100 pages. That being said, my coworker/fellow web developer and I built the new version of the site on ExpressionEngine. It is a CMS that is much better suited for large sites for both speed and usability for content editors.

Sub Page Before

Their previous sub pages(non-homepage) had large navigation menus and so we helped them rearrange their content to greatly lower the amount of links and pages across their site.

Homepage After

The design process for this site was quite difficult due to the constraints of the project:

  1. The entire site needed to be as easy to edit as possible since they have no full-time employees maintaining the site after we handed over the project. The entire design needed to change dynamically as they made changes in the CMS (Note: several changes have been made to the layouts, menus, and content since the hand-off so I do not provide a link to the live site.)
  2. They had their previous design for about 9 years or so, so this design needed the ability to last as long as possible.
  3. The internet service in their service region is not as high-speed as it is near more urban areas, so they wanted the pages on the site to load as fast as possible. Scroll down to read more about the speed improvements that were made.
  4. Other than the primary green in the logo, they did not want to use many colors in the design so I created a new color palette for them as we designed each component of the site.
  5. They wanted to support as many older web browsers as possible, so I set up the site to support every browser I could find, all the way back to Internet Explorer 7.

Sub Page After

One of the main requests during the design phase was for it to be clean and crisp so I purposely kept sharp edges on the elements and the main content areas white to help users to focus in on what they have to say on the site.

Mobile View After

The previous version of the site was not responsive so users on phones and other mobile devices had to pinch and zoom to move around the site, but now the site adjust to any size screen that it is viewed on.

Speed Improvements on the New Site

Since page load speed was a priority from the start of this project, I did everything I could to make the site load more quickly and the proof is in the numbers. For example, I created a new build system using Gulp to compress my SCSS and JavaScript files into 1 CSS file and 1 JavaScript file. Outside of the homepage, we refrained from using large images(above 2000 pixels in height or width). I also used the quality setting in Photoshop on every image to keep the file size as low as possible while still looking great on retina screens.

Desktop Test Before:

Mobile Test Before

Desktop Test After

Mobile Test After